/* Selene - StudyOS shell */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Kalam:wght@300;400;700&family=Architects+Daughter&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -- Core Selene palette ------------------------- */
  --paper: #FBFAF6;
  --paper2: #F4F1E8;
  --ink: #2A2622;
  --ink2: #5C544A;
  --ink3: #8C8478;
  --line: #2A2622;
  --line2: rgba(42,38,34,0.3);
  --line3: rgba(42,38,34,0.15);
  --accent: #E07A4F;
  --accent2: #4A7FA8;
  --accent3: #C9A961;
  --good: #7BA05B;
  --bad: #B8543F;
  --hand: 'Kalam', 'Caveat', cursive;
  --display: 'Caveat', cursive;
  --label: 'Architects Daughter', cursive;
  --mono: 'JetBrains Mono', monospace;

  /* -- Theme-system aliases (used by login, signup, auth pages) -- */
  --bg:      var(--paper);
  --bg2:     var(--paper2);
  --bg3:     #EDE8DC;
  --panel:   rgba(251,250,246,0.95);
  --panel2:  rgba(244,241,232,0.80);
  --border:  rgba(42,38,34,0.15);
  --border2: rgba(42,38,34,0.45);
  --text:    var(--ink);
  --text2:   var(--ink2);
  --text3:   var(--ink3);
  --danger:  var(--bad);
  --success: var(--good);
  --warning: #C9A961;
  --info:    var(--accent2);
  --shadow:  3px 3px 0 rgba(42,38,34,0.15);
  --shadow2: 4px 4px 0 rgba(42,38,34,0.12);
  --radius:  10px;
  --radius2: 8px;
  --radius3: 6px;
  --transition: 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  --font-display: 'Caveat', cursive;
  --font-body:    'Kalam', 'Caveat', cursive;
  --font-mono:    'JetBrains Mono', monospace;
}

[data-template="white"] {
  --paper: #FFFFFF;
  --paper2: #F7F8FA;
  --ink: #111827;
  --ink2: #4B5563;
  --ink3: #8A94A6;
  --line: #D7DCE3;
  --line2: #E7EAF0;
  --line3: rgba(17,24,39,0.06);
  --accent: #2563EB;
  --accent2: #0F766E;
  --accent3: #EEF2FF;
  --good: #059669;
  --bad: #DC2626;
  --hand: Inter, system-ui, sans-serif;
  --display: Inter, system-ui, sans-serif;
  --label: Inter, system-ui, sans-serif;
  --bg: var(--paper);
  --bg2: var(--paper2);
  --panel: #FFFFFF;
  --border: var(--line2);
  --border2: var(--line);
  --text: var(--ink);
  --text2: var(--ink2);
  --text3: var(--ink3);
  --shadow: 0 1px 2px rgba(17,24,39,0.06);
  --shadow2: 0 12px 30px rgba(17,24,39,0.10);
}

* { box-sizing: border-box; }
.wire-nav { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 15px;
  line-height: 1.45;
  background-image:
    radial-gradient(rgba(42,38,34,0.025) 1px, transparent 1px),
    radial-gradient(rgba(42,38,34,0.02) 1px, transparent 1px);
  background-size: 18px 18px, 31px 31px;
  background-position: 0 0, 9px 13px;
}

html[data-template="white"] body {
  background-image: none;
}

/* ─── Liquid Glass theme — light frost over dark gradient ─────────────
   Panels are translucent WHITE (like Apple's iOS 26 / macOS Sequoia frost).
   Text is light because the backdrop-blur over the deep navy/violet bg
   tints the frost dark enough that white text remains readable. */
[data-template="liquid-glass"] {
  --paper:  rgba(255, 255, 255, 0.14);
  --paper2: rgba(255, 255, 255, 0.20);
  --ink:    #FFFFFF;
  --ink2:   #DDE3F0;
  --ink3:   #A8B0C5;
  --line:   rgba(255, 255, 255, 0.28);
  --line2:  rgba(255, 255, 255, 0.18);
  --line3:  rgba(255, 255, 255, 0.10);
  --accent:  #8AB6FF;
  --accent2: #B49AFF;
  --accent3: rgba(180, 154, 255, 0.30);
  --good:    #6EE7B7;
  --bad:     #FCA5A5;
  --hand: 'Inter', system-ui, sans-serif;
  --display: 'Inter', system-ui, sans-serif;
  --label: 'Inter', system-ui, sans-serif;
  --bg:      var(--paper);
  --bg2:     var(--paper2);
  --panel:   var(--paper);
  --border:  var(--line);
  --border2: var(--line2);
  --text:    var(--ink);
  --text2:   var(--ink2);
  --text3:   var(--ink3);
  --shadow:  0 6px 18px rgba(8, 14, 36, 0.55);
  --shadow2: 0 18px 50px rgba(8, 14, 36, 0.55);
}

/* Force light text everywhere — guards against any page that hardcoded
   `color: #2a2622` or similar instead of using --ink. */
html[data-template="liquid-glass"],
html[data-template="liquid-glass"] body,
html[data-template="liquid-glass"] h1,
html[data-template="liquid-glass"] h2,
html[data-template="liquid-glass"] h3,
html[data-template="liquid-glass"] h4,
html[data-template="liquid-glass"] p,
html[data-template="liquid-glass"] span,
html[data-template="liquid-glass"] div,
html[data-template="liquid-glass"] li,
html[data-template="liquid-glass"] label,
html[data-template="liquid-glass"] td,
html[data-template="liquid-glass"] th { color: var(--ink); }
html[data-template="liquid-glass"] .ink2,
html[data-template="liquid-glass"] .meta,
html[data-template="liquid-glass"] .label,
html[data-template="liquid-glass"] small { color: var(--ink2); }
html[data-template="liquid-glass"] .ink3,
html[data-template="liquid-glass"] .mut { color: var(--ink3); }

html[data-template="liquid-glass"] body {
  background:
    radial-gradient(1200px 800px at 15% 20%, #2c5b9c 0%, transparent 60%),
    radial-gradient(900px 700px at 85% 80%, #6e3aa8 0%, transparent 55%),
    linear-gradient(135deg, #0b1228 0%, #1a1742 40%, #1f1452 65%, #0a1130 100%);
  background-size: 200% 200%;
  background-image:
    radial-gradient(1200px 800px at 15% 20%, #2c5b9c 0%, transparent 60%),
    radial-gradient(900px 700px at 85% 80%, #6e3aa8 0%, transparent 55%),
    linear-gradient(135deg, #0b1228 0%, #1a1742 40%, #1f1452 65%, #0a1130 100%);
  animation: moveBackground 60s linear infinite;
  color: var(--ink);
}
@keyframes moveBackground {
  0%   { background-position: 0% 0%,   100% 100%, 0% 0%; }
  50%  { background-position: 30% 20%, 70% 80%,  50% 50%; }
  100% { background-position: 0% 0%,   100% 100%, 0% 0%; }
}

/* Apply the glass treatment to every panel/card-like surface. We pull these
   selectors from the existing components so we don't have to touch markup. */
html[data-template="liquid-glass"] .box,
html[data-template="liquid-glass"] .pane,
html[data-template="liquid-glass"] #sidebar,
html[data-template="liquid-glass"] .side-panel,
html[data-template="liquid-glass"] .selene-modal,
html[data-template="liquid-glass"] .receipt-modal,
html[data-template="liquid-glass"] .sir-modal,
html[data-template="liquid-glass"] .picker-panel,
html[data-template="liquid-glass"] .picker-card,
html[data-template="liquid-glass"] .dropdown-menu,
html[data-template="liquid-glass"] .a-card,
html[data-template="liquid-glass"] .note-card,
html[data-template="liquid-glass"] .ex-card,
html[data-template="liquid-glass"] .course-card,
html[data-template="liquid-glass"] .plan-card,
html[data-template="liquid-glass"] .pricing-card,
html[data-template="liquid-glass"] .profile-card,
html[data-template="liquid-glass"] .feature-card,
html[data-template="liquid-glass"] .stat-card,
html[data-template="liquid-glass"] .step-card,
html[data-template="liquid-glass"] .auto-card,
html[data-template="liquid-glass"] .qcard,
html[data-template="liquid-glass"] .auth-card,
html[data-template="liquid-glass"] .verify-card,
html[data-template="liquid-glass"] .feedback-card,
html[data-template="liquid-glass"] .pssim-card,
html[data-template="liquid-glass"] .chart-panel,
html[data-template="liquid-glass"] .ai-card,
html[data-template="liquid-glass"] .preview-ai-panel,
html[data-template="liquid-glass"] .conv-item,
html[data-template="liquid-glass"] .kpi,
html[data-template="liquid-glass"] .cell,
html[data-template="liquid-glass"] [class*="-modal"],
html[data-template="liquid-glass"] [class*="modal-"],
html[data-template="liquid-glass"] [class*="-card"]:not(.tier-locked):not(.starter-card),
html[data-template="liquid-glass"] [class*="-panel"] {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 6px 24px rgba(8, 14, 36, 0.35);
  color: var(--ink) !important;
}

/* Backdrops behind modals: keep them dark so the frost panels pop. */
html[data-template="liquid-glass"] .selene-overlay,
html[data-template="liquid-glass"] .fs-overlay,
html[data-template="liquid-glass"] [class*="-overlay"] {
  background: rgba(8, 14, 36, 0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* The shell's #app grid + #main fill the viewport with the gradient — kill
   any hardcoded light backgrounds so panels read against the gradient. */
html[data-template="liquid-glass"] #app,
html[data-template="liquid-glass"] #main,
html[data-template="liquid-glass"] main { background: transparent !important; }

/* Buttons */
html[data-template="liquid-glass"] .btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 12px rgba(8, 14, 36, 0.25);
  transition: transform .22s cubic-bezier(.175,.885,.32,2.2), background .22s ease, box-shadow .22s ease;
}
html[data-template="liquid-glass"] .btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 20px rgba(8, 14, 36, 0.35);
}
html[data-template="liquid-glass"] .btn.primary,
html[data-template="liquid-glass"] .btn.accent {
  background: linear-gradient(135deg, rgba(138,182,255,0.55), rgba(180,154,255,0.45)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
}
html[data-template="liquid-glass"] .btn.ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
}

/* Inputs / fields */
html[data-template="liquid-glass"] input,
html[data-template="liquid-glass"] textarea,
html[data-template="liquid-glass"] select {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: var(--ink) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
html[data-template="liquid-glass"] input::placeholder,
html[data-template="liquid-glass"] textarea::placeholder { color: rgba(245,248,255,0.45) !important; }

/* The note-detail / fullscreen reader has its own gradient + light panels in
   the default theme — strip those and replace with the same dark frost so
   text stays readable. */
html[data-template="liquid-glass"] .note-fs {
  background:
    radial-gradient(900px 600px at 20% 25%, rgba(44,91,156,0.55) 0%, transparent 60%),
    radial-gradient(700px 500px at 80% 75%, rgba(110,58,168,0.50) 0%, transparent 55%),
    linear-gradient(135deg, #0b1228 0%, #1a1742 60%, #0a1130 100%) !important;
}
html[data-template="liquid-glass"] .note-reader,
html[data-template="liquid-glass"] .note-reader-aside,
html[data-template="liquid-glass"] .note-reader-main {
  background: transparent !important;
  color: var(--ink) !important;
}
html[data-template="liquid-glass"] .note-reader-aside {
  background: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
}
html[data-template="liquid-glass"] .note-reader-aside h1,
html[data-template="liquid-glass"] .note-reader-main h1,
html[data-template="liquid-glass"] .note-reader-main h2,
html[data-template="liquid-glass"] .note-reader-main h3,
html[data-template="liquid-glass"] .note-reader-main p,
html[data-template="liquid-glass"] .note-reader-main li,
html[data-template="liquid-glass"] .note-reader-main .content,
html[data-template="liquid-glass"] .note-reader-main .structured-note {
  color: var(--ink) !important;
}
html[data-template="liquid-glass"] .note-fs-head {
  background: rgba(255, 255, 255, 0.10) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: var(--ink) !important;
}

/* Settings + Subscription tiles use bordered cards that turn invisible on
   the gradient. Force the frost. */
html[data-template="liquid-glass"] .settings-section,
html[data-template="liquid-glass"] .sub-card,
html[data-template="liquid-glass"] .danger-zone,
html[data-template="liquid-glass"] [class*="settings-"],
html[data-template="liquid-glass"] [class*="subscription"] {
  color: var(--ink) !important;
}
html[data-template="liquid-glass"] .danger-zone {
  background: rgba(252, 165, 165, 0.10) !important;
  border-color: rgba(252, 165, 165, 0.40) !important;
}

/* Sidebar icons need a touch more contrast against the gradient */
html[data-template="liquid-glass"] #sidebar .nav-icon { color: var(--ink2); }
html[data-template="liquid-glass"] #sidebar .nav-icon.active {
  background: rgba(255, 255, 255, 0.20);
  color: var(--ink);
}

/* The dotted-grid texture from the default theme would clash with the
   gradient — kill it. */
html[data-template="liquid-glass"] body { background-image: none, none, none; }
html[data-template="liquid-glass"] body {
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(44,91,156,0.85) 0%, transparent 60%),
    radial-gradient(900px 700px at 85% 80%, rgba(110,58,168,0.75) 0%, transparent 55%),
    linear-gradient(135deg, #0b1228 0%, #1a1742 40%, #1f1452 65%, #0a1130 100%);
  background-size: 200% 200%;
  animation: moveBackground 60s linear infinite;
}
/* ─── /Liquid Glass ─────────────────────────────────────────────────── */

#app {
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  overflow: hidden;
}
body:has(#app) { overflow: hidden; }

body.sidebar-expanded #app { grid-template-columns: 220px 1fr; }

/* SIDEBAR */
#sidebar {
  grid-row: 1 / 3;
  grid-column: 1;
  border-right: 1.5px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 6px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
#sidebar::after {
  /* hand-drawn wobble line */
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0; width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 14px,
    rgba(42,38,34,0.08) 14px 16px
  );
  pointer-events: none;
}

.brand-logo { width:36px; height:36px; object-fit:contain; margin-bottom:14px; border-radius:8px; }
.brand {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
  transform: rotate(-4deg);
  line-height: 1;
}

.nav-icon {
  width: 44px;
  height: 44px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink3);
  cursor: pointer;
  position: relative;
  transition: all .15s;
  flex-shrink: 0;
  text-decoration: none;
}
body.sidebar-expanded .nav-icon {
  width: calc(100% - 20px);
  justify-content: flex-start;
  padding: 0 12px;
  gap: 10px;
}
.nav-icon:hover { color: var(--ink2); border-color: var(--line3); }
.nav-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon.active {
  color: var(--ink);
  border: 1.5px solid var(--line);
  background: var(--paper2);
  /* sketchy double-border */
  box-shadow: 2px 2px 0 var(--line3);
}
.nav-icon.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-icon .tip {
  position: absolute;
  left: 54px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--label);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s .1s;
  z-index: 100;
}
.nav-icon:hover .tip { opacity: 1; }
body.sidebar-expanded .nav-icon .tip { display: none; }
.nav-text { display: none; font-family: var(--label); font-size: 12px; color: currentColor; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sidebar-expanded .nav-text { display: inline; }
body.sidebar-expanded #sidebar { align-items: stretch; padding-left: 10px; padding-right: 10px; }
body.sidebar-expanded .brand-logo { margin-left: 4px; }

.nav-spacer { margin-top: auto; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--label), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  text-indent: 0;
  letter-spacing: 0;
}

.user-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 44px;
  padding: 4px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.user-footer:hover { border-color: var(--line3); background: var(--paper2); }
.user-footer-meta { display: none; min-width: 0; flex: 1; }
.user-footer-name {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.user-footer-plan {
  font-family: var(--label);
  font-size: 11px;
  color: var(--ink3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sidebar-expanded .user-footer { width: 100%; padding: 6px 8px; }
body.sidebar-expanded .user-footer-meta { display: block; }

/* TOPBAR */
#topbar {
  grid-row: 1; grid-column: 2;
  border-bottom: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  background: var(--paper);
  position: relative;
}
#topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px; height: 1px;
  background: rgba(42,38,34,0.1);
}
.title-block { min-width: 0; }
.page-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.page-sub {
  font-family: var(--label);
  font-size: 11px;
  color: var(--ink3);
  margin-top: 2px;
}

.search {
  flex: 1;
  max-width: 360px;
  margin-left: auto;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px;
  font-family: var(--hand);
  font-size: 13px;
  color: var(--ink3);
  background: var(--paper);
  display: flex; align-items: center; gap: 8px;
}
.search svg { width: 14px; height: 14px; stroke: var(--ink3); fill:none; stroke-width: 1.7; }

.clock { font-family: var(--mono); font-size: 12px; color: var(--ink2); }

.mode-chip {
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 4px 12px;
  font-family: var(--label);
  font-size: 11px;
  background: var(--accent);
  color: var(--paper);
}

.quota-chip {
  border: 1.5px solid var(--line2);
  border-radius: 100px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--paper2);
  color: var(--ink2);
  white-space: nowrap;
}
.quota-chip.low { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--line2)); }

/* Simple/Full mode toggle — replaced the AI quota chip in the topbar. */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--line2);
  border-radius: 100px;
  padding: 3px 10px 3px 4px;
  background: var(--paper2);
  color: var(--ink2);
  font-family: var(--label, system-ui);
  font-size: 11px;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.mode-toggle:hover { border-color: var(--accent); color: var(--ink); }
.mode-toggle-track {
  position: relative;
  width: 30px;
  height: 16px;
  border-radius: 100px;
  background: var(--line3);
  transition: background 0.18s;
  flex-shrink: 0;
}
.mode-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.18s;
}
/* "on" = simple mode active. Thumb slides right, track goes accent. */
.mode-toggle.on .mode-toggle-track { background: var(--accent); }
.mode-toggle.on .mode-toggle-thumb { transform: translateX(14px); }
.mode-toggle-label { font-weight: 600; }

.icon-btn {
  width: 36px; height: 36px;
  border: 1.5px solid var(--line3);
  border-radius: 8px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
}
.icon-btn:hover { border-color: var(--line); }
.icon-btn svg { width: 16px; height: 16px; stroke: var(--ink2); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-btn { border:0; background:transparent; padding:0; cursor:pointer; display:grid; place-items:center; }
.avatar-img { object-fit: cover; background: var(--paper2); }
#notif-dot {
  position:absolute; right:-4px; top:-4px; min-width:17px; height:17px; padding:0 4px;
  display:none; place-items:center; border-radius:999px; background:var(--bad); color:#fff;
  font:700 10px/1 var(--mono); border:2px solid var(--paper);
}

#notifications-panel {
  position: fixed; top: 64px; right: 18px; width: min(360px, calc(100vw - 28px)); max-height: calc(100vh - 90px);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; box-shadow: var(--shadow2);
  z-index: 550; display: none; overflow: hidden;
}
#notifications-panel.open { display: block; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line2); font-family:var(--label); }
.btn-ghost-mini { border:1.5px solid var(--line2); background:transparent; color:var(--ink2); font-family:var(--label); font-size:11px; padding:4px 9px; border-radius:6px; cursor:pointer; }
.btn-ghost-mini:hover { border-color:var(--line); color:var(--ink); }
#notifications-list { max-height: 420px; overflow:auto; }
.notif-item { width:100%; text-align:left; border:0; border-bottom:1px solid var(--line2); background:var(--paper); padding:12px 14px; cursor:pointer; color:var(--ink); display:grid; gap:4px; }
.notif-item:hover { background:var(--paper2); }
.notif-item.unread { border-left:3px solid var(--accent); }
.notif-item strong { font-family:var(--label); font-size:12px; }
.notif-item span, .empty-mini { font-family:var(--hand); font-size:12px; color:var(--ink3); }
.empty-mini { padding:18px; text-align:center; }

#feedback-fab {
  position:fixed; right:18px; bottom:18px; z-index:398; display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--line); border-radius:999px; background:var(--ink); color:var(--paper);
  padding:9px 13px; font-family:var(--label); font-size:12px; cursor:pointer; box-shadow:var(--shadow2);
}
/* Move FAB up on pages where the action button row sits near the bottom right */
body[data-page="notes"] #feedback-fab { bottom: 72px; }

/* -- Upload progress chips (SeleneUpload) ---------------------- */
#selene-upload-stack {
  position: fixed; left: 92px; bottom: 18px; z-index: 600;
  display: flex; flex-direction: column-reverse; gap: 8px;
  max-width: 340px; pointer-events: none;
}
.selene-upload-chip {
  pointer-events: auto;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  font-family: var(--label);
  font-size: 12px;
  color: var(--ink);
  min-width: 260px;
  animation: su-slide-in .2s ease-out;
}
@keyframes su-slide-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.selene-upload-chip .su-row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.selene-upload-chip .su-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.selene-upload-chip .su-cancel {
  border: 0; background: transparent; color: var(--ink3); cursor: pointer;
  font-size: 18px; line-height: 1; width: 20px; height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
}
.selene-upload-chip .su-cancel:hover { background: var(--paper2); color: var(--ink); }
.selene-upload-chip .su-bar {
  height: 5px; background: var(--paper2); border-radius: 100px; overflow: hidden; margin: 4px 0 6px;
}
.selene-upload-chip .su-bar-fill {
  height: 100%; width: 0%; background: var(--accent);
  transition: width .15s ease-out;
}
.selene-upload-chip .su-row2 {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink3);
}
.selene-upload-chip.su-done .su-bar-fill { background: var(--good); }
.selene-upload-chip.su-done .su-pct { color: var(--good); }
.selene-upload-chip.su-failed .su-bar-fill { background: var(--bad); }
.selene-upload-chip.su-failed .su-pct { color: var(--bad); }

/* Trigger button gets a spinner + disabled visual while its upload runs */
.su-trigger-busy {
  position: relative;
  opacity: 0.75;
  cursor: wait !important;
}
.su-trigger-busy::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: su-spin .7s linear infinite;
}
@keyframes su-spin { to { transform: rotate(360deg); } }

/* Scoped lock: any container marked busy disables its buttons (the JS sets
   disabled directly; this just adds the visual cue so they look paused). */
[data-upload-busy="1"] button:disabled[data-su-locked="1"],
[data-upload-busy="1"] .btn:disabled[data-su-locked="1"] {
  opacity: 0.55;
  cursor: wait !important;
}
#feedback-fab svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; }
#system-feedback-modal { position:fixed; inset:0; z-index:700; background:rgba(17,24,39,.28); display:grid; place-items:center; padding:18px; }
.feedback-card { width:min(480px, 100%); background:var(--paper); border:1.5px solid var(--line); border-radius:8px; box-shadow:var(--shadow2); padding:0 14px 14px; }
.feedback-card textarea { width:100%; resize:vertical; border:1.5px solid var(--line); border-radius:8px; padding:10px 12px; background:var(--paper2); color:var(--ink); font-family:var(--hand); }

/* MAIN */
#main {
  grid-row: 2; grid-column: 2;
  overflow-y: auto;
  padding: 20px;
  background: transparent;
}

/* Interactive items use pointer; everything else uses the default arrow */
button, a, [onclick], [role="button"], label,
.nav-icon, .nav-item, .pill, .tab2, .toggle, .grp-card, .note-card,
.icon-btn, .profile-btn, .user-footer, .checkbox, .pip-btn, .ctrl,
select, option, summary {
  cursor: pointer;
}
input, textarea { cursor: text; }
/* Hide scrollbars everywhere while keeping scroll functional, in every theme.
   !important so it beats per-element rules (e.g. #sidebar's scrollbar-width:thin)
   and any browser default. Firefox via scrollbar-width, Chromium/Safari via the
   pseudo-element, legacy Edge via -ms-overflow-style. */
*, *::before, *::after {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* SHARED Selene PRIMITIVES */
.box {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 14px;
  position: relative;
  /* sketchy double-corner shadow */
  box-shadow: 3px 3px 0 var(--line3);
}

@media (max-width: 860px) {
  #app, body.sidebar-expanded #app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr 64px;
  }
  #sidebar {
    grid-row: 3;
    grid-column: 1;
    border-right: 0;
    border-top: 1.5px solid var(--line);
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    padding: 8px 10px;
    gap: 6px;
  }
  #sidebar::after, .sidebar-toggle, #sidebar .brand-logo, #sidebar .nav-spacer { display: none !important; }
  .nav-icon { width: 44px !important; height: 44px; justify-content: center !important; padding: 0 !important; }
  .nav-text, .nav-icon .tip { display: none !important; }
  .nav-icon.active::before { left: 9px; right: 9px; top: auto; bottom: -7px; height: 3px; width: auto; }
  #topbar { grid-row: 1; grid-column: 1; padding: 0 12px; gap: 8px; }
  #main { grid-row: 2; grid-column: 1; padding: 12px; }
  .page-title { font-size: 20px; }
  .page-sub, .clock, .quota-chip { display: none; }
  .search { max-width: none; min-width: 42px; padding: 8px 10px; flex: 0 1 42px; }
  .search span { display:none; }
  #feedback-fab { bottom: 78px; }
  .selene-modal { width: 100%; max-width: 100%; border-radius: 0; }
  .selene-modal-overlay { padding: 0; }
  .picker-panel { width: 100%; max-width: 100%; height: 100vh; border-radius: 0; }
  .picker-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .picker-grid { grid-template-columns: 1fr !important; }
  .page-title { font-size: 18px; }
  .btn { padding: 8px 12px; font-size: 13px; }
  #notifications-panel { width: calc(100vw - 24px) !important; right: 12px !important; }
}

/* ── Cross-page mobile defaults ──────────────────────────────────
   Per-page <style> blocks define multi-column grids that don't
   collapse on their own. Tighten them centrally so every view feels
   contained on small screens instead of loose and overflowing. */
@media (max-width: 720px) {
  /* Stat/summary rows: stack to one or two columns */
  .stat-row,
  .course-stats { grid-template-columns: 1fr 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .rate-row { grid-template-columns: 1fr 1fr !important; }

  /* Multi-field inline forms wrap to a single column */
  .course-form { grid-template-columns: 1fr !important; }
  .courses-toolbar { gap: 8px; }

  /* Wide reader/detail panels collapse to a single column */
  .note-reader { grid-template-columns: 1fr !important; }
  .concept-row { grid-template-columns: 1fr auto !important; }

  /* Calendar: keep all 7 columns but let cells shrink to fit the width
     and use shorter rows so a month fits on screen without overflow. */
  .cal-head, .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
  .cal-grid { grid-auto-rows: 58px; }
  .ag-row { grid-template-columns: 52px 12px 1fr auto; gap: 6px; }

  /* Reports charts: bars shrink to fit instead of overflowing */
  .bar-row, .stack-bars, .day-lbl { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}
@media (max-width: 460px) {
  .stat-row,
  .stat-grid,
  .course-stats,
  .rate-row { grid-template-columns: 1fr !important; }
}
.box.dashed { border-style: dashed; }
.box-h {
  font-family: var(--label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink2);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.box-h .action { color: var(--accent); cursor: pointer; }

.placeholder {
  /* striped placeholder block */
  background:
    repeating-linear-gradient(135deg,
      transparent 0 6px,
      rgba(42,38,34,0.06) 6px 7px);
  border: 1.5px dashed var(--line2);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
}

.btn {
  font-family: var(--hand);
  font-size: 14px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  color: var(--ink);
  transition: transform .1s;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.accent  { background: var(--accent); color: var(--paper); border-color: var(--ink); }
.btn.ghost   { background: transparent; }
.btn.sm { font-size: 12px; padding: 4px 12px; }

.tag {
  font-family: var(--label);
  font-size: 10px;
  padding: 2px 9px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: inline-block;
  white-space: nowrap;
}
.tag.done   { background: var(--good); color: var(--paper); }
.tag.urgent { background: var(--bad); color: var(--paper); }
.tag.week   { background: var(--accent2); color: var(--paper); }
.tag.info   { background: var(--accent3); color: var(--ink); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line); vertical-align: middle; }
.dot.is { background: #8B6F4E; }
.dot.db { background: #4A7FA8; }
.dot.se { background: #7BA05B; }
.dot.ma { background: #C9A961; }
.dot.en { background: #B8543F; }

.label {
  font-family: var(--label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink3);
}

.checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--paper);
  flex-shrink: 0;
}
.checkbox.checked { background: var(--good); border-color: var(--ink); }
.checkbox.checked::after {
  content: '';
  width: 5px; height: 9px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px,-1px);
}

.divider {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--line2) 0 6px, transparent 6px 10px);
  margin: 12px 0;
  border: 0;
}

.scribble-underline {
  display: inline-block;
  position: relative;
}
.scribble-underline::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -3px; height: 4px;
  background: var(--accent);
  opacity: 0.5;
  border-radius: 2px;
  transform: skewX(-8deg);
}

.note-banner {
  font-family: var(--hand);
  font-size: 12px;
  color: var(--ink2);
  background: var(--accent3);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  display: inline-block;
  transform: rotate(-1deg);
}

.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; }

/* Selene ANNOTATION */
.anno {
  font-family: var(--display);
  font-size: 16px;
  color: var(--accent);
  font-weight: 600;
  position: absolute;
  pointer-events: none;
}
.anno svg.arrow { width: 60px; height: 30px; stroke: var(--accent); fill: none; stroke-width: 1.5; }

/* -- MODAL SYSTEM ---------------------------------------------- */
.selene-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.50);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
}
.selene-overlay.open { opacity: 1; pointer-events: auto; }
.selene-modal {
  background: var(--paper, #FBFAF6);
  border: 1.5px solid var(--line, #2A2622);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--line3, rgba(42,38,34,0.15));
  width: 100%; max-width: 540px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  transform: translateY(10px);
  transition: transform 0.22s;
  overflow: hidden;
}
.selene-overlay.open .selene-modal { transform: translateY(0); }
.selene-modal.wide { max-width: 720px; }
.selene-modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1.5px solid var(--line2, rgba(42,38,34,0.3));
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.selene-modal-title {
  font-family: var(--display, 'Caveat', cursive);
  font-size: 22px; font-weight: 600;
  color: var(--ink, #2A2622);
}
.selene-modal-close {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line2, rgba(42,38,34,0.3));
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-size: 0; color: var(--ink2, #5C544A);
  transition: all 0.15s;
}
.selene-modal-close::before,
.selene-modal-close::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.selene-modal-close::before { transform: rotate(45deg); }
.selene-modal-close::after { transform: rotate(-45deg); }
.selene-modal-close:hover { background: var(--paper2, #F4F1E8); color: var(--ink, #2A2622); }
.selene-modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.selene-modal-footer {
  padding: 14px 22px 18px;
  border-top: 1.5px solid var(--line2, rgba(42,38,34,0.3));
  display: flex; gap: 10px; justify-content: flex-end;
  flex-shrink: 0;
}

/* Modal form fields */
.m-field { margin-bottom: 16px; }
.m-field label {
  display: block;
  font-family: var(--label, 'Architects Daughter', cursive);
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink3, #8C8478); margin-bottom: 6px;
}
.m-field input, .m-field textarea, .m-field select {
  width: 100%;
  border: 1.5px solid var(--line, #2A2622);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--hand, 'Kalam', cursive);
  font-size: 13px;
  color: var(--ink, #2A2622);
  background: var(--paper, #FBFAF6);
  outline: none;
  transition: border-color 0.15s;
}
.m-field input:focus, .m-field textarea:focus, .m-field select:focus {
  border-color: var(--accent, #E07A4F);
}
.m-field textarea { resize: vertical; min-height: 80px; }
.m-field .m-row { display: grid; gap: 12px; }
.m-field .m-row.two { grid-template-columns: 1fr 1fr; }
.m-field .m-row.three { grid-template-columns: 1fr 1fr 1fr; }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--line, #2A2622);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--paper2, #F4F1E8);
  position: relative;
}
.upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent, #E07A4F); background: rgba(224,122,79,0.06); }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-zone .uz-icon { font-size: 28px; margin-bottom: 8px; }
.upload-zone .uz-text { font-family: var(--hand, 'Kalam', cursive); font-size: 13px; color: var(--ink2, #5C544A); }
.upload-zone .uz-hint { font-family: var(--label, cursive); font-size: 10px; color: var(--ink3, #8C8478); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
.upload-zone .uz-chosen { font-family: var(--mono, monospace); font-size: 11px; color: var(--accent, #E07A4F); margin-top: 8px; font-weight: 600; }

/* Tab switcher inside modal */
.m-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1.5px solid var(--line2, rgba(42,38,34,0.3)); }
.m-tab { font-family: var(--label, cursive); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1.5px; color: var(--ink3, #8C8478); }
.m-tab.active { border-bottom-color: var(--accent, #E07A4F); color: var(--ink, #2A2622); }

/* Toast notification */
.selene-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 600;
  background: var(--ink, #2A2622); color: var(--paper, #FBFAF6);
  font-family: var(--hand, 'Kalam', cursive); font-size: 13px;
  padding: 10px 18px; border-radius: 100px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  opacity: 0; transform: translateY(8px);
  transition: all 0.3s;
  pointer-events: none;
}
.selene-toast.show { opacity: 1; transform: translateY(0); }

/* Confirm modal */
.confirm-msg { font-family: var(--hand, 'Kalam', cursive); font-size: 14px; color: var(--ink2, #5C544A); line-height: 1.6; }

/* ─── Theme picker font/dimension lock ─────────────────────
   The picker UI must be theme-independent. Without this, swapping
   a theme reflows the picker cards (different fonts have different
   metrics), making names get cut off mid-pick. */
#theme-picker,
#theme-picker .picker-panel,
#theme-picker .picker-title,
#theme-picker .picker-subtitle,
#theme-picker .picker-card-name,
#theme-picker .picker-card-desc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif !important;
}
#theme-picker .picker-card { min-height: 152px; }
#theme-picker .picker-card-footer { min-height: 56px; padding: 9px 12px 10px !important; }
#theme-picker .picker-card-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#theme-picker .picker-card-desc {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin-top: 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pointer cursor on all interactive non-input elements */
button,
a,
[role="button"],
[role="tab"],
[role="menuitem"],
[onclick],
.btn,
.pill,
.tag,
.chip,
.dur-chip,
.nav-item,
.nav-row,
.icon-circle,
.ctrl,
.ctrl-big,
.picker-card,
.notif-item,
.tab,
.tab2,
.card-tab,
.card,
.box[onclick],
.note-card,
.assn-row,
.exam-row,
.goal-row,
.event-row,
.day-cell,
.fc-event,
label[for],
select,
summary {
  cursor: pointer;
}
button:disabled,
.btn:disabled,
[disabled] { cursor: not-allowed; }
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]),
textarea {
  cursor: text;
}

/* ============================================================
   THEME PALETTES — moved here so EVERY page that loads
   wire-shell.css gets them (billing was missing them and
   reset to default). Pages with inline copies still override.
   ============================================================ */
html[data-template]:not([data-template="default"]) body {
  background-image: none;
}

/* -- 01 PARCHMENT … warm editorial serif ----------------- */
:root, [data-template="parchment"] {
  --bg:             #F7F4EF;
  --bg2:            #F0EBE1;
  --bg3:            #EAE3D6;
  --panel:          rgba(255,255,255,0.72);
  --panel2:         rgba(255,255,255,0.50);
  --border:         rgba(42,35,28,0.10);
  --border2:        rgba(42,35,28,0.22);
  --accent:         #8B6F4E;
  --accent2:        #2A5A8B;
  --accent3:        #C8B89A;
  --text:           #1A1410;
  --text2:          rgba(26,20,16,0.55);
  --text3:          rgba(26,20,16,0.35);
  --success:        #4A7C59;
  --warning:        #A0722A;
  --danger:         #8B3A3A;
  --info:           #2A5A8B;
  --tag-done:       rgba(74,124,89,0.12);
  --tag-done-text:  #4A7C59;
  --tag-urgent:     rgba(139,58,58,0.12);
  --tag-urgent-text:#8B3A3A;
  --tag-week:       rgba(42,90,139,0.12);
  --tag-week-text:  #2A5A8B;
  --shadow:         0 2px 16px rgba(26,20,16,0.07);
  --shadow2:        0 8px 40px rgba(26,20,16,0.12);
  --glow:           none;
  --radius:         16px;
  --radius2:        12px;
  --radius3:        8px;
  --font-display:   'Cormorant Garamond', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(42,35,28,0.06);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 02 OBSIDIAN … dark warm editorial -------------------- */
[data-template="obsidian"] {
  --bg:             #0F0D0B;
  --bg2:            #161210;
  --bg3:            #1E1810;
  --panel:          rgba(255,255,255,0.04);
  --panel2:         rgba(255,255,255,0.03);
  --border:         rgba(200,184,154,0.10);
  --border2:        rgba(200,184,154,0.25);
  --accent:         #C8B89A;
  --accent2:        #A68A68;
  --accent3:        #8B6F4E;
  --text:           #EDE8E0;
  --text2:          rgba(237,232,224,0.52);
  --text3:          rgba(237,232,224,0.30);
  --success:        #6FB88A;
  --warning:        #D4A855;
  --danger:         #C46060;
  --info:           #6A9EC8;
  --tag-done:       rgba(111,184,138,0.14);
  --tag-done-text:  #6FB88A;
  --tag-urgent:     rgba(196,96,96,0.14);
  --tag-urgent-text:#C46060;
  --tag-week:       rgba(106,158,200,0.14);
  --tag-week-text:  #6A9EC8;
  --shadow:         0 2px 16px rgba(0,0,0,0.30);
  --shadow2:        0 8px 40px rgba(0,0,0,0.45);
  --glow:           none;
  --radius:         16px;
  --radius2:        12px;
  --radius3:        8px;
  --font-display:   'Cormorant Garamond', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(200,184,154,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 03 NEURAL … cyberpunk tech --------------------------- */
[data-template="neural"] {
  --bg:             #030610;
  --bg2:            #070d1a;
  --bg3:            #0a1225;
  --panel:          rgba(8,16,36,0.80);
  --panel2:         rgba(5,10,24,0.65);
  --border:         rgba(56,189,248,0.14);
  --border2:        rgba(56,189,248,0.35);
  --accent:         #38bdf8;
  --accent2:        #2dd4bf;
  --accent3:        #a855f7;
  --text:           #e2e8f0;
  --text2:          rgba(226,232,240,0.55);
  --text3:          rgba(226,232,240,0.30);
  --success:        #22c55e;
  --warning:        #fbbf24;
  --danger:         #ef4444;
  --info:           #38bdf8;
  --tag-done:       rgba(34,197,94,0.12);
  --tag-done-text:  #22c55e;
  --tag-urgent:     rgba(239,68,68,0.12);
  --tag-urgent-text:#ef4444;
  --tag-week:       rgba(56,189,248,0.12);
  --tag-week-text:  #38bdf8;
  --shadow:         0 0 20px rgba(56,189,248,0.07);
  --shadow2:        0 0 40px rgba(56,189,248,0.15);
  --glow:           0 0 20px rgba(56,189,248,0.15);
  --radius:         10px;
  --radius2:        8px;
  --radius3:        5px;
  --font-display:   'Outfit', sans-serif;
  --font-body:      'Outfit', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(56,189,248,0.06);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 04 FOREST … organic dark green ----------------------- */
[data-template="forest"] {
  --bg:             #0D1F0F;
  --bg2:            #132816;
  --bg3:            #1A331D;
  --panel:          rgba(255,255,255,0.04);
  --panel2:         rgba(255,255,255,0.03);
  --border:         rgba(163,196,160,0.12);
  --border2:        rgba(163,196,160,0.28);
  --accent:         #A3C4A0;
  --accent2:        #6A9E67;
  --accent3:        #4A7A47;
  --text:           #D4E8D2;
  --text2:          rgba(212,232,210,0.55);
  --text3:          rgba(212,232,210,0.30);
  --success:        #7DC87A;
  --warning:        #C8B46A;
  --danger:         #C47A7A;
  --info:           #7AAAC8;
  --tag-done:       rgba(125,200,122,0.14);
  --tag-done-text:  #7DC87A;
  --tag-urgent:     rgba(196,122,122,0.14);
  --tag-urgent-text:#C47A7A;
  --tag-week:       rgba(122,170,200,0.14);
  --tag-week-text:  #7AAAC8;
  --shadow:         0 2px 16px rgba(0,0,0,0.35);
  --shadow2:        0 8px 40px rgba(0,0,0,0.50);
  --glow:           0 0 20px rgba(163,196,160,0.08);
  --radius:         20px;
  --radius2:        14px;
  --radius3:        10px;
  --font-display:   'Playfair Display', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(163,196,160,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 05 SLATE … macOS professional minimal ---------------- */
[data-template="slate"] {
  --bg:             #1C1C1E;
  --bg2:            #2C2C2E;
  --bg3:            #3A3A3C;
  --panel:          #2C2C2E;
  --panel2:         #3A3A3C;
  --border:         rgba(255,255,255,0.08);
  --border2:        rgba(255,255,255,0.18);
  --accent:         #0A84FF;
  --accent2:        #34AADC;
  --accent3:        #5AC8FA;
  --text:           #FFFFFF;
  --text2:          rgba(255,255,255,0.55);
  --text3:          rgba(255,255,255,0.30);
  --success:        #32D74B;
  --warning:        #FF9F0A;
  --danger:         #FF453A;
  --info:           #0A84FF;
  --tag-done:       rgba(50,215,75,0.14);
  --tag-done-text:  #32D74B;
  --tag-urgent:     rgba(255,69,58,0.14);
  --tag-urgent-text:#FF453A;
  --tag-week:       rgba(10,132,255,0.14);
  --tag-week-text:  #0A84FF;
  --shadow:         0 2px 12px rgba(0,0,0,0.35);
  --shadow2:        0 8px 32px rgba(0,0,0,0.50);
  --glow:           none;
  --radius:         12px;
  --radius2:        8px;
  --radius3:        6px;
  --font-display:   'Inter', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(255,255,255,0.04);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 06 BLUSH … rose editorial ---------------------------- */
[data-template="blush"] {
  --bg:             #FFF0F3;
  --bg2:            #FFE4EA;
  --bg3:            #FFD6DF;
  --panel:          rgba(255,255,255,0.80);
  --panel2:         rgba(255,255,255,0.60);
  --border:         rgba(232,96,138,0.12);
  --border2:        rgba(232,96,138,0.28);
  --accent:         #E8608A;
  --accent2:        #C44A72;
  --accent3:        #F4A7BE;
  --text:           #2D1B24;
  --text2:          rgba(45,27,36,0.55);
  --text3:          rgba(45,27,36,0.35);
  --success:        #5A9E7A;
  --warning:        #C4924A;
  --danger:         #C44A4A;
  --info:           #4A72C4;
  --tag-done:       rgba(90,158,122,0.12);
  --tag-done-text:  #5A9E7A;
  --tag-urgent:     rgba(196,74,74,0.12);
  --tag-urgent-text:#C44A4A;
  --tag-week:       rgba(74,114,196,0.12);
  --tag-week-text:  #4A72C4;
  --shadow:         0 2px 20px rgba(232,96,138,0.08);
  --shadow2:        0 8px 40px rgba(232,96,138,0.14);
  --glow:           none;
  --radius:         20px;
  --radius2:        14px;
  --radius3:        10px;
  --font-display:   'Cormorant Garamond', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(232,96,138,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 07 MIDNIGHT … deep blue glass ----------------------- */
[data-template="midnight"] {
  --bg:             #060B18;
  --bg2:            #0A1228;
  --bg3:            #0F1A38;
  --panel:          rgba(15,26,56,0.75);
  --panel2:         rgba(10,18,40,0.65);
  --border:         rgba(100,160,255,0.12);
  --border2:        rgba(100,160,255,0.30);
  --accent:         #64A0FF;
  --accent2:        #9B7FFF;
  --accent3:        #40D4C8;
  --text:           #D0DCFF;
  --text2:          rgba(208,220,255,0.55);
  --text3:          rgba(208,220,255,0.30);
  --success:        #40D4A0;
  --warning:        #FFB84D;
  --danger:         #FF6464;
  --info:           #64A0FF;
  --tag-done:       rgba(64,212,160,0.14);
  --tag-done-text:  #40D4A0;
  --tag-urgent:     rgba(255,100,100,0.14);
  --tag-urgent-text:#FF6464;
  --tag-week:       rgba(100,160,255,0.14);
  --tag-week-text:  #64A0FF;
  --shadow:         0 4px 24px rgba(0,0,0,0.40);
  --shadow2:        0 12px 48px rgba(0,0,0,0.55);
  --glow:           0 0 30px rgba(100,160,255,0.10);
  --radius:         16px;
  --radius2:        12px;
  --radius3:        8px;
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Space Grotesk', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(100,160,255,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 08 SOLAR … clean white amber ------------------------ */
[data-template="solar"] {
  --bg:             #FFFFFF;
  --bg2:            #F8F8F8;
  --bg3:            #F0F0F0;
  --panel:          #FFFFFF;
  --panel2:         #F8F8F8;
  --border:         rgba(0,0,0,0.08);
  --border2:        rgba(0,0,0,0.18);
  --accent:         #F59E0B;
  --accent2:        #D97706;
  --accent3:        #FCD34D;
  --text:           #111111;
  --text2:          rgba(17,17,17,0.55);
  --text3:          rgba(17,17,17,0.35);
  --success:        #059669;
  --warning:        #D97706;
  --danger:         #DC2626;
  --info:           #2563EB;
  --tag-done:       rgba(5,150,105,0.10);
  --tag-done-text:  #059669;
  --tag-urgent:     rgba(220,38,38,0.10);
  --tag-urgent-text:#DC2626;
  --tag-week:       rgba(37,99,235,0.10);
  --tag-week-text:  #2563EB;
  --shadow:         0 1px 8px rgba(0,0,0,0.08);
  --shadow2:        0 4px 24px rgba(0,0,0,0.12);
  --glow:           none;
  --radius:         10px;
  --radius2:        8px;
  --radius3:        6px;
  --font-display:   'Inter', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(0,0,0,0.04);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 09 AURORA … northern lights dark -------------------- */
[data-template="aurora"] {
  --bg:             #08100C;
  --bg2:            #0C1814;
  --bg3:            #10201A;
  --panel:          rgba(16,32,24,0.80);
  --panel2:         rgba(12,24,20,0.65);
  --border:         rgba(100,255,180,0.10);
  --border2:        rgba(100,255,180,0.25);
  --accent:         #64FFB4;
  --accent2:        #B794F4;
  --accent3:        #4DC8A0;
  --text:           #D0FFE8;
  --text2:          rgba(208,255,232,0.52);
  --text3:          rgba(208,255,232,0.28);
  --success:        #64FFB4;
  --warning:        #FFD764;
  --danger:         #FF6464;
  --info:           #64C8FF;
  --tag-done:       rgba(100,255,180,0.12);
  --tag-done-text:  #64FFB4;
  --tag-urgent:     rgba(255,100,100,0.12);
  --tag-urgent-text:#FF6464;
  --tag-week:       rgba(100,200,255,0.12);
  --tag-week-text:  #64C8FF;
  --shadow:         0 4px 20px rgba(0,0,0,0.40);
  --shadow2:        0 12px 48px rgba(0,0,0,0.55);
  --glow:           0 0 24px rgba(100,255,180,0.08);
  --radius:         14px;
  --radius2:        10px;
  --radius3:        7px;
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Space Grotesk', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(100,255,180,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 10 INK … pure black editorial ----------------------- */
[data-template="ink"] {
  --bg:             #000000;
  --bg2:            #0A0A0A;
  --bg3:            #141414;
  --panel:          #111111;
  --panel2:         #1A1A1A;
  --border:         rgba(255,255,255,0.08);
  --border2:        rgba(255,255,255,0.20);
  --accent:         #FF4500;
  --accent2:        #FF6A00;
  --accent3:        rgba(255,255,255,0.4);
  --text:           #FFFFFF;
  --text2:          rgba(255,255,255,0.50);
  --text3:          rgba(255,255,255,0.28);
  --success:        #AAFFAA;
  --warning:        #FFDD88;
  --danger:         #FF4500;
  --info:           #88AAFF;
  --tag-done:       rgba(170,255,170,0.10);
  --tag-done-text:  #AAFFAA;
  --tag-urgent:     rgba(255,69,0,0.14);
  --tag-urgent-text:#FF4500;
  --tag-week:       rgba(136,170,255,0.12);
  --tag-week-text:  #88AAFF;
  --shadow:         0 2px 12px rgba(0,0,0,0.70);
  --shadow2:        0 8px 32px rgba(0,0,0,0.80);
  --glow:           none;
  --radius:         6px;
  --radius2:        4px;
  --radius3:        3px;
  --font-display:   'Playfair Display', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(255,255,255,0.04);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 11 DUSK … lavender twilight -------------------------- */
[data-template="dusk"] {
  --bg:             #1A1025;
  --bg2:            #221530;
  --bg3:            #2A1A3A;
  --panel:          rgba(42,26,58,0.75);
  --panel2:         rgba(34,21,48,0.65);
  --border:         rgba(183,148,244,0.12);
  --border2:        rgba(183,148,244,0.28);
  --accent:         #B794F4;
  --accent2:        #9B7FE0;
  --accent3:        #E4C4FF;
  --text:           #EDE0FF;
  --text2:          rgba(237,224,255,0.52);
  --text3:          rgba(237,224,255,0.30);
  --success:        #88D4A4;
  --warning:        #D4B488;
  --danger:         #D48888;
  --info:           #88B4D4;
  --tag-done:       rgba(136,212,164,0.12);
  --tag-done-text:  #88D4A4;
  --tag-urgent:     rgba(212,136,136,0.12);
  --tag-urgent-text:#D48888;
  --tag-week:       rgba(136,180,212,0.12);
  --tag-week-text:  #88B4D4;
  --shadow:         0 4px 20px rgba(0,0,0,0.38);
  --shadow2:        0 12px 48px rgba(0,0,0,0.52);
  --glow:           0 0 20px rgba(183,148,244,0.08);
  --radius:         16px;
  --radius2:        12px;
  --radius3:        8px;
  --font-display:   'Cormorant Garamond', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(183,148,244,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 12 CAMPUS … indigo planner --------------------------- */
[data-template="campus"] {
  --bg:             #F5F7FF;
  --bg2:            #EEF1FF;
  --bg3:            #E6EAFF;
  --panel:          #FFFFFF;
  --panel2:         #F5F7FF;
  --border:         rgba(99,102,241,0.12);
  --border2:        rgba(99,102,241,0.28);
  --accent:         #6366F1;
  --accent2:        #818CF8;
  --accent3:        #C7D2FE;
  --text:           #1E1B4B;
  --text2:          rgba(30,27,75,0.55);
  --text3:          rgba(30,27,75,0.35);
  --success:        #059669;
  --warning:        #D97706;
  --danger:         #DC2626;
  --info:           #6366F1;
  --tag-done:       rgba(5,150,105,0.12);
  --tag-done-text:  #059669;
  --tag-urgent:     rgba(220,38,38,0.12);
  --tag-urgent-text:#DC2626;
  --tag-week:       rgba(99,102,241,0.12);
  --tag-week-text:  #6366F1;
  --shadow:         0 2px 12px rgba(99,102,241,0.08);
  --shadow2:        0 8px 32px rgba(99,102,241,0.14);
  --glow:           none;
  --radius:         14px;
  --radius2:        10px;
  --radius3:        7px;
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(99,102,241,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 13 SAND … warm desert minimal ----------------------- */
[data-template="sand"] {
  --bg:             #FAF7F2;
  --bg2:            #F2EDE4;
  --bg3:            #E8E0D0;
  --panel:          rgba(255,255,255,0.85);
  --panel2:         rgba(255,255,255,0.65);
  --border:         rgba(180,150,100,0.12);
  --border2:        rgba(180,150,100,0.28);
  --accent:         #C17F3A;
  --accent2:        #A0622A;
  --accent3:        #E8C898;
  --text:           #2C1E0A;
  --text2:          rgba(44,30,10,0.55);
  --text3:          rgba(44,30,10,0.35);
  --success:        #5A8C5A;
  --warning:        #C17F3A;
  --danger:         #9C3A2A;
  --info:           #3A6A9C;
  --tag-done:       rgba(90,140,90,0.12);
  --tag-done-text:  #5A8C5A;
  --tag-urgent:     rgba(156,58,42,0.12);
  --tag-urgent-text:#9C3A2A;
  --tag-week:       rgba(58,106,156,0.12);
  --tag-week-text:  #3A6A9C;
  --shadow:         0 2px 16px rgba(44,30,10,0.06);
  --shadow2:        0 8px 36px rgba(44,30,10,0.10);
  --glow:           none;
  --radius:         14px;
  --radius2:        10px;
  --radius3:        7px;
  --font-display:   'Playfair Display', serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(180,150,100,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 14 CRIMSON … bold dark red --------------------------- */
[data-template="crimson"] {
  --bg:             #0D0608;
  --bg2:            #160A0C;
  --bg3:            #1E0E12;
  --panel:          rgba(40,10,16,0.80);
  --panel2:         rgba(30,8,12,0.65);
  --border:         rgba(220,60,80,0.14);
  --border2:        rgba(220,60,80,0.32);
  --accent:         #E8404E;
  --accent2:        #C42838;
  --accent3:        #FF8090;
  --text:           #FFE8EC;
  --text2:          rgba(255,232,236,0.52);
  --text3:          rgba(255,232,236,0.30);
  --success:        #6EC88A;
  --warning:        #E8A840;
  --danger:         #E8404E;
  --info:           #6090D8;
  --tag-done:       rgba(110,200,138,0.14);
  --tag-done-text:  #6EC88A;
  --tag-urgent:     rgba(232,64,78,0.18);
  --tag-urgent-text:#FF8090;
  --tag-week:       rgba(96,144,216,0.14);
  --tag-week-text:  #6090D8;
  --shadow:         0 2px 16px rgba(0,0,0,0.50);
  --shadow2:        0 8px 40px rgba(0,0,0,0.65);
  --glow:           0 0 20px rgba(232,64,78,0.12);
  --radius:         12px;
  --radius2:        9px;
  --radius3:        6px;
  --font-display:   'Outfit', sans-serif;
  --font-body:      'Outfit', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(220,60,80,0.06);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 15 MINT … fresh light green -------------------------- */
[data-template="mint"] {
  --bg:             #F2FAF6;
  --bg2:            #E4F4EC;
  --bg3:            #D4EEE0;
  --panel:          rgba(255,255,255,0.88);
  --panel2:         rgba(255,255,255,0.68);
  --border:         rgba(40,140,90,0.12);
  --border2:        rgba(40,140,90,0.26);
  --accent:         #1A9C6A;
  --accent2:        #138050;
  --accent3:        #78D4A8;
  --text:           #0A2018;
  --text2:          rgba(10,32,24,0.55);
  --text3:          rgba(10,32,24,0.35);
  --success:        #1A9C6A;
  --warning:        #B07820;
  --danger:         #9C2A2A;
  --info:           #2A709C;
  --tag-done:       rgba(26,156,106,0.12);
  --tag-done-text:  #1A9C6A;
  --tag-urgent:     rgba(156,42,42,0.12);
  --tag-urgent-text:#9C2A2A;
  --tag-week:       rgba(42,112,156,0.12);
  --tag-week-text:  #2A709C;
  --shadow:         0 2px 16px rgba(10,32,24,0.06);
  --shadow2:        0 8px 36px rgba(10,32,24,0.10);
  --glow:           none;
  --radius:         18px;
  --radius2:        13px;
  --radius3:        9px;
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* Selene aliases */
  --paper:   var(--bg);
  --paper2:  var(--bg2);
  --ink:     var(--text);
  --ink2:    var(--text2);
  --ink3:    var(--text3);
  --line:    var(--border2);
  --line2:   var(--border);
  --line3:   rgba(40,140,90,0.05);
  --good:    var(--success);
  --bad:     var(--danger);
  --hand:    var(--font-body);
  --display: var(--font-display);
  --label:   var(--font-body);
  --mono:    var(--font-mono);
}

/* -- 00 DEFAULT … original Selene / sketchy ------------ */
/* MUST be last so it overrides :root parchment values       */
[data-template="default"] {
  --bg:             #FBFAF6;
  --bg2:            #F4F1E8;
  --bg3:            #EDE8DC;
  --panel:          rgba(251,250,246,0.95);
  --panel2:         rgba(244,241,232,0.80);
  --border:         rgba(42,38,34,0.15);
  --border2:        rgba(42,38,34,0.45);
  --accent:         #E07A4F;
  --accent2:        #4A7FA8;
  --accent3:        #C9A961;
  --text:           #2A2622;
  --text2:          rgba(42,38,34,0.55);
  --text3:          rgba(42,38,34,0.35);
  --success:        #7BA05B;
  --warning:        #C9A961;
  --danger:         #B8543F;
  --info:           #4A7FA8;
  --tag-done:       rgba(123,160,91,0.15);
  --tag-done-text:  #7BA05B;
  --tag-urgent:     rgba(184,84,63,0.15);
  --tag-urgent-text:#B8543F;
  --tag-week:       rgba(74,127,168,0.15);
  --tag-week-text:  #4A7FA8;
  --shadow:         3px 3px 0 rgba(42,38,34,0.15);
  --shadow2:        4px 4px 0 rgba(42,38,34,0.12);
  --glow:           none;
  --radius:         10px;
  --radius2:        8px;
  --radius3:        6px;
  --font-display:   'Caveat', cursive;
  --font-body:      'Kalam', 'Caveat', cursive;
  --font-mono:      'JetBrains Mono', monospace;
  --transition:     0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  /* restore every Selene var explicitly */
  --paper:   #FBFAF6;
  --paper2:  #F4F1E8;
  --ink:     #2A2622;
  --ink2:    #5C544A;
  --ink3:    #8C8478;
  --line:    #2A2622;
  --line2:   rgba(42,38,34,0.3);
  --line3:   rgba(42,38,34,0.15);
  --good:    #7BA05B;
  --bad:     #B8543F;
  --hand:    'Kalam', 'Caveat', cursive;
  --display: 'Caveat', cursive;
  --label:   'Architects Daughter', cursive;
  --mono:    'JetBrains Mono', monospace;
}