/* ============================================================
   SEO Content Builders — Main Stylesheet
   Brand: Navy #0f2a52  Sky #e8f4fb  Orange #f47c20
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  /* Brand core */
  --brand-navy:       #0f2a52;
  --brand-navy-dark:  #08192f;
  --brand-navy-mid:   #1a3d6e;
  --brand-orange:     #f47c20;
  --brand-orange-dk:  #d4631a;
  --brand-orange-lt:  #fff3e8;
  --brand-sky:        #5ab4e5;
  --brand-sky-lt:     #e8f4fb;
  --brand-sky-mid:    #c2dff0;

  /* Semantic aliases (used throughout) */
  --ctr-teal:         var(--brand-orange);
  --ctr-teal-dark:    var(--brand-orange-dk);
  --ctr-teal-light:   var(--brand-orange-lt);
  --ctr-header:       var(--brand-navy);
  --ctr-header-dark:  var(--brand-navy-dark);
  --ctr-bg-l:         #eef6fb;
  --ctr-bg-r:         #deedf7;
  --ctr-text:         #0f2a52;
  --ctr-muted:        #4a6a8a;
  --ctr-border:       #b8d4e8;
  --ctr-sidebar-bg:   #f4f9fd;

  /* UI */
  --radius:           10px;
  --radius-sm:        6px;
  --shadow-sm:        0 1px 4px rgba(15,42,82,.10);
  --shadow-md:        0 4px 18px rgba(15,42,82,.14);
  --shadow-lg:        0 12px 40px rgba(15,42,82,.18);
}

*,*::before,*::after { box-sizing: border-box; }
html { font-size: 15px; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: linear-gradient(155deg, #dbeef8 0%, #eef6fb 40%, #d4e9f5 100%);
  background-attachment: fixed;
  color: var(--ctr-text);
  margin: 0;
  font-size: 0.95rem;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ctr-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-sky); }

/* ============================================================ HEADER ============================================================ */
.ctr-header {
  background: linear-gradient(95deg, var(--brand-navy-dark) 0%, var(--brand-navy) 55%, var(--brand-navy-mid) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 20px rgba(8,25,47,0.45);
  padding: 10px 16px;
}
.logo-img {
  height: 40px; width: auto; object-fit: contain;
  border-radius: 4px; background: transparent; padding: 0;
}
.drop-zone { transition: all 0.25s; }
.drop-zone.active { background: rgba(255,255,255,0.22) !important; border-color: rgba(255,255,255,0.7) !important; }
.drop-zone-input { font-size: 13px; }
.drop-zone-input::placeholder { color: rgba(255,255,255,0.5); }
.btn-add {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dk));
  color: #fff; padding: 7px 16px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; transition: all 0.2s; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(244,124,32,.35);
}
.btn-add:hover { background: linear-gradient(135deg, #ff8f30, #c4550e); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(244,124,32,.45); }

.header-actions-desktop { display: flex; align-items: center; gap: 8px; }
.btn-header-action {
  display: flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff;
  text-decoration: none; white-space: nowrap; transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}
.btn-header-action:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-header-action.headlines { background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dk)); }
.btn-header-action.adcopy    { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.btn-header-action.upload    { background: linear-gradient(135deg, var(--brand-sky), #2a7db5); }

.user-avatar {
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dk));
  color: #fff; width: 34px; height: 34px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
#mobileMenuBtn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  color: #fff; font-size: 17px; cursor: pointer; flex-shrink: 0;
}
.sync-indicator { animation: spin-pulse 2s infinite; }
@keyframes spin-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* Export dropdown */
.export-dropdown { position: relative; }
.export-dropdown-content {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 9999;
}
.export-dropdown:hover .export-dropdown-content { display: block; }
.export-dropdown-content button,
.export-dropdown-content a { font-size: 13px !important; padding: 9px 16px !important; }

/* Inputs */
input, textarea { user-select: text; -webkit-user-select: text; }
input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px rgba(90,180,229,0.30); }

/* ============================================================ SIDEBAR ============================================================ */
.ctr-sidebar {
  background: var(--ctr-sidebar-bg);
  border-right: 1px solid var(--ctr-border);
  transition: transform 0.3s ease;
    width: 256px;
}
.ctr-sidebar * { font-size: 13px; }
.ctr-sidebar-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0 6px; border-radius: 8px; transition: background 0.2s; text-decoration: none;
}
.ctr-sidebar-logo:hover { background: rgba(90,180,229,0.12); }
.ctr-sidebar-logo img { height: 38px; width: auto; object-fit: contain; border-radius: 4px; }
.sidebar-section-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ctr-muted); padding: 8px 8px 4px; margin-top: 4px;
}
#sidebarOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 35; }
#sidebarOverlay.active { display: block; }

/* ============================================================ CONTENT AREA ============================================================ */
.ctr-content-area { background: rgba(255,255,255,0.82); backdrop-filter: blur(8px); }

/* ============================================================ CARDS ============================================================ */
.card-enter { animation: slideIn 0.28s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.link-card {
  cursor: grab; transition: box-shadow 0.2s, transform 0.15s;
  padding: 12px !important; font-size: 13px;
}
.link-card:hover { box-shadow: 0 4px 20px rgba(15,42,82,0.14); transform: translateY(-1px); }
.link-card.dragging { opacity: 0.45; }
.link-card.is-important { border-left: 3px solid var(--brand-orange); }
.link-card.is-done { opacity: 0.55; }

.card-title { font-size: 13px !important; }
.link-card .text-\[10px\]  { font-size: 12px !important; }
.link-card .text-\[9px\]   { font-size: 11px !important; }
.link-card .text-\[8px\]   { font-size: 11px !important; }
.link-card .text-xs        { font-size: 13px !important; }
.link-card button[class*="text-\[8px\]"],
.link-card button[class*="text-\[9px\]"],
.link-card button[class*="text-\[10px\]"] { font-size: 11px !important; padding: 3px 7px !important; }

.card-action-btn {
  font-size: 11px; padding: 3px 8px; border-radius: 5px; border: none;
  cursor: pointer; font-weight: 600; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 3px;
}
.card-quick-toolbar {
  display: none; gap: 4px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #e8f0f7;
}
.link-card:hover .card-quick-toolbar { display: flex; }
.card-thumbnail { width: 56px; height: 40px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.card-image-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 7px; margin-top: 8px; }
.domain-badge {
  font-size: 10px; color: var(--ctr-muted); background: var(--brand-sky-lt);
  padding: 1px 6px; border-radius: 20px; display: inline-block;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-notes {
  width: 100%; border: 1px solid #d0e4f0; border-radius: 6px; padding: 6px 9px;
  font-size: 12px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--ctr-text); resize: none;
  min-height: 52px; transition: border-color 0.2s; background: #f7fbfe;
}
.card-notes:focus { outline: none; border-color: var(--brand-sky); }
.card-cat-select {
  font-size: 11px; border: 1px solid #ccdde9; border-radius: 5px;
  padding: 2px 6px; color: var(--ctr-muted); background: #f7fbfe; cursor: pointer;
}
.folder-item { transition: all 0.2s; }
.folder-item.drag-over { background: var(--brand-sky-lt); }
.folder-item-wrap:hover .folder-item { padding-right: 70px; }
.card-done { opacity: 0.5; }
.card-done .card-title { text-decoration: line-through; }
.collapse-chevron { transition: transform 0.2s; }
.image-preview { max-height: 120px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.video-embed { width: 100%; aspect-ratio: 16/9; border-radius: 7px; margin-top: 8px; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ============================================================ GRID ============================================================ */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: 100px; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================ EMPTY STATE ============================================================ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ctr-muted); }
.empty-state-icon { font-size: 40px; margin-bottom: 14px; opacity: 0.4; }
.empty-state h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--ctr-text); }
.empty-state p  { font-size: 13px; margin: 0; }

/* ============================================================ TOAST ============================================================ */
.ctr-toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--brand-navy); color: #fff;
  padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 9999;
  box-shadow: var(--shadow-lg); transform: translateY(80px);
  transition: transform 0.3s ease; max-width: 320px;
}
.ctr-toast.show  { transform: translateY(0); }
.ctr-toast.error { background: #dc2626; }

/* ============================================================ AI BOXES ============================================================ */
.ai-result-box {
  background: linear-gradient(135deg, #eef6fb 0%, #e8f3f9 100%);
  border: 1px solid var(--ctr-border); border-radius: 8px;
  padding: 12px 14px; margin-top: 8px; font-size: 12px; line-height: 1.65;
}
.ai-result-box h1,.ai-result-box h2,.ai-result-box h3 { font-size: 12px; font-weight: 700; margin: 8px 0 3px; color: var(--ctr-text); }
.ai-result-box p,.ai-result-box li { font-size: 12px; }
.ai-result-box ul { padding-left: 16px; }

.ai-notes-box {
  background: linear-gradient(135deg, #e8f4fd 0%, #deedf7 100%);
  border: 1px solid #a8ccdf; border-radius: 7px;
  padding: 10px 12px; font-size: 12px; line-height: 1.6; margin-top: 8px;
}
.ai-notes-box h1,.ai-notes-box h2,.ai-notes-box h3 { font-size: 12px; font-weight: 700; margin: 6px 0 2px; }
.ai-notes-box ul { padding-left: 16px; }
.ai-notes-box p,.ai-notes-box li { font-size: 12px; }

/* ============================================================ REPORT MODAL ============================================================ */
.report-modal-overlay {
  position: fixed; inset: 0; background: rgba(8,25,47,0.6); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.report-modal-box {
  background: #fff; border-radius: 16px; max-width: 780px; width: 94vw;
  max-height: 88vh; overflow-y: auto; padding: 24px 28px;
  box-shadow: 0 28px 70px rgba(8,25,47,0.28);
}
.report-modal-title {
  font-size: 17px; font-weight: 800; color: var(--ctr-text);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.report-modal-box h1,.report-modal-box h2,.report-modal-box h3 { color: var(--ctr-text); margin-top: 1.2em; }
.report-modal-box h2 { font-size: 15px; border-bottom: 1px solid var(--ctr-border); padding-bottom: 4px; }
.report-modal-box h3 { font-size: 13px; }
.report-modal-box p  { font-size: 13px; line-height: 1.65; }
.report-modal-box ul,.report-modal-box ol { font-size: 13px; padding-left: 18px; }
.report-modal-box li { margin-bottom: 3px; }
.report-modal-box strong { color: var(--brand-navy); }
.report-modal-box code { background: #eef6fb; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.report-modal-box pre { background: #eef6fb; border: 1px solid var(--ctr-border); border-radius: 7px; padding: 12px; overflow-x: auto; }
.report-modal-box blockquote { border-left: 3px solid var(--brand-orange); margin-left: 0; padding-left: 12px; color: var(--ctr-muted); }
.wp-preview img { border-radius: 6px; max-width: 100%; }
.prose img { border-radius: 8px; max-width: 100%; }

/* ============================================================ AUTH MODAL ============================================================ */
.auth-overlay { backdrop-filter: blur(10px); }
.auth-card {
  background: #fff; border-radius: 18px;
  box-shadow: 0 28px 70px rgba(8,25,47,0.22); max-width: 440px; width: 100%; padding: 36px;
}
.btn-signin {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dk));
  color: #fff; font-weight: 800; border-radius: 10px; border: none; cursor: pointer;
  font-size: 16px; letter-spacing: .2px; transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(244,124,32,.35);
}
.btn-signin:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(244,124,32,.45); }
.btn-signin:disabled { opacity: 0.65; cursor: not-allowed; }
.input-field {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--ctr-border);
  border-radius: 9px; font-size: 15px; outline: none; color: var(--ctr-text);
  transition: border 0.2s; font-family: 'Plus Jakarta Sans', sans-serif;
}
.input-field:focus { border-color: var(--brand-sky); box-shadow: 0 0 0 3px rgba(90,180,229,0.18); }

/* ============================================================ UTILITY ============================================================ */
.text-ctr-teal { color: var(--brand-orange); }
.bg-ctr-teal   { background: var(--brand-orange); }
.border-ctr    { border-color: var(--ctr-border); }

/* ============================================================ MOBILE BOTTOM BAR ============================================================ */
#mobileActionBar { display: none; }

/* ============================================================ RESPONSIVE ≤1024px ============================================================ */
@media (max-width: 1024px) {
  #linksGrid { grid-template-columns: repeat(2, 1fr) !important; }
  .btn-header-action span { display: none; }
  .btn-header-action { padding: 6px 10px; }
}

/* ============================================================ RESPONSIVE ≤768px ============================================================ */
@media (max-width: 768px) {
  #mobileMenuBtn { display: flex; }
  .header-actions-desktop { display: none; }
  .ctr-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
    z-index: 40; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }
  .ctr-sidebar.open { transform: translateX(0); }
  #linksGrid { grid-template-columns: 1fr !important; }
  #dropZone  { max-width: none; }
  main { padding-bottom: 0; }
  .ctr-content-area { padding-bottom: 68px; }
  #reportModal > div {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; margin: 0;
  }
  #contentPanel { width: calc(100vw - 40px); top: 60px; max-height: calc(100vh - 74px); }
  #mobileActionBar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--brand-navy); border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 25; padding: 7px 10px env(safe-area-inset-bottom, 0); gap: 6px; justify-content: space-around;
  }
  #mobileActionBar a,
  #mobileActionBar button {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 8px 5px;
    background: rgba(255,255,255,0.10); border-radius: 8px; color: #fff;
    font-size: 11px; font-weight: 700; text-decoration: none; text-align: center; letter-spacing: .3px;
  }
  #mobileActionBar i { font-size: 16px; }
  .auth-card  { padding: 26px 20px; border-radius: 14px; }
  .ctr-header { gap: 10px; padding: 8px 12px; }
  .logo-img   { height: 34px; }
}

/* ============================================================ RESPONSIVE ≤480px ============================================================ */
@media (max-width: 480px) {
  .auth-card { padding: 22px 16px; }
  #linksGrid { gap: 10px !important; }
}

/* ── Card grid overflow fix ──────────────────────────────── */
.link-card { overflow: hidden; min-width: 0; }
.link-card .prose { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.link-card .prose pre { white-space: pre-wrap; overflow-x: hidden; word-break: break-word; }
.link-card .prose code { word-break: break-all; }

/* ============================================================ WP BLOG POST PREVIEW ============================================================ */
.wp-preview h1 { font-size: 20px; font-weight: 800; color: #0f2a52; margin: 0 0 12px; line-height: 1.3; }
.wp-preview h2 { font-size: 16px; font-weight: 700; color: #0f2a52; margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #f47c20; }
.wp-preview h3 { font-size: 14px; font-weight: 700; color: #1a3d6e; margin: 14px 0 6px; }
.wp-preview h4 { font-size: 13px; font-weight: 700; color: #1a3d6e; margin: 10px 0 4px; }
.wp-preview p  { font-size: 13px; line-height: 1.75; color: #334155; margin: 0 0 10px; }
.wp-preview ul,.wp-preview ol { font-size: 13px; padding-left: 20px; margin: 0 0 10px; }
.wp-preview li { margin-bottom: 4px; line-height: 1.65; color: #334155; }
.wp-preview strong { color: #0f2a52; font-weight: 700; }
.wp-preview em { color: #4a6a8a; }
.wp-preview blockquote { border-left: 3px solid #f47c20; margin: 12px 0; padding: 8px 14px; background: #fff3e8; border-radius: 0 8px 8px 0; color: #4a3010; font-style: italic; }
.wp-preview a { color: #1a6fa4; text-decoration: underline; }
.wp-preview hr { border: none; border-top: 1px solid #d8eaf4; margin: 16px 0; }
.wp-preview pre { background: #f1f5f9; border: 1px solid #d8eaf4; border-radius: 6px; padding: 10px 14px; font-size: 11px; overflow-x: auto; }
.wp-preview code { background: #eef6fb; padding: 1px 5px; border-radius: 4px; font-size: 11px; color: #1a6fa4; }
/* Compact version on cards */
.ai-result-box .wp-preview h1 { font-size: 13px; }
.ai-result-box .wp-preview h2 { font-size: 12px; margin: 10px 0 5px; }
.ai-result-box .wp-preview h3 { font-size: 11px; }
.ai-result-box .wp-preview p,.ai-result-box .wp-preview li { font-size: 11px; }