/* ══════════════════════════════════════════════
   СФЕРА — Dark Theme
   Слои глубины:
   L0 страница:    #0d1410
   L1 панели:      #172019
   L2 карточки:    #1e2b23
   L3 поля/input:  #131a16
   L4 hover:       #263530
   ══════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg:          #0d1410;
  --ink:         #ddeae2;
  --muted:       #7a9a88;
  --line:        #253028;
  --line-strong: #334540;
  --green:       #2bc47a;
  --green-dark:  #1f9460;
  color-scheme: dark;
}

/* ── Body background ── */
[data-theme="dark"] body {
  background:
    linear-gradient(115deg, rgba(43,196,122,.06), transparent 40%),
    linear-gradient(245deg, rgba(36,106,147,.07), transparent 45%),
    repeating-linear-gradient(90deg, rgba(221,234,226,.016) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(221,234,226,.013) 0 1px, transparent 1px 72px),
    #0d1410;
}

/* ── Sidebar ── */
[data-theme="dark"] .sidebar {
  background: rgba(14,19,16,.97);
  border-right-color: #253028;
  box-shadow: 12px 0 40px rgba(0,0,0,.45);
}
[data-theme="dark"] .sidebarBrand { color: #ddeae2; }
[data-theme="dark"] .sidebarToggle {
  background: #1e2b23; border-color: #253028; color: #ddeae2;
}
[data-theme="dark"] .sidebarNav a { color: #7a9a88; }
[data-theme="dark"] .sidebarNav a:hover { background: rgba(43,196,122,.08); color: #ddeae2; }
[data-theme="dark"] .sidebarNav a.active {
  background: linear-gradient(135deg,#2bc47a,#1f9460);
  color: #fff; box-shadow: 0 10px 24px rgba(43,196,122,.2);
}

/* ── App / topbar ── */
[data-theme="dark"] .topbar {
  background: linear-gradient(135deg,rgba(23,32,25,.98),rgba(19,26,21,.97));
  border-color: #253028; border-left-color: #2bc47a;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
[data-theme="dark"] .topbar h1 { color: #ddeae2; }
[data-theme="dark"] .topbar p  { color: #7a9a88; }

/* ── Search ── */
[data-theme="dark"] .searchBar {
  background: #1e2b23; border-color: #253028;
}
[data-theme="dark"] .searchBar i { color: #7a9a88; }
[data-theme="dark"] .searchBar input { color: #ddeae2; }
[data-theme="dark"] .searchBar input::placeholder { color: #4d6a5a; }

/* ── Buttons ── */
[data-theme="dark"] .ghostButton {
  background: #1e2b23; border-color: #334540; color: #ddeae2;
}
[data-theme="dark"] .ghostButton:hover { background: #263530; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
[data-theme="dark"] .iconButton {
  background: #1e2b23; border-color: #253028; color: #7a9a88;
}
[data-theme="dark"] .iconButton:hover { background: #263530; color: #ddeae2; }
[data-theme="dark"] .primaryButton {
  background: linear-gradient(135deg,#2bc47a,#1f9460);
  box-shadow: 0 8px 24px rgba(43,196,122,.24);
}
[data-theme="dark"] .saveBtn {
  background: linear-gradient(135deg,#2bc47a,#1f9460);
  box-shadow: 0 6px 16px rgba(43,196,122,.22);
}
[data-theme="dark"] .deleteBtn,
[data-theme="dark"] .dangerButton {
  background: #1e2b23; border-color: rgba(185,77,69,.3); color: #e08080;
}
[data-theme="dark"] .deleteBtn:hover,
[data-theme="dark"] .dangerButton:hover { background: rgba(185,77,69,.12); }

/* ── KPI strip ── */
[data-theme="dark"] .kpiCard,
[data-theme="dark"] .statCard {
  background: #172019;
  border-color: #253028;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
[data-theme="dark"] .kpiVal,
[data-theme="dark"] .statCard strong { color: #ddeae2; }
[data-theme="dark"] .kpiNote,
[data-theme="dark"] .kpiLabel,
[data-theme="dark"] .statCard span,
[data-theme="dark"] .statCard small { color: #7a9a88; }
[data-theme="dark"] .kpiBarFill { opacity: .85; }

/* ── Kanban columns ── */
[data-theme="dark"] .colHead {
  background: #172019;
  border-color: #253028;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
[data-theme="dark"] .colTitle { color: #ddeae2; }
[data-theme="dark"] .colRev   { color: #7a9a88; }
[data-theme="dark"] .colAddBtn {
  border-color: #253028; color: #7a9a88;
}
[data-theme="dark"] .colAddBtn:hover {
  background: rgba(43,196,122,.07); border-color: #2bc47a; color: #ddeae2;
}

/* ── Lead cards ── */
[data-theme="dark"] .lcard {
  background: #1e2b23;
  border-color: #263530;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
[data-theme="dark"] .lcard:hover { box-shadow: 0 10px 30px rgba(0,0,0,.4); }
[data-theme="dark"] .lcardCompany { color: #ddeae2; }
[data-theme="dark"] .lcardIndustry { color: #7a9a88; }
[data-theme="dark"] .lcardRev  { color: #ddeae2; }
[data-theme="dark"] .lcardMarPct { color: #7a9a88; }
[data-theme="dark"] .lcardMarBar { background: #253028; }
[data-theme="dark"] .lcardTasks {
  background: #253028; border-color: #334540; color: #7a9a88;
}
[data-theme="dark"] .lcardTasks.overdue { background: rgba(185,77,69,.18); color: #e08080; border-color: rgba(185,77,69,.25); }

/* ── Service pills ── */
[data-theme="dark"] .svcPill {
  background: rgba(255,255,255,.06) !important;
  color: #a0bfad !important;
  border-color: #253028 !important;
}

/* ── Panels (list, detail, analytics) ── */
[data-theme="dark"] .listPanel,
[data-theme="dark"] .detailPanel,
[data-theme="dark"] .taskRailPanel,
[data-theme="dark"] .panel {
  background: #172019;
  border-color: #253028;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
[data-theme="dark"] .listFilters { border-color: #253028; }
[data-theme="dark"] .filterSel {
  background: #1e2b23; border-color: #253028; color: #ddeae2;
}
[data-theme="dark"] .listMeta { color: #7a9a88; }

/* ── Client list cards ── */
[data-theme="dark"] .cCard {
  background: #1e2b23;
  border-color: #263530;
}
[data-theme="dark"] .cCard.active {
  background: linear-gradient(135deg,rgba(43,196,122,.1),#1e2b23 60%);
  border-color: rgba(43,196,122,.35);
  box-shadow: 0 0 0 3px rgba(43,196,122,.08), 0 8px 20px rgba(0,0,0,.3);
}
[data-theme="dark"] .cName { color: #ddeae2; }
[data-theme="dark"] .cMeta { color: #7a9a88; }
[data-theme="dark"] .cRev  { color: #ddeae2; }
[data-theme="dark"] .cBar  { background: #253028; }
[data-theme="dark"] .cMarPct { color: #7a9a88; }
[data-theme="dark"] .cStage {
  background: rgba(255,255,255,.06) !important;
  color: #a0bfad !important;
  border-color: #253028 !important;
}
[data-theme="dark"] .cSvc {
  background: rgba(255,255,255,.05) !important;
  color: #8aaa96 !important;
  border-color: #253028 !important;
}

/* ── Detail panel header ── */
[data-theme="dark"] .dHead  { background: transparent; }
[data-theme="dark"] .dInfo h2 { color: #ddeae2; }
[data-theme="dark"] .dInfo p  { color: #7a9a88; }
[data-theme="dark"] .dStats {
  background: #131a16; border-color: #253028;
}
[data-theme="dark"] .dStat  { border-color: #253028; }
[data-theme="dark"] .dStat span { color: #7a9a88; }
[data-theme="dark"] .dStat b    { color: #ddeae2; }
[data-theme="dark"] .dLink {
  background: #1e2b23; border-color: #253028; color: #ddeae2;
}
[data-theme="dark"] .dLink:hover { background: #263530; }
[data-theme="dark"] .deleteBtn { background: #1e2b23; }

/* ── Tabs ── */
[data-theme="dark"] .tabsBar,
[data-theme="dark"] .drawerTabsBar { background: rgba(0,0,0,.3); }
[data-theme="dark"] .dtab { color: #7a9a88; }
[data-theme="dark"] .dtab:hover { background: rgba(255,255,255,.05); color: #ddeae2; }
[data-theme="dark"] .dtab.active {
  background: #1e2b23; color: #ddeae2;
  box-shadow: 0 1px 8px rgba(0,0,0,.35);
}

/* ── Drawer ── */
[data-theme="dark"] .drawer,
[data-theme="dark"] .taskDrawer {
  background: #131a16;
  border-left-color: #253028;
  box-shadow: -24px 0 60px rgba(0,0,0,.5);
}
[data-theme="dark"] .drawerHead,
[data-theme="dark"] .dHead.drawer-dhead {
  background: rgba(13,20,16,.97);
  border-color: #253028;
}
[data-theme="dark"] .drawerStats { background: #131a16; border-color: #253028; }
[data-theme="dark"] .drawerStat  { border-color: #253028; }
[data-theme="dark"] .drawerStat span { color: #7a9a88; }
[data-theme="dark"] .drawerStat b    { color: #ddeae2; }
[data-theme="dark"] .drawerFooter {
  background: rgba(13,20,16,.97); border-color: #253028;
}
[data-theme="dark"] .drawerHeadInfo h2 { color: #ddeae2; }
[data-theme="dark"] .drawerHeadInfo p  { color: #7a9a88; }
[data-theme="dark"] .dCloseBtn {
  background: #1e2b23; border-color: #253028; color: #7a9a88;
}
[data-theme="dark"] .dCloseBtn:hover { background: #263530; color: #ddeae2; }

/* ── Sections / Forms ── */
[data-theme="dark"] .section,
[data-theme="dark"] .dSection {
  background: #1e2b23; border-color: #263530;
}
[data-theme="dark"] .sectionTitle { color: #ddeae2; }
[data-theme="dark"] .sectionTitle i { color: #2bc47a; }
[data-theme="dark"] .dSectionTitle { color: #ddeae2; }
[data-theme="dark"] .dSectionTitle i { color: #2bc47a; }
[data-theme="dark"] .field label { color: #7a9a88; }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .addTaskInput,
[data-theme="dark"] .addTaskDate,
[data-theme="dark"] .addFormInput,
[data-theme="dark"] .addFormDate,
[data-theme="dark"] .editField,
[data-theme="dark"] .editField2,
[data-theme="dark"] .dEditInput,
[data-theme="dark"] .addCommentArea,
[data-theme="dark"] .addForm input,
[data-theme="dark"] .addForm input[type="date"] {
  background: #131a16 !important;
  border-color: #253028 !important;
  color: #ddeae2 !important;
}
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus,
[data-theme="dark"] .addTaskInput:focus,
[data-theme="dark"] .addCommentArea:focus {
  border-color: rgba(43,196,122,.5) !important;
  box-shadow: 0 0 0 3px rgba(43,196,122,.1) !important;
}
[data-theme="dark"] .svc-desc {
  background: #131a16 !important;
  border-color: #253028 !important;
  color: #ddeae2 !important;
}

/* ── Services ── */
[data-theme="dark"] .svcCard {
  background: #1e2b23; border-color: #263530;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
[data-theme="dark"] .svcCard.enabled {
  background: linear-gradient(135deg,rgba(43,196,122,.08),#1e2b23 60%);
  border-color: rgba(43,196,122,.24);
}
[data-theme="dark"] .svcCardHead { background: rgba(0,0,0,.18); border-color: #253028; }
[data-theme="dark"] .svcCardTitle { color: #ddeae2; }
[data-theme="dark"] .svcCardToggle { background: #263530; border-color: #334540; color: #7a9a88; }
[data-theme="dark"] .svcCard.enabled .svcCardToggle { background: #2bc47a; color: #0d1410; border-color: #1f9460; }
[data-theme="dark"] .svcIco { background: rgba(255,255,255,.05) !important; border-color: #253028 !important; }
[data-theme="dark"] .svcMoneyField { border-color: #253028 !important; background: #131a16 !important; }
[data-theme="dark"] .svcMoneyField label { color: #7a9a88; }
[data-theme="dark"] .svcMoneyField input { background: #0d1410 !important; border-color: #253028 !important; color: #ddeae2 !important; }

/* ── Contact cards ── */
[data-theme="dark"] .contactCard { background: #131a16; border-color: #253028; }
[data-theme="dark"] .contactCardHead strong { color: #ddeae2; }
[data-theme="dark"] .iconBtn { background: #1e2b23; border-color: #253028; color: #7a9a88; }
[data-theme="dark"] .iconBtn.del:hover { background: rgba(185,77,69,.15); border-color: rgba(185,77,69,.3); color: #e08080; }

/* ── Task items ── */
[data-theme="dark"] .taskItem,
[data-theme="dark"] .taskItem2,
[data-theme="dark"] .taskCard,
[data-theme="dark"] .dTask {
  background: #1e2b23; border-color: #263530;
}
[data-theme="dark"] .taskItem.done,
[data-theme="dark"] .taskItem2.done,
[data-theme="dark"] .dTask.done { background: #172019; opacity: .65; }
[data-theme="dark"] .taskItem2Text,
[data-theme="dark"] .taskItemText { color: #ddeae2; }
[data-theme="dark"] .taskItem2Meta span,
[data-theme="dark"] .taskItemMeta span { color: #7a9a88; }
[data-theme="dark"] .tBtn { background: #1e2b23; border-color: #253028; color: #7a9a88; }
[data-theme="dark"] .tBtn.edit:hover { background: rgba(43,196,122,.1); border-color: rgba(43,196,122,.3); color: #2bc47a; }
[data-theme="dark"] .tBtn.del:hover  { background: rgba(185,77,69,.12); border-color: rgba(185,77,69,.3); color: #e08080; }
[data-theme="dark"] .tCheck { border-color: currentColor; }
[data-theme="dark"] .addTaskInline {
  background: rgba(43,196,122,.05);
  border-color: rgba(43,196,122,.15);
}
[data-theme="dark"] .eSaveBtn2 { background: #1f9460; }
[data-theme="dark"] .eCancelBtn2,
[data-theme="dark"] .eCancelBtn { background: #1e2b23; border-color: #253028; color: #7a9a88; }

/* ── Comments ── */
[data-theme="dark"] .commentCard { background: #131a16; border-color: #253028; }
[data-theme="dark"] .commentMeta { color: #7a9a88; }
[data-theme="dark"] .commentText { color: #ddeae2; }

/* ── Task rail / todo ── */
[data-theme="dark"] .todoItem { background: #1e2b23; border-color: #263530; }
[data-theme="dark"] .todoCompany { color: #ddeae2; }
[data-theme="dark"] .todoText    { color: #7a9a88; }
[data-theme="dark"] .todoMeta span { color: #6a8a78; }
[data-theme="dark"] .taskCntBadge { background: rgba(43,196,122,.14); color: #2bc47a; border-color: rgba(43,196,122,.2); }
[data-theme="dark"] .taskRailHead h2 { color: #ddeae2; }
[data-theme="dark"] .taskRailHead  { border-color: #253028; }

/* ── Groups (tasks page) ── */
[data-theme="dark"] .groupSection { background: #172019; border-color: #253028; }
[data-theme="dark"] .groupHeader { background: rgba(13,20,16,.7); border-color: #253028; }
[data-theme="dark"] .groupHeader:hover { background: rgba(43,196,122,.05); }
[data-theme="dark"] .groupHeader h2 { color: #ddeae2; }

/* ── Analytics panels ── */
[data-theme="dark"] .panel { background: #172019; }
[data-theme="dark"] .pHead h2  { color: #ddeae2; }
[data-theme="dark"] .pHead p   { color: #7a9a88; }
[data-theme="dark"] .fLbl      { color: #7a9a88; }
[data-theme="dark"] .fMeta b   { color: #ddeae2; }
[data-theme="dark"] .fMeta small { color: #7a9a88; }
[data-theme="dark"] .fTrack { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .funnelRow:hover,
[data-theme="dark"] .revRow:hover { background: rgba(43,196,122,.04); }
[data-theme="dark"] .revLbl { color: #ddeae2; }
[data-theme="dark"] .revVal  { color: #ddeae2; }
[data-theme="dark"] .revTrack { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .cTableHead span { color: #7a9a88; }
[data-theme="dark"] .cRow { background: #1e2b23; border-color: #263530; }
[data-theme="dark"] .cRow:hover { box-shadow: 0 4px 16px rgba(0,0,0,.3); border-color: #334540; }
[data-theme="dark"] .cName strong { color: #ddeae2; }
[data-theme="dark"] .cName small  { color: #7a9a88; }
[data-theme="dark"] .nCell { color: #ddeae2; }
[data-theme="dark"] .mBar  { background: #253028; }
[data-theme="dark"] .stPill {
  background: rgba(255,255,255,.06) !important;
  color: #a0bfad !important;
  border-color: #253028 !important;
}
[data-theme="dark"] .svcRow { background: #1e2b23; border-color: #263530; }
[data-theme="dark"] .svcRow:hover { border-color: #334540; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
[data-theme="dark"] .svcInfo strong { color: #ddeae2; }
[data-theme="dark"] .svcInfo small  { color: #7a9a88; }
[data-theme="dark"] .svcVal  { color: #ddeae2; }
[data-theme="dark"] .svcBarTrack { background: #253028; }
[data-theme="dark"] .svcBar small  { color: #7a9a88; }
[data-theme="dark"] .riskItem { background: #1e2b23; }
[data-theme="dark"] .riskItem strong { color: #ddeae2; }
[data-theme="dark"] .riskItem span   { color: #7a9a88; }
[data-theme="dark"] .taskItem strong { color: #ddeae2; }
[data-theme="dark"] .taskItem > span { color: #7a9a88; }
[data-theme="dark"] .taskMeta span   { color: #7a9a88; }
[data-theme="dark"] .refItem  { background: #1e2b23; }
[data-theme="dark"] .refItem strong { color: #ddeae2; }
[data-theme="dark"] .refItem small  { color: #7a9a88; }
[data-theme="dark"] .focusItem { background: rgba(43,196,122,.06); border-color: rgba(43,196,122,.15); }
[data-theme="dark"] .focusItem strong { color: #2bc47a; }
[data-theme="dark"] .focusItem span   { color: #7a9a88; }
[data-theme="dark"] .empty { background: rgba(255,255,255,.02); border-color: #253028; color: #7a9a88; }
[data-theme="dark"] .sectionLabel { color: #7a9a88; }
[data-theme="dark"] .sectionDivider { border-color: #253028; }
[data-theme="dark"] .badge {
  background: rgba(255,255,255,.07) !important;
  color: #a0bfad !important;
  border-color: #253028 !important;
}
[data-theme="dark"] .kpiIcon { background: rgba(255,255,255,.06) !important; border-color: #253028 !important; }

/* ── Settings page (new classes) ── */
[data-theme="dark"] .sPanel { background: #172019; border-color: #253028; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
[data-theme="dark"] .sPanelHead { background: rgba(13,20,16,.7); border-color: #253028; }
[data-theme="dark"] .sPanelHead h2 { color: #ddeae2; }
[data-theme="dark"] .sPanelHead i  { color: #2bc47a; }
[data-theme="dark"] .sPanelHead .badge { background: rgba(43,196,122,.12); color: #2bc47a; border-color: rgba(43,196,122,.2); }
[data-theme="dark"] .profileName { color: #ddeae2; }
[data-theme="dark"] .profileRole { color: #7a9a88; }
[data-theme="dark"] .pField label { color: #7a9a88; }
[data-theme="dark"] .pField input { background: #131a16; border-color: #253028; color: #ddeae2; }
[data-theme="dark"] .pField input:focus { border-color: rgba(43,196,122,.5); box-shadow: 0 0 0 3px rgba(43,196,122,.1); }
[data-theme="dark"] .dividerLabel { color: #7a9a88; border-color: #253028; }
[data-theme="dark"] .statTile { background: #131a16; border-color: #253028; }
[data-theme="dark"] .statTile span { color: #7a9a88; }
[data-theme="dark"] .statTile b    { color: #ddeae2; }
[data-theme="dark"] .statTile small { color: #7a9a88; }
[data-theme="dark"] .storageBar { background: #131a16; border-color: #253028; }
[data-theme="dark"] .storageBarHead span { color: #ddeae2; }
[data-theme="dark"] .storageBarHead small { color: #7a9a88; }
[data-theme="dark"] .storageTrack { background: #253028; }
[data-theme="dark"] .storageFill { background: #2bc47a; }
[data-theme="dark"] .actionRow { border-color: #253028; }
[data-theme="dark"] .actionRowLabel { color: #ddeae2; }
[data-theme="dark"] .actionRowSub   { color: #7a9a88; }
[data-theme="dark"] .aBtn.neutral { background: #1e2b23; border-color: #334540; color: #ddeae2; }
[data-theme="dark"] .aBtn.neutral:hover { background: #263530; }
[data-theme="dark"] .stageItem { background: rgba(255,255,255,.03); border-color: #253028 !important; }
[data-theme="dark"] .stageTitle { color: #ddeae2; }
[data-theme="dark"] .stageCnt  { color: #7a9a88; }
[data-theme="dark"] .stageRev  { color: #7a9a88; }
[data-theme="dark"] .serviceItem { background: #1e2b23; border-color: #263530; }
[data-theme="dark"] .serviceInfo strong { color: #ddeae2; }
[data-theme="dark"] .serviceInfo small  { color: #7a9a88; }
[data-theme="dark"] .serviceCnt { color: #7a9a88; }
[data-theme="dark"] .aboutItem { background: #131a16; border-color: #253028; }
[data-theme="dark"] .aboutItem span { color: #7a9a88; }
[data-theme="dark"] .aboutItem b    { color: #ddeae2; }
[data-theme="dark"] .quickLink { background: #1e2b23; border-color: #263530; color: #ddeae2; }
[data-theme="dark"] .quickLink:hover { border-color: #2bc47a; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
[data-theme="dark"] .quickLink i { color: #2bc47a; }
[data-theme="dark"] .quickLink span { color: #ddeae2; }
[data-theme="dark"] .quickLink small { color: #7a9a88; }

/* ── Settings page (old classes — keep for compat) ── */
[data-theme="dark"] .settingsPanel { background: #172019; border-color: #253028; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
[data-theme="dark"] .settingsPanelHead { background: rgba(13,20,16,.7); border-color: #253028; }
[data-theme="dark"] .settingsPanelHead h2 { color: #ddeae2; }
[data-theme="dark"] .settingsPanelHead i  { color: #2bc47a; }
[data-theme="dark"] .settingsRow { border-color: #253028; }
[data-theme="dark"] .settingsRowLabel { color: #ddeae2; }
[data-theme="dark"] .settingsRowSub   { color: #7a9a88; }
[data-theme="dark"] .statBox { background: #131a16; border-color: #253028; }
[data-theme="dark"] .statBox span { color: #7a9a88; }
[data-theme="dark"] .statBox b    { color: #ddeae2; }

/* ── Overlay & toast ── */
[data-theme="dark"] .overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .toast { background: #ddeae2; color: #0d1410; }

/* ── emptyState ── */
[data-theme="dark"] .emptyState {
  background: rgba(255,255,255,.02);
  border-color: #253028; color: #7a9a88;
}

/* ══════════════════════════════════════════════
   Theme switcher UI
   ══════════════════════════════════════════════ */
.themeOptions { display: flex; gap: 10px; }
.themeOption {
  flex: 1; padding: 14px 10px; border-radius: var(--radius);
  border: 2px solid var(--line); background: transparent;
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.themeOption:hover { border-color: var(--green); transform: translateY(-1px); }
.themeOption.active {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
}
.themeOption .tIcon {
  width: 48px; height: 32px; border-radius: 6px;
  border: 1.5px solid var(--line); display: flex; overflow: hidden;
}
.themeOption .tIconLight { flex: 1; background: #f3f6f3; }
.themeOption .tIconDark  { flex: 1; background: #141a17; }
.themeOption span  { font-size: 12px; font-weight: 700; color: var(--ink); }
.themeOption small { font-size: 10px; color: var(--muted); }