/* ============================================================================
   Phoenix AI Group — Design Tokens & Base Styles
   ============================================================================
   All values sourced from rebuild-architecture.md sections 1.2-1.4, 1.6
   ============================================================================ */

/* ---- Google Fonts (self-hosted) ---- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-sans-500.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/syne-600.ttf') format('truetype');
}

/* ---- CSS Custom Properties ---- */

:root {
  /* ---- Ember Accent (shared, single accent) ---- */
  --color-accent:        #B34912;   /* Ember — primary CTA, active states, focus rings (WCAG AA on warm gray) */
  --color-accent-hover:  #943E10;   /* Ember Dark — hover/active (WCAG AA on warm gray) */
  --color-accent-light:  #F5E6DF;   /* Ember Wash — subtle backgrounds, tints */
  --color-accent-subtle: #FDF6F2;   /* Ember Whisper — very light tint for section backgrounds */

  /* ---- Neutral (Warm Zinc / Stone family) ---- */
  --color-neutral-50:    #FAFAF9;
  --color-neutral-100:   #F5F5F4;
  --color-neutral-200:   #E7E5E4;
  --color-neutral-300:   #D6D3D1;
  --color-neutral-400:   #A8A29E;
  --color-neutral-500:   #78716C;
  --color-neutral-600:   #57534E;
  --color-neutral-700:   #44403C;
  --color-neutral-800:   #292524;
  --color-neutral-900:   #1C1917;
  --color-neutral-950:   #0C0A09;

  /* ---- Semantic ---- */
  --color-success:       #15803D;   /* Green 700 */
  --color-warning:       #B45309;   /* Amber 700 */
  --color-error:         #DC2626;   /* Red 600 */
  --color-info:          #0369A1;   /* Sky 700 */

  /* ---- Surface (business pages) ---- */
  --color-surface:       #FAFAF9;   /* warm gray — page bg */
  --color-surface-alt:   #F5F5F4;   /* warm gray — alt sections */
  --color-surface-elevated: #FFFFFF;

  /* ---- Typography Scale ---- */
  --text-display:    clamp(2.5rem, 5vw, 4rem);
  --text-h1:         clamp(2rem, 4vw, 3rem);
  --text-h2:         clamp(1.5rem, 3vw, 2.25rem);
  --text-h3:         clamp(1.25rem, 2.5vw, 1.75rem);
  --text-h4:         1.25rem;
  --text-body:       1rem;
  --text-body-sm:    0.875rem;
  --text-caption:    0.75rem;
  --text-mono:       0.875rem;

  /* ---- Spacing Scale (4px base, rem units) ---- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
}

/* ---- Widget Pages (dark mode expression) ---- */
[data-theme="dark"] {
  --color-surface:       #0C0A09;     /* Stone 950 — page background */
  --color-surface-alt:   #1C1917;     /* Stone 900 — section backgrounds */
  --color-surface-elevated: #292524;  /* Stone 800 — cards, elevated surfaces */
  --color-neutral-50:    #0C0A09;     /* Stone 950 — lightest bg on dark (footer, cards) */
  --color-neutral-100:   #1C1917;     /* Stone 900 — subtle bg on dark (pills, sections) */
  --color-neutral-200:   #44403C;     /* Stone 700 — borders on dark */
  --color-neutral-300:   #57534E;     /* Stone 600 — subtle borders on dark */
  --color-neutral-400:   #78716C;     /* Stone 500 — disabled on dark */
  --color-neutral-500:   #A8A29E;     /* Stone 400 — secondary text on dark */
  --color-neutral-600:   #D6D3D1;     /* Stone 300 — body text on dark */
  --color-neutral-700:   #E7E5E4;     /* Stone 200 — strong body on dark */
  --color-neutral-800:   #F5F5F4;     /* Stone 100 — headings on dark */
  --color-neutral-900:   #FAFAF9;     /* Stone 50 — primary text on dark */
  --color-neutral-950:   #FAFAF9;     /* Stone 50 — darkest on dark */
  --color-accent-light:  #3D1F0E;     /* Ember dark wash for dark mode */
  --color-accent-subtle: #2A1508;     /* Ember whisper for dark mode */
  --color-accent:        #D97340;     /* Bright ember — accent text on dark (light mode #B34912 too dark) */
  --color-accent-hover:  #F0A500;     /* Ember lighter — hover states on dark */
  --color-error:         #F87171;     /* Red 400 — error text/borders on dark (light mode #DC2626 too dark) */
  --color-success:       #4ADE80;     /* Green 400 — success text/borders on dark (light mode #15803D too dark) */

  /* ---- Legacy aliases (used in dashboard inline styles) ---- */
  --fire:        #D97340;     /* Fire — expired/paused warnings */
  --fire-bright: #F0A500;     /* Fire Bright — payment-required emphasis */
  --border:      #44403C;     /* Border — dividers on dark */
  --text-dim:    #A8A29E;     /* Dim text — secondary info on dark */
  --text-muted:  #78716C;     /* Muted text — labels on dark */
}

/* ============================================================================
   Base Reset
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* ============================================================================
   Body Styles
   ============================================================================ */

body {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--color-neutral-600);
  background-color: var(--color-surface);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   Heading Styles
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', sans-serif;
  color: var(--color-neutral-900);
  margin: 0;
  letter-spacing: -0.025em;
}

h1 {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.1;
}

h2 {
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1.15;
}

h3 {
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.2;
}

h4 {
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.25;
}

h5 {
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: 1.3;
}

h6 {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.35;
}

/* ============================================================================
   Skip to Content (WCAG 2.4.1 — Bypass Blocks)
   ============================================================================ */

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 200;
  background-color: var(--color-neutral-900);
  color: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-body-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--space-4);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================================================
   Dashboard Dynamic Content Styles
   ============================================================================
   These styles are scoped to [data-theme="dark"] because the dashboard is
   the only dark-themed page, and all dynamic content (injected via innerHTML
   in loadSites()) lacks Astro's data-astro-cid attribute selector.
   ============================================================================ */

[data-theme="dark"] {

  /* ---- Sites Grid ---- */
  .sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
  }

  @media (max-width: 768px) {
    .sites-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ---- Site Card ---- */
  .site-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    border-radius: 14px;
    padding: 1.75rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }

  .site-card:hover {
    border-color: var(--color-neutral-300);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .site-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #f0a500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
  }

  .site-card:hover::before { transform: scaleX(1); }

  /* Disabled site card */
  .site-card.disabled {
    opacity: 0.6;
    background: rgba(168, 162, 158, 0.06);
    border-color: rgba(156, 163, 175, 0.2);
  }

  .site-card.disabled::before {
    background: linear-gradient(90deg, #6b7280, #9ca3af);
  }

  .site-card.disabled:hover {
    transform: none;
    border-color: rgba(156, 163, 175, 0.3);
    box-shadow: none;
  }

  .site-url {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.5rem;
    word-break: break-all;
  }

  /* ---- Site Status Badge ---- */
  .site-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-family: 'DM Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
  }

  .status-active {
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
  }

  .status-disabled {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
  }

  .status-scanning {
    background: rgba(240, 165, 0, 0.1);
    color: #f0a500;
  }

  .status-pending {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
  }

  .status-error {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
  }

  /* ---- Site Stats ---- */
  .site-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: var(--color-neutral-500);
  }

  /* ---- Site Actions ---- */
  .site-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .site-actions button {
    font-family: 'DM Sans', sans-serif;
  }

  /* ---- Ghost Button ---- */
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-500);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* ---- Small Fire Button ---- */
  .btn-sm-fire {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #D4522A, #ff6b3d);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-sm-fire:hover {
    box-shadow: 0 4px 15px rgba(212, 82, 42, 0.4);
  }

  /* ---- Delete Button (solid — destructive primary) ---- */
  .btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
  }

  .btn-delete:hover {
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.4);
  }

  /* ---- Disabled Message ---- */
  .disabled-message {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(107, 114, 128, 0.1);
    border-left: 3px solid #6b7280;
    border-radius: 0 6px 6px 0;
    font-size: 0.78rem;
    color: #9ca3af;
  }

  .disabled-message strong {
    color: #d1d5db;
  }

  /* ---- Expiry Warning ---- */
  .expiry-warning {
    color: var(--color-neutral-500);
    font-size: 0.75rem;
    margin-top: 0.5rem;
    display: block;
    font-weight: 500;
  }

  /* ---- Empty State ---- */
  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-neutral-300);
    border-radius: 14px;
  }

  .empty-state h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    color: var(--color-neutral-900);
    margin-bottom: 0.75rem;
  }

  .empty-state p {
    color: var(--color-neutral-500);
    margin-bottom: 1.5rem;
  }

  /* ---- Loading Spinner ---- */
  .loading {
    text-align: center;
    padding: 3rem;
    color: var(--color-neutral-500);
  }

  .spinner-large {
    width: 30px;
    height: 30px;
    border: 3px solid var(--color-neutral-300);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---- Modal Overlay ---- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  .modal-overlay.open {
    display: flex;
  }

  .modal {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    border-radius: 16px;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    position: relative;
  }

  .modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), #f0a500);
    border-radius: 16px 16px 0 0;
  }

  .modal h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin-bottom: 0.5rem;
  }

  .modal p {
    color: var(--color-neutral-500);
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
  }

  .modal .form-group {
    margin-bottom: 1rem;
  }

  .modal .form-group label {
    display: block;
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    margin-bottom: 0.35rem;
    font-family: 'DM Sans', sans-serif;
  }

  .modal .form-group input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
  }

  .modal .form-group input:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  .modal-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  /* ---- Close Modal Button ---- */
  .close-modal {
    position: absolute;
    top: 1rem; right: 1rem;
    background: none;
    border: none;
    color: var(--color-neutral-400);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
  }

  .close-modal:hover {
    color: var(--color-neutral-900);
  }

  /* ---- Embed Code Block ---- */
  .embed-code {
    position: relative;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .embed-code pre {
    margin: 0;
    margin-top: 2rem;
    font-family: 'DM Sans', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--color-neutral-900);
  }

  .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    color: var(--color-neutral-500);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .copy-btn:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
  }

  /* ---- Delete Confirm Button (aligned with small-button system) ---- */
  .btn-delete-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
    color: white;
    font-weight: 600;
    font-size: 0.78rem;
    font-family: 'DM Sans', sans-serif;
    border-radius: 8px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
  }

  .btn-delete-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-delete-confirm:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(220, 53, 69, 0.45);
  }

  /* ---- Spinner (inside buttons) ---- */
  .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
  }

  /* ============================================================================
     Analytics Section Styles (Phase 1)
     ============================================================================ */

  /* ---- Analytics Header + Site Selector ---- */
  .analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .analytics-header h2 {
    font-family: 'Syne', sans-serif;
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
  }

  .site-select {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    padding: 0.6rem 2rem 0.6rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2378716C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }

  .site-select:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  .site-select option {
    background: var(--color-surface-elevated);
    color: var(--color-neutral-900);
  }

  /* ---- Analytics Grid (F3 + F4) ---- */
  .analytics-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1rem;
  }

  @media (max-width: 768px) {
    .analytics-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ---- Panels ---- */
  .panel {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    border-radius: 14px;
    padding: 1.5rem;
  }

  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .panel-header h3 {
    font-family: 'Syne', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-neutral-900);
    margin: 0;
  }

  /* ---- Stats Row (top-level — works in dashboard.astro and admin.astro) ---- */
  .stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  @media (max-width: 768px) {
    .stats-row {
      flex-direction: column;
    }
  }

  .stat-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    border-radius: 12px;
    padding: 1.5rem;
    flex: 1;
    text-align: center;
  }

  .stat-value {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1.15;
  }

  .stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    margin-top: 0.25rem;
  }

  /* ---- Panel Stats Row (override for analytics strip inside .panel) ---- */
  .panel .stats-row {
    margin-bottom: 0;
    gap: 0;
  }

  /* ---- Panel Stat Cards (table-style cells) ---- */
  .panel .stat-card {
    background: transparent;
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
    border-right: 1px solid var(--color-neutral-200);
    padding: 1rem 1.5rem;
    text-align: center;
    flex: 1;
  }

  .panel .stat-card:first-child {
    border-left: 1px solid var(--color-neutral-200);
  }

  /* each card keeps its right border */

  /* ---- Mobile: stacked rounded cards (match top stats-row) ---- */
  @media (max-width: 768px) {
    .panel .stats-row {
      flex-direction: column;
      gap: 0.75rem;
    }
    .panel .stat-card,
    .panel .stat-card:first-child {
      border: 1px solid var(--color-neutral-200);
      border-radius: 12px;
      background: var(--color-surface-alt);
      padding: 1.25rem 1.5rem;
    }
  }

  /* ---- Panel Stat Card Inner Elements (for dynamic content) ---- */
  .panel .stat-value {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1.15;
  }

  .panel .stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    color: var(--color-neutral-500);
    margin-top: 0.25rem;
  }

  .panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  @media (max-width: 768px) {
    .panel-grid {
      grid-template-columns: 1fr;
    }
  }

  .panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
  }

  /* ---- Question Items ---- */
  .question-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-neutral-200);
    font-size: 0.85rem;
    color: var(--color-neutral-600);
  }

  .question-item:last-child {
    border-bottom: none;
  }

  .question-item:hover {
    color: var(--color-neutral-900);
  }

  .question-rank {
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    color: var(--color-neutral-400);
    width: 1.5rem;
    flex-shrink: 0;
  }

  .question-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .question-count {
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
  }

  /* ---- Gap Items ---- */
  .gap-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-neutral-200);
    font-size: 0.85rem;
    color: var(--color-neutral-600);
  }

  .gap-item:last-child {
    border-bottom: none;
  }

  .gap-question {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .gap-add-faq-btn {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
  }

  /* ---- Billing Card ---- */
  .billing-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .billing-plan {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-neutral-900);
  }

  .billing-meta {
    font-size: 0.78rem;
    color: var(--color-neutral-500);
  }

  /* Billing status badge variants */
  .status-trialing {
    background: rgba(240, 165, 0, 0.1);
    color: #f0a500;
  }

  .status-canceled {
    background: rgba(156, 163, 175, 0.15);
    color: #9ca3af;
  }

  .status-past-due {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
  }

  /* ---- Conversations Table ---- */
  .table-wrap {
    overflow-x: auto;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    border-radius: 14px;
  }

  .conversations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
  }

  .conversations-table thead th {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-neutral-500);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-200);
  }

  .conversations-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-200);
    color: var(--color-neutral-600);
    vertical-align: top;
  }

  .conversations-table tbody tr:hover {
    background: var(--color-neutral-100);
  }

  .conversations-table tbody tr:last-child td {
    border-bottom: none;
  }

  .conv-question {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .conv-page {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-accent);
  }

  /* ---- Pagination ---- */
  .pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    justify-content: flex-end;
  }

  .page-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    background: transparent;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-500);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .page-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .page-btn.active {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  .page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ---- Compact Empty State ---- */
  .empty-state--compact {
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px dashed var(--color-neutral-300);
    text-align: center;
  }

  .empty-state--compact p {
    color: var(--color-neutral-500);
    font-size: 0.85rem;
    margin: 0;
  }

  /* ---- Section Error ---- */
  .section-error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #ff6b6b;
  }

  /* ---- Modal Textarea (Add as FAQ) ---- */
  .modal .form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    min-height: 120px;
    resize: vertical;
  }

  .modal .form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  /* ---- Select Styling (for settings modal) ---- */
  .modal .form-group select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2378716C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }

  .modal .form-group select:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  /* ---- Delete Permanent Button (outline red, distinct from disable) ---- */
  .btn-delete-perm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: #ff6b6b;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.4);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
  }

  .btn-delete-perm:hover {
    background: rgba(255, 107, 107, 0.15);
    border-color: #ff6b6b;
  }

  /* ---- Delete Consequences Box ---- */
  .delete-consequences {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  /* ---- Settings Modal (wider) ---- */
  .settings-modal {
    max-width: 640px;
  }

  /* ---- Settings Tab Bar ---- */
  .settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-neutral-200);
    margin-bottom: 1.25rem;
  }

  .settings-tab {
    flex: 1;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-neutral-500);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
  }

  .settings-tab:hover {
    color: var(--color-neutral-900);
  }

  .settings-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }

  /* ---- Settings Panels ---- */
  .settings-panel {
    display: none;
  }

  .settings-panel.active {
    display: block;
  }

  /* ---- Color Swatch Row ---- */
  .color-swatch-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  input[type="color"] {
    -webkit-appearance: none;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    width: 40px;
    height: 38px;
    padding: 2px;
    cursor: pointer;
    background: var(--color-surface-elevated);
  }

  input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
  }

  input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
  }

  input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 4px;
  }

  /* ---- Number Input ---- */
  .modal .form-group input[type="number"] {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
  }

  .modal .form-group input[type="number"]:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  /* ---- Toast Notification ---- */
  .toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-neutral-900);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 3000;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
  }

  .toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ============================================================================
     Admin Dashboard Styles (T003)
     All injected via innerHTML — must live here, not in Astro-scoped styles
     ============================================================================ */

  /* ---- Plan Pills Row ---- */
  .plan-pills {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .plan-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1px solid transparent;
  }

  .plan-pill strong {
    font-weight: 700;
  }

  /* ---- Plan Status Badges (in tables) ---- */
  .plan-pill-active {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-family: 'DM Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
  }

  .plan-pill-trial {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-family: 'DM Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: rgba(240, 165, 0, 0.1);
    color: #f0a500;
  }

  .plan-pill-pastdue {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-family: 'DM Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
  }

  .plan-pill-canceled {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-family: 'DM Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
  }

  /* ---- Admin Search Input ---- */
  .admin-search {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    padding: 0.5rem 0.85rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    width: 220px;
    transition: border-color 0.2s;
  }

  .admin-search::placeholder {
    color: var(--color-neutral-400);
  }

  .admin-search:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  /* ---- Admin Table ---- */
  .admin-table-wrap {
    overflow-x: auto;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-neutral-200);
    border-radius: 14px;
  }

  .admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
  }

  .admin-table thead th {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-neutral-500);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-200);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }

  .admin-table thead th:hover {
    color: var(--color-neutral-900);
  }

  .admin-table tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-neutral-200);
    color: var(--color-neutral-600);
    vertical-align: middle;
  }

  .admin-table tbody tr:hover {
    background: var(--color-neutral-100);
  }

  .admin-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* ---- Admin Table Cells ---- */
  .admin-cell-url {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-accent);
    font-size: 0.82rem;
  }

  .admin-cell-email {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
  }

  /* ---- Admin Action Buttons ---- */
  .admin-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .admin-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    background: transparent;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-500);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }

  .admin-action-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* ---- Modal Confirm Input (admin modals) ---- */
  .modal #extend-confirm-input,
  .modal #grant-free-confirm-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 0;
  }

  .modal #extend-confirm-input:focus,
  .modal #grant-free-confirm-input:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  /* ---- Modal Select (admin modals) ---- */
  .modal #extend-days,
  .modal #extend-status {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    color: var(--color-neutral-900);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2378716C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
  }

  .modal #extend-days:focus,
  .modal #extend-status:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  /* ---- Admin Modal Confirm Button ---- */
  .modal .btn-fire:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .modal .btn-fire:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(212, 82, 42, 0.45);
  }

} /* end [data-theme="dark"] */

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}