/* ---------- Tokens: cozy lo-fi ---------- */
/* Light = "Morning" (warm cream). The default theme is dark ("Dusk", indigo-plum); see Settings → Theme.
   --accent (lavender) is for text, rings, lines and highlights; --accent-fill is for buttons and badges; --peach is the warm second accent. */
:root {
  --bg: #fbf6ee;
  --bg-2: #f3ebdf;
  --card: #ffffff;
  --card-2: #f6f1fb;
  --ink: #3a3247;
  --ink-2: #5a4f69;
  --ink-3: #716582;
  --line: #ebe2d6;
  --gold-line: rgba(108, 80, 208, .12);
  --accent: #6447c4;
  --accent-hover: #533ab0;
  --accent-fill: #6c50d0;
  --accent-fill-hover: #5a3fbd;
  --accent-ink: #ffffff;
  --accent-soft: #ece6fb;
  --peach: #9a4a22;
  --peach-soft: #fde6d8;
  --good: #2c7449;
  --good-soft: #e1f2e6;
  --warn: #965210;
  --warn-soft: #fcebd5;
  --bad: #b13e3a;
  --bad-soft: #fbe0dd;
  --free: rgba(44, 116, 73, .08);
  --free-line: rgba(44, 116, 73, .38);
  --shadow: 0 1px 2px rgba(70, 50, 90, .06), 0 12px 30px -14px rgba(70, 50, 90, .28);
  --shadow-lg: 0 30px 70px -20px rgba(50, 30, 70, .4);
  --page-glow: radial-gradient(ellipse 70% 50% at 85% -10%, rgba(184, 164, 255, .22), transparent 70%),
               radial-gradient(ellipse 60% 45% at 0% 100%, rgba(255, 180, 143, .20), transparent 70%);
  --bg-grad: linear-gradient(180deg, #fbf6ee 0%, #f8f0e6 100%);
  --radius: 20px;
  --radius-sm: 12px;
  --font-head: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", cursive;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1a2e; --bg-2: #17142a; --card: #2a2540; --card-2: #342e4f;
    --ink: #f2edfb; --ink-2: #d6cdea; --ink-3: #ada2c8; --line: #3f3860; --gold-line: rgba(195, 178, 255, .14);
    --accent: #c3b2ff; --accent-hover: #d6c9ff; --accent-fill: #b8a4ff; --accent-fill-hover: #cbbcff; --accent-ink: #1d1a2e; --accent-soft: #3d3470;
    --peach: #ffb48f; --peach-soft: #4a3240;
    --good: #a3e0b5; --good-soft: #253b31; --warn: #ffc98f; --warn-soft: #45352a; --bad: #ffa7a8; --bad-soft: #4a2734;
    --free: rgba(163, 224, 181, .08); --free-line: rgba(163, 224, 181, .34);
    --shadow: 0 1px 2px rgba(8, 5, 20, .35), 0 12px 32px -14px rgba(8, 5, 20, .75);
    --shadow-lg: 0 30px 70px -20px rgba(5, 3, 15, .8);
    --page-glow: radial-gradient(ellipse 70% 50% at 85% -10%, rgba(184, 164, 255, .16), transparent 70%),
                 radial-gradient(ellipse 60% 45% at 0% 100%, rgba(255, 180, 143, .10), transparent 70%);
    --bg-grad: linear-gradient(180deg, #1d1a2e 0%, #231e38 55%, #2b2342 100%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1a2e; --bg-2: #17142a; --card: #2a2540; --card-2: #342e4f;
  --ink: #f2edfb; --ink-2: #d6cdea; --ink-3: #ada2c8; --line: #3f3860; --gold-line: rgba(195, 178, 255, .14);
  --accent: #c3b2ff; --accent-hover: #d6c9ff; --accent-fill: #b8a4ff; --accent-fill-hover: #cbbcff; --accent-ink: #1d1a2e; --accent-soft: #3d3470;
  --peach: #ffb48f; --peach-soft: #4a3240;
  --good: #a3e0b5; --good-soft: #253b31; --warn: #ffc98f; --warn-soft: #45352a; --bad: #ffa7a8; --bad-soft: #4a2734;
  --free: rgba(163, 224, 181, .08); --free-line: rgba(163, 224, 181, .34);
  --shadow: 0 1px 2px rgba(8, 5, 20, .35), 0 12px 32px -14px rgba(8, 5, 20, .75);
  --shadow-lg: 0 30px 70px -20px rgba(5, 3, 15, .8);
  --page-glow: radial-gradient(ellipse 70% 50% at 85% -10%, rgba(184, 164, 255, .16), transparent 70%),
               radial-gradient(ellipse 60% 45% at 0% 100%, rgba(255, 180, 143, .10), transparent 70%);
  --bg-grad: linear-gradient(180deg, #1d1a2e 0%, #231e38 55%, #2b2342 100%);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page-glow), var(--bg-grad), var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 34px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
p { margin: 0 0 .6em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.txt-bad { color: var(--bad); }
ul.plain { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px;
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  padding: 18px 12px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 14px; font-family: var(--font-head); font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.brand-mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.nav { display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-2); font-weight: 600; text-align: left;
  transition: background .2s, color .2s, transform .2s;
}
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-item:hover { background: var(--card-2); color: var(--ink); }
.nav-item.is-active { background: var(--accent-soft); color: var(--ink); }
.nav-item.is-active svg { color: var(--accent); }
.nav-item.is-active::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.nav-item.is-active:has(.nav-count, .nav-streak)::after { display: none; }
.nav-settings { margin-top: auto; }
.mini-timer, .now-playing {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card-2); color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: left;
}
.mini-timer { margin-top: 6px; }
.now-playing { margin-top: 12px; }
.now-playing em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ink-3); }
.mini-timer strong { font-variant-numeric: tabular-nums; font-size: 18px; color: var(--ink); }
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.np-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .np-eq i { animation: eq 1.1s ease-in-out infinite; }
  .np-eq i:nth-child(2) { animation-delay: -.4s; }
  .np-eq i:nth-child(3) { animation-delay: -.8s; }
}
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.main { padding: 30px clamp(18px, 3vw, 44px) 60px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head .sub { color: var(--ink-3); margin: 4px 0 0; font-weight: 500; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stack { display: grid; gap: 18px; align-content: start; }

/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-warn { background: var(--warn-soft); border-color: transparent; }
.card-warn h2 { color: var(--warn); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.btn:hover { background: var(--card-2); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 8px 20px -10px var(--accent-fill); }
.btn-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--card-2); color: var(--ink); }
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--bad); }
.btn-danger-ghost:hover { background: var(--bad-soft); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 14px 38px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-btn {
  width: 32px; height: 32px; display: inline-grid; place-items: center; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1;
}
.icon-btn:hover { background: var(--card-2); color: var(--ink); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-align: left; }

/* ---------- Pills & chips ---------- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--card-2); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-good { background: var(--good-soft); color: var(--good); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-bad { background: var(--bad-soft); color: var(--bad); }
.pill-muted { background: var(--card-2); color: var(--ink-3); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip i, .gm-name i, .class-head h2 i, .session-task i, .log i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }

/* ---------- Segmented controls & toolbars ---------- */
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.seg button, .seg-radio label span {
  display: block; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.seg button.is-on, .seg-radio input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg-radio label { position: relative; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio input:focus-visible + span { outline: 2px solid var(--accent); }
.inline-field { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; font-weight: 600; }
select, input[type="text"], input:not([type]), input[type="number"], input[type="date"], input[type="time"], textarea {
  padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-2); min-width: 0;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Banner ---------- */
.banner { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 20px; }
.banner > strong { font-size: 14px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.banner-warn > strong { background: var(--peach-soft); color: var(--peach); }
.banner-bad > strong { background: var(--bad-soft); color: var(--bad); }
.banner-items { display: flex; flex-wrap: wrap; gap: 8px; }
.banner-item { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: var(--shadow); transition: transform .2s; }
.banner-item:hover { transform: translateY(-1px); }
.banner-item em { font-style: normal; color: var(--ink-3); font-weight: 500; }

/* ---------- Today ---------- */
.today-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.welcome { max-width: 640px; padding: 30px; }
.welcome h2 { font-size: 24px; margin-bottom: 6px; }
.steps { padding-left: 20px; margin: 16px 0; display: grid; gap: 10px; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 81px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line); }
.tl { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 32px; align-items: stretch; position: relative; }
.tl::before { content: ""; position: absolute; left: 76px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--card); }
.tl time { color: var(--ink-3); font-size: 13px; font-weight: 700; padding-top: 10px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-body {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  padding: 11px 16px; border-radius: 16px; border: 0;
  background: color-mix(in srgb, var(--c) 16%, var(--card));
  transition: transform .2s;
}
button.tl-body:hover { transform: translateX(2px); }
.tl-now { align-items: center; min-height: 16px; }
.tl-now time { padding-top: 0; color: var(--peach); }
.tl-now span { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--peach), transparent); }
.tl-now::before { background: var(--peach); top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 4px var(--card), 0 0 12px var(--peach); }
button.tl-body { flex-direction: column; align-items: flex-start; gap: 0; }
.tl-main { display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0; text-align: left; min-width: 0; }
.tl strong { font-weight: 600; }
.tl span { color: var(--ink-2); font-size: 13px; }
.tl-session .tl-body { background: color-mix(in srgb, var(--c) 26%, var(--card)); }
.tl-deadline .tl-body { background: transparent; border: 1.5px dashed var(--c); }
.tl-deadline::before { background: var(--card); box-shadow: 0 0 0 4px var(--card), inset 0 0 0 3px var(--c); }
.tl.is-done .tl-body { opacity: .6; }
.tl.is-done strong { text-decoration: line-through; }

.stats { display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; align-items: center; }
.stats .btn-block { grid-column: 1 / -1; }
.stat-ring { text-align: center; }
.stat-ring p { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
.ring-track { fill: none; stroke: var(--bg-2); }
.ring-fill { fill: none; stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.ring text { font-family: var(--font-head); font-size: 17px; font-weight: 800; fill: var(--ink); }
.stat-list { margin: 0; display: grid; gap: 8px; }
.stat-list div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.stat-list dt { color: var(--ink-3); font-size: 13px; }
.stat-list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.grade-minis { display: grid; gap: 4px; }
.grade-mini {
  display: grid; grid-template-columns: minmax(80px, 1fr) 1.2fr auto; align-items: center; gap: 12px;
  padding: 8px 6px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left;
}
.grade-mini:hover { background: var(--card-2); }
.gm-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-bar { position: relative; height: 8px; border-radius: 999px; background: var(--bg-2); }
.gm-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c); }
.gm-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--ink-2); }
.gm-num { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

/* ---------- Tasks ---------- */
.task-group + .task-group { margin-top: 20px; }
.task-group h2 { font-size: 15px; margin: 0 0 8px; color: var(--ink-2); }
.task-group h2 span { color: var(--ink-3); font-family: var(--font-body); font-size: 13px; font-weight: 600; margin-left: 4px; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 10px; margin: 0 -10px; border-bottom: 1px solid var(--line); border-radius: 14px; transition: background .2s; }
.task:hover { background: var(--card-2); }
.task:last-child { border-bottom: 0; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0; text-align: left; }
.task-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.task-meta { font-size: 13px; color: var(--ink-3); }
.task.is-done .task-title { text-decoration: line-through; color: var(--ink-3); }
.task-list.compact .task { padding: 7px 0; }
.prio { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%; background: var(--bad-soft); color: var(--bad); font-size: 11px; font-weight: 800; vertical-align: 1px; }
.check {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0;
  border: 2px solid var(--ink-3); border-radius: 50%; background: transparent; transition: background .2s, border-color .2s, transform .2s;
}
.check svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.check:hover { border-color: var(--accent); }
.check.is-done { background: var(--good); border-color: var(--good); transform: scale(1.05); }
.check.is-done svg { stroke: var(--card); }
.check.is-done svg { opacity: 1; }

.empty { text-align: center; padding: 34px 16px; }
.empty p { font-family: var(--font-hand); font-size: 22px; line-height: 1.25; }
.empty h3 { margin-bottom: 4px; }
.empty p { color: var(--ink-3); }

/* ---------- Calendar ---------- */
.cal-toolbar { justify-content: space-between; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav h2 { margin-left: 8px; font-size: 19px; }
.cal-nav .icon-btn { font-size: 22px; }
.legend { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.lg { width: 14px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.lg-free { background: var(--free); border: 1px dashed var(--free-line); }
.lg-study { background: color-mix(in srgb, var(--accent) 35%, var(--card)); }
.lg-event { background: var(--card-2); border: 1px solid var(--line); }

.week { padding: 0; overflow: hidden; }
.week-head, .week-inner { display: grid; grid-template-columns: 58px repeat(7, minmax(0, 1fr)); }
.week-head { border-bottom: 1px solid var(--line); }
.day-head { padding: 10px 6px 8px; text-align: center; border-left: 1px solid var(--line); min-width: 0; }
.day-head span { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.day-head strong { font-family: var(--font-head); font-size: 20px; font-weight: 800; }
.day-head.is-today strong { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); }
.deadlines { display: grid; gap: 3px; margin-top: 6px; }
.deadline {
  display: block; width: 100%; padding: 2px 6px; border: 0; border-radius: 6px; text-align: left;
  background: color-mix(in srgb, var(--c) 28%, var(--card)); color: var(--ink); font-size: 11.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.week-body { max-height: calc(100vh - 290px); min-height: 360px; overflow-y: auto; scrollbar-gutter: stable; }
.week-head { overflow-y: hidden; scrollbar-gutter: stable; }
.hours { position: relative; }
.hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.hours span:first-child { transform: none; }
.day-col {
  position: relative; border-left: 1px solid var(--line); cursor: copy;
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% var(--hour);
}
.day-col.is-today { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
.blk {
  position: absolute; left: 3px; right: 3px; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; gap: 0; padding: 4px 8px;
  border: 0; border-radius: 10px; font-size: 12px; line-height: 1.3; cursor: pointer;
}
.blk strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk span { color: var(--ink-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.is-short { flex-direction: row; gap: 6px; align-items: center; padding-block: 1px; }
.blk-free { width: auto; background: var(--free); border: 1px dashed var(--free-line); color: var(--good); }
.blk-free span { color: var(--good); font-weight: 600; opacity: 0; transition: opacity .15s; }
.blk-free:hover span, .blk-free:focus-visible span { opacity: 1; }
.blk-event { background: color-mix(in srgb, var(--c) 26%, var(--card)); z-index: 1; }
.blk-session {
  background: color-mix(in srgb, var(--c) 50%, var(--card)); z-index: 2;
  box-shadow: 0 4px 10px -4px rgba(20, 10, 40, .35); cursor: grab;
}
.blk-session.is-done { opacity: .55; }
.blk-session.is-dragging { opacity: .35; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--peach); z-index: 3; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 8px var(--peach); }

.month { padding: 0; overflow: hidden; }
.m-names, .m-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.m-names span { padding: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.m-cell {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 116px; min-width: 0; padding: 8px;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; text-align: left;
}
.m-cell:nth-child(7n) { border-right: 0; }
.m-cell:hover { background: var(--card-2); }
.m-cell.is-out { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.m-cell.is-out .m-num { color: var(--ink-3); }
.m-num { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.m-cell.is-today .m-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-fill); color: var(--accent-ink); }
.m-item { font-size: 11.5px; padding: 1px 6px; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-event { background: color-mix(in srgb, var(--c) 26%, transparent); color: var(--ink-2); }
.m-deadline { background: color-mix(in srgb, var(--c) 40%, var(--card)); font-weight: 600; }
.m-more { font-size: 11px; color: var(--ink-3); padding-left: 6px; }
.m-study { margin-top: auto; font-size: 11px; color: var(--accent); font-weight: 600; padding-left: 2px; }

/* ---------- Classes ---------- */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 18px; align-items: start; }
.class-card { display: grid; gap: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, var(--card)) 0, var(--card) 90px); }
.class-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.class-head h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.class-head h2 i { width: 10px; height: 10px; }
.class-head p { margin: 2px 0 0; }
.grade-hero { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grade-big { display: flex; align-items: baseline; gap: 10px; }
.grade-big strong { font-family: var(--font-head); font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.grade-big span { font-family: var(--font-head); font-size: 22px; color: var(--ink-2); }
.goal-bar { position: relative; height: 12px; border-radius: 999px; background: var(--bg-2); margin: 8px 0 18px; }
.goal-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c); transition: width .4s ease; }
.goal-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); border-radius: 2px; }
.goal-mark em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.need { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card-2); font-size: 14px; }
.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cats li { display: grid; grid-template-columns: 1fr auto 64px; gap: 10px; font-size: 13px; }
.cats strong { text-align: right; font-variant-numeric: tabular-nums; }
.grade-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grade-table th { text-align: left; color: var(--ink-3); font-weight: 600; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.grade-table td { padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grade-table td + td, .grade-table th + th { padding-left: 8px; }
.grade-table .num { text-align: right; white-space: nowrap; }
.score-input { width: 64px; padding: 4px 7px !important; text-align: right; }
.class-card > .btn { justify-self: start; }

/* ---------- Focus ---------- */
.focus-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.focus-card { display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.focus-task { width: min(420px, 100%); text-align: left; }
.timer { position: relative; width: min(300px, 80vw); aspect-ratio: 1; }
.timer svg { width: 100%; height: 100%; }
.timer .ring-fill { transition: stroke-dashoffset 1s linear; }
.timer-text { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.timer-mode { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); font-weight: 800; }
.timer-text strong { font-family: var(--font-head); font-size: 66px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rounds { display: flex; gap: 7px; margin-top: 8px; }
.rounds i { width: 12px; height: 12px; background: var(--line); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.rounds i.on { background: var(--peach); }
.timer-btns { display: flex; align-items: center; gap: 10px; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.log li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 14px; }
.log span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log time { color: var(--ink-3); font-size: 12px; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bars li { display: grid; grid-template-columns: 130px 1fr 56px; gap: 10px; align-items: center; font-size: 13px; }
.bars li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.bars strong { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Modal & forms ---------- */
.modal { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); width: 560px; color: var(--ink); }
.modal::backdrop { background: rgba(20, 14, 40, .45); backdrop-filter: blur(6px); }
.modal:has(.is-wide) { width: 720px; }
.modal-card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px 6px; }
.modal-head h2 { font-size: 22px; }
@media (prefers-reduced-motion: no-preference) { .modal[open] .modal-card { animation: pop-in .25s cubic-bezier(.2, .9, .3, 1.2); } }
@keyframes pop-in { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.modal-body { padding: 10px 22px; overflow-y: auto; display: grid; gap: 14px; }
.modal-foot { display: flex; align-items: center; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid var(--line); margin-top: 6px; }
.spacer { flex: 1; }
.form-error { margin: 0; color: var(--bad); font-weight: 600; font-size: 14px; }
.form-error:empty { display: none; }
.form-section { font-size: 15px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.field { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > span, .field > legend { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 0; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.row .grow { grid-column: span 2; }
.check-line { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; cursor: pointer; }
.check-line input { width: 17px; height: 17px; accent-color: var(--accent); }
.grade-fields, .repeat-fields, .cat-fields { padding: 14px; border-radius: var(--radius-sm); background: var(--card-2); display: grid; gap: 12px; }
.day-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.day-picks label { position: relative; }
.day-picks input { position: absolute; opacity: 0; }
.day-picks span { display: block; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; cursor: pointer; }
.day-picks input:checked + span { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.day-picks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.swatches input:checked + span { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--c); }
.swatches input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; }
.cat-rows { display: grid; gap: 8px; }
.cat-row { display: grid; grid-template-columns: 1fr 96px 32px; gap: 8px; align-items: center; }
.with-unit { position: relative; }
.with-unit input { width: 100%; padding-right: 26px; }
.with-unit em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-3); font-size: 13px; }
.cat-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.session-task { display: block; padding: 12px 14px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--c) 18%, var(--card)); margin: 0; }
.session-task i { margin-right: 8px; vertical-align: 1px; }

/* ---------- Sidebar extras ---------- */
.nav-label { display: block; padding: 14px 14px 4px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.nav-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: 11px; font-weight: 700; text-align: center; }
.section-title { font-size: 20px; margin: 6px 0 14px; }
.section-head-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 30px 0 14px; }
.section-head-row .section-title { margin: 0; }
.center { text-align: center; justify-content: center; }
.plain-link { text-decoration: none; color: var(--ink); }
.plain-link:hover { text-decoration: underline; }
.icon-btn.sm { width: 24px; height: 24px; font-size: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.goal-bar.slim { height: 7px; margin: 0; }
.goal-bar.slim .goal-fill { background: var(--c, var(--accent)); }
.back { display: inline-block; margin-bottom: 6px; font-size: 13px; text-decoration: none; }
kbd { font: 600 10px var(--font-body); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-3); background: var(--card); }

/* Today: study cards */
.mini-exams { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-exams li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px 6px 0; border-left: 4px solid var(--c); padding-left: 10px; }
.mini-exams strong { font-family: var(--font-head); font-size: 22px; font-weight: 800; line-height: 1; display: grid; }
.mini-exams small { font-family: var(--font-body); font-size: 11px; color: var(--ink-3); font-weight: 600; }
.flash-mini { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flash-mini p { margin: 2px 0 0; }

/* ---------- Notes ---------- */
.notes-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.notes-list { padding: 14px; display: grid; gap: 14px; position: sticky; top: 20px; max-height: calc(100vh - 140px); overflow-y: auto; }
.note-search { width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-2); }
.note-group h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 0 0 4px 6px; }
.note-group h2 i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.note-link { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; font-weight: 500; }
.note-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-link em { font-style: normal; font-size: 12px; color: var(--ink-3); flex: none; }
.note-link:hover { background: var(--card-2); }
.note-link.is-active { background: var(--accent-soft); color: var(--ink); }
.note-editor { padding: 28px 36px; display: grid; gap: 12px; min-height: 520px; align-content: start; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--card)) 0, var(--card) 120px); }
.note-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.note-title { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; font-family: var(--font-head); font-size: 32px; font-weight: 800; width: 100%; }
.note-title::placeholder { color: var(--ink-3); }
.note-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.note-body { width: 100%; min-height: 380px; border: 0 !important; box-shadow: none !important; background: none !important; padding: 4px 0 !important; resize: vertical; font-size: 15.5px; line-height: 1.7; }
.note-render { font-size: 15.5px; line-height: 1.7; min-height: 200px; }
.note-render h2 { font-size: 24px; margin: 18px 0 6px; }
.note-render h3 { font-size: 19px; margin: 16px 0 4px; }
.note-render h4 { font-size: 16px; margin: 12px 0 2px; }
.note-render > :first-child { margin-top: 0; }
.note-render ul, .note-render ol { margin: 4px 0 10px; padding-left: 22px; }
.note-render p { margin: 0 0 8px; }
.note-render hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.note-render code { font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--card-2); }
.note-checks { list-style: none; padding-left: 0 !important; }
.note-checks li { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.note-checks li.is-done span { text-decoration: line-through; color: var(--ink-3); }
.note-checks .check { width: 19px; height: 19px; border-radius: 6px; }
.note-card { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 14px; padding: 8px 12px; margin: 4px 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--c) 12%, var(--card)); border-left: 3px solid var(--c); }
.note-card span { color: var(--ink-2); }
.note-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: auto; }

/* ---------- Flashcards ---------- */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.deck { display: grid; gap: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, var(--card)) 0, var(--card) 90px); }
.deck header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.deck-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.deck-stats div { display: grid; padding: 10px; border-radius: var(--radius-sm); background: var(--card-2); text-align: center; }
.deck-stats strong { font-family: var(--font-head); font-size: 22px; font-weight: 800; }
.deck-stats span { font-size: 12px; color: var(--ink-3); }
.deck p { margin: 0; }
.deck-edit { display: grid; gap: 16px; }
.add-card { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 8px; padding: 14px; border-radius: var(--radius-sm); background: var(--card-2); }
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.card-list li { display: grid; grid-template-columns: 1fr 1.5fr 90px 32px; gap: 8px; align-items: center; }
.card-list input { width: 100%; }

.study { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; }
.study-progress { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.study-progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s ease; }
.flashcard {
  min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 40px 30px; text-align: center;
  border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s;
}
.flashcard:hover { transform: translateY(-2px); }
.flashcard.is-flipped { background: linear-gradient(180deg, var(--card), var(--card-2)); }
.fc-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.fc-front { font-family: var(--font-head); font-size: 30px; font-weight: 800; line-height: 1.25; }
.fc-back { font-size: 19px; color: var(--ink-2); max-width: 520px; padding-top: 16px; border-top: 1px dashed var(--line); }
.fc-hint { font-size: 13px; color: var(--ink-3); }
.rate-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rate { display: grid; gap: 2px; padding: 10px; border-radius: var(--radius); }
.rate strong { font-size: 15px; }
.rate span { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.rate kbd { justify-self: center; }
.rate-1 { border-color: var(--bad); } .rate-1 strong { color: var(--bad); }
.rate-2 { border-color: var(--warn); } .rate-2 strong { color: var(--warn); }
.rate-3 { border-color: var(--good); } .rate-3 strong { color: var(--good); }
.rate-4 { border-color: var(--accent); } .rate-4 strong { color: var(--accent); }
.study-done, .quiz-result { max-width: 620px; margin: 0 auto; text-align: center; padding: 34px; display: grid; gap: 10px; justify-items: center; }
.quiz-setup { max-width: 520px; display: grid; gap: 18px; justify-items: start; }
.quiz-q { display: grid; gap: 16px; padding: 30px; }
.quiz-q h2 { font-size: 28px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); text-align: left; font-size: 15px; }
.choice:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.choice:disabled { cursor: default; }
.choice.is-right { border-color: var(--good); background: var(--good-soft); }
.choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.is-dim { opacity: .55; }
.typed-form { display: flex; gap: 8px; flex-wrap: wrap; }
.typed-form input { flex: 1; min-width: 200px; font-size: 16px; padding: 11px 14px; }
.typed-result { padding: 14px 16px; border-radius: var(--radius-sm); }
.typed-result p { margin: 0 0 4px; }
.typed-result.is-right { background: var(--good-soft); }
.typed-result.is-wrong { background: var(--bad-soft); }
.quiz-next { justify-self: end; }
.missed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; text-align: left; }
.missed li { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--card-2); font-size: 14px; }
.missed span { color: var(--ink-2); }

/* ---------- Semester ---------- */
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.exam { display: grid; gap: 10px; border-left: 5px solid var(--c); align-content: start; }
.exam-top { display: flex; gap: 14px; align-items: center; }
.exam-top h3 { font-size: 17px; }
.exam-top p { margin: 2px 0 0; }
.exam-days { display: grid; place-content: center; justify-items: center; flex: none; width: 70px; height: 70px; border-radius: 18px; background: color-mix(in srgb, var(--c) 22%, var(--card)); }
.exam-days strong { font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1; }
.exam-days span { font-size: 11px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.exam p { margin: 0; }
.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.topics li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.topics li span { flex: 1; }
.topics li.is-done span { text-decoration: line-through; color: var(--ink-3); }
.topics .check { width: 19px; height: 19px; border-radius: 6px; }
.topics .icon-btn { opacity: 0; }
.topics li:hover .icon-btn, .topics .icon-btn:focus-visible { opacity: 1; }
.topic-add input { width: 100%; padding: 6px 10px; font-size: 13px; background: var(--card-2); }
.term-dates { display: flex; gap: 10px; flex-wrap: wrap; }
.term { padding: 16px; }
.term-scroll { overflow-x: auto; display: grid; gap: 0; }
.tl-row { display: grid; grid-template-columns: 140px repeat(var(--weeks), minmax(64px, 1fr)); min-width: calc(140px + var(--weeks) * 64px); }
.tl-row + .tl-row { border-top: 1px solid var(--line); }
.tl-name { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 0; font-weight: 600; font-size: 14px; position: sticky; left: 0; background: var(--card); z-index: 1; }
.tl-name i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.tl-week { padding: 4px 6px 8px; font-size: 12px; color: var(--ink-3); display: grid; border-left: 1px solid var(--line); }
.tl-week b { font-weight: 700; color: var(--ink-2); min-height: 18px; }
.tl-week.is-now span { color: var(--accent); font-weight: 700; }
.tl-cell { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; border-left: 1px solid var(--line); min-height: 52px; justify-content: center; }
.tl-cell.is-now, .tl-week.is-now { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mk { display: block; width: 100%; padding: 3px 6px; border: 0; border-radius: 6px; font-size: 11px; font-weight: 600; text-align: left; line-height: 1.25; background: color-mix(in srgb, var(--c) 22%, var(--card)); }
.mk span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-exam { background: color-mix(in srgb, var(--c) 70%, var(--card)); color: var(--ink); }
.mk-project { background: color-mix(in srgb, var(--c) 50%, var(--card)); outline: 1.5px solid var(--c); }
.mk.is-done { opacity: .45; }
.tl-load .tl-cell { align-items: center; min-height: 38px; }
.load { display: inline-grid; place-items: center; min-width: 26px; height: 22px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.load-1 { background: var(--good-soft); color: var(--good); }
.load-2 { background: var(--warn-soft); color: var(--warn); }
.load-3 { background: var(--bad-soft); color: var(--bad); }
.term-legend { margin: 12px 0 0; }
.mk-key { width: 14px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; background: var(--accent); }
.mk-key.mk-project { background: var(--accent-soft); outline: 1.5px solid var(--accent); }
.mk-key.mk-graded { background: var(--accent-soft); }

@media (max-width: 1000px) {
  .notes-grid { grid-template-columns: minmax(0, 1fr); }
  .notes-list { position: static; max-height: none; }
  .add-card, .card-list li { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Motivation & wellness ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-streak { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.page-head .quote { display: block; margin-top: 6px; font-family: var(--font-hand); color: var(--ink-2); font-size: 22px; line-height: 1.2; }
.chip-btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chip-btn:hover { border-color: var(--accent); color: var(--ink); }
.chip-btn.is-on { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }

.pet { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .pet-happy { animation: pet-bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
  .pet-sleepy { animation: pet-breathe 4s ease-in-out infinite; transform-origin: 50% 100%; }
}
@keyframes pet-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-4px) scale(1.02, .98); } }
@keyframes pet-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .985); } }

.pet-mini { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.pet-mini-art { border: 0; background: radial-gradient(circle at 50% 60%, var(--accent-soft), transparent 70%); border-radius: 50%; padding: 4px; }
.pet-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pet-mini-top strong { font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.pet-mini-text p { margin: 4px 0 8px; color: var(--ink-2); }
.streak { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--card-2); color: var(--ink-3); font-weight: 700; font-size: 13px; filter: grayscale(1); }
.streak.is-lit { background: var(--warn-soft); color: var(--warn); filter: none; }
.week-dots { display: flex; gap: 6px; }
.week-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-2); border: 1.5px solid var(--line); }
.week-dots i.on { background: var(--accent); border-color: var(--accent); }
.week-dots i.today { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink-3); }
.week-dots.big { justify-content: center; gap: 12px; }
.week-dots.big span { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.week-dots.big i { width: 22px; height: 22px; }
.earned { grid-column: 1 / -1; display: grid; gap: 6px; }
.earned-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px dashed var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); text-align: left; font-weight: 600; }
.earned-item span { flex: 1; }
.earned-item em { font-style: normal; color: var(--accent); }

.mood-check h2 { margin-bottom: 10px; }
.mood-row { display: flex; justify-content: space-between; gap: 6px; }
.mood-btn { flex: 1; font-size: 26px; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); transition: transform .12s, background .12s; }
.mood-btn:hover { transform: translateY(-2px); background: var(--accent-soft); }
.energy-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.energy-row .muted { margin-right: 4px; }
.mood-done { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.mood-big { font-size: 34px; }
.mood-done p { margin: 0; }

.fun-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 18px; margin-bottom: 18px; }
.fun-grid + .card, .fun-grid ~ .card { margin-bottom: 18px; }
.pet-card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.pet-stage { display: grid; place-items: center; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 50% 62%, var(--accent-soft), transparent 68%); }
.pet-body { display: grid; gap: 8px; }
.pet-body p { margin: 0; }
.pet-name { font-family: var(--font-head); font-size: 26px; font-weight: 800; border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; width: 100%; }
.pet-name:hover { text-decoration: underline dashed var(--line); }
.pet-colors { margin: 2px 0; }
.swatch-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(58, 48, 42, .25); background: var(--c); padding: 0; }
.swatch-btn.is-on { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
.streak-card { display: grid; gap: 10px; align-content: center; }
.streak-card p { margin: 0; }
.streak-big { display: grid; justify-items: center; }
.streak-big span { font-size: 40px; line-height: 1; }
.streak-big strong { font-family: var(--font-head); font-size: 64px; font-weight: 800; line-height: 1; }
.streak-big em { font-style: normal; color: var(--ink-3); font-weight: 600; }

.rewards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rewards li { display: grid; grid-template-columns: 34px 1fr auto auto 26px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card-2); }
.rewards li.is-earned:not(.is-claimed) { background: var(--accent-soft); outline: 1.5px dashed var(--accent); }
.rewards li.is-claimed { opacity: .7; }
.reward-emoji { font-size: 22px; text-align: center; }
.reward-main { display: grid; gap: 3px; }
.reward-num { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2); }

.vision-grid { columns: 4 200px; column-gap: 14px; }
.vision-item { position: relative; break-inside: avoid; margin: 0 0 14px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.vision-photo img { display: block; width: 100%; height: auto; }
.vision-photo figcaption { padding: 8px 12px; background: var(--card); font-size: 13px; }
.vision-goal { padding: 22px 18px; background: linear-gradient(160deg, var(--accent-soft), var(--card-2)); text-align: center; }
.vision-emoji { font-size: 34px; }
.vision-goal p { margin: 6px 0 0; font-family: var(--font-hand); font-size: 24px; font-weight: 600; line-height: 1.2; }
.vision-del { position: absolute; top: 6px; right: 6px; background: var(--card); opacity: 0; transition: opacity .15s; }
.vision-item:hover .vision-del, .vision-del:focus-visible { opacity: 1; }

.mood-chart .mc-wrap { position: relative; }
.mc { width: 100%; height: auto; display: block; }
.mc-grid { stroke: var(--line); stroke-width: 1; }
.mc-goal { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mc-axis { fill: var(--ink-3); font-size: 11px; font-family: var(--font-body); font-weight: 600; }
.mc-bar { fill: color-mix(in srgb, var(--accent) 70%, var(--card)); }
.mc-bar.is-today { fill: var(--accent); }
.bar-g.is-hover .mc-bar { fill: var(--accent-hover); }
.mc-mood { font-size: 15px; }
.mc-hit { fill: transparent; cursor: default; }
.mc-tip { position: absolute; width: 160px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: var(--shadow-lg); }
.mc-table { margin-top: 8px; }
.mc-table summary { cursor: pointer; color: var(--ink-3); font-weight: 600; }

/* Focus extras */
.focus-extras { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.distract-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 560px; }
.sounds { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.vol input { width: 110px; accent-color: var(--accent); vertical-align: middle; }
.break-idea { display: flex; gap: 14px; align-items: center; max-width: 480px; padding: 14px 18px; border-radius: var(--radius); background: var(--good-soft); text-align: left; }
.break-idea p { margin: 2px 0 4px; }
.break-icon { font-size: 34px; }
.breathe { width: 56px; height: 56px; flex: none; display: grid; place-items: center; }
.breathe span { width: 100%; height: 100%; border-radius: 50%; background: var(--good); opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .breathe span { animation: breathe 16s ease-in-out infinite; }
}
@keyframes breathe { 0% { transform: scale(.45); } 25% { transform: scale(1); } 50% { transform: scale(1); } 75% { transform: scale(.45); } 100% { transform: scale(.45); } }
.tip { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card-2); }
.tl-sleep .tl-body { background: color-mix(in srgb, var(--c) 16%, var(--card)); }

.focus-mode { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 30px; overflow-y: auto; background: #1d1a2e; }
.fm-exit { position: absolute; top: 20px; right: 20px; z-index: 2; }
.fm-center { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; text-align: center; }
.fm-task { font-size: 18px; font-weight: 700; margin: 0; }
.fm-timer { width: min(380px, 70vmin); }
.fm-timer .timer-text strong { font-size: 84px; }

.confetti { position: fixed; top: -12px; width: 9px; height: 14px; border-radius: 2px; z-index: 2000; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .confetti { animation: confetti-fall 1.6s cubic-bezier(.2, .6, .4, 1) forwards; } }
@keyframes confetti-fall { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

@media (max-width: 1000px) {
  .fun-grid, .pet-card { grid-template-columns: minmax(0, 1fr); }
  .pet-stage { margin: 0 auto; }
}

/* ---------- Projects ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.project-card { display: grid; gap: 14px; text-align: left; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, var(--card)) 0, var(--card) 90px); transition: transform .2s, box-shadow .2s; cursor: pointer; }
.project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.project-card.is-done { opacity: .7; }
.project-card h2 { font-size: 20px; }
.pc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pc-progress { display: flex; align-items: center; gap: 12px; }
.pc-progress div { display: grid; }
.pc-progress .ring text { font-size: 13px; }
.pc-next { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card-2); display: grid; gap: 2px; font-weight: 600; }
.project-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.project-bar { margin-bottom: 14px; }
.warn-text { background: var(--warn-soft); color: var(--warn); margin-bottom: 12px; }
.steps-list { list-style: none; margin: 0 0 12px; padding: 0; }
.steps-list li { display: grid; grid-template-columns: 22px 1fr 140px 74px 26px 26px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.step-main { display: grid; min-width: 0; }
.step-text { border: 0 !important; background: none !important; box-shadow: none !important; padding: 2px 0 !important; font-weight: 600; width: 100%; }
.step-text:focus { text-decoration: underline dashed var(--line); }
.steps-list li.is-done .step-text { text-decoration: line-through; color: var(--ink-3); }
.step-date { padding: 5px 7px !important; font-size: 13px; }
.step-hours input { width: 100%; padding: 5px 22px 5px 7px !important; font-size: 13px; }
.step-add { display: grid; grid-template-columns: 1fr 140px 74px auto; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--card-2); }
.project-stats { display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; align-items: center; }
.project-stats .ring-fill { stroke: var(--c); }
.project-stats .btn-block { grid-column: 1 / -1; white-space: normal; }
.link-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.link-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.link-list a { color: var(--accent); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.link-add .btn { justify-self: start; }
.project-notes { width: 100%; }

@media (max-width: 1100px) {
  .project-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .steps-list li { grid-template-columns: 22px 1fr 26px 26px; }
  .step-date, .steps-list .step-hours { grid-column: 2; }
  .step-add { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Grade goals: GPA, what-if, check-ins, where to focus ---------- */
.gpa-card, .patterns-card { margin-bottom: 18px; display: grid; gap: 8px; }
.gpa-card p, .patterns-card p { margin: 0; }
.gpa-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.gpa-stats > * { display: grid; justify-items: center; min-width: 110px; flex: 1; padding: 10px; border-radius: var(--radius-sm); background: var(--card-2); }
.gpa-stats strong { font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1.1; }
.gpa-stats span { font-size: 12px; color: var(--ink-3); text-align: center; }
.gpa-goal input { width: 100%; max-width: 90px; text-align: center; font-family: var(--font-head); font-size: 22px; padding: 2px 6px; }
.reflect-link { display: block; font-size: 12px; margin-top: 2px; }
.what-if, .restudy { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--card-2); }
.what-if h3, .restudy h3 { font-size: 16px; }
.what-if p { margin: 0; }
.what-if ul, .restudy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.what-if li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wi-name { display: grid; min-width: 0; font-size: 14px; font-weight: 600; }
.wi-name em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.wi-score { white-space: nowrap; font-size: 13px; }
.wi-score input { width: 72px; }
.wi-result .good { color: var(--good); }
.wi-result .bad { color: var(--bad); }
.restudy .check-line { font-weight: 400; align-items: flex-start; }
.restudy .check-line input { margin-top: 3px; flex: none; }
.restudy li.is-done span { text-decoration: line-through; color: var(--ink-3); }
.class-card > .btn-row .btn { flex: none; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-checks label { position: relative; }
.chip-checks input { position: absolute; opacity: 0; pointer-events: none; }
.chip-checks span { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.chip-checks input:checked + span { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
.chip-checks input:focus-visible + span { outline: 2px solid var(--accent); }
.focus-where { display: grid; gap: 10px; }
.focus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.focus-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-left: 10px; border-left: 3px solid var(--c); }
.focus-list .link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.focus-list p { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 820px) {
  .what-if li { flex-wrap: wrap; }
  .gpa-stats > * { min-width: 90px; }
}

/* ---------- Quick add, search, weekly review ---------- */
.quick-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0 0 10px; }
.quick-btns .nav-item { background: var(--card-2); border: 1px solid var(--line); }
.quick-btns .nav-item:hover { border-color: var(--accent); }
.qb-search { color: var(--ink-3); font-weight: 600; }
.qb-search kbd { margin-left: auto; }
.qb-add { width: 40px; justify-content: center; padding: 0; background: var(--accent-fill) !important; border-color: var(--accent-fill) !important; color: var(--accent-ink); }
.qb-add:hover { background: var(--accent-fill-hover) !important; color: var(--accent-ink); }
.qa-preview { min-height: 52px; padding: 10px 12px; margin: 4px 0 10px; border: 1px dashed var(--line); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.qa-title { overflow-wrap: anywhere; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.search-results { max-height: min(55vh, 460px); overflow-y: auto; margin-top: 8px; }
.search-kind { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 12px 0 4px; }
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.search-list button { width: 100%; display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); text-align: left; }
.search-list button:hover, .search-list button:focus-visible { background: var(--card-2); }
.search-list strong, .search-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-goal { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.review-goal p { margin: 0; }
.review-goal-text { font-weight: 600; overflow-wrap: anywhere; }
.review-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.review-tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.review-tile strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.review-tile span { color: var(--ink-3); font-size: 13px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.review-grid .card { margin: 0; min-width: 0; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.review-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.review-list .link { overflow-wrap: anywhere; }
.review-move { border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.review-move-main { display: grid; gap: 2px; min-width: 0; }
.review-date input { padding: 5px 8px; font-size: 13px; }
.review-reflect { display: grid; gap: 14px; margin-bottom: 14px; }

/* ---------- Today: sky hero & your day ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate; min-height: 250px; margin-bottom: 20px;
  border-radius: 28px; box-shadow: var(--shadow); display: flex; align-items: flex-end;
}
.hero-content { position: relative; z-index: 1; padding: 30px 32px 26px; color: var(--sky-ink); display: grid; gap: 2px; width: 100%; }
.hero h1 { font-size: clamp(30px, 4vw, 42px); text-shadow: 0 1px 12px var(--sky-shade); }
.hero-name { color: var(--sky-accent); }
.hero-date { margin: 0; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.hero-quote { margin: 4px 0 0; font-family: var(--font-hand); font-size: 25px; line-height: 1.15; text-shadow: 0 1px 10px var(--sky-shade); }
.hero-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.now-next {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; min-width: 0; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(24, 16, 48, .62); color: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .18);
}
.now-next strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nn-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffe3d3; }
.nn-when { font-size: 13px; opacity: .85; }
.nn-go { background: rgba(255, 255, 255, .92); color: #2a2140; border-color: transparent; }
.nn-go:hover { background: #fff; }
.now-next:not(:has(.nn-go)) { padding-right: 16px; }
.your-day { display: grid; gap: 16px; }
.your-day .card-head { margin-bottom: 0; }
.your-day .mood-check, .your-day .mood-done { padding-top: 16px; border-top: 1px dashed var(--line); }
.your-day .mood-check h3 { margin-bottom: 10px; }
.mood-done { display: flex; align-items: center; gap: 14px; }

/* ---------- Focus: the window ---------- */
.focus-window {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; display: grid; justify-items: center; gap: 18px;
  padding: 34px 20px 28px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.focus-window::after { /* window frame: mullions */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--card) 70%, transparent);
}
.focus-window .timer, .focus-window .timer-btns, .fm-center .timer { position: relative; z-index: 1; }
.focus-window .timer, .fm-center .timer { border-radius: 50%; background: rgba(20, 14, 40, .32); backdrop-filter: blur(6px); box-shadow: 0 20px 50px -20px rgba(10, 5, 30, .6); }
.focus-window .timer-text, .fm-center .timer-text { color: #fff; }
.focus-window .timer-mode, .fm-center .timer-mode { color: rgba(255, 255, 255, .8); }
.focus-window .timer-text strong, .fm-center .timer-text strong { text-shadow: 0 2px 16px rgba(10, 5, 30, .45); }
.focus-window .ring-track, .fm-center .ring-track { stroke: rgba(255, 255, 255, .18); }
.focus-window .ring-fill, .fm-center .ring-fill { stroke: #fff; }
.mode-short .focus-window .ring-fill, .mode-long .focus-window .ring-fill, .focus-mode.mode-short .ring-fill, .focus-mode.mode-long .ring-fill { stroke: #bff0cc; }
.focus-window .rounds i, .fm-center .rounds i { background: rgba(255, 255, 255, .3); }
.focus-window .rounds i.on, .fm-center .rounds i.on { background: #ffe2a8; filter: drop-shadow(0 0 4px #ffe2a8); }
.focus-window .timer-btns .btn, .fm-center .timer-btns .btn, .fm-exit {
  background: rgba(20, 14, 40, .4); border: 1px solid rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(8px);
}
.focus-window .timer-btns .btn:hover, .fm-center .timer-btns .btn:hover, .fm-exit:hover { background: rgba(20, 14, 40, .55); }
.focus-window .timer-btns .btn-primary, .fm-center .timer-btns .btn-primary { background: rgba(255, 255, 255, .92); color: #2a2140; border-color: transparent; }
.focus-window .timer-btns .btn-primary:hover, .fm-center .timer-btns .btn-primary:hover { background: #fff; }
.fm-exit kbd { background: transparent; color: inherit; border-color: rgba(255, 255, 255, .35); }
.fm-task { padding: 8px 18px; border-radius: 999px; background: rgba(20, 14, 40, .4); color: #fff; backdrop-filter: blur(8px); }
.fm-sounds { padding: 10px 14px; border-radius: 24px; background: rgba(20, 14, 40, .4); backdrop-filter: blur(8px); color: #fff; }
.fm-sounds .sound-label { color: #fff; }
.fm-center > .btn, .fm-center .distract-pick { background: rgba(20, 14, 40, .45); border: 1px solid rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(8px); }
.fm-center .distract-pick { padding: 10px 14px; border-radius: 22px; }
.fm-center .distract-pick .muted, .fm-center .distract-pick .icon-btn { color: rgba(255, 255, 255, .85); }
.fm-center > .btn:hover { background: rgba(20, 14, 40, .6); }
.fm-center .break-idea { box-shadow: var(--shadow); }

/* Sound "records" */
.sounds { gap: 10px; }
.sound-btn { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.sound-disc {
  width: 52px; height: 52px; display: grid; place-items: center; font-size: 22px; border-radius: 50%;
  background: radial-gradient(circle, var(--card) 0 30%, var(--card-2) 31% 100%);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: transform .2s, box-shadow .2s;
}
.sound-btn:hover .sound-disc { transform: translateY(-2px); }
.sound-btn.is-on { color: var(--ink); }
.sound-btn.is-on .sound-disc {
  background: repeating-radial-gradient(circle, #2a2540 0 2px, #1f1b33 2px 4px); color: #fff;
  box-shadow: 0 0 0 3px var(--accent), 0 8px 22px -8px var(--accent);
}
.sound-btn.is-on[data-sound=""] .sound-disc { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .sound-btn.is-on:not([data-sound=""]) .sound-disc { animation: spin 6s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.vol input { accent-color: var(--accent); }

/* ---------- Sky scene ---------- */
.sky {
  --hill-1: #231d4a; --hill-2: #141130; --orb: #f8f1d6;
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 115%, rgba(120, 90, 200, .45), transparent 70%),
    linear-gradient(180deg, #070a22 0%, #12123a 45%, #231a4d 80%, #33245c 100%);
}
.hero, .focus-window, .focus-mode { --sky-ink: #fff; --sky-shade: rgba(5, 3, 25, .6); --sky-accent: #ffd2b8; }
.sky-full { z-index: 0; }
.sky-orb { position: absolute; width: 74px; height: 74px; right: 12%; top: 14%; color: var(--orb); filter: drop-shadow(0 0 18px rgba(248, 241, 214, .75)) drop-shadow(0 0 50px rgba(200, 180, 255, .35)); }
.sky-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.hill-back { fill: var(--hill-1); }
.hill-front { fill: var(--hill-2); }
/* milky way: a soft, tilted band of glow */
.sky-milky {
  position: absolute; left: -20%; right: -20%; top: 18%; height: 40%; transform: rotate(-14deg);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(190, 170, 255, .22), rgba(140, 120, 230, .08) 55%, transparent 75%);
  filter: blur(6px);
}
/* three tiled star layers with different tile sizes, so the pattern never looks repeated */
.sky-stars { position: absolute; inset: 0 0 22% 0; }
.sky-stars.s1 {
  background-image: radial-gradient(1px 1px at 12px 18px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61px 47px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33px 82px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85px 9px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 74px 66px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 5px 58px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 47px 3px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92px 88px, #fff 50%, transparent 51%);
  background-size: 97px 97px; opacity: .75;
}
.sky-stars.s2 {
  background-image: radial-gradient(1.5px 1.5px at 40px 30px, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 120px 95px, #e6ddff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 18px 130px, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 98px 58px, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 140px 12px, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 70px 110px, #ffeccc 50%, transparent 51%);
  background-size: 151px 151px; opacity: .85;
}
.sky-stars.s3 {
  background-image: radial-gradient(2px 2px at 60px 50px, #fff 50%, transparent 51%), radial-gradient(2.5px 2.5px at 190px 160px, #fff6d8 50%, transparent 51%),
    radial-gradient(2px 2px at 140px 20px, #dcd2ff 50%, transparent 51%);
  background-size: 233px 233px;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8));
}
.shooting-star {
  position: absolute; top: 12%; left: 20%; width: 120px; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), transparent); transform: rotate(-25deg);
}
.shooting-star.late { top: 30%; left: 55%; width: 90px; }
.sky-rain {
  position: absolute; inset: 0; opacity: .22;
  background-image: repeating-linear-gradient(105deg, transparent 0 22px, rgba(255, 255, 255, .7) 22px 23px, transparent 23px 52px);
  background-size: 140px 140px;
}
.amb-rain { filter: saturate(.75) brightness(.92); }
.sky-glow { position: absolute; inset: auto -10% -20% -10%; height: 70%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 80, .55), transparent 65%); }
.sky-lights { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; justify-content: space-around; align-items: flex-start;
  background: radial-gradient(ellipse 60% 40px at 50% -10px, transparent 95%, rgba(255, 255, 255, .25) 96%, transparent 100%); }
.sky-lights i { width: 9px; height: 9px; margin-top: 16px; border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 10px 3px rgba(255, 210, 140, .7); }
.sky-lights i:nth-child(odd) { margin-top: 24px; background: #ffc7d6; box-shadow: 0 0 10px 3px rgba(255, 180, 200, .6); }
@media (prefers-reduced-motion: no-preference) {
  .sky-stars.s2 { animation: twinkle 4s ease-in-out infinite alternate; }
  .sky-stars.s3 { animation: twinkle 6s ease-in-out infinite alternate -2s; }
  .shooting-star { animation: shoot 9s ease-in infinite 2s; }
  .shooting-star.late { animation-delay: 6.5s; animation-duration: 13s; }
  .sky-rain { animation: rain .6s linear infinite; }
  .sky-glow { animation: flicker 3s ease-in-out infinite alternate; }
  .sky-lights i { animation: twinkle 3s ease-in-out infinite alternate; }
  .sky-lights i:nth-child(3n) { animation-delay: -1.5s; }
}
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes shoot { 0%, 90% { opacity: 0; translate: 0 0; } 92% { opacity: 1; } 100% { opacity: 0; translate: -160px 75px; } }
@keyframes rain { to { background-position: -40px 140px; } }
@keyframes flicker { 0% { opacity: .65; } 40% { opacity: .9; } 70% { opacity: .75; } 100% { opacity: 1; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 1000; max-width: min(380px, calc(100vw - 40px)); }
.toast {
  padding: 12px 18px; border-radius: 18px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in .25s ease; } }
.toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Smaller laptop windows ---------- */
@media (max-width: 1100px) {
  .today-grid, .focus-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: sticky; top: 0; z-index: 50; height: auto; margin: 0; overflow: visible;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
    padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0 0 22px 22px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
  }
  .brand { padding: 0; font-size: 18px; min-width: 0; }
  .brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .quick-btns { grid-column: 2; grid-row: 1; }
  .nav-settings { grid-column: 3; grid-row: 1; margin: 0; padding: 9px; }
  .nav-settings { font-size: 0; }
  .nav {
    grid-column: 1 / -1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-label { display: none; }
  .nav .nav-item { flex: none; padding: 7px 14px; background: var(--card-2); }
  .nav .nav-item.is-active { background: var(--accent-soft); }
  .nav-item.is-active::after { display: none; }
  .now-playing, .mini-timer { grid-column: 1 / -1; margin: 0; }
  .mini-timer { gap: 10px; }
  .main { padding: 20px 16px 48px; }
  .week { overflow-x: auto; }
  .week-head, .week-inner { min-width: 760px; }
  .class-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-btns { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; }
  .quick-btns kbd, .qb-text { display: none; }
  .qb-search { width: 38px; }
  .hero { min-height: 220px; border-radius: 22px; }
  .hero-content { padding: 22px 20px 20px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary { align-self: flex-start; }
  .now-next { border-radius: 20px; }
  .focus-card { padding: 16px; }
  .focus-window { padding: 26px 12px 22px; }
  .focus-window .timer { width: min(260px, 100%); }
  .focus-window .timer-text strong { font-size: 52px; }
  .timer-btns { gap: 8px; }
  .timer-btns .btn-lg { padding: 12px 26px; }
  .timer-btns .btn:not(.btn-lg) { padding: 8px 14px; }
  .hero .sky-orb { width: 46px; height: 46px; top: 8%; right: 6%; }
  .fm-timer { width: min(300px, 78vw); }
  .fm-timer .timer-text strong { font-size: 60px; }
  .timeline::before { left: 69px; }
  .tl { grid-template-columns: 56px minmax(0, 1fr); gap: 26px; }
  .tl::before { left: 64px; }
  .bars li { grid-template-columns: minmax(0, 90px) 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}