/* ═══════════════════════════════════════════════════════════════════════════
   AiRank Pro — Premium Dark Theme CSS
   Inspired by SearchAtlas/AI Engine SEO exact design
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS VARIABLES ─────────────────────────────────────────────────────── */
:root {
  --bg-base:        #0a0a0f;
  --bg-surface:     #0f0f18;
  --bg-card:        #131320;
  --bg-card2:       #1a1a2e;
  --bg-input:       #1e1e30;
  --bg-hover:       #242438;
  --sidebar-bg:     #0d0d1a;
  --sidebar-w:      56px;
  --topbar-h:       52px;

  --border:         rgba(255,255,255,.07);
  --border-hover:   rgba(255,255,255,.13);
  --border-focus:   rgba(124,58,237,.5);

  --brand-purple:    #7c3aed;
  --brand-purple-lt: #a855f7;
  --brand-purple-d:  #5b21b6;
  --brand-cyan:      #14B583;
  --brand-green:     #10b981;
  --brand-amber:     #f59e0b;
  --brand-red:       #ef4444;
  --brand-blue:      #3b82f6;
  --brand-pink:      #ec4899;

  --text-primary:   #f0effe;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --text-dim:       #374151;
  --text-on-brand:  #ffffff;

  --grad-purple: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  --grad-cyan:   linear-gradient(135deg, #0F8F66 0%, #14B583 100%);
  --grad-green:  linear-gradient(135deg, #059669 0%, #10b981 100%);
  --grad-hero:   linear-gradient(135deg, #0a0a0f 0%, #1a0a2e 50%, #0a0a15 100%);

  --shadow-sm:     0 1px 8px rgba(0,0,0,.3);
  --shadow-md:     0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.5);
  --shadow-purple: 0 4px 30px rgba(124,58,237,.25);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --transition: all .18s ease;
}

/* ── LIGHT THEME ──────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:        #f5f5fa;
  --bg-surface:     #ebebf3;
  --bg-card:        #ffffff;
  --bg-card2:       #f0f0f8;
  --bg-input:       #ffffff;
  --bg-hover:       #e8e8f4;
  --sidebar-bg:     #ffffff;

  --border:         rgba(0,0,0,.1);
  --border-hover:   rgba(0,0,0,.18);
  --border-focus:   rgba(124,58,237,.5);

  --text-primary:   #1a1a2e;
  --text-secondary: #475569;
  --text-muted:     #64748b;
  --text-dim:       #94a3b8;
  --text-on-brand:  #ffffff;

  --grad-hero:   linear-gradient(135deg, #f5f5fa 0%, #ede0ff 50%, #f0f5ff 100%);

  --shadow-sm:     0 1px 8px rgba(0,0,0,.06);
  --shadow-md:     0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.1);
  --shadow-purple: 0 4px 30px rgba(124,58,237,.12);
}
[data-theme="light"] body { color: var(--text-primary); }
[data-theme="light"] .icon-rail { box-shadow: 1px 0 0 var(--border); }
[data-theme="light"] .sub-panel { box-shadow: 1px 0 0 var(--border); }
[data-theme="light"] .topbar { box-shadow: 0 1px 0 var(--border); background: rgba(255,255,255,.85); backdrop-filter: blur(12px); }
[data-theme="light"] .nav-icon-item.active .nav-icon-box { background: var(--brand-purple); color: #fff; }
[data-theme="light"] .btn-primary,
[data-theme="light"] .gap-analyze-btn,
[data-theme="light"] .airp-cta { color: #fff !important; }
[data-theme="light"] .modal { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,.35); }
[data-theme="light"] .user-dropdown { background: var(--bg-card); border: 1px solid var(--border); }
[data-theme="light"] .more-popup { background: var(--bg-card); border: 1px solid var(--border); }
[data-theme="light"] .badge { color: var(--text-primary); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  background: var(--bg-input); color: var(--text-primary); border-color: var(--border);
}
[data-theme="light"] .log-terminal { background: #1e1e2e; color: #e2e8f0; }
[data-theme="light"] .kpi-n, [data-theme="light"] .gap-stat-val { filter: saturate(1.2); }

/* ── LIGHT THEME — CATCH HARDCODED TERMINAL-BLACK BLOCKS ─────────────
   Many pages inline style="background:#080810" or similar dark-only colors
   for log/code panels. In light theme force a readable slate block. */
[data-theme="light"] [style*="background:#080810"],
[data-theme="light"] [style*="background: #080810"],
[data-theme="light"] [style*="background:#0d0d12"],
[data-theme="light"] [style*="background:#0d0d18"],
[data-theme="light"] [style*="background:#0d0d1e"],
[data-theme="light"] [style*="background:#0d1117"] {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}
/* Inline green terminal text stays readable on the slate block */
[data-theme="light"] [style*="background:#080810"] *,
[data-theme="light"] [style*="background:#0d0d12"] *,
[data-theme="light"] [style*="background:#0d0d18"] *,
[data-theme="light"] [style*="background:#0d0d1e"] * { color: #e2e8f0; }
[data-theme="light"] [style*="background:#080810"] [style*="color:#4ade"],
[data-theme="light"] [style*="background:#080810"] [style*="color:#34d3"] { color: #86efac !important; }

/* Catch hardcoded white inline text in light theme — forces readable color */
[data-theme="light"] [style*="color:#fff"]:not(.btn):not(.btn-primary):not(.btn-grad):not(.btn-danger):not(.btn-success):not([class*="hero"]):not([class*="gradient"]):not([style*="background"]) {
  color: var(--text-primary) !important;
}

/* ── LIGHT THEME — GLOBAL HERO H1 GRADIENT FIX ────────────────────────
   Almost every page hero defines an H1 with a `#fff → brand` gradient +
   `-webkit-text-fill-color:transparent`. On light theme the #fff stop is
   invisible against the pale pastel background. Force the gradient to
   start dark so the headline stays readable in BOTH themes without
   touching the 30+ individual stylesheets.
   - Class-based: catches .opa-hero, .soc-hero, .geo-hero, .bl-hero, .dir-hero, .tpd-hero, etc.
   - Attribute-based: catches inline-style hero h1s (Local/Index.cshtml). */
[data-theme="light"] .opa-hero h1,
[data-theme="light"] .soc-hero h1,
[data-theme="light"] .geo-hero h1,
[data-theme="light"] .geo-hero-title,
[data-theme="light"] [class$="-hero"] h1,
[data-theme="light"] [class*=" -hero "] h1,
[data-theme="light"] [class^="bl-hero"] h1,
[data-theme="light"] [class^="dir-hero"] h1,
[data-theme="light"] [class^="tpd-hero"] h1,
[data-theme="light"] [class^="emc-hero"] h1,
[data-theme="light"] [class^="bn-hero"] h1,
[data-theme="light"] [class^="rl-hero"] h1,
[data-theme="light"] [class^="pc-hero"] h1,
[data-theme="light"] [class^="pg-hero"] h1,
[data-theme="light"] [class^="llm-hero"] h1,
[data-theme="light"] [class^="dkn-hero"] h1,
[data-theme="light"] [class^="ab-hero"] h1,
[data-theme="light"] [class^="ba-hero"] h1,
[data-theme="light"] [class^="dc-hero"] h1,
[data-theme="light"] [class^="rep-hero"] h1,
[data-theme="light"] h1[style*="text-fill-color:transparent"],
[data-theme="light"] h1[style*="text-fill-color: transparent"] {
  background: linear-gradient(135deg, #1a1a2e 0%, #7c3aed 60%, #0891b2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Light-theme — every inline pale-purple text (`color:#c4b5fd`) loses
   contrast against the pastel hero backgrounds. Force the saturated
   brand purple so the chip / badge / label is actually legible. */
[data-theme="light"] [style*="color:#c4b5fd"],
[data-theme="light"] [style*="color: #c4b5fd"],
[data-theme="light"] [style*="color:#A78BFA" i],
[data-theme="light"] [style*="color:#a78bfa"] {
  color: var(--brand-purple) !important;
}

/* Dark theme catch — pages that hardcode color:#000 or color:#333 end up invisible on dark cards.
   Force them to use the dark theme's text tokens. */
[data-theme="dark"] [style*="color:#000"]:not([style*="background"]),
[data-theme="dark"] [style*="color: #000"]:not([style*="background"]),
[data-theme="dark"] [style*="color:#333"]:not([style*="background"]),
[data-theme="dark"] [style*="color:#111"]:not([style*="background"]),
[data-theme="dark"] [style*="color:#222"]:not([style*="background"]) {
  color: var(--text-primary) !important;
}
[data-theme="dark"] [style*="color:#555"]:not([style*="background"]),
[data-theme="dark"] [style*="color:#666"]:not([style*="background"]),
[data-theme="dark"] [style*="color:#777"]:not([style*="background"]) {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="color:#888"]:not([style*="background"]),
[data-theme="dark"] [style*="color:#999"]:not([style*="background"]),
[data-theme="dark"] [style*="color:#aaa"]:not([style*="background"]) {
  color: var(--text-muted) !important;
}

/* ── LIGHT THEME — GLOBAL COMPONENT OVERRIDES ────────────────────────── */
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: #1a1a2e; }
[data-theme="light"] p { color: #475569; }
[data-theme="light"] a { color: var(--brand-purple); }
/* Filled / primary gradient buttons keep WHITE text in light theme — the generic
   anchor-color rule above otherwise turns their label purple (invisible on the
   purple fill) on the public feature / industry / learn / CTA-band pages. */
[data-theme="light"] a.btn-xl-purple,
[data-theme="light"] a.lrn-btn,
[data-theme="light"] a.sol-btn-primary,
[data-theme="light"] a.ob-cta-primary,
[data-theme="light"] a.btn-primary { color: #fff; }
[data-theme="light"] .btn { border-color: rgba(0,0,0,.12); }
[data-theme="light"] .btn-secondary { background: #f5f5fa; color: #475569; border-color: rgba(0,0,0,.12); }
[data-theme="light"] .btn-secondary:hover { background: #ebebf3; color: #1a1a2e; }
[data-theme="light"] .btn-primary { background: var(--grad-purple); color: #fff; border-color: transparent; }
[data-theme="light"] .badge { background: rgba(0,0,0,.05); color: #475569; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .card, [data-theme="light"] .panel {
  background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 8px rgba(0,0,0,.04);
}
[data-theme="light"] .form-control {
  background: #fff; border-color: rgba(0,0,0,.12); color: #1a1a2e;
}
[data-theme="light"] .form-control:focus {
  border-color: var(--brand-purple); background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,.08);
}
[data-theme="light"] .form-label { color: #475569; }
[data-theme="light"] select { background: #fff; color: #1a1a2e; }
[data-theme="light"] .sec-tag { color: #475569; }
[data-theme="light"] .table-wrap { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] table th { background: #f8f8fc; color: #475569; border-color: rgba(0,0,0,.06); }
[data-theme="light"] table td { color: #475569; border-color: rgba(0,0,0,.06); }
[data-theme="light"] table tr:hover td { background: #f5f5fa; }
[data-theme="light"] .atlas-brain-bar { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .atlas-brain-placeholder { color: #94a3b8; }
[data-theme="light"] .playbook-item { border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .playbook-item:hover { background: #f8f8fc; }
[data-theme="light"] .playbook-text { color: #475569; }
[data-theme="light"] .kw-filter-btn { background: #fff; border-color: rgba(0,0,0,.1); color: #475569; }
[data-theme="light"] .kw-filter-btn:hover { border-color: rgba(0,0,0,.2); color: #1a1a2e; }
[data-theme="light"] .kw-filter-btn.active { border-color: var(--brand-purple); color: var(--brand-purple); background: rgba(124,58,237,.04); }
[data-theme="light"] .status-pill { background: rgba(16,185,129,.08); color: #059669; }
[data-theme="light"] .metric-card { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 6px rgba(0,0,0,.04); }
[data-theme="light"] .metric-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
[data-theme="light"] ::placeholder { color: #94a3b8; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }

/* ── LIGHT THEME — DEEP OVERRIDES FOR ALL VIEW PAGES ─────────────────── */
/* Page headers & titles */
[data-theme="light"] .page-header h1 { color: #1a1a2e; }
[data-theme="light"] .page-header p { color: #64748b; }

/* Cards: anything with dark gradient/solid backgrounds should lighten */
[data-theme="light"] .card { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 1px 6px rgba(0,0,0,.04); }
[data-theme="light"] .card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
[data-theme="light"] .card-header { background: #f8f8fc; border-bottom-color: rgba(0,0,0,.06); }
[data-theme="light"] .card-title { color: #1a1a2e; }

/* Social platform cards with dark backgrounds */
[data-theme="light"] [style*="background:rgba(108,47,239"],
[data-theme="light"] [style*="background:linear-gradient(135deg,rgba(108"],
[data-theme="light"] [style*="background:var(--bg-card2)"] {
  background: #fff !important; border-color: rgba(0,0,0,.08) !important;
}

/* Stat cards */
[data-theme="light"] .stat-card { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .stat-value { color: #1a1a2e; }
[data-theme="light"] .stat-label { color: #64748b; }
[data-theme="light"] .stat-change { color: #10b981; }

/* Tab buttons */
[data-theme="light"] .tab-btn { color: #64748b; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .tab-btn:hover { color: #1a1a2e; }
[data-theme="light"] .tab-btn.active { background: var(--brand-purple); color: #fff; border-color: var(--brand-purple); }
[data-theme="light"] .tab-nav { border-bottom-color: rgba(0,0,0,.08); }
[data-theme="light"] .tab-pane { color: #475569; }
/* Admin pill-tabs (Users / Plans / API Keys / System Logs / Job Status / Admin Settings):
   the inactive label was var(--text-secondary) (light slate) and read faint on white.
   This 3-class selector outranks the view's `.ak-tabs .tab-btn` rule so no !important is
   needed; active tab keeps its own dark colour. (#331) */
[data-theme="light"] .ak-tabs .tab-btn { color: #1e293b; }
[data-theme="light"] .ak-tabs .tab-btn:hover { color: #0f172a; }

/* Badges */
[data-theme="light"] .badge-purple { background: rgba(124,58,237,.08); color: #7c3aed; }
[data-theme="light"] .badge-green { background: rgba(16,185,129,.08); color: #059669; }
[data-theme="light"] .badge-cyan { background: rgba(20,181,131,.08); color: #0F8F66; }
[data-theme="light"] .badge-amber { background: rgba(245,158,11,.08); color: #d97706; }
[data-theme="light"] .badge-red { background: rgba(239,68,68,.08); color: #dc2626; }
[data-theme="light"] .badge-gray { background: rgba(0,0,0,.05); color: #475569; }

/* Section backgrounds that use dark variables */
[data-theme="light"] [style*="background:var(--dark)"],
[data-theme="light"] [style*="background:var(--dark2)"],
[data-theme="light"] [style*="background:var(--dark3)"] {
  background: #fff !important;
}
[data-theme="light"] [style*="background:var(--bg-card)"] { background: #fff !important; }
[data-theme="light"] [style*="background:var(--bg-card2)"] { background: #f8f8fc !important; }
[data-theme="light"] [style*="background:var(--bg-input)"] { background: #f5f5fa !important; }

/* Text colors on sections */
[data-theme="light"] [style*="color:var(--text-primary)"] { color: #1a1a2e !important; }
[data-theme="light"] [style*="color:var(--text-secondary)"] { color: #475569 !important; }
[data-theme="light"] [style*="color:var(--text-muted)"] { color: #64748b !important; }

/* Connection cards / platform cards */
[data-theme="light"] .conn-card, [data-theme="light"] .platform-card { background: #fff; border-color: rgba(0,0,0,.08); }

/* Grid items */
[data-theme="light"] .bento > div, [data-theme="light"] .feature-grid > div { background: #fff; border-color: rgba(0,0,0,.08); }

/* Announcement banner in light */
[data-theme="light"] #announcementBanner { background: var(--brand-purple); color: #fff; }
[data-theme="light"] .banner-btn { background: #fff; color: var(--brand-purple); }

/* Progress bars */
[data-theme="light"] [style*="background:rgba(255,255,255,.06)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.05)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.03)"] {
  background: rgba(0,0,0,.04) !important;
}

/* All white-on-dark text fix: override rgba(255,255,255,...) in style attrs */
[data-theme="light"] [style*="color:rgba(255,255,255,"] { color: #475569 !important; }
[data-theme="light"] [style*="color:#fff"] { color: inherit !important; }

/* Keep white text intentional on brand-colored buttons/badges */
[data-theme="light"] .btn-primary,
[data-theme="light"] [style*="background:var(--grad-purple)"],
[data-theme="light"] .airp-cta,
[data-theme="light"] .tab-btn.active,
[data-theme="light"] .hiw-num { color: #fff !important; }

/* Fix sub-panel items in views */
[data-theme="light"] .kw-sub-nav a { color: #475569; }
[data-theme="light"] .kw-sub-nav a.active { color: var(--brand-purple); }

/* ── THEME TOGGLE ─────────────────────────────────────────────────────── */

/* ── RESET ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* Native date/time picker icons render dark by default — invert to white on
   our dark theme so the calendar/clock buttons are actually visible. The
   light-theme selector reverts to the browser default. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.1);
  cursor: pointer;
  opacity: .8;
  transition: opacity .15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* ── PANEL LAYOUT ──────────────────────────────────────────────────────── */
.panel-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  min-height: 100vh;
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────── */
.sidebar {
  grid-row: 1 / -1;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow: visible;
}
.sidebar-logo {
  width: 36px; height: 36px;
  background: var(--grad-purple);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 16px;
  flex-shrink: 0;
  box-shadow: var(--shadow-purple);
  transition: var(--transition);
}
.sidebar-logo:hover { transform: scale(1.05); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  flex: 1;
  overflow: visible;
  padding: 0 6px;
}

.nav-section-divider {
  width: 28px; height: 1px;
  background: var(--border);
  margin: 6px 0;
}

.nav-item {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex; flex-direction: row;
  align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 0;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
.nav-item i { font-size: .95rem; flex-shrink: 0; }
.nav-item .nav-label { display: none; }
.nav-item:hover { background: var(--bg-hover); color: var(--text-secondary); }
.nav-item.active { background: rgba(124,58,237,.18); color: var(--brand-purple-lt); }
.nav-item.active i { color: var(--brand-purple-lt); }

/* Nav Tooltip (collapsed mode only) */
.nav-item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--bg-card2);
  border: 1px solid var(--border-hover);
  color: var(--text-primary);
  font-size: .78rem; font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 9999;
  box-shadow: var(--shadow-md);
}
.nav-item:hover::after { opacity: 1; }

/* Expanded sidebar */
.sidebar.expanded { width: 220px; align-items: stretch; }
.sidebar.expanded ~ .topbar { left: 220px; }
.sidebar.expanded .sidebar-nav { align-items: stretch; }
.sidebar.expanded .nav-item {
  width: auto; height: 38px;
  justify-content: flex-start;
  padding: 0 14px;
  gap: 10px;
  font-size: .82rem;
}
.sidebar.expanded .nav-item .nav-label {
  display: inline;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  color: inherit;
}
.sidebar.expanded .nav-item::after { display: none; }
.sidebar.expanded .nav-section-divider { width: calc(100% - 28px); margin: 4px 14px; }
.sidebar.expanded .sidebar-logo { margin: 0 auto 16px; }
.panel-layout.sidebar-expanded { grid-template-columns: 220px 1fr; }

.sidebar-footer {
  width: 100%;
  padding: 8px 6px;
  border-top: 1px solid var(--border);
}
.sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-purple);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800;
  margin: 0 auto;
  cursor: pointer;
  transition: var(--transition);
}
.sidebar-user-avatar:hover { transform: scale(1.05); }

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar {
  grid-column: 2;
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  position: sticky; top: 0; z-index: 50;
}
.topbar-search {
  flex: 1;
  max-width: 340px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px 7px 32px;
  font-size: .82rem;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition);
}
.topbar-search input:focus { border-color: var(--border-focus); }
.topbar-search i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .85rem;
}
.topbar-atlas-brain {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(168,85,247,.15));
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 8px; padding: 6px 14px;
  font-size: .82rem; font-weight: 700;
  color: var(--brand-purple-lt);
  cursor: pointer; transition: var(--transition);
}
.topbar-atlas-brain:hover { background: rgba(124,58,237,.25); }
.topbar-atlas-brain .new-badge {
  background: var(--brand-cyan); color: #000;
  font-size: .6rem; font-weight: 800;
  padding: 1px 6px; border-radius: 100px;
}
.topbar-quota {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 12px;
  font-size: .8rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
}
.topbar-quota i { font-size: .75rem; color: var(--text-muted); }
.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-action-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: .85rem;
  cursor: pointer; transition: var(--transition);
}
.topbar-action-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }
.topbar-user {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px;
  cursor: pointer; transition: var(--transition);
  font-size: .82rem;
}
.topbar-user:hover { border-color: var(--border-hover); }

/* ── MAIN CONTENT ───────────────────────────────────────────────────────── */
.main-content {
  grid-column: 2;
  padding: 20px 24px;
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg-base);
  overflow-x: hidden;
}

/* ── PAGE HEADER ────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 20px; }
.page-header h1 { font-size: 1.4rem; font-weight: 800; margin-bottom: 2px; }
.page-header p { color: var(--text-muted); font-size: .85rem; }

/* ── PROJECT HEADER (site-level tabs like image 2) ──────────────────────── */
.project-header {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
}
.project-favicon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-purple);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; flex-shrink: 0;
}
.project-domain { font-size: .95rem; font-weight: 700; }
.project-url { font-size: .76rem; color: var(--brand-cyan); }
.project-tabs {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: none;
  display: flex; gap: 0;
  overflow-x: auto; scrollbar-width: none;
}
.project-tabs::-webkit-scrollbar { display: none; }
.project-tab {
  padding: 11px 18px;
  font-size: .82rem; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer; transition: var(--transition);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.project-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,.02); }
.project-tab.active { color: var(--brand-purple-lt); border-bottom-color: var(--brand-purple); background: rgba(124,58,237,.06); }
.project-content {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 20px;
}

/* ── AI Engine STATUS BAR ────────────────────────────────────────────────────── */
.ai-engine-status-bar {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;
}
.ai-engine-status-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px; padding: 6px 12px;
  font-size: .78rem; font-weight: 700; color: var(--brand-red);
}
.ai-engine-status-pill.active { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); color: var(--brand-green); }
.ai-engine-engaged-badge {
  display: flex; align-items: center; gap: 5px;
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.2);
  border-radius: 6px; padding: 4px 10px;
  font-size: .76rem; font-weight: 700; color: var(--brand-green);
}
.scan-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 12px;
  font-size: .78rem; font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
  transition: var(--transition);
}
.scan-btn:hover { border-color: var(--brand-purple); color: var(--brand-purple-lt); }
.brand-vault-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  font-size: .78rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: var(--transition);
}
.brand-vault-btn:hover { border-color: var(--border-hover); }

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: var(--transition);
}
.card:hover { border-color: var(--border-hover); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-size: .9rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.card-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}

/* ── METRIC CARDS (like image 1 bottom row) ─────────────────────────────── */
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: var(--transition);
}
.metric-card:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.metric-label {
  font-size: .69rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.metric-value {
  font-size: 1.6rem; font-weight: 900; line-height: 1;
  margin-bottom: 4px;
}
.metric-change {
  font-size: .73rem; font-weight: 600;
  display: flex; align-items: center; gap: 3px;
}
.metric-change.up { color: var(--brand-green); }
.metric-change.down { color: var(--brand-red); }
.metric-change.neutral { color: var(--text-muted); }

/* Purple highlight metric card */
.metric-card.highlight {
  background: linear-gradient(135deg, rgba(124,58,237,.2) 0%, rgba(168,85,247,.1) 100%);
  border-color: rgba(124,58,237,.3);
}
.metric-card.highlight .metric-value { color: var(--brand-purple-lt); }

/* ── STAT GRID ──────────────────────────────────────────────────────────── */
.stat-grid { display: grid; gap: 12px; }
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative; overflow: hidden;
  transition: var(--transition);
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px 3px 0 0;
}
.stat-card.purple::before { background: var(--grad-purple); }
.stat-card.green::before { background: var(--grad-green); }
.stat-card.cyan::before { background: var(--grad-cyan); }
.stat-card.amber::before { background: linear-gradient(135deg, #d97706, #f59e0b); }
.stat-card.red::before { background: linear-gradient(135deg, #dc2626, #ef4444); }
.stat-card.gray::before { background: linear-gradient(135deg, #475569, #64748b); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; margin-bottom: 10px;
}
.stat-icon.purple { background: rgba(124,58,237,.15); color: var(--brand-purple-lt); }
.stat-icon.green  { background: rgba(16,185,129,.15);  color: var(--brand-green); }
.stat-icon.cyan   { background: rgba(20,181,131,.15);   color: var(--brand-cyan); }
.stat-icon.amber  { background: rgba(245,158,11,.15);  color: var(--brand-amber); }
.stat-icon.red    { background: rgba(239,68,68,.15);   color: var(--brand-red); }
.stat-icon.gray   { background: rgba(100,116,139,.15); color: var(--text-muted); }
.stat-value { font-size: 1.6rem; font-weight: 900; line-height: 1.1; margin-bottom: 2px; }
.stat-label { font-size: .74rem; color: var(--text-muted); font-weight: 600; }
.stat-change { font-size: .72rem; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.stat-change.up { color: var(--brand-green); }
.stat-change.down { color: var(--brand-red); }

/* ── ATLAS BRAIN CHAT BAR (image 1) ─────────────────────────────────────── */
.atlas-brain-bar {
  background: var(--bg-card2);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: var(--radius-xl);
  padding: 16px 20px;
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
  cursor: text;
  transition: var(--transition);
  margin-bottom: 20px;
}
.atlas-brain-bar:hover { border-color: rgba(124,58,237,.4); box-shadow: 0 0 0 3px rgba(124,58,237,.08); }
.atlas-brain-bar::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-purple), var(--brand-cyan), transparent);
  animation: shimmer 3s infinite;
}
.atlas-brain-icon {
  width: 32px; height: 32px;
  background: var(--grad-purple);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  animation: pulse-subtle 3s infinite;
}
.atlas-spinner {
  width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--brand-purple-lt);
  border-radius: 50%; animation: atlas-spin .6s linear infinite; flex-shrink: 0;
}
@keyframes atlas-spin { to { transform: rotate(360deg); } }
.atlas-brain-placeholder {
  flex: 1; color: var(--text-muted); font-size: .88rem;
}
.atlas-brain-placeholder strong { color: var(--text-secondary); }
.atlas-brain-send {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-purple); border: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .85rem; cursor: pointer;
  box-shadow: var(--shadow-purple);
  transition: var(--transition);
}
.atlas-brain-send:hover { transform: scale(1.05); }

/* ── QUICK PLAYBOOKS (image 1) ──────────────────────────────────────────── */
.playbook-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: var(--transition);
}
.playbook-item:last-child { border-bottom: none; }
.playbook-item:hover { background: rgba(255,255,255,.02); }
.playbook-play {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad-purple);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; flex-shrink: 0;
  box-shadow: var(--shadow-purple);
}
.playbook-text { flex: 1; font-size: .88rem; font-weight: 500; }
.playbook-badge {
  font-size: .68rem; font-weight: 800;
  padding: 2px 8px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 4px;
}

/* ── TABLE ──────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  padding: 8px 12px;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.table thead th.sort { cursor: pointer; }
.table thead th.sort:hover { color: var(--text-secondary); }
.table tbody tr { border-bottom: 1px solid var(--border); transition: var(--transition); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: rgba(255,255,255,.015); }
.table td { padding: 10px 12px; vertical-align: middle; font-size: .84rem; }
.td-url { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block; margin-bottom: 6px;
  font-size: .8rem; font-weight: 600; color: var(--text-secondary);
}
.form-control {
  width: 100%; background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: .87rem; color: var(--text-primary);
  outline: none; transition: var(--transition);
}
.form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.form-control::placeholder { color: var(--text-dim); }
.form-select {
  width: 100%; background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 32px 9px 12px;
  font-size: .87rem; color: var(--text-primary);
  outline: none; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: var(--transition);
}
.form-select:focus { border-color: var(--border-focus); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.form-check input[type=checkbox], .form-check input[type=radio] {
  width: 16px; height: 16px; accent-color: var(--brand-purple); cursor: pointer;
}
.form-check-label { font-size: .85rem; cursor: pointer; }
.toggle-switch {
  position: relative; display: inline-block; width: 44px; height: 24px;
}
.toggle-switch input { display: none; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: 100px;
  background: var(--bg-input); border: 1px solid var(--border);
  cursor: pointer; transition: var(--transition);
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  left: 3px; top: 3px;
  background: var(--text-muted); transition: var(--transition);
}
.toggle-switch input:checked + .toggle-slider { background: rgba(124,58,237,.3); border-color: var(--brand-purple); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--brand-purple-lt); }
.input-group { display: flex; }
.input-group .form-control { border-radius: 0; flex: 1; }
.input-group .form-control:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .form-control:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .btn:not(:first-child) { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0; }
.input-group > *:not(:first-child) { margin-left: -1px; }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: .84rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: var(--transition); white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--grad-purple); color: #fff; border-color: var(--brand-purple);
  box-shadow: 0 2px 12px rgba(124,58,237,.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 18px rgba(124,58,237,.4); }
.btn-secondary {
  background: var(--bg-input); color: var(--text-secondary); border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--border-hover); color: var(--text-primary); background: var(--bg-hover); }
.btn-ghost {
  background: none; color: var(--text-muted); border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-secondary); }
.btn-danger { background: rgba(239,68,68,.12); color: var(--brand-red); border-color: rgba(239,68,68,.2); }
.btn-danger:hover { background: var(--brand-red); color: #fff; }
.btn-success { background: rgba(16,185,129,.12); color: var(--brand-green); border-color: rgba(16,185,129,.2); }
.btn-success:hover { background: var(--brand-green); color: #fff; }
.btn-cyan { background: rgba(20,181,131,.12); color: var(--brand-cyan); border-color: rgba(20,181,131,.2); }
.btn-cyan:hover { background: var(--brand-cyan); color: #000; }
.btn-sm { padding: 5px 10px; font-size: .78rem; }
.btn-lg { padding: 11px 24px; font-size: .95rem; }
.btn-xl { padding: 14px 28px; font-size: 1rem; }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
.btn-sm.btn-icon { width: 28px; height: 28px; }
.w-full { width: 100%; justify-content: center; }

/* ── BADGES ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 100px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.badge-purple { background: rgba(124,58,237,.2); color: var(--brand-purple-lt); border: 1px solid rgba(124,58,237,.25); }
.badge-green  { background: rgba(16,185,129,.2);  color: var(--brand-green);      border: 1px solid rgba(16,185,129,.25); }
.badge-cyan   { background: rgba(20,181,131,.2);   color: var(--brand-cyan);       border: 1px solid rgba(20,181,131,.25); }
.badge-amber  { background: rgba(245,158,11,.2);  color: var(--brand-amber);      border: 1px solid rgba(245,158,11,.25); }
.badge-red    { background: rgba(239,68,68,.2);   color: var(--brand-red);        border: 1px solid rgba(239,68,68,.25); }
.badge-gray   { background: rgba(100,116,139,.15);color: var(--text-secondary);   border: 1px solid rgba(100,116,139,.2); }
.badge-blue   { background: rgba(59,130,246,.2);  color: #93c5fd;                 border: 1px solid rgba(59,130,246,.25); }
.badge-new    { background: var(--brand-cyan); color: #000; padding: 1px 6px; font-size: .6rem; }

/* ── ALERTS ─────────────────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-md);
  font-size: .85rem;
}
.alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: .1em; }
.alert-info    { background: rgba(20,181,131,.08); border: 1px solid rgba(20,181,131,.2); color: var(--text-secondary); }
.alert-success { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: var(--brand-green); }
.alert-warning { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); color: var(--brand-amber); }
.alert-danger  { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2); color: var(--brand-red); }

/* ── MODALS ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  /* Sub-modals must always layer ABOVE the .autoblog-modal (z-index 9000)
     used by the Third-party Domain Configuration popup. We use a deliberately
     high value here so any stacking context (backdrop-filter, transform,
     filter etc.) on the parent can't trap the sub-modal below the parent. */
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
/* Confirm modal sits above any other modal-overlay (e.g. an Edit modal opens,
   then user clicks Delete from inside Edit — confirm has to layer above Edit). */
#confirmModal { z-index: 10100; }
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-xl);
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: modalIn .2s ease;
}
.modal > .modal-body { overflow-y: auto; flex: 1 1 auto; }
.modal-lg { max-width: 820px; }
.modal-xl { max-width: 1100px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-input); border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: 18px 22px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
}

/* ── STATUS DOTS ────────────────────────────────────────────────────────── */
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.status-dot.connected    { background: var(--brand-green); box-shadow: 0 0 5px var(--brand-green); }
.status-dot.disconnected { background: var(--text-dim); }
.status-dot.warning      { background: var(--brand-amber); animation: pulse-amber 2s infinite; }
.status-dot.error        { background: var(--brand-red); }

/* ── SCAN / LOG ─────────────────────────────────────────────────────────── */
.scan-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(124,58,237,.15);
  border-top-color: var(--brand-purple);
  animation: spin .7s linear infinite;
}
.scan-bar-wrap { background: rgba(255,255,255,.06); border-radius: 100px; overflow: hidden; height: 8px; }
.scan-bar-fill { height: 100%; background: var(--grad-purple); border-radius: 100px; transition: width .3s; }
.log-terminal {
  background: #0d0d12; border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-md); padding: 12px 14px;
  font-family: 'Fira Code', 'Consolas', monospace; font-size: .77rem;
  overflow-y: auto; height: 200px; scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.3) transparent;
}
.log-line { display: flex; gap: 8px; margin-bottom: 2px; }
.log-time  { color: #4a5568; flex-shrink: 0; }
.log-ok    { color: #68d391; }
.log-info  { color: #63b3ed; }
.log-warn  { color: #f6ad55; }
.log-error { color: #fc8181; }
.log-dim   { color: #4a5568; }

/* ── SCORE RINGS ────────────────────────────────────────────────────────── */
.score-ring {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
}
.score-ring svg { display: block; }
.score-ring .score-val { font-size: 1.2rem; font-weight: 900; line-height: 1; }
.score-ring .score-max { font-size: .65rem; color: var(--text-muted); }

/* ── CHART CONTAINERS ───────────────────────────────────────────────────── */
.chart-container { position: relative; width: 100%; }
.chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-legend-item { display: flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--text-secondary); cursor: pointer; }
.chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── LLM VISIBILITY TABLE (image 9) ─────────────────────────────────────── */
.llm-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.llm-row:last-child { border-bottom: none; }
.llm-platform-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.llm-platform-name { width: 100px; font-size: .84rem; font-weight: 600; }
.llm-bar-wrap { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 100px; overflow: hidden; }
.llm-bar { height: 100%; border-radius: 100px; }
.llm-pct { width: 40px; text-align: right; font-size: .78rem; font-weight: 700; }
.llm-sentiment { width: 36px; text-align: right; font-size: .78rem; }
.llm-sentiment.neg { color: var(--brand-red); }
.llm-sentiment.pos { color: var(--brand-green); }

/* ── DOMAIN METRICS BAR (image 9) ───────────────────────────────────────── */
.domain-metric-bar {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
}
.domain-metric-item {
  flex: 1; padding: 12px 14px; border-right: 1px solid var(--border);
  text-align: center; transition: var(--transition);
}
.domain-metric-item:last-child { border-right: none; }
.domain-metric-item:hover { background: rgba(255,255,255,.02); }
.domain-metric-label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 5px; }
.domain-metric-value { font-size: 1.1rem; font-weight: 900; }
.domain-metric-sub { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }

/* ── CONTENT GENIUS AGENT (image 19) ────────────────────────────────────── */
.genius-agent-hero {
  background: var(--grad-hero);
  border-radius: var(--radius-xl);
  padding: 48px 40px;
  text-align: center;
  margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.genius-agent-hero::before {
  content: ''; position: absolute;
  top: -80px; left: 50%; transform: translateX(-50%);
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(124,58,237,.2) 0%, transparent 70%);
  pointer-events: none;
}
.genius-agent-hero h1 {
  font-size: 2rem; font-weight: 900; margin-bottom: 6px;
}
.genius-chat-input {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-xl);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  margin: 20px auto;
  max-width: 680px;
  cursor: text; transition: var(--transition);
}
.genius-chat-input:hover { border-color: rgba(124,58,237,.3); }
.genius-chat-input input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-primary); font-size: .9rem;
}
.genius-chat-input input::placeholder { color: var(--text-muted); }

/* ── PROGRESS BARS (horizontal) ─────────────────────────────────────────── */
.h-bar-wrap { background: rgba(255,255,255,.06); border-radius: 100px; overflow: hidden; }
.h-bar { height: 6px; border-radius: 100px; transition: width 1s cubic-bezier(.4,0,.2,1); }

/* ── TABS ───────────────────────────────────────────────────────────────── */
.tab-container { }
.tab-nav {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px; overflow-x: auto; scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  padding: 9px 16px; font-size: .83rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  border: none; background: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: var(--transition);
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--brand-purple-lt); border-bottom-color: var(--brand-purple); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── PILLAR BARS (dashboard) ────────────────────────────────────────────── */
.pillar-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pillar-bar-track {
  width: 18px; height: 120px;
  background: rgba(255,255,255,.06); border-radius: 100px;
  overflow: hidden; position: relative;
}
.pillar-bar-fill {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 100px;
  transition: height 1.5s cubic-bezier(.4,0,.2,1);
}
.pillar-bar-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); text-align: center; }
.pillar-bar-score { font-size: .8rem; font-weight: 800; }

/* ── BREADCRUMB ─────────────────────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--brand-cyan); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--text-dim); }

/* ── KW CHIP ────────────────────────────────────────────────────────────── */
.kw-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(20,181,131,.1); border: 1px solid rgba(20,181,131,.2);
  color: var(--brand-cyan); padding: 2px 9px;
  border-radius: 6px; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.kw-chip .kw-meta { font-size: .66rem; color: var(--text-muted); }

/* ── EMPTY STATE ────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 48px 24px; color: var(--text-muted);
}
.empty-state-icon { font-size: 3rem; margin-bottom: 14px; display: block; opacity: .4; }
.empty-state h3 { font-size: 1rem; margin-bottom: 6px; color: var(--text-secondary); }
.empty-state p { font-size: .85rem; max-width: 320px; margin: 0 auto 16px; }

/* ── SPINNER ────────────────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1); border-top-color: var(--brand-purple-lt);
  animation: spin .7s linear infinite; display: inline-block;
}

/* ── GRADIENT TEXT ──────────────────────────────────────────────────────── */
.grad-text { background: var(--grad-purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.grad-text-cyan { background: var(--grad-cyan); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── UTILITY ────────────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--brand-green); }
.text-danger  { color: var(--brand-red); }
.text-purple  { color: var(--brand-purple-lt); }
.text-cyan    { color: var(--brand-cyan); }
.text-amber   { color: var(--brand-amber); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* ── ANIMATIONS ─────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes pulse-subtle { 0%,100% { box-shadow: 0 0 8px rgba(124,58,237,.3); } 50% { box-shadow: 0 0 18px rgba(124,58,237,.6); } }
@keyframes pulse-amber { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes modalIn { from { opacity: 0; transform: scale(.95) translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
.mobile-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: .9rem;
  cursor: pointer; flex-shrink: 0;
}
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  .panel-layout { grid-template-columns: 1fr; }
  .panel-layout.sidebar-expanded { grid-template-columns: 1fr; }
  .topbar { left: 0 !important; grid-column: 1; }
  .sidebar ~ .topbar { left: 0 !important; }
  .main-content { margin-left: 0 !important; grid-column: 1; }

  .sidebar {
    transform: translateX(-100%);
    width: 220px !important;
    transition: transform .25s ease;
    z-index: 500;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .sidebar.expanded { width: 220px !important; }
  .mobile-hamburger { display: flex; }
  .topbar-atlas-brain { display: none; }
  .topbar-search { max-width: 180px; }
}

@media (max-width: 768px) {
  .main-content { padding: 14px; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar-search { max-width: 140px; }
  .topbar-quota { display: none; }

  /* Dashboard project table → scroll horizontally */
  .active-project-row {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 600px;
  }
  .active-project-cell {
    min-width: 110px;
    flex-shrink: 0;
  }
  /* Wrap in scrollable container */
  .card > .active-project-row,
  .card [style*="active-project-row"] { min-width: 600px; }

  /* Stack grids */
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] { display: block !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr 1fr !important; }

  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal { margin: 16px; width: calc(100% - 32px) !important; max-width: 100% !important; }
  .page-header h1 { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr !important; }
  .topbar-user span { display: none; }
  .topbar-action-btn { width: 28px; height: 28px; }
}

/* ============================================================
   GLOBAL RESPONSIVE PASS — authenticated app pages
   Applies app-wide so page content adapts on phones/tablets.
   ============================================================ */
@media (max-width: 900px) {
  /* Any data table scrolls horizontally instead of breaking the layout.
     display:block makes the <table> its own scroll box; the rows/cells keep
     their table-internal display so columns still align. */
  .main-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .main-content .table-wrap, .main-content .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Long unbreakable strings (URLs, tokens, endpoints in <code>) wrap instead
     of pushing the layout wider than the viewport; <pre> scrolls. */
  .main-content code, .main-content .mono, .main-content kbd { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
  .main-content pre { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; white-space: pre-wrap; word-break: break-word; }

  /* Long content inside cards, grids, tables and lists wraps so EVERYTHING
     stays visible on a phone — long titles/emails/URLs/values never get
     clipped or pushed off-screen. Only breaks a word when it would otherwise
     overflow, so normal text is untouched. Elements that intentionally
     truncate (white-space:nowrap + ellipsis) keep doing so. */
  .main-content .card, .main-content [class*="card"], .main-content [class*="grid"] > *,
  .main-content td, .main-content th, .main-content li,
  .main-content p, .main-content h1, .main-content h2, .main-content h3, .main-content h4,
  .main-content .stat-val, .main-content [class*="-val"], .main-content [class*="-label"], .main-content [class*="-name"] {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* Inputs / selects / textareas never exceed the viewport */
  .main-content .form-control, .main-content .form-select, .main-content .form-input,
  .main-content input[type=text], .main-content input[type=email], .main-content input[type=url],
  .main-content input[type=password], .main-content input[type=number], .main-content input[type=search],
  .main-content input[type=tel], .main-content input[type=date], .main-content select, .main-content textarea { max-width: 100%; }

  /* Tab / pill strips scroll instead of overflowing */
  .main-content .tab-nav, .main-content .ak-tabs, .main-content .tabs, .main-content .tab-container .tab-nav {
    overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
  }
  .main-content .tab-nav::-webkit-scrollbar, .main-content .ak-tabs::-webkit-scrollbar { height: 0; }
}
@media (max-width: 768px) {
  /* One more inline-grid pattern: repeat(2,...) → single column */
  .main-content [style*="grid-template-columns:repeat(2"],
  .main-content [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
  /* Two-column asymmetric layouts stack */
  .main-content [style*="grid-template-columns:1.4fr"],
  .main-content [style*="grid-template-columns: 1.4fr"],
  .main-content [style*="grid-template-columns:1.5fr"],
  .main-content [style*="grid-template-columns: 1.5fr"] { grid-template-columns: 1fr !important; }
  .main-content .card { padding: 16px; }
}
@media (max-width: 480px) {
  .main-content .card { padding: 14px; }
}

/* ============================================================
   PAGE-SPECIFIC COMPONENT PATTERNS (mobile audit)
   Fixes the exact overflow sources found by the @390px audit:
   class-based KPI grids, plan grid, fixed-px internal sidebars,
   full-bleed negative margins, wide report cards, 6-8 col grids.
   ============================================================ */
@media (max-width: 768px) {
  /* Class-based KPI / metric card rows (e.g. .pg-kpi-grid, .bl-kpi-grid,
     .llm-kpi-grid) that hardcode repeat(5,1fr) → 2-up */
  .main-content [class*="kpi-grid"] { grid-template-columns: repeat(2,1fr) !important; }

  /* Billing plan comparison + engine grids → single column */
  .main-content .plan-grid,
  .main-content .llm-engine-grid { grid-template-columns: 1fr !important; }
  /* Grid items default to min-width:auto and refuse to shrink below their
     content; min-width:0 lets the plan/usage cards fit the column. */
  .main-content .plan-grid > *,
  .main-content .plan-grid > * > * { min-width: 0 !important; }
  .main-content .mp-card { min-width: 0 !important; max-width: 100% !important; }
  .main-content .mp-plan-badge,
  .main-content .mp-btn-row { flex-wrap: wrap; max-width: 100%; }

  /* Higher inline column counts (Seo/Scan repeat(7) etc.) → 2-up */
  .main-content [style*="grid-template-columns:repeat(6"],
  .main-content [style*="grid-template-columns: repeat(6"],
  .main-content [style*="grid-template-columns:repeat(7"],
  .main-content [style*="grid-template-columns: repeat(7"],
  .main-content [style*="grid-template-columns:repeat(8"],
  .main-content [style*="grid-template-columns: repeat(8"] { grid-template-columns: 1fr 1fr !important; }

  /* Fixed-width internal sidebar / master-detail layouts (200-360px + 1fr)
     used by Social/Local/Authority section navs, Deploy Console, etc.
     → stack vertically */
  .main-content [style*="grid-template-columns:200px"],
  .main-content [style*="grid-template-columns: 200px"],
  .main-content [style*="grid-template-columns:220px"],
  .main-content [style*="grid-template-columns: 220px"],
  .main-content [style*="grid-template-columns:240px"],
  .main-content [style*="grid-template-columns: 240px"],
  .main-content [style*="grid-template-columns:260px"],
  .main-content [style*="grid-template-columns: 260px"],
  .main-content [style*="grid-template-columns:280px"],
  .main-content [style*="grid-template-columns: 280px"],
  .main-content [style*="grid-template-columns:300px"],
  .main-content [style*="grid-template-columns: 300px"],
  .main-content [style*="grid-template-columns:320px"],
  .main-content [style*="grid-template-columns: 320px"],
  .main-content [style*="grid-template-columns:340px"],
  .main-content [style*="grid-template-columns: 340px"],
  .main-content [style*="grid-template-columns:360px"],
  .main-content [style*="grid-template-columns: 360px"] { display: block !important; }

  /* Class-based multi-column grids that don't collapse on their own → stack.
     .dc-grid (Deploy Console), .llm-grid-2/3 (LLM Setup), etc. */
  .main-content .dc-grid,
  .main-content .llm-grid-2,
  .main-content .llm-grid-3 { grid-template-columns: 1fr !important; }

  /* Grid children default to min-width:auto and refuse to shrink below their
     content, forcing the parent wider than the viewport. Let them shrink so
     wide content wraps/scrolls internally instead. Applies app-wide. */
  .main-content [style*="grid-template-columns"] > *,
  .main-content .llm-card,
  .main-content .dc-detail,
  .main-content .dc-grid > * { min-width: 0 !important; }

  /* Stat/hero strips wrap instead of overflowing */
  .main-content .opa-hero-stats { flex-wrap: wrap; width: 100%; }

  /* Shared OPA hero (SiteMetrics, Authority, LLM Setup, On-Page Audit):
     stack the stats column and let text/stats shrink below their min-width */
  .main-content .opa-hero-text { min-width: 0 !important; }
  .main-content .opa-hero-right { width: 100%; align-items: stretch; }
  .main-content .opa-hero-stat { min-width: 0 !important; flex: 1 1 calc(50% - 6px); }

  /* Class-based fixed-column stat grids (Backlinks summary, SEO pillars) → 2-up */
  .main-content .bl-summary,
  .main-content .pillar-grid { grid-template-columns: 1fr 1fr !important; }
  .main-content .pillar-card { min-width: 0 !important; }

  /* Full-bleed wrappers pull negative horizontal margins to cancel the
     content padding. On mobile that padding is 14px, so -24px overshoots
     the viewport (~10-24px of horizontal scroll). Match it to -14px. */
  .main-content [style*="margin:-20px -24px"],
  .main-content [style*="margin: -20px -24px"],
  .main-content [style*="margin:-24px"],
  .main-content [style*="margin: -24px"],
  .main-content [style*="margin:0 -24px"],
  .main-content [style*="margin: 0 -24px"],
  .main-content .fest-layout { margin-left: -14px !important; margin-right: -14px !important; }

  /* Wide report/analytics cards holding a table scroll internally */
  .main-content .rpt-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}
/* Auto-fit/auto-fill grids whose minimum track is wider than a phone
   (e.g. Reports cards use minmax(380px,1fr)) collapse to one column so the
   track can't force the page wider than the viewport. Scoped to <=600 so
   tablets keep their multi-column layout where it genuinely fits. */
@media (max-width: 600px) {
  .main-content [style*="minmax(300px"],
  .main-content [style*="minmax(320px"],
  .main-content [style*="minmax(340px"],
  .main-content [style*="minmax(360px"],
  .main-content [style*="minmax(380px"],
  .main-content [style*="minmax(400px"],
  .main-content [style*="minmax(420px"],
  .main-content [style*="minmax(440px"],
  .main-content [style*="minmax(460px"],
  .main-content [style*="minmax(480px"],
  .main-content [style*="minmax(500px"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  /* On the smallest phones, KPI cards + stat grids go full width */
  .main-content [class*="kpi-grid"] { grid-template-columns: 1fr !important; }
  .main-content .bl-summary { grid-template-columns: 1fr !important; }
}

/* ============================================================
   LAYOUT COMPATIBILITY OVERRIDES
   Neutralise old CSS-Grid panel-layout rules; new shell uses Flexbox
   ============================================================ */

/* Old grid container — override to flex column so new .app-shell works */
.panel-layout {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Topbar: was grid-column:1/-1; sticky inside flex column */
.topbar {
  grid-column: unset !important;
  position: sticky !important;
  top: 0;
  z-index: 50;
}

/* Sidebar: flex child of .app-body — NOT fixed, flows naturally */
.sidebar {
  grid-row: unset !important;
  grid-column: unset !important;
  position: relative !important;
}

/* Main content: flex child — fills all remaining space next to sidebar */
.main-content {
  grid-column: unset !important;
  grid-row: unset !important;
  flex: 1 !important;
  min-width: 0 !important;
  /* No margin-left needed — sidebar is a flex sibling and pushes content naturally */
}

/* ============================================================
   NEW LAYOUT SHELL  (.app-shell / .app-body)
   ============================================================ */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ============================================================
   ANNOUNCEMENT BANNER
   ============================================================ */
#announcementBanner {
  width: 100%;
  background: var(--teal, #0eb8b8);
  color: #fff;
  font-size: 0.85rem;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 300;
}
#announcementBanner a { color: #fff; font-weight: 600; text-decoration: underline; }
#announcementBanner .banner-dismiss {
  position: absolute; right: 14px;
  background: none; border: none; color: #fff;
  font-size: 1.1rem; cursor: pointer; line-height: 1;
  padding: 0 4px;
}

/* ============================================================
   SIDEBAR COLLAPSE BUTTON
   ============================================================ */
.sidebar-collapse-btn {
  position: absolute;
  right: -12px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 110;
  font-size: 10px; color: var(--text-muted, #888);
  transition: background 0.15s, color 0.15s;
}
.sidebar-collapse-btn:hover { background: var(--accent, #6c47ff); color: #fff; }

/* ============================================================
   SIDEBAR SUBMENUS
   ============================================================ */
.nav-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.nav-sub.open { max-height: 400px; }
.nav-sub-item {
  display: block;
  padding: 6px 16px 6px 42px;
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav-sub-item:hover,
.nav-sub-item.active { background: rgba(124,58,237,.12); color: var(--brand-purple-lt); }

/* Hide submenus in collapsed sidebar */
.sidebar.collapsed .nav-sub-item {
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   QUOTA DROPDOWN  (.quota-row dot+text style)
   ============================================================ */
.quota-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 0.78rem; color: var(--text-muted, #888);
}
.quota-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.quota-dot.green { background: #22c55e; }
.quota-dot.yellow { background: #f59e0b; }
.quota-dot.red { background: #ef4444; }

/* ============================================================
   NOTIFICATION PANEL  (#notifPanel) — dark theme
   ============================================================ */
#notifPanel {
  position: fixed; right: 16px; top: calc(var(--topbar-h, 52px) + 8px);
  width: 380px; background: var(--bg-card2);
  border: 1px solid var(--border-hover);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  z-index: 500; display: none; flex-direction: column; overflow: hidden;
  animation: notifSlideIn .18s ease;
}
@keyframes notifSlideIn { from { opacity:0; transform: translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
#notifPanel.open { display: flex !important; }
.notif-empty { text-align: center; color: var(--text-muted); font-size: 0.82rem; padding: 24px 0; }

/* ============================================================
   PROJECT CARDS  (.proj-card)
   ============================================================ */
.proj-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.proj-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.proj-metrics {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.proj-metric {
  padding: 14px 16px; text-align: center;
  border-right: 1px solid var(--border);
}
.proj-metric:last-child { border-right: none; }
.proj-metric-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #888); margin-bottom: 4px; }
.proj-metric-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }

/* ============================================================
   SETTINGS SIDEBAR  (.settings-sidebar)
   ============================================================ */
.settings-sidebar {
  width: 200px; flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 0;
  align-self: flex-start; position: sticky; top: 72px;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; font-size: 0.83rem; color: var(--text-muted, #888);
  text-decoration: none; border-radius: 0; transition: background 0.15s, color 0.15s;
}
.settings-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-nav-item.active { background: var(--nav-active-bg, rgba(108,71,255,.1)); color: var(--brand-purple-lt); font-weight: 600; }

/* ============================================================
   PROFILE SAVE BAR
   ============================================================ */
.profile-save-bar {
  position: sticky; bottom: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  z-index: 50;
}

/* ============================================================
   AI SEO / SERPilot AI  (.serpilot-wizard, .quota-bar)
   ============================================================ */
.quota-bar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 20px;
  font-size: 0.83rem;
}
.serpilot-wizard {
  display: flex; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  background: var(--bg-card);
}
.wizard-steps-col {
  width: 200px; flex-shrink: 0;
  background: linear-gradient(160deg, #7c3aed 0%, #4f46e5 100%);
  padding: 24px 16px; color: #fff;
}
.wizard-step-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; font-size: 0.82rem;
  opacity: 0.6; transition: opacity 0.2s;
}
.wizard-step-item.active { opacity: 1; font-weight: 600; }
.wizard-content-col { flex: 1; padding: 28px 24px; }

/* ============================================================
   MORE FEATURES PANEL
   ============================================================ */
#moreFeaturesPanel {
  display: none; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 16px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px;
  margin-top: 12px;
}
#moreFeaturesPanel.open { display: grid; }
.feature-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 10px; border-radius: 10px; text-align: center;
  text-decoration: none; color: var(--text-primary); font-size: 0.78rem;
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.feature-card:hover { background: var(--bg-hover); border-color: var(--brand-purple-lt); }
.feature-card-icon { font-size: 1.4rem; }

/* ============================================================
   KEYWORD TRACKER PAGE EXTRAS
   ============================================================ */
.intent-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; color: #fff;
}
.intent-badge.C { background: #3b82f6; }
.intent-badge.I { background: #f59e0b; }
.intent-badge.T { background: #22c55e; }
.intent-badge.N { background: #8b5cf6; }

.kw-diff.pos { color: #22c55e; }
.kw-diff.neg { color: #ef4444; }

.kw-sub-nav {
  display: flex; flex-direction: column; gap: 2px;
  width: 160px; flex-shrink: 0;
  padding: 8px 0;
}
.kw-sub-nav a {
  padding: 8px 14px; font-size: 0.82rem;
  color: var(--text-muted, #888); text-decoration: none;
  border-radius: 8px; transition: background 0.15s, color 0.15s;
}
.kw-sub-nav a:hover,
.kw-sub-nav a.active { background: var(--nav-active-bg, rgba(108,71,255,.1)); color: var(--brand-purple-lt); font-weight: 600; }

/* ============================================================
   SITE METRICS EXTRAS
   ============================================================ */
.dm-strip {
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin-bottom: 16px;
}
.dm-cell {
  padding: 12px 10px; text-align: center;
  border-right: 1px solid var(--border);
}
.dm-cell:last-child { border-right: none; }
.dm-cell-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #888); margin-bottom: 3px; }
.dm-cell-value { font-size: 0.95rem; font-weight: 700; }

.seo-pillar-bar-wrap {
  height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-top: 4px;
}
.seo-pillar-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

/* ============================================================
   TOGGLE SWITCH UTILITY
   ============================================================ */
/* toggle-switch duplicate removed — canonical definition at line 634 */

/* ============================================================
   FORM SELECT UTILITY
   ============================================================ */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px !important;
}

/* ============================================================
   RESPONSIVE — new layout breakpoints
   ============================================================ */
@media (max-width: 1100px) {
  .dm-strip { grid-template-columns: repeat(5, 1fr); }
  .proj-metrics { grid-template-columns: repeat(3, 1fr); }
  .proj-metric { border-bottom: 1px solid var(--border); }
}

@media (max-width: 900px) {
  .settings-sidebar { display: none; }
  .wizard-steps-col { display: none; }
  .kw-sub-nav { display: none; }
  #moreFeaturesPanel { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .dm-strip { grid-template-columns: repeat(3, 1fr); }
  .proj-metrics { grid-template-columns: repeat(2, 1fr); }
  #moreFeaturesPanel { grid-template-columns: repeat(2, 1fr); }
  #notifPanel { width: calc(100vw - 24px); right: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   UI/UX PRO MAX  — Glassmorphism 2.0, Micro-interactions, Animations
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Enhanced animations ───────────────────────────────────────────────── */
@keyframes fadeSlideUp   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fadeSlideIn   { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes glowPulse     { 0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); } 50% { box-shadow: 0 0 18px 4px rgba(124,58,237,.22); } }
@keyframes shimmerSweep  { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes borderGlow    { 0%,100% { border-color: rgba(124,58,237,.3); } 50% { border-color: rgba(168,85,247,.7); } }
@keyframes slideDown     { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes revealKey     { from { letter-spacing: -.1em; opacity:.5; } to { letter-spacing: normal; opacity:1; } }

/* ── Page-enter: cards and rows animate in on load ─────────────────────── */
.card, .stat-card, .metric-card {
  animation: fadeSlideUp .3s ease both;
}
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card:nth-child(4) { animation-delay: .12s; }

/* ── Glassmorphism card variant ─────────────────────────────────────────── */
.card-glass {
  background: rgba(19,19,32,.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
}
.card-glass:hover {
  border-color: rgba(124,58,237,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(124,58,237,.12);
}

/* ── Improved card hover glow ───────────────────────────────────────────── */
.card:hover, .stat-card:hover, .metric-card:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(124,58,237,.08);
}

/* ── Drawer panels (connection config, etc.) ────────────────────────────── */
[id^="drawer-"] {
  animation: slideDown .18s ease;
}

/* ── Enhanced form inputs ───────────────────────────────────────────────── */
.form-control:focus {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15), 0 1px 4px rgba(124,58,237,.1);
  background: var(--bg-card);
}
.form-select:focus {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
textarea.form-control:focus {
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}

/* Masked API key display */
input[data-masked="true"] {
  color: var(--text-muted);
  font-family: 'Fira Code', 'Consolas', monospace;
  letter-spacing: .04em;
  background: rgba(124,58,237,.05);
  border-color: rgba(124,58,237,.2);
  animation: revealKey .3s ease;
}
input[data-masked="true"]:focus {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--brand-purple);
  letter-spacing: normal;
}

/* ── Button micro-interactions ──────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.15) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(.97); }
.btn-primary:hover { box-shadow: 0 6px 24px rgba(124,58,237,.45), 0 2px 8px rgba(0,0,0,.2); }
.btn-primary:active { box-shadow: 0 2px 8px rgba(124,58,237,.3); }

/* Shine sweep on primary buttons */
.btn-primary::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .5s ease;
}
.btn-primary:hover::before { left: 150%; }

/* ── Navigation item active indicator ──────────────────────────────────── */
.nav-icon-item.active::before {
  content: '';
  position: absolute; left: -1px; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand-purple-lt);
  animation: fadeSlideIn .2s ease;
}

/* ── Sub-panel items ────────────────────────────────────────────────────── */
.sub-panel-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateX(2px);
}
.sub-panel-item.active {
  background: rgba(124,58,237,.12);
  color: var(--brand-purple-lt);
  border-left: 2px solid var(--brand-purple);
  padding-left: 10px;
}

/* ── Topbar enhancements ────────────────────────────────────────────────── */
.topbar {
  background: rgba(15,15,24,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.topbar-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.topbar-action-btn.notif-active {
  background: rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.35);
  color: var(--brand-purple-lt);
  animation: glowPulse 2s infinite;
}

/* ── Status dots — animated ─────────────────────────────────────────────── */
.status-dot.connected::after {
  content: ''; position: absolute;
  inset: -3px; border-radius: 50%;
  background: rgba(16,185,129,.25);
  animation: glowPulse 2s infinite;
}
.status-dot { position: relative; }

/* ── Skeleton shimmer ───────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmerSweep 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Provider row (connection config) ───────────────────────────────────── */
.provider-row {
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.provider-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255,255,255,.04);
}

/* ── Log terminal — improved ────────────────────────────────────────────── */
.log-terminal {
  background: #080810;
  border: 1px solid rgba(124,58,237,.15);
  box-shadow: inset 0 2px 12px rgba(0,0,0,.3);
}
.log-line { animation: fadeSlideIn .15s ease both; }
.log-ok    { color: #4ade80; }
.log-info  { color: #60a5fa; }
.log-warn  { color: #fbbf24; }
.log-error { color: #f87171; }
.log-step  { color: var(--brand-purple-lt); font-weight: 700; }

/* ── Metric cards — gradient accent line ───────────────────────────────── */
.metric-card { position: relative; overflow: hidden; }
.metric-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-purple); opacity: 0; transition: opacity .25s;
}
.metric-card:hover::before { opacity: 1; }

/* ── Badge pulse for active status ──────────────────────────────────────── */
@keyframes badgePulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }
.badge-live { animation: badgePulse 1.8s infinite; }

/* ── Toggle switch — enhanced ───────────────────────────────────────────── */
.toggle-switch input:checked + .toggle-slider {
  background: rgba(124,58,237,.4);
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
}
.toggle-slider::before { box-shadow: 0 1px 4px rgba(0,0,0,.3); }
[data-theme="light"] .toggle-slider { background: #ddd; border-color: #ccc; }
[data-theme="light"] .toggle-slider::before { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
[data-theme="light"] .toggle-switch input:checked + .toggle-slider { background: var(--brand-purple); border-color: var(--brand-purple); }
[data-theme="light"] .toggle-switch input:checked + .toggle-slider::before { background: #fff; }

/* ── Scrollbar global style ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,58,237,.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,.45); }
* { scrollbar-width: thin; scrollbar-color: rgba(124,58,237,.25) transparent; }

/* ── Feature card dark fix ───────────────────────────────────────────────── */
.feature-card {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-secondary);
  transition: background .15s, border-color .2s, transform .15s, box-shadow .2s;
}
.feature-card:hover {
  background: var(--bg-hover);
  border-color: var(--brand-purple);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(124,58,237,.15);
}

/* ── Settings sidebar dark fix ──────────────────────────────────────────── */
.settings-sidebar {
  background: var(--bg-card);
  border-color: var(--border);
}
.settings-nav-item { color: var(--text-muted); }
.settings-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-nav-item.active { background: rgba(124,58,237,.12); color: var(--brand-purple-lt); }

/* ── Profile save bar dark fix ──────────────────────────────────────────── */
.profile-save-bar {
  background: var(--bg-surface);
  border-top-color: var(--border);
}

/* ── proj-card / dm-strip dark fixes ────────────────────────────────────── */
.proj-card { background: var(--bg-card); border-color: var(--border); }
.proj-card-header { border-bottom-color: var(--border); }
.proj-metric { border-right-color: var(--border); }
.proj-metric-value { color: var(--text-primary); }
.dm-strip { border-color: var(--border); }
.dm-cell { border-right-color: var(--border); }
.seo-pillar-bar-wrap { background: var(--bg-hover); }

/* ── Reduced-motion respect ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE SAFETY NET  (added for full mobile responsiveness)
   Many pages use inline `grid-template-columns:repeat(N,1fr)` for stat/card
   rows. On phones those N-column grids overflow or squash. Attribute selectors
   + !important let us collapse them to a sensible column count without editing
   every inline style. repeat(N,1fr) is always equal-width cards, so 2 columns
   (1 on very small screens) is a safe, readable mobile default.
   ═════════════════════════════════════════════════════════════════════════ */
/* Tablet (portrait + landscape, 769–1024px): very wide N-column grids reduce
   to 3 columns so cards stay legible before the phone 2-column breakpoint. */
@media (max-width: 1024px) {
  .main-content [style*="repeat(5,"], .main-content [style*="repeat(6,"],
  .main-content [style*="repeat(7,"], .main-content [style*="repeat(8,"],
  .main-content [style*="repeat(9,"], .main-content [style*="repeat(10,"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* Wide right/left rails narrow before they get cramped */
  .main-content [style*="1fr 340px"], .main-content [style*="1fr 320px"],
  .main-content [style*="340px 1fr"], .main-content [style*="320px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 700px) {
  /* ── SMALL STAT-TILE grids → 2 per row on mobile. We ONLY force grids that
     are clearly compact number tiles: fixed repeat(3..10) counts + grids named
     kpi/stat/score/metric/bento/engine/summary. We deliberately do NOT touch
     inline `repeat(auto-fit/auto-fill, minmax())` grids — those are responsive
     by design and let CONTENT-heavy cards (dashboard modules, social posts,
     blog cards) reflow to ONE per row on a phone, which reads far better. */
  .main-content [style*="repeat(3,"], .main-content [style*="repeat(4,"],
  .main-content [style*="repeat(5,"], .main-content [style*="repeat(6,"],
  .main-content [style*="repeat(7,"], .main-content [style*="repeat(8,"],
  .main-content [style*="repeat(9,"], .main-content [style*="repeat(10,"],
  .main-content [class*="kpi-grid"], .main-content [class*="kpi-row"], .main-content [class*="kpis"],
  .main-content [class*="stat-bar"], .main-content [class*="stat-row"], .main-content [class*="stat-grid"],
  .main-content [class*="stats"], .main-content [class*="hero-stats"],
  .main-content [class*="score-grid"], .main-content [class*="scores"],
  .main-content [class*="metric-grid"], .main-content [class*="metrics"],
  .main-content [class*="bento"], .main-content [class*="engine-grid"],
  .main-content [class*="summary-grid"], .main-content [class*="breakdown-grid"],
  .main-content [class*="assistant-grid"], .main-content [class*="aeo-grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* ── DATA TABLES: the root problem is columns shrinking to a few px on a
     phone, which makes short words char-wrap vertically ("D-E-P-L-O-Y") and
     long cells overlap the next column. Fix = a generous min-width so every
     column has real room and the table scrolls horizontally inside its wrapper.
     Headers stay on one line; cell text wraps normally (word-level), never
     char-by-char and never overlapping. */
  .main-content .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .main-content .table-wrap > table,
  .main-content table.data-table,
  .main-content table.table { min-width: 720px !important; table-layout: auto !important; }
  .main-content .table-wrap th,
  .main-content table.data-table th,
  .main-content table.table th { white-space: nowrap !important; }
  .main-content .table-wrap td,
  .main-content table.data-table td,
  .main-content table.table td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere;
  }

  /* ── ANY data table becomes its OWN horizontal scroll container on mobile,
     whether or not it sits inside a .table-wrap. display:block turns the table
     element into a scrollable block while its rows keep the table grid, so wide
     tables scroll instead of overflowing the page or char-wrapping. This covers
     the many named tables that were NOT wrapped: geo-table, llm-table, sf-table,
     scan-hist tables, data-table, etc. (fixes #16, #17, #18–24). */
  .main-content table.data-table,
  .main-content table.table,
  .main-content table.geo-table,
  .main-content table.llm-table,
  .main-content table[class*="-table"],
  .main-content table[class*="hist"],
  .main-content .table-wrap > table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  /* Give the inner grid a real minimum so columns have room and the block above
     actually scrolls, instead of the cells squishing to slivers. thead/tbody are
     forced back to table layout (display:block on the table can drop it). */
  .main-content table.geo-table,
  .main-content table.llm-table,
  .main-content table[class*="-table"]:not(.no-mobile-scroll),
  .main-content table[class*="hist"] {
    min-width: 640px !important;
  }
  .main-content table[class*="-table"] > thead,
  .main-content table.geo-table > thead { display: table-header-group; }
  .main-content table[class*="-table"] > tbody,
  .main-content table.geo-table > tbody { display: table-row-group; }

  /* ── History / library / job-list grids (DIV-based, not tables) stack to one
     column on mobile instead of squishing their columns to slivers. Covers the
     AEO/GEO job-history and library grids (#18–24). */
  .main-content [class*="hist-grid"], .main-content [class*="history-grid"],
  .main-content [class*="-history"], .main-content [class*="job-history"],
  .main-content [class*="library-grid"], .main-content [class*="lib-grid"],
  .main-content [class*="conversation-grid"], .main-content [class*="convo-grid"],
  .main-content [class*="brief-grid"], .main-content [class*="paa-grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ── CONTENT-HEAVY card grids → ONE per row on mobile (readable, not cramped):
     dashboard module cards, social post cards, blog/post card grids. */
  .main-content .dash-module-cards,
  .main-content [class*="post-grid"], .main-content [class*="posts-grid"],
  .main-content [class*="card-grid"], .main-content [class*="blog-grid"],
  .main-content [class*="soc-card"], .main-content [class*="gp-grid"] {
    grid-template-columns: 1fr !important;
  }

  /* In-page SIDEBAR layouts (fixed-width nav/rail + fluid content) stack so the
     content column isn't crushed. Only real sidebars (>=180px); small icon
     columns (34-140px) stay beside their label. Left + right variants. */
  .main-content [style*="180px 1fr"], .main-content [style*="200px 1fr"],
  .main-content [style*="220px 1fr"], .main-content [style*="240px 1fr"],
  .main-content [style*="260px 1fr"], .main-content [style*="280px 1fr"],
  .main-content [style*="300px 1fr"], .main-content [style*="320px 1fr"],
  .main-content [style*="340px 1fr"],
  .main-content [style*="1fr 260px"], .main-content [style*="1fr 280px"],
  .main-content [style*="1fr 300px"], .main-content [style*="1fr 320px"],
  .main-content [style*="1fr 340px"] {
    grid-template-columns: 1fr !important;
  }
  /* Neutralise full-bleed negative margins so a stacked sidebar can't scroll sideways. */
  .main-content [style*="margin:-20px -24px"] { margin-left: 0 !important; margin-right: 0 !important; }
}
/* Very small phones (<=380px): 3 tiles get cramped, so drop stat tiles to 2
   columns (never 1 — the user wants 2-3 per row). */
@media (max-width: 380px) {
  .main-content [style*="repeat(3,"], .main-content [style*="repeat(4,"],
  .main-content [style*="repeat(5,"], .main-content [style*="repeat(6,"],
  .main-content [class*="kpi-grid"], .main-content [class*="kpi-row"], .main-content [class*="kpis"],
  .main-content [class*="stat-bar"], .main-content [class*="stat-row"], .main-content [class*="stat-grid"],
  .main-content [class*="stats"], .main-content [class*="score-grid"], .main-content [class*="scores"],
  .main-content [class*="metric-grid"], .main-content [class*="metrics"],
  .main-content [class*="bento"], .main-content [class*="engine-grid"],
  .main-content [class*="summary-grid"], .main-content [class*="aeo-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Two-column CONTENT grids (inline "1fr 1fr") — config forms, side-by-side card
   pairs, oauth-app panels — collapse to a single column on phones so nothing is
   crushed. Compact stat tiles use named classes and keep their multi-column
   layout via the rules above. Helps SocialApps, admin config, Jobs. (#8,#9,#10) */
@media (max-width: 560px) {
  .main-content [style*="grid-template-columns:1fr 1fr"],
  .main-content [style*="grid-template-columns: 1fr 1fr"],
  .main-content [style*="grid-template-columns:1fr 1fr 1fr"],
  .main-content [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE REFINEMENT (ui-ux-pro-max) — make phone screens minimal,
   compact and scannable. Desktop is untouched; these only apply <=700px.
   Targets the two recurring complaints: (1) hero blocks that eat the whole
   first screen, and (2) text-heavy table rows that render very tall.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* 1. Heroes: shrink to a compact banner so content is reachable without a
        long scroll. Matches any hero-ish block + the shared _OpaHero partial. */
  .main-content .opa-hero,
  .main-content [class$="-hero"],
  .main-content .geo-hero,
  .main-content .soc-hero,
  .main-content .admin-hero {
    padding: 14px 14px !important;
    min-height: 0 !important;
  }
  .main-content [class$="-hero"] h1,
  .main-content .opa-hero h1, .main-content .geo-hero h1 {
    font-size: 1.12rem !important; line-height: 1.25 !important; margin-bottom: 5px !important;
  }
  .main-content [class$="-hero"] > p,
  .main-content .opa-hero p, .main-content .geo-hero p {
    font-size: .78rem !important; line-height: 1.4 !important; margin-bottom: 8px !important;
  }
  /* Some heroes embed big stat boxes (e.g. Site Metrics overview) which make
     them very tall. Compact those inner tiles so the hero stays a slim banner. */
  .main-content [class$="-hero"] [class*="stat"],
  .main-content [class$="-hero"] [class*="score"],
  .main-content [class$="-hero"] [class*="kpi"] {
    padding: 10px 12px !important; min-height: 0 !important;
  }
  .main-content [class$="-hero"] [class*="stat"] [class$="value"],
  .main-content [class$="-hero"] [class*="stat"] [class$="num"],
  .main-content [class$="-hero"] .stat-value {
    font-size: 1.25rem !important;
  }
  /* Shared _OpaHero partial stat chips (used on most pages: Keywords, Pages,
     On-Page Audit, etc.) — make them small chips so the hero stays a slim
     banner instead of a tall panel. */
  .main-content .opa-hero { padding: 12px 14px !important; }
  .main-content .opa-hero-stats { gap: 8px !important; margin-top: 10px !important; }
  .main-content .opa-hero-stat {
    padding: 8px 12px !important; min-width: 0 !important; flex: 1 1 auto; border-radius: 9px;
  }
  .main-content .opa-hero-stat-val { font-size: 1.05rem !important; }
  .main-content .opa-hero-stat-lbl { font-size: .58rem !important; margin-top: 3px !important; }

  /* 2. Data tables: compact cells so text-heavy rows aren't oversized, and a
        readable minimum type size. Tables still scroll inside .table-wrap. */
  .main-content .table-wrap table th,
  .main-content .table-wrap table td,
  .main-content table.data-table th,
  .main-content table.data-table td {
    padding: 8px 10px !important;
    font-size: .8rem !important;
    line-height: 1.35 !important;
  }

  /* 3. Clean list-row pattern (like the reference blog/social lists): any row
        built as a flex line stays a single tidy row — icon/thumb left, text
        that ellipsises, meta + badge right — instead of ballooning in height.
        Long single-line labels truncate rather than wrap to many lines. */
  .main-content .list-row,
  .main-content .row-item,
  .main-content .review-card,
  .main-content .gmb-post-card { gap: 10px; }
  .main-content .ellipsis-1 {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }

  /* 4. Trim big number tiles so 2-per-row stat cards stay short, not tall. */
  .main-content [class*="stat"] .stat-value,
  .main-content [class*="kpi"] [class$="-num"],
  .main-content [class*="stat"] [class$="-num"] { font-size: 1.2rem !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SLIMMER _OpaHero AT ALL WIDTHS (user request: reduce hero height + shrink the
   Tracked/Top-10 style stat chips). Lives here in the static stylesheet so it
   applies live without a view rebuild. Higher specificity (.main-content …)
   overrides the partial's own inline <style>. Mobile (<=700) rules further
   below/above shrink it even more.
   ═════════════════════════════════════════════════════════════════════════ */
.main-content .opa-hero { padding: 18px 22px 16px !important; margin-bottom: 14px !important; }
.main-content .opa-hero h1 { font-size: 1.35rem !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
.main-content .opa-hero p { font-size: .84rem !important; line-height: 1.5 !important; }
.main-content .opa-hero-stats { gap: 10px !important; }
.main-content .opa-hero-stat { padding: 8px 13px !important; min-width: 82px !important; border-radius: 9px !important; }
.main-content .opa-hero-stat-val { font-size: 1.05rem !important; }
.main-content .opa-hero-stat-lbl { font-size: .58rem !important; margin-top: 3px !important; }
@media (max-width: 700px) {
  .main-content .opa-hero { padding: 13px 15px !important; }
  .main-content .opa-hero h1 { font-size: 1.12rem !important; }
  .main-content .opa-hero p { font-size: .78rem !important; }
  /* Small content-sized chips (do NOT stretch full width). */
  .main-content .opa-hero-stats { justify-content: flex-start !important; gap: 8px !important; }
  .main-content .opa-hero-stat { padding: 6px 12px !important; min-width: 0 !important; flex: 0 0 auto !important; }
  .main-content .opa-hero-stat-val { font-size: .95rem !important; }
  .main-content .opa-hero-stat-lbl { font-size: .55rem !important; }
}

/* Slim the other custom heroes at all widths too, to match _OpaHero. */
.main-content .geo-hero, .main-content .soc-hero, .main-content .admin-hero { padding: 18px 22px !important; }
.main-content .geo-hero h1, .main-content .soc-hero h1, .main-content .admin-hero h1 { font-size: 1.4rem !important; line-height: 1.2 !important; }
.main-content .geo-hero-desc, .main-content .soc-hero-desc { font-size: .85rem !important; line-height: 1.5 !important; }
@media (max-width: 700px) {
  .main-content .geo-hero, .main-content .soc-hero, .main-content .admin-hero { padding: 13px 15px !important; }
  .main-content .geo-hero h1, .main-content .soc-hero h1, .main-content .admin-hero h1 { font-size: 1.12rem !important; }
}

/* Dashboard marketing module cards: 1 per row on mobile ("each project one row").
   Higher specificity (div.) so it wins over the page's own inline <style> without
   requiring a view rebuild. */
@media (max-width: 700px) {
  .main-content div.dash-module-cards { grid-template-columns: 1fr !important; }
}

/* Tighten _OpaHero on mobile: stack text -> stats with a small gap (kills the
   ~66px empty gap caused by flex-row wrapping). */
@media (max-width: 700px) {
  .main-content .opa-hero-inner { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
  .main-content .opa-hero-right { align-items: flex-start !important; width: auto !important; }
}

/* _OpaHero mobile: stop the text block from flex-growing (it was stretching to
   fill the column and pushing the chips ~56px down). Content-height only. */
@media (max-width: 700px) {
  .main-content .opa-hero-text { flex: 0 0 auto !important; min-width: 0 !important; width: 100%; }
  .main-content .opa-hero-right { flex: 0 0 auto !important; margin-top: 2px !important; }
  .main-content .opa-hero p { margin-bottom: 0 !important; }
}

/* ── Blog posts list → clean card rows on mobile (reference: bold title +
   meta line + status badge + kebab). The desktop 7-column table is fine; on
   phones it collapses to a stacked card list. Scoped to #postsTable so it
   beats the global table min-width:720 rule (id specificity) without a
   view rebuild — lives in the static stylesheet. */
@media (max-width: 700px) {
  #postsTable { min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  #postsTable colgroup, #postsTable thead { display: none !important; }
  #postsTable, #postsTable tbody, #postsTable tr, #postsTable td { display: block !important; width: auto !important; }
  #postsTable tr {
    position: relative;
    background: var(--bg-card2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 44px 12px 14px;
    margin: 0 0 10px;
  }
  #postsTable tr:last-child { margin-bottom: 0; }
  #postsTable td {
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  /* SEO score + word count: not useful in a compact phone row */
  #postsTable td.num-col { display: none !important; }
  /* Title: the prominent line, with its url subtitle underneath */
  #postsTable td.post-title-cell { margin-bottom: 7px; }
  #postsTable td.post-title-cell > div:first-child { font-size: .92rem !important; font-weight: 700 !important; }
  /* Meta line: keyword pill · status badge · date, all on one wrapping row */
  #postsTable td:nth-child(2),
  #postsTable td:nth-child(5),
  #postsTable td:nth-child(6) {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    vertical-align: middle;
    margin: 0 8px 0 0;
  }
  #postsTable td:nth-child(6) { font-size: .74rem; color: var(--text-muted); }
  /* Kebab actions pinned top-right, like the reference */
  #postsTable td.actions-col {
    position: absolute !important;
    top: 8px;
    right: 6px;
    width: auto !important;
  }
}

/* ── Social project rows: stack the action buttons onto their own full-width
   row on mobile so the name/badges get the full width (was cramping the
   title to 3 lines and squishing the Post/Edit/Delete buttons). */
@media (max-width: 700px) {
  .main-content .proj-row { flex-wrap: wrap !important; align-items: center; }
  .main-content .proj-row > div:last-child { flex: 1 0 100% !important; margin-top: 8px; gap: 8px !important; }
  .main-content .proj-row > div:last-child .btn { flex: 1; justify-content: center; padding: 8px 10px !important; }
}

/* ── JS-rendered history tables (Local/GBP sync history, etc.) live inside a
   plain `overflow-x:auto` div with no min-width, so on phones the columns
   squeeze into vertical one-character text. Give any table inside an inline
   overflow-x:auto scroller a real min-width so it scrolls instead. Scoped by
   the inline-style attribute so it never touches the #postsTable card list
   (that wrapper uses the .table-wrap class, not an inline style). */
@media (max-width: 700px) {
  .main-content [style*="overflow-x:auto"] > table,
  .main-content [style*="overflow-x: auto"] > table { min-width: 720px !important; }
  .main-content [style*="overflow-x:auto"] > table th,
  .main-content [style*="overflow-x: auto"] > table th { white-space: nowrap !important; }
  .main-content [style*="overflow-x:auto"] > table td,
  .main-content [style*="overflow-x: auto"] > table td { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Job Console table (/Jobs): the 9-column table lives in an overflow:auto
   wrapper but its min-width rule was only in the view's <style> (not served
   live). Force it here so columns stay horizontal and scroll instead of
   crushing the Type column into vertical one-letter text on phones. */
@media (max-width: 768px) {
  .main-content table.jc-table { min-width: 900px !important; }
  .main-content table.jc-table th,
  .main-content table.jc-table td { white-space: nowrap; }
  .main-content table.jc-table td:nth-child(3) { white-space: normal; }  /* Job Details can wrap */
  .main-content .jc-type { white-space: nowrap; }
}

/* ── Blog posts — clean card list (reference: thumbnail · title · meta · status
   · kebab). Works on desktop (with extra SEO/word/url detail) and mobile (extra
   detail hidden, thumbnail shrinks). Replaces the old #postsTable layout. */
.blog-list { display:flex; flex-direction:column; }
.blog-row {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-bottom:1px solid var(--border);
  position:relative; transition:background .15s;
}
.blog-row:last-child { border-bottom:none; }
.blog-row:hover { background:var(--bg-hover); }
.blog-thumb {
  width:132px; height:80px; border-radius:12px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(135deg,rgba(124,58,237,.20),rgba(5,212,245,.14));
  display:flex; align-items:center; justify-content:center; color:var(--brand-purple-lt);
}
.blog-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-thumb i { font-size:1rem; opacity:.7; display:none; }
.blog-thumb.noimg i { display:block; }           /* icon only when no image */
.blog-main { flex:1; min-width:0; }
.blog-title {
  font-weight:700; font-size:.92rem; line-height:1.32; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.blog-meta { display:flex; align-items:center; gap:10px; margin-top:5px; flex-wrap:wrap; font-size:.75rem; color:var(--text-muted); }
.blog-kw { color:var(--brand-purple-lt); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.blog-kw i { font-size:.62rem; }
.blog-chip { padding:1px 8px; border-radius:100px; background:var(--bg-card2); border:1px solid var(--border); font-weight:600; }
.blog-seo.score-high { color:var(--brand-green); }
.blog-seo.score-mid  { color:var(--brand-amber); }
.blog-seo.score-low  { color:var(--brand-red); }
.blog-url { color:var(--brand-cyan); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.blog-url i { font-size:.6rem; }
.blog-status { flex-shrink:0; }
.blog-act { flex-shrink:0; }
/* Mobile: shrink thumbnail, hide the desktop-only extra detail chips */
@media (max-width:700px) {
  .main-content .blog-row { gap:11px; padding:11px 13px; }
  .main-content .blog-thumb { width:88px; height:60px; }
  .main-content .blog-title { font-size:.88rem; }
  .main-content .blog-chip, .main-content .blog-url { display:none; }
  .main-content .blog-meta { gap:8px; }
}