/*
  CoPaste Online — Design System
  Auto dark/light mode via prefers-color-scheme
  Import via: <link rel="stylesheet" href="/css/theme.css">
*/

/* ───────────────────────────────────────
   LIGHT MODE (default)
─────────────────────────────────────── */
:root {
  /* Background layers */
  --bg-base:        #f0f4ff;
  --bg-base-2:      #e8f0fe;
  --bg-surface:     #ffffff;
  --bg-surface-2:   #f8fafc;
  --bg-surface-3:   #f1f5f9;

  /* Text */
  --text-1:         #0f172a;
  --text-2:         #1e293b;
  --text-3:         #475569;
  --text-4:         #64748b;
  --text-5:         #94a3b8;

  /* Borders */
  --border-soft:    #e2e8f0;
  --border-medium:  #cbd5e1;
  --border-strong:  #94a3b8;

  /* Brand (always same) */
  --brand-primary:  #1e88e5;
  --brand-dark:     #0d47a1;
  --brand-light:    #64b5f6;
  --brand-success:  #10b981;
  --brand-warning:  #f59e0b;
  --brand-danger:   #ef4444;
  --brand-violet:   #8b5cf6;

  /* Notice / alert */
  --notice-info-bg:     #e3f2fd;
  --notice-info-text:   #1565c0;
  --notice-info-border: #1e88e5;
  --notice-warn-bg:     #fff3e0;
  --notice-warn-text:   #7c4700;
  --notice-warn-border: #ff9800;
  --notice-ok-bg:       #e8f5e9;
  --notice-ok-text:     #1b5e20;
  --notice-ok-border:   #4caf50;

  /* Form inputs */
  --input-bg:       #ffffff;
  --input-border:   #e0e0e0;
  --input-border-f: #1e88e5;
  --input-text:     #1e293b;
  --input-group-bg: #fafafa;

  /* Code blocks */
  --code-bg:        #f8f9fa;
  --code-text:      #212529;
  --code-border:    #e9ecef;

  /* File manager */
  --fm-bg:          #f8fafc;
  --fm-item-bg:     #ffffff;
  --fm-item-border: #e2e8f0;
  --fm-item-name:   #1e293b;
  --fm-search-bg:   #ffffff;

  /* Card */
  --card-bg:        #ffffff;
  --card-border:    #e2e8f0;
  --card-shadow:    0 4px 12px rgba(0,0,0,.08);
  --card-shadow-h:  0 8px 24px rgba(0,0,0,.13);

  /* Guide sidebar */
  --toc-bg:         #ffffff;
  --toc-border:     #e2e8f0;
  --toc-link:       #475569;
  --toc-link-hover: #1e88e5;
  --toc-active-bg:  #eff6ff;

  /* Modal */
  --modal-bg:       #ffffff;
  --modal-border:   #e2e8f0;

  /* Dropdown */
  --drop-bg:        #ffffff;
  --drop-item-hover: #f8faff;
  --drop-title:     #1e293b;
  --drop-desc:      #94a3b8;
  --drop-divider:   #f1f5f9;

  /* Toggle rows (network share) */
  --toggle-label:   #1e293b;
  --toggle-desc:    #64748b;

  /* Stats/info boxes */
  --stats-bg:       linear-gradient(135deg,#e3f2fd,#bbdefb);
  --stats-border:   #1e88e5;

  /* History */
  --hist-detail-bg: #f8fafc;

  /* Pending banner */
  --pending-bg:     linear-gradient(135deg,#fffbeb,#fefce8);
  --pending-border: #fcd34d;
  --pending-text:   #92400e;

  /* Upgrade banner stays colorful */
  --upgrade-bg:     linear-gradient(135deg,#f59e0b,#d97706);

  /* Recent items */
  --recent-item-hover: #e3f2fd;
  --recent-item-border: #e3f2fd;
}

/* ───────────────────────────────────────
   DARK MODE (auto-detect from device)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-base:        #070d1a;
    --bg-base-2:      #0a1020;
    --bg-surface:     #0d1526;
    --bg-surface-2:   #111b2e;
    --bg-surface-3:   #162035;

    --text-1:         #f1f5f9;
    --text-2:         #e2e8f0;
    --text-3:         #cbd5e1;
    --text-4:         #94a3b8;
    --text-5:         #475569;

    --border-soft:    rgba(255,255,255,.07);
    --border-medium:  rgba(255,255,255,.12);
    --border-strong:  rgba(255,255,255,.22);

    --notice-info-bg:     rgba(30,136,229,.13);
    --notice-info-text:   #93c5fd;
    --notice-info-border: #1e88e5;
    --notice-warn-bg:     rgba(245,158,11,.13);
    --notice-warn-text:   #fcd34d;
    --notice-warn-border: #f59e0b;
    --notice-ok-bg:       rgba(16,185,129,.13);
    --notice-ok-text:     #6ee7b7;
    --notice-ok-border:   #10b981;

    --input-bg:       #111b2e;
    --input-border:   rgba(255,255,255,.12);
    --input-border-f: #3b82f6;
    --input-text:     #f1f5f9;
    --input-group-bg: #162035;

    --code-bg:        #111b2e;
    --code-text:      #e2e8f0;
    --code-border:    rgba(255,255,255,.07);

    --fm-bg:          #0d1526;
    --fm-item-bg:     #111b2e;
    --fm-item-border: rgba(255,255,255,.07);
    --fm-item-name:   #f1f5f9;
    --fm-search-bg:   #111b2e;

    --card-bg:        #0d1526;
    --card-border:    rgba(255,255,255,.07);
    --card-shadow:    0 4px 20px rgba(0,0,0,.4);
    --card-shadow-h:  0 8px 32px rgba(0,0,0,.55);

    --toc-bg:         #0d1526;
    --toc-border:     rgba(255,255,255,.07);
    --toc-link:       #94a3b8;
    --toc-link-hover: #3b82f6;
    --toc-active-bg:  rgba(59,130,246,.1);

    --modal-bg:       #0d1526;
    --modal-border:   rgba(255,255,255,.1);

    --drop-bg:        #111b2e;
    --drop-item-hover: #162035;
    --drop-title:     #f1f5f9;
    --drop-desc:      #475569;
    --drop-divider:   rgba(255,255,255,.06);

    --toggle-label:   #f1f5f9;
    --toggle-desc:    #64748b;

    --stats-bg:       linear-gradient(135deg,rgba(30,136,229,.15),rgba(13,71,161,.15));
    --stats-border:   #1e88e5;

    --hist-detail-bg: #111b2e;

    --pending-bg:     linear-gradient(135deg,rgba(245,158,11,.12),rgba(217,119,6,.1));
    --pending-border: rgba(245,158,11,.35);
    --pending-text:   #fcd34d;

    --recent-item-hover: rgba(30,136,229,.1);
    --recent-item-border: rgba(255,255,255,.06);
  }
}

/* ───────────────────────────────────────
   GLOBAL RESETS & BASE STYLES
─────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-2);
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ───────────────────────────────────────
   TYPOGRAPHY
─────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { color: var(--text-1); font-weight: 700; line-height: 1.25; }

p { color: var(--text-3); }

a { color: var(--brand-primary); }

/* ───────────────────────────────────────
   CARDS — global dark-mode overrides
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .card {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    color: var(--text-2);
  }
  .card:hover {
    box-shadow: var(--card-shadow-h) !important;
  }
  .card-body { background: var(--card-bg) !important; }

  /* Bootstrap card header keeps gradient — looks premium in both modes */
  /* Only override non-gradient headers */
  .card-header:not([style*="gradient"]) {
    background: var(--bg-surface-2) !important;
    color: var(--text-1) !important;
    border-bottom-color: var(--border-soft) !important;
  }
}

/* ───────────────────────────────────────
   MODALS
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .modal-content {
    background: var(--modal-bg) !important;
    border-color: var(--modal-border) !important;
    color: var(--text-1) !important;
  }
  .modal-body {
    background: var(--modal-bg) !important;
    color: var(--text-2) !important;
  }
  .modal-footer {
    background: var(--bg-surface-2) !important;
    border-top-color: var(--border-soft) !important;
  }
  .btn-close { filter: invert(1) brightness(2); }
}

/* ───────────────────────────────────────
   FORMS — global overrides
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .form-control,
  .form-select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
  }
  .form-control:focus,
  .form-select:focus,
  textarea:focus,
  input:focus {
    border-color: var(--input-border-f) !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
  }
  .form-control::placeholder,
  textarea::placeholder,
  input::placeholder { color: var(--text-5) !important; }

  .input-group-text {
    background: var(--input-group-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--brand-primary) !important;
  }
}

/* ───────────────────────────────────────
   ALERTS (Bootstrap)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .alert-danger {
    background: rgba(239,68,68,.12) !important;
    border-color: rgba(239,68,68,.3) !important;
    color: #fca5a5 !important;
  }
  .alert-success {
    background: rgba(16,185,129,.12) !important;
    border-color: rgba(16,185,129,.3) !important;
    color: #6ee7b7 !important;
  }
  .alert-warning {
    background: rgba(245,158,11,.12) !important;
    border-color: rgba(245,158,11,.3) !important;
    color: #fcd34d !important;
  }
  .alert-info {
    background: rgba(30,136,229,.12) !important;
    border-color: rgba(30,136,229,.3) !important;
    color: #93c5fd !important;
  }
}

/* ───────────────────────────────────────
   BUTTONS — Keep existing gradient buttons,
   but fix outline / secondary in dark mode
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .btn-secondary,
  .btn-outline-secondary {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: var(--text-3) !important;
  }
  .btn-secondary:hover,
  .btn-outline-secondary:hover {
    background: rgba(255,255,255,.13) !important;
    color: var(--text-1) !important;
  }
  .btn-light {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-2) !important;
  }
  .btn-outline-primary {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
  }
  .btn-outline-primary:hover {
    background: rgba(30,136,229,.15) !important;
    color: #93c5fd !important;
  }
}

/* ───────────────────────────────────────
   TABLES
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .table {
    color: var(--text-2) !important;
    --bs-table-bg: var(--bg-surface) !important;
    --bs-table-border-color: var(--border-soft) !important;
    --bs-table-striped-bg: rgba(255,255,255,.025) !important;
    --bs-table-hover-bg: rgba(255,255,255,.04) !important;
  }
  .table th { color: var(--text-4) !important; }
  .table td { color: var(--text-2) !important; }
}

/* ───────────────────────────────────────
   NAVBAR DROPDOWN (light surface → dark)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .cpn-sub-drop {
    background: var(--drop-bg) !important;
    border-color: var(--border-medium) !important;
  }
  .cpn-sub-item:hover {
    background: var(--drop-item-hover) !important;
  }
  .cpn-sub-item.cpn-sub-active {
    background: rgba(59,130,246,.1) !important;
  }
  .cpn-sub-title { color: var(--drop-title) !important; }
  .cpn-sub-desc  { color: var(--drop-desc)  !important; }
  .cpn-sub-divider { background: var(--drop-divider) !important; }

  /* Login modal inside navbar */
  #cpLoginModal .modal-content {
    background: var(--modal-bg) !important;
    border-color: var(--modal-border) !important;
  }
  #cpLoginModal .form-control {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
  }
  #cpLoginModal .form-control:focus {
    border-color: var(--input-border-f) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
  }
  #cpLoginModal .input-group-text {
    background: var(--input-group-bg) !important;
    border-color: var(--input-border) !important;
  }
  #cpLoginModal .modal-body {
    background: var(--modal-bg) !important;
    color: var(--text-2) !important;
  }
}

/* ───────────────────────────────────────
   ACCORDION (Bootstrap)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .accordion-item {
    background: var(--bg-surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-2) !important;
  }
  .accordion-button {
    background: var(--bg-surface) !important;
    color: var(--text-2) !important;
  }
  .accordion-button:not(.collapsed) {
    background: rgba(59,130,246,.08) !important;
    color: #38bdf8 !important;
    box-shadow: none !important;
  }
  .accordion-button::after {
    filter: invert(1) brightness(2) !important;
  }
  .accordion-body {
    background: var(--bg-surface-2) !important;
    color: var(--text-3) !important;
  }
}

/* ───────────────────────────────────────
   SCROLLBARS (dark mode)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar { width: 7px; height: 7px; }
  ::-webkit-scrollbar-track { background: var(--bg-base); }
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.25);
  }
}

/* ───────────────────────────────────────
   BADGE (Bootstrap)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .badge.bg-secondary { background: var(--bg-surface-3) !important; }
  .badge.bg-light { background: var(--bg-surface-2) !important; color: var(--text-2) !important; }
}

/* ───────────────────────────────────────
   TEXT COLORS (Bootstrap utils)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .text-muted, .text-secondary { color: var(--text-4) !important; }
  .text-dark { color: var(--text-1) !important; }
  .text-body { color: var(--text-2) !important; }
  .bg-white, .bg-light { background: var(--bg-surface) !important; }
  .border { border-color: var(--border-soft) !important; }
  .border-light { border-color: var(--border-soft) !important; }
  .bg-body { background: var(--bg-base) !important; }

  /* hr */
  hr { border-color: var(--border-soft) !important; opacity: 1 !important; }

  /* small, .small */
  .text-secondary { color: var(--text-4) !important; }
  small, .small { color: var(--text-4); }
}

/* ───────────────────────────────────────
   PROGRESS BAR
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .progress {
    background: rgba(255,255,255,.1) !important;
  }
}

/* ───────────────────────────────────────
   PLACEHOLDER ICON CONTAINERS (fm, guide)
─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .fm-empty { color: var(--text-5) !important; }
}

/* ───────────────────────────────────────
   SELECTION HIGHLIGHT
─────────────────────────────────────── */
::selection {
  background: rgba(59,130,246,.35);
  color: inherit;
}

/* ═══════════════════════════════════════════
   PROFESSIONAL POLISH — ADDITIONAL OVERRIDES
   ════════════════════════════════════════ */

/* ── Smooth transitions for theme changes ── */
body,
.card, .card-body, .card-header,
.modal-content, .modal-body, .modal-footer,
.form-control, .form-select, .input-group-text,
.fm-item, .fm-toolbar, .fm-list,
.cpn-sub-drop,
footer,
.guide-toc-inner,
.g-section,
.info-box, .success-box, .warning-box,
.compact-notice,
.recent-item,
.hist-detail-grid,
.device-row {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    color            0.22s ease,
    box-shadow       0.25s ease;
}

/* Don't transition on gradient backgrounds (causes flicker) */
.hero,
.card-header[style*="gradient"],
.plan-hero,
.guide-hero { transition: none !important; }

/* ── Body better baseline ── */
body {
  padding-top: 58px;
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ── Better focus ring (professional) ── */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}
*:focus:not(:focus-visible) { outline: none; }

/* ── Improved button micro-interactions ── */
.btn { transition: all 0.18s ease; }
.btn:active { transform: translateY(1px) !important; }

/* ── Link hover polish ── */
a { transition: color 0.15s ease, opacity 0.15s ease; }

/* ══════════════════════════════
   DARK MODE — DEEPER POLISH
   ══════════════════════════ */
@media (prefers-color-scheme: dark) {

  /* Better card hover in dark */
  .card:hover {
    border-color: rgba(59,130,246,.25) !important;
  }

  /* FM item hover with subtle blue border */
  .fm-item:hover {
    border-color: rgba(59,130,246,.4) !important;
    box-shadow: 0 4px 20px rgba(59,130,246,.12), 0 0 0 1px rgba(59,130,246,.25) !important;
  }

  /* Textarea dark background */
  .input-area { background: var(--card-bg) !important; }
  .input-area textarea { color: var(--input-text) !important; background: transparent !important; }
  .input-area.has-text textarea { color: var(--input-text) !important; }

  /* Guide section cards */
  .g-section {
    background: var(--bg-surface) !important;
    border-color: var(--border-soft) !important;
  }

  /* Guide title */
  .g-title { color: var(--text-1) !important; }
  .g-subtitle { color: var(--text-4) !important; }

  /* Subscription page cards */
  .plan-hero { filter: brightness(1.05); }

  /* Pricing page — already dark, only fix minor things */

  /* Delete / action buttons in file manager */
  .fm-del-btn { background: rgba(239,68,68,.05) !important; }
  .fm-del-btn:hover { background: rgba(239,68,68,.12) !important; }
  .fm-act-btn { background: rgba(59,130,246,.05) !important; }
  .fm-act-btn:hover { background: rgba(59,130,246,.12) !important; }

  /* Badge premium */
  .badge-premium { color: #1e293b !important; }

  /* Stats box */
  .stats-box {
    background: linear-gradient(135deg, rgba(30,136,229,.15), rgba(13,71,161,.12)) !important;
    border-color: rgba(30,136,229,.35) !important;
  }

  /* Recent items */
  .recent-pastes { background: var(--bg-surface) !important; }

  /* Pending banner */
  .pending-banner { color: var(--pending-text) !important; }
  .pending-banner strong { color: #fde68a !important; }

  /* Device row */
  .device-row { background: var(--bg-surface-2) !important; }

  /* Modal reissue/overlay */
  .modal-overlay .modal-box { background: var(--modal-bg) !important; color: var(--text-2) !important; }

  /* Input area drag-over glow */
  .input-area.drag-over {
    border-color: #3b82f6 !important;
    background: rgba(59,130,246,.05) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12), inset 0 0 20px rgba(59,130,246,.04) !important;
  }

  /* Upload progress */
  .progress-bar { box-shadow: 0 0 6px rgba(59,130,246,.4); }

  /* File list dark */
  .file-list { background: var(--bg-surface-2) !important; }

  /* Code blocks */
  pre {
    background: var(--code-bg) !important;
    color: var(--code-text) !important;
    border-color: var(--code-border) !important;
  }
  code {
    background: rgba(255,255,255,.06) !important;
    color: #93c5fd !important;
    border-radius: 4px;
    padding: 0 4px;
  }

  /* Subscription history */
  .hist-ref { background: var(--bg-surface-3) !important; color: var(--text-4) !important; }

  /* Back-to-top better contrast */
  #btt { box-shadow: 0 4px 20px rgba(21,101,192,.5); }

  /* FM badge dark adaptations */
  .fm-badge-priv {
    background: rgba(245,158,11,.15) !important;
    color: #fcd34d !important;
    border-color: rgba(245,158,11,.3) !important;
  }
  .fm-badge-net {
    background: rgba(16,185,129,.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16,185,129,.3) !important;
  }

  /* Pagination */
  .page-link {
    background: var(--bg-surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-3) !important;
  }
  .page-link:hover { background: var(--bg-surface-2) !important; color: var(--brand-primary) !important; }
  .page-item.active .page-link {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
  }

  /* Dropdown (Bootstrap) */
  .dropdown-menu {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-soft) !important;
  }
  .dropdown-item { color: var(--text-2) !important; }
  .dropdown-item:hover { background: var(--bg-surface-3) !important; color: var(--text-1) !important; }
  .dropdown-divider { border-color: var(--border-soft) !important; }

  /* Navbar (Bootstrap class, not our custom navbar) */
  .navbar-light { background: var(--bg-surface) !important; }

  /* List groups */
  .list-group-item {
    background: var(--bg-surface) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-2) !important;
  }
  .list-group-item:hover { background: var(--bg-surface-2) !important; }

  /* Tooltip */
  .tooltip-inner {
    background: var(--bg-surface-3) !important;
    color: var(--text-1) !important;
    border: 1px solid var(--border-medium);
  }

  /* Spinner */
  .fa-spinner { color: var(--text-4) !important; }

  /* Upgrade banner stays colorful */
  .upgrade-banner { opacity: 1; }
}

/* ══════════════════════════════
   LIGHT MODE — SPECIFIC POLISH
   ══════════════════════════ */
@media (prefers-color-scheme: light) {
  /* Slightly elevate cards */
  .card { box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08) !important; }
  .card:hover { box-shadow: 0 4px 24px rgba(0,0,0,.12) !important; }

  /* FM item light mode */
  .fm-item { border-color: #e2e8f0 !important; background: #fff !important; }
  .fm-item:hover {
    border-color: #93c5fd !important;
    box-shadow: 0 4px 18px rgba(30,136,229,.13) !important;
  }

  /* Input focus ring light */
  .fm-search:focus { box-shadow: 0 0 0 3px rgba(30,136,229,.12) !important; }

  /* Better looking pre in light */
  pre {
    background: #f8fafd !important;
    border-color: #e2e8f0 !important;
  }
}

/* ══════════════════════════════
   TYPOGRAPHY IMPROVEMENTS
   ══════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Better monospace for code */
pre, code, .otp-input, .code-display,
input[type="text"][style*="monospace"],
.fm-item-name {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* ══════════════════════════════
   HERO SECTION IMPROVEMENTS
   ══════════════════════════ */
.hero {
  padding: 44px 0 60px;
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255,255,255,.08), transparent);
  pointer-events: none;
}
.hero h1 {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hero .lead {
  font-size: 1rem;
  max-width: 520px;
  margin: 10px auto 0;
  line-height: 1.65;
}

/* ══════════════════════════════
   NAVBAR FONT UPDATE
   ══════════════════════════ */
#cpnav, #cpnav * {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
}

/* ══════════════════════════════
   GUIDE PAGE TOC SMOOTH SCROLL
   ══════════════════════════ */
.guide-toc a {
  transition: background 0.15s, color 0.15s, padding-left 0.15s;
}

/* ══════════════════════════════
   STEP INDICATOR (Register)
   ══════════════════════════ */
.step-dot {
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.step-dot.active { transform: scale(1.08); }
.step-line { transition: background 0.4s ease; }

/* ══════════════════════════════
   ADMIN PAGES (dark adaptation)
   ══════════════════════════ */
@media (prefers-color-scheme: dark) {
  .table-responsive { border-color: var(--border-soft) !important; }

  /* Admin action buttons */
  .btn-outline-warning {
    border-color: rgba(245,158,11,.5) !important;
    color: #fcd34d !important;
  }
  .btn-outline-warning:hover {
    background: rgba(245,158,11,.12) !important;
    color: #fde68a !important;
  }
  .btn-outline-danger {
    border-color: rgba(239,68,68,.5) !important;
    color: #fca5a5 !important;
  }
  .btn-outline-danger:hover {
    background: rgba(239,68,68,.12) !important;
    color: #fecaca !important;
  }
  .btn-outline-success {
    border-color: rgba(16,185,129,.5) !important;
    color: #6ee7b7 !important;
  }
  .btn-outline-success:hover {
    background: rgba(16,185,129,.12) !important;
    color: #a7f3d0 !important;
  }
  .btn-outline-info {
    border-color: rgba(56,189,248,.5) !important;
    color: #7dd3fc !important;
  }
  .btn-outline-info:hover {
    background: rgba(56,189,248,.12) !important;
    color: #bae6fd !important;
  }
}

/* ══════════════════════════════
   TOAST / NOTIFICATION (Bootstrap)
   ══════════════════════════ */
@media (prefers-color-scheme: dark) {
  .toast {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-medium) !important;
    color: var(--text-1) !important;
  }
  .toast-header {
    background: var(--bg-surface-3) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-2) !important;
  }
}

/* ══════════════════════════════
   POPOVER (Bootstrap)
   ══════════════════════════ */
@media (prefers-color-scheme: dark) {
  .popover {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-medium) !important;
  }
  .popover-body { color: var(--text-2) !important; }
  .popover-header {
    background: var(--bg-surface-3) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-1) !important;
  }
}

/* ══════════════════════════════
   LANG SWITCHER DARK FIX
   ══════════════════════════ */
@media (prefers-color-scheme: light) {
  .lang-switcher {
    background: rgba(30,136,229,.12) !important;
  }
  .lang-btn { color: rgba(13,71,161,.75) !important; }
  .lang-btn:hover { background: rgba(30,136,229,.18) !important; color: #0d47a1 !important; }
  .lang-btn.active { background: rgba(13,71,161,.9) !important; color: #fff !important; }
}

/* ══════════════════════════════
   UPGRADE BANNER — both modes
   ══════════════════════════ */
.upgrade-banner { border-radius: 14px; }

/* ══════════════════════════════
   CPTOGGLE ROW (dark adaptation)
   ══════════════════════════ */
@media (prefers-color-scheme: dark) {
  .cptoggle-row {
    background: var(--bg-surface-2) !important;
    border-color: var(--border-soft) !important;
  }
}

/* ══════════════════════════════
   SCROLLBAR — LIGHT MODE
   ══════════════════════════ */
@media (prefers-color-scheme: light) {
  ::-webkit-scrollbar { width: 7px; height: 7px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
}

/* ══════════════════════════════
   HERO BADGES (index.ejs)
   ══════════════════════════ */
.hero-badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}
.hero-heading {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin-bottom: 10px;
}