/* ChatTracking — Foundations */
/* Fonts: Inter (UI), JetBrains Mono (code/data). Inter is a placeholder — the uploaded identity specimen uses a rounded geometric sans for the wordmark (likely Montserrat/Poppins). Flag: confirm with user. */

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

:root {
  /* ── Brand colors ─────────────────────────── */
  --ct-green-primary: #52C06E;   /* Verde Primário */
  --ct-blue-primary:  #2E7CD6;   /* Azul Primário */
  --ct-green-600:     #3FA458;
  --ct-green-400:     #7BD192;
  --ct-blue-600:      #1F63B4;
  --ct-blue-400:      #5A9CE5;

  /* Core gradient (135°, Verde → Azul) */
  --ct-gradient: linear-gradient(135deg, #52C06E 0%, #2E7CD6 100%);
  --ct-gradient-soft: linear-gradient(135deg, #52C06E22 0%, #2E7CD622 100%);

  /* ── Neutrals ─────────────────────────────── */
  --ct-ink:           #0A2540;   /* Texto Escuro — títulos */
  --ct-ink-2:         #2B3D55;
  --ct-ink-3:         #556577;
  --ct-muted:         #8A96A7;
  --ct-line:          #E4E9F0;
  --ct-surface:       #FFFFFF;
  --ct-bg:            #F6F9FC;   /* Background app */
  --ct-bg-2:          #EEF2F8;

  /* ── Semantic / pipeline status ───────────── */
  --ct-verde:         #22C55E;   /* lead qualificado */
  --ct-amarelo:       #F5B928;   /* revisão manual */
  --ct-descartado:    #E5484D;   /* descartado */
  --ct-info:          var(--ct-blue-primary);

  /* ── Type ─────────────────────────────────── */
  --ct-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ct-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale */
  --ct-text-xs:   12px;
  --ct-text-sm:   13px;
  --ct-text-base: 15px;
  --ct-text-md:   17px;
  --ct-text-lg:   20px;
  --ct-text-xl:   24px;
  --ct-text-2xl:  32px;
  --ct-text-3xl:  44px;
  --ct-text-4xl:  60px;

  /* Weights */
  --ct-w-regular: 400;
  --ct-w-medium:  500;
  --ct-w-semi:    600;
  --ct-w-bold:    700;
  --ct-w-black:   800;

  /* ── Spacing ──────────────────────────────── */
  --ct-s-1: 4px;
  --ct-s-2: 8px;
  --ct-s-3: 12px;
  --ct-s-4: 16px;
  --ct-s-5: 20px;
  --ct-s-6: 24px;
  --ct-s-8: 32px;
  --ct-s-10: 40px;
  --ct-s-12: 48px;
  --ct-s-16: 64px;

  /* ── Radii ────────────────────────────────── */
  --ct-r-sm: 6px;
  --ct-r-md: 10px;
  --ct-r-lg: 14px;
  --ct-r-xl: 20px;
  --ct-r-2xl: 28px;
  --ct-r-pill: 999px;

  /* ── Shadows / elevation ──────────────────── */
  --ct-shadow-xs: 0 1px 2px rgba(10,37,64,0.06);
  --ct-shadow-sm: 0 2px 6px rgba(10,37,64,0.08);
  --ct-shadow-md: 0 10px 24px -8px rgba(10,37,64,0.18), 0 2px 6px rgba(10,37,64,0.06);
  --ct-shadow-lg: 0 24px 48px -12px rgba(10,37,64,0.22), 0 4px 10px rgba(10,37,64,0.06);
  --ct-shadow-brand: 0 14px 40px -10px rgba(46,124,214,0.45);

  /* ── Motion ───────────────────────────────── */
  --ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ct-dur-fast: 140ms;
  --ct-dur: 240ms;
  --ct-dur-slow: 480ms;
}

/* ── Dark theme overrides ─────────────────── */
html[data-theme="dark"] {
  --ct-ink:           #E8EEF6;
  --ct-ink-2:         #C5CFDC;
  --ct-ink-3:         #8A98AC;
  --ct-muted:         #6A7689;
  --ct-line:          #1F2A3A;
  --ct-surface:       #0F1722;
  --ct-bg:            #0A1018;
  --ct-bg-2:          #141D2B;

  --ct-gradient-soft: linear-gradient(135deg, #52C06E33 0%, #2E7CD633 100%);

  --ct-shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --ct-shadow-sm: 0 2px 6px rgba(0,0,0,0.55);
  --ct-shadow-md: 0 10px 24px -8px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.4);
  --ct-shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.8), 0 4px 10px rgba(0,0,0,0.4);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .popover { background-color: var(--ct-surface); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: var(--ct-ink); background-color: var(--ct-surface); }
html[data-theme="dark"] kbd { background: var(--ct-bg-2) !important; color: var(--ct-ink-2) !important; }

/* Dark: bubbles / composer / chat surfaces ─── */
html[data-theme="dark"] .msg-row.them .bubble { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink); }
html[data-theme="dark"] .bubble .time { color: var(--ct-ink-3); }
html[data-theme="dark"] .bubble .reply-quote { background: rgba(46,124,214,0.18); color: var(--ct-ink-2); }
html[data-theme="dark"] .msg-row.private .bubble { background: #3A2F10 !important; border-color: #6B5418 !important; color: #F5E6B0 !important; }
html[data-theme="dark"] .bubble.note { background: #3A2F10 !important; color: #F5E6B0 !important; border-color: #6B5418 !important; }
html[data-theme="dark"] .bubble .att.att-file { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .bubble .bubble-menu-btn { background: rgba(255,255,255,0.08); }

html[data-theme="dark"] .composer { background: var(--ct-surface); border-color: var(--ct-line); }
html[data-theme="dark"] .composer-box { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink); }
html[data-theme="dark"] .composer-box:focus-within { background: var(--ct-surface); border-color: var(--ct-blue-primary); }
html[data-theme="dark"] .composer-box textarea, html[data-theme="dark"] .composer-box input { background: transparent; color: var(--ct-ink); }
html[data-theme="dark"] .composer-tools .tool:hover { background: var(--ct-bg-2); color: var(--ct-blue-primary); }
html[data-theme="dark"] .composer.private-mode .composer-box { background: #3A2F10; border-color: #B8860B; }
html[data-theme="dark"] .reply-preview { background: var(--ct-bg-2); }
html[data-theme="dark"] .reply-preview .x:hover { background: var(--ct-surface); }

/* Dark: search + chips + counters + nav ───── */
html[data-theme="dark"] .search { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink); }
html[data-theme="dark"] .search input { background: transparent; color: var(--ct-ink); }
html[data-theme="dark"] .search:focus-within { background: var(--ct-surface); }
html[data-theme="dark"] .search .kbd-hint,
html[data-theme="dark"] .search kbd { background: var(--ct-surface); border-color: var(--ct-line); color: var(--ct-ink-3); }
html[data-theme="dark"] .sub-tab, html[data-theme="dark"] .view-toggle button, html[data-theme="dark"] .analytics-tab, html[data-theme="dark"] .analytics-period button { color: var(--ct-ink-2); }
html[data-theme="dark"] .sub-tab.active, html[data-theme="dark"] .view-toggle button.active, html[data-theme="dark"] .analytics-tab.active, html[data-theme="dark"] .analytics-period button.active { background: var(--ct-bg-2); color: var(--ct-ink); }
html[data-theme="dark"] .nav-item.active .count { background: var(--ct-bg-2); color: var(--ct-ink); }

/* Dark: lists, cards, tiles that inline #fff ─ */
html[data-theme="dark"] .chat-item.selected { background: var(--ct-bg-2); }
html[data-theme="dark"] .chat-item:hover { background: var(--ct-bg-2); }
html[data-theme="dark"] .chat-item .avatar .status-ring,
html[data-theme="dark"] .avatar .status-ring { border-color: var(--ct-surface); }
html[data-theme="dark"] .chat-item.verde { background: linear-gradient(90deg, rgba(34,197,94,0.08), transparent); }
html[data-theme="dark"] .lead-row, html[data-theme="dark"] .pipeline-card, html[data-theme="dark"] .board-col, html[data-theme="dark"] .agent-card, html[data-theme="dark"] .app-card, html[data-theme="dark"] .funnel-card { background: var(--ct-bg-2) !important; border-color: var(--ct-line) !important; }
html[data-theme="dark"] .funnel-card .fc-icon { background: var(--ct-surface); }
html[data-theme="dark"] .funnel-card .fc-actions button:hover { background: var(--ct-surface); }
html[data-theme="dark"] .funnels-head .btn-ghost { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink-2); }
html[data-theme="dark"] .funnels-head .btn-ghost:hover { background: var(--ct-surface); }
html[data-theme="dark"] .pipeline-card { background: linear-gradient(180deg, var(--ct-bg-2) 0%, var(--ct-surface) 100%) !important; }
html[data-theme="dark"] .tl-dot { background: var(--ct-bg-2) !important; border-color: var(--ct-line); }
html[data-theme="dark"] .tl-item.verde .tl-dot { background: rgba(34,197,94,0.12) !important; }
html[data-theme="dark"] .sbar .bar-outer { background: var(--ct-bg-2); border-color: var(--ct-line); }

/* Dark: status pills (open/pending/snoozed) ── */
html[data-theme="dark"] .conv-status-pill.open { background: rgba(34,197,94,0.18); color: #7FE0A0; border-color: rgba(34,197,94,0.35); }
html[data-theme="dark"] .conv-status-pill.pending { background: rgba(245,185,40,0.18); color: #F5C96B; border-color: rgba(245,185,40,0.35); }
html[data-theme="dark"] .conv-status-pill.snoozed { background: rgba(147,51,234,0.2); color: #C4A3E8; border-color: rgba(147,51,234,0.4); }
html[data-theme="dark"] .lead-status.verde { background: rgba(34,197,94,0.15); color: #7FE0A0; border-color: rgba(34,197,94,0.3); }
html[data-theme="dark"] .lead-status.amarelo { background: rgba(245,158,11,0.15); color: #F5C96B; border-color: rgba(245,158,11,0.3); }
html[data-theme="dark"] .lead-status.vermelho { background: rgba(239,68,68,0.15); color: #F08D92; border-color: rgba(239,68,68,0.3); }
html[data-theme="dark"] .chat-item .inbox-sla.warn { background: rgba(245,185,40,0.18); color: #F5C96B; }
html[data-theme="dark"] .chat-item .inbox-sla.alert { background: rgba(239,68,68,0.18); color: #F08D92; }

/* Dark: tags / mini pills with flat color ──── */
html[data-theme="dark"] .chat-item .tag { background: var(--ct-bg-2); color: var(--ct-ink-2); }
html[data-theme="dark"] .chat-item .preview { color: var(--ct-ink-3); }
html[data-theme="dark"] .chat-item.unread .preview { color: var(--ct-ink-2); }

/* Dark: user-card in sidebar foot ──────────── */
html[data-theme="dark"] .user-card, html[data-theme="dark"] .nav-foot .user-card { background: var(--ct-bg-2); color: var(--ct-ink); border-color: var(--ct-line); }
html[data-theme="dark"] .user-card .name, html[data-theme="dark"] .user-card b { color: var(--ct-ink); }
html[data-theme="dark"] .user-card .role, html[data-theme="dark"] .user-card small { color: var(--ct-ink-3); }

/* Dark: topbar controls + lead cards ───────── */
html[data-theme="dark"] .icon-btn { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink-2); }
html[data-theme="dark"] .icon-btn:hover { border-color: var(--ct-blue-primary); color: var(--ct-blue-primary); }
html[data-theme="dark"] .icon-btn .notif-dot { border-color: var(--ct-surface); }
html[data-theme="dark"] .filter-pill { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink-2); }
html[data-theme="dark"] .filter-pill:hover { border-color: var(--ct-blue-primary); }
html[data-theme="dark"] .topbar { background: var(--ct-surface); border-color: var(--ct-line); }
html[data-theme="dark"] .stat { background: var(--ct-bg-2); border-color: var(--ct-line); }
html[data-theme="dark"] .stat.featured { background: linear-gradient(135deg, #12253F 0%, #1B3659 100%); border: 1px solid var(--ct-line); }

html[data-theme="dark"] .col { background: var(--ct-bg-2); border-color: var(--ct-line); }
html[data-theme="dark"] .col-head { border-color: var(--ct-line); }
html[data-theme="dark"] .col-title .count { background: var(--ct-surface); color: var(--ct-ink-2); }
html[data-theme="dark"] .lead-card { background: var(--ct-surface); border-color: var(--ct-line); }
html[data-theme="dark"] .lead-card:hover { border-color: var(--ct-blue-primary); }
html[data-theme="dark"] .lead-card .tag { background: var(--ct-bg-2); color: var(--ct-ink-2); }
html[data-theme="dark"] .col.verde .lead-card .tag.primary { background: rgba(34,197,94,0.18); color: #7FE0A0; }
html[data-theme="dark"] .col.amarelo .lead-card .tag.primary { background: rgba(245,185,40,0.18); color: #F5C96B; }
html[data-theme="dark"] .col.vermelho .lead-card .tag.primary { background: rgba(229,72,77,0.18); color: #F08D92; }
html[data-theme="dark"] .lead-card .score .bar { background: var(--ct-bg); }

/* Dark: filters row + scrolls + generic hovers */
html[data-theme="dark"] .filter-tab { color: var(--ct-ink-2); }
html[data-theme="dark"] .filter-tab.active { background: var(--ct-bg-2); color: var(--ct-ink); }
html[data-theme="dark"] .filter-tab .count, html[data-theme="dark"] .filter-tab .count { background: var(--ct-surface); color: var(--ct-ink-2); }
html[data-theme="dark"] .panel-section { border-color: var(--ct-line); }
html[data-theme="dark"] .panel-section h3, html[data-theme="dark"] .panel-section h4 { color: var(--ct-ink); }

/* Dark: conversation thread surfaces ───────── */
html[data-theme="dark"] .thread { background: linear-gradient(180deg, var(--ct-bg) 0%, var(--ct-bg-2) 100%) !important; }
html[data-theme="dark"] .thread-head { background: var(--ct-surface); border-color: var(--ct-line); }
html[data-theme="dark"] .thread-head .av::after { border-color: var(--ct-surface); }
html[data-theme="dark"] .classifier { background: var(--ct-surface); border-color: var(--ct-line); }
html[data-theme="dark"] .classifier .chip:not(.active) { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink-2); }
html[data-theme="dark"] .classifier .chip:not(.active):hover { border-color: var(--ct-ink-3); color: var(--ct-ink); }
html[data-theme="dark"] .classifier .score .bar { background: var(--ct-bg); }
html[data-theme="dark"] .day-sep span { background: var(--ct-bg-2); color: var(--ct-ink-3); border-color: var(--ct-line); }
html[data-theme="dark"] .msg-row.them .bubble { background: var(--ct-surface); border-color: var(--ct-line); color: var(--ct-ink); }

/* Dark: inline-styled "#fff" modals — keep readable bg */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #FFF"] { background: var(--ct-surface) !important; color: var(--ct-ink); }

/* Dark: analytics/reports surfaces ──────────── */
html[data-theme="dark"] .chart-card { background: var(--ct-bg-2); border-color: var(--ct-line); }
html[data-theme="dark"] .chart-card h4 { color: var(--ct-ink); }
html[data-theme="dark"] .chart-card .muted { color: var(--ct-ink-3); }
html[data-theme="dark"] .kpi { background: var(--ct-bg-2); border-color: var(--ct-line); }
html[data-theme="dark"] .kpi .l { color: var(--ct-ink-3); }
html[data-theme="dark"] .kpi .v { color: var(--ct-ink); }
html[data-theme="dark"] .kpi .s { color: var(--ct-ink-3); }
html[data-theme="dark"] .stat { background: var(--ct-bg-2); border-color: var(--ct-line); }
html[data-theme="dark"] .stat .label { color: var(--ct-ink-3); }
html[data-theme="dark"] .stat .value { color: var(--ct-ink); }
html[data-theme="dark"] .stat.featured { background: linear-gradient(135deg, #12253F 0%, #1B3659 100%); }
html[data-theme="dark"] .stat .share-bar { background: var(--ct-surface); }
html[data-theme="dark"] .funnel-row .lbl { color: var(--ct-ink-2); }
html[data-theme="dark"] .funnel-row .bar-wrap { background: var(--ct-surface); border: 1px solid var(--ct-line); }
html[data-theme="dark"] .chart-bar-row .lbl { color: var(--ct-ink-2); }
html[data-theme="dark"] .chart-bar-row .wrap { background: var(--ct-surface); border: 1px solid var(--ct-line); }
html[data-theme="dark"] .chart-bar-row .v { color: var(--ct-ink-2); }
html[data-theme="dark"] .agent-perf-table th { background: var(--ct-bg-2); color: var(--ct-ink-3); }
html[data-theme="dark"] .agent-perf-table td { border-color: var(--ct-line); }
html[data-theme="dark"] .agent-perf-table tr:hover td { background: var(--ct-bg-2); }
html[data-theme="dark"] .agent-perf-table .nm { color: var(--ct-ink); }
html[data-theme="dark"] .csat-stars .star { color: var(--ct-line); }

/* Dark: popovers / modals / overlays ────────── */
html[data-theme="dark"] .popover { background: var(--ct-surface); border-color: var(--ct-line); box-shadow: 0 16px 44px rgba(0,0,0,0.7); }
html[data-theme="dark"] .popover .pop-item { color: var(--ct-ink); }
html[data-theme="dark"] .popover .pop-item:hover { background: var(--ct-bg-2); }
html[data-theme="dark"] .popover .pop-sep { background: var(--ct-line); }
html[data-theme="dark"] .modal-back { background: rgba(0,0,0,0.65); }
html[data-theme="dark"] .modal { background: var(--ct-surface); border: 1px solid var(--ct-line); }
html[data-theme="dark"] .modal-head { border-color: var(--ct-line); }
html[data-theme="dark"] .search-overlay { background: rgba(0,0,0,0.65); }
html[data-theme="dark"] .search-box-overlay { background: var(--ct-surface); border: 1px solid var(--ct-line); }
html[data-theme="dark"] .search-box-overlay input { color: var(--ct-ink); border-bottom-color: var(--ct-line); }
html[data-theme="dark"] .search-results .sr:hover { background: var(--ct-bg-2); }
html[data-theme="dark"] .notif-panel { background: var(--ct-surface); border-color: var(--ct-line); box-shadow: 0 16px 44px rgba(0,0,0,0.7); }
html[data-theme="dark"] .notif-panel h4 { border-color: var(--ct-line); color: var(--ct-ink); }

/* Dark: inputs / kbd / tabs active-on-dark ──── */
html[data-theme="dark"] kbd,
html[data-theme="dark"] .search kbd,
html[data-theme="dark"] .search .kbd-hint { background: var(--ct-bg-2); color: var(--ct-ink-2); border-color: var(--ct-line); }
html[data-theme="dark"] .nav-item.active .count { background: var(--ct-blue-primary); color: #fff; }
html[data-theme="dark"] .view-toggle { background: var(--ct-bg-2); }
html[data-theme="dark"] .view-toggle button.active { background: var(--ct-surface); color: var(--ct-ink); box-shadow: none; border: 1px solid var(--ct-line); }
html[data-theme="dark"] .sub-tab.active { background: var(--ct-surface); box-shadow: none; border: 1px solid var(--ct-line); }
html[data-theme="dark"] .sub-tab .n { background: var(--ct-surface); color: var(--ct-ink-3); }
html[data-theme="dark"] .analytics-tabs { background: var(--ct-bg-2); }
html[data-theme="dark"] .analytics-tab.active { background: var(--ct-surface); box-shadow: none; border: 1px solid var(--ct-line); }
html[data-theme="dark"] .analytics-period { background: var(--ct-bg-2); }
html[data-theme="dark"] .analytics-period button.active { background: var(--ct-surface); box-shadow: none; border: 1px solid var(--ct-line); }

/* Dark: board/list and misc card surfaces ───── */
html[data-theme="dark"] .board-head { border-color: var(--ct-line); }
html[data-theme="dark"] .board-head h2 { color: var(--ct-ink); }
html[data-theme="dark"] .board-head p { color: var(--ct-ink-3); }
html[data-theme="dark"] .chat-list-section { color: var(--ct-ink-3); }
html[data-theme="dark"] .inbox, html[data-theme="dark"] .inbox-head { background: var(--ct-surface); }
html[data-theme="dark"] .sub-filters { background: var(--ct-surface); border-color: var(--ct-line); }
html[data-theme="dark"] .sub-filters .group { background: var(--ct-bg-2); }
html[data-theme="dark"] .export-btn { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink-2); }
html[data-theme="dark"] .export-btn:hover { border-color: var(--ct-blue-primary); color: var(--ct-blue-primary); }

/* Dark: select / option readability ─────────── */
html[data-theme="dark"] select { background: var(--ct-bg-2) !important; color: var(--ct-ink) !important; border-color: var(--ct-line) !important; }
html[data-theme="dark"] select option { background: var(--ct-surface); color: var(--ct-ink); }

/* Dark: switch / toggles ─────────────────────── */
html[data-theme="dark"] .switch .sl { background: var(--ct-bg-2) !important; }
html[data-theme="dark"] .switch .sl::before { background: var(--ct-ink-3); }
html[data-theme="dark"] .switch input:checked + .sl { background: var(--ct-blue-primary) !important; }
html[data-theme="dark"] .switch input:checked + .sl::before { background: #fff; }

/* Dark: CRM page content headers (Funil) ────── */
html[data-theme="dark"] .funnels-head .btn-primary { box-shadow: 0 6px 16px -4px rgba(46,124,214,0.4); }

/* Dark: pre/code blocks ──────────────────────── */
html[data-theme="dark"] pre { background: var(--ct-surface) !important; color: var(--ct-ink-2); border: 1px solid var(--ct-line); }
html[data-theme="dark"] code { background: var(--ct-bg-2); color: var(--ct-ink-2); }

/* Dark: settings toolbar / list ──────────────── */
html[data-theme="dark"] .settings-toolbar .search-inp { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink); }
html[data-theme="dark"] .settings-toolbar .search-inp::placeholder { color: var(--ct-ink-3); }
html[data-theme="dark"] .settings-list { background: var(--ct-bg-2); border-color: var(--ct-line); }
html[data-theme="dark"] .settings-row { border-color: var(--ct-line); color: var(--ct-ink); }
html[data-theme="dark"] .settings-row:hover { background: var(--ct-surface); }
html[data-theme="dark"] .settings-row.empty { color: var(--ct-ink-3); }
html[data-theme="dark"] .settings-row .mono, html[data-theme="dark"] .settings-row .muted { color: var(--ct-ink-3); }
html[data-theme="dark"] .mini-btn { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink-2); }
html[data-theme="dark"] .mini-btn:hover { background: var(--ct-surface); color: var(--ct-ink); }

/* Dark: topbar sort/views/me pills ───────────── */
html[data-theme="dark"] .sort-btn, html[data-theme="dark"] .views-btn, html[data-theme="dark"] .me-btn { background: var(--ct-bg-2); border-color: var(--ct-line); color: var(--ct-ink-2); }
html[data-theme="dark"] .sort-btn:hover, html[data-theme="dark"] .views-btn:hover, html[data-theme="dark"] .me-btn:hover { border-color: var(--ct-blue-primary); color: var(--ct-blue-primary); }

/* ── Semantic element styles ─────────────── */
html, body { background: var(--ct-bg); color: var(--ct-ink); font-family: var(--ct-font-sans); }

h1, .ct-h1 { font-size: var(--ct-text-3xl); font-weight: var(--ct-w-black); letter-spacing: -0.02em; color: var(--ct-ink); line-height: 1.05; }
h2, .ct-h2 { font-size: var(--ct-text-2xl); font-weight: var(--ct-w-bold); letter-spacing: -0.015em; color: var(--ct-ink); line-height: 1.15; }
h3, .ct-h3 { font-size: var(--ct-text-xl); font-weight: var(--ct-w-semi); letter-spacing: -0.01em; color: var(--ct-ink); line-height: 1.2; }
h4, .ct-h4 { font-size: var(--ct-text-lg); font-weight: var(--ct-w-semi); color: var(--ct-ink); line-height: 1.25; }
p,  .ct-p  { font-size: var(--ct-text-base); font-weight: var(--ct-w-regular); color: var(--ct-ink-2); line-height: 1.55; }
small, .ct-small { font-size: var(--ct-text-sm); color: var(--ct-ink-3); }
.ct-eyebrow { font-size: 11px; font-weight: var(--ct-w-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ct-blue-primary); }
code, pre, .ct-mono { font-family: var(--ct-font-mono); font-size: 13px; }

.ct-gradient-text {
  background: var(--ct-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}