/* 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 —
   Firefox via scrollbar-width:none, Chromium/Safari via the pseudo-element. */
html, body { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 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;
}