/* Studyloop — bright, chunky, friendly. Themes swap the variables below. */
[hidden] { display: none !important; }
:root {
  --bg: #fbf8ff;
  --surface: #ffffff;
  --surface-2: #f4effd;
  --ink: #2a2140;
  --ink-2: #534a6b;
  --muted: #8e86a3;
  --line: #ebe4f7;
  --accent: #7c4dff;
  --accent-dark: #5b2fd6;
  --accent-soft: #efe8ff;
  --accent-2: #00b8f0;
  --gold: #ffc93c;
  --gold-dark: #e0a800;
  --pink: #ff5c8a;
  --danger: #ff4d4f;
  --due: #e5484d; /* deadlines on the calendar */
  --ring-track: #ece6f7;
  --brand: var(--accent);
  --brand-ink: var(--accent-dark);
  --brand-soft: var(--accent-soft);
  --shadow: 0 1px 2px rgba(42, 33, 64, .06), 0 4px 14px rgba(42, 33, 64, .06);
  --radius: 18px;
  /* Load (status) colors: always shown with an icon + label, never color alone */
  --load-light: #2ec27e;
  --load-moderate: #f5b700;
  --load-heavy: #ff8c42;
  --load-over: #ff4d6d;
  --heat-light: rgba(46, 194, 126, .10);
  --heat-moderate: rgba(245, 183, 0, .16);
  --heat-heavy: rgba(255, 140, 66, .20);
  --heat-overloaded: rgba(255, 77, 109, .22);
  /* Study Buddy */
  --b-body: #e8322e;
  --b-wing: #d8261f;
  --b-beak: #f5ead6;
  --b-beak-low: #2e2a36;
  --b-patch: #fff;
  --b-band: #ffc72c;
  --b-green: #5cbf4a;
  --b-tip: #1f6fe0;
  --b-feet: #8e8496;
  color-scheme: light;
}
[data-theme='ocean'] { --accent: #00a6fb; --accent-dark: #0086cc; --accent-soft: #e0f4ff; --accent-2: #ff7a59; --bg: #f4fbff; --surface-2: #ebf6fd; --line: #dcedf8; --ring-track: #e1eef7; }
[data-theme='sunset'] { --accent: #ff4d8d; --accent-dark: #e0306f; --accent-soft: #ffe6f0; --accent-2: #7c4dff; --bg: #fff7fb; --surface-2: #fdeef5; --line: #f8dfeb; --ring-track: #f6e3ec; }
[data-theme='lavender'] { --accent: #00c49a; --accent-dark: #00a07e; --accent-soft: #dcfaf1; --accent-2: #7c4dff; --bg: #f4fffb; --surface-2: #e9f8f3; --line: #d8f0e8; --ring-track: #def0ea; }
[data-theme='midnight'] {
  --bg: #17142a; --surface: #211d38; --surface-2: #2b2647; --ink: #f1edff; --ink-2: #cfc8e8; --muted: #9a92b8; --line: #352f55;
  --accent: #b39dff; --accent-dark: #8f72ff; --accent-soft: #2f2752; --accent-2: #4dd8ff; --ring-track: #352f55;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  --heat-light: rgba(46, 194, 126, .14); --heat-moderate: rgba(245, 183, 0, .16); --heat-heavy: rgba(255, 140, 66, .2); --heat-overloaded: rgba(255, 77, 109, .24);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; }
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; margin: 14px 0 8px; color: var(--ink-2); }
a { color: inherit; text-decoration: none; }
p { margin: 6px 0; }
input, select, textarea, button { font: inherit; color: inherit; }
kbd { font-family: inherit; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; color: var(--ink-2); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.center { justify-content: center; }
.ok { color: var(--load-light); }
.warn { color: var(--load-heavy); }
.danger-text { color: var(--danger) !important; }
.logo { display: block; flex-shrink: 0; }

/* ---------- Layout ---------- */
#app { display: grid; grid-template-columns: 220px 1fr; height: 100vh; }
.sidebar { background: var(--surface); border-right: 2px solid var(--line); display: flex; flex-direction: column; padding: 18px 12px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand-mark { display: block; filter: drop-shadow(0 3px 0 var(--accent-dark)); }
.brand-name { font-weight: 900; font-size: 20px; color: var(--accent); letter-spacing: -.3px; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 800; color: var(--ink-2); border: 2px solid transparent; text-transform: uppercase; font-size: 13.5px; letter-spacing: .4px; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
[data-theme='midnight'] .nav a.active { color: var(--accent); }
.nav-ico { font-size: 20px; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sidebar-foot .btn { justify-content: space-between; }
.main-col { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-bottom: 2px solid var(--line); background: var(--surface); }
.tb-brand { display: none; }
.tb-ask { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; background: var(--surface-2); border: 2px solid var(--line); border-radius: 14px; padding: 0 10px; }
.tb-ask:focus-within { border-color: var(--accent); background: var(--surface); }
.tb-ask input { border: none !important; background: transparent !important; padding: 7px 0 !important; box-shadow: none !important; }
.tb-ask-ico { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex-shrink: 0; }
.tb-stat { display: flex; align-items: center; gap: 6px; font-weight: 800; padding: 4px 8px; border-radius: 10px; }
.tb-stat:hover { background: var(--surface-2); }
.tb-test { max-width: 300px; font-size: 13.5px; }
.tb-test b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-stat.streak .flame { filter: grayscale(1); opacity: .5; font-size: 20px; transition: .3s; }
.tb-stat.streak.alive .flame { filter: none; opacity: 1; animation: flicker 1.6s infinite alternate; }
.tb-stat.streak.alive b { color: #ff8c42; }
@keyframes flicker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.12) rotate(3deg); } }
.lvl-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #6b4e00; display: grid; place-items: center; font-weight: 900; font-size: 13px; box-shadow: 0 2px 0 var(--gold-dark); }
.xp-bar { display: inline-block; width: 90px; height: 10px; background: var(--ring-track); border-radius: 99px; overflow: hidden; }
.xp-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ff9f1c); border-radius: 99px; transition: width .6s cubic-bezier(.2, .9, .3, 1.2); }
.xp-bar.big { width: 100%; height: 16px; margin: 8px 0 4px; }
.view { flex: 1; overflow: auto; padding: 24px 28px 110px; outline: none; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.section-title { margin: 26px 0 12px; }

/* ---------- Buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 12px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); font-weight: 800; cursor: pointer; transition: transform .06s, background .15s; white-space: nowrap; color: var(--ink); }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
[data-theme='midnight'] .btn-primary { color: #17142a; }
.btn-danger { background: var(--danger); border-color: #d6303a; color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 6px 11px; font-size: 13.5px; border-radius: 10px; }
.btn-lg { padding: 12px 22px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-calm { background: #eef6ff; border-color: #c4e3ff; color: #2563b5; }
.btn-calm:hover { background: #e0efff; }
[data-theme='midnight'] .btn-calm { background: #26304a; border-color: #3a4a70; color: #b9c8ff; }
.link-btn { border: none; background: none; padding: 3px 0; color: var(--accent-dark); cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 700; }
[data-theme='midnight'] .link-btn { color: var(--accent); }
.link-btn:hover { text-decoration: underline; }
.icon-btn { border: none; background: transparent; cursor: pointer; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 15px; color: var(--ink-2); flex-shrink: 0; }
.icon-btn:hover { background: var(--surface-2); }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea {
  width: 100%; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 2px solid var(--line); font-size: 13px; font-weight: 700; cursor: pointer; color: var(--ink-2); }
button.chip:hover { border-color: var(--accent); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.chip-warn { background: #fff5e6; border-color: #ffd699; color: #9a5b00; }
[data-theme='midnight'] .chip-warn { background: #3a2e18; border-color: #6b5222; color: #ffcf7a; }
.tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }
.diff-light { background: #e3f9ee; color: #1a8a57; }
.diff-medium { background: #fff6d6; color: #8a6400; }
.diff-heavy { background: #ffe9dc; color: #c4501a; }
[data-theme='midnight'] .diff-light { background: #1d3a2d; color: #8de0b5; }
[data-theme='midnight'] .diff-medium { background: #3a3218; color: #f3d27a; }
[data-theme='midnight'] .diff-heavy { background: #40271a; color: #ffb38a; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: 5px; vertical-align: middle; }
.dot.big { width: 16px; height: 16px; }

/* Segmented control */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: block; padding: 6px 12px; border-radius: 9px; font-weight: 800; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.seg-opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); }

/* Toggle switch */
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 6px 0; }
.toggle input { position: absolute; opacity: 0; }
.toggle > span { width: 38px; height: 22px; border-radius: 99px; background: var(--line); position: relative; transition: .2s; flex-shrink: 0; }
.toggle > span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + span { background: var(--accent); }
.toggle input:checked + span::after { left: 19px; }
.toggle input:focus-visible + span { outline: 2px solid var(--accent); }
.toggle.small { font-size: 13px; margin: 0; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.callout { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin: 10px 0; border-left: 4px solid var(--accent-2); }
.callout.warn { border-left-color: var(--load-heavy); background: #fff4ec; }
.callout.good { border-left-color: var(--load-light); background: #ecfaf3; }
[data-theme='midnight'] .callout.warn { background: #3a2a1e; }
[data-theme='midnight'] .callout.good { background: #1d3328; }
.callout.small { font-size: 13px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.empty { text-align: center; padding: 24px 12px; }
.empty-ico { font-size: 42px; }
.empty h3 { margin: 6px 0; }
.empty p { color: var(--muted); max-width: 420px; margin: 0 auto 12px; }

/* ---------- Task card ---------- */
.task-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); border-left: 6px solid var(--c); position: relative; transition: transform .1s, box-shadow .15s; }
.task-card:hover { box-shadow: var(--shadow); }
.task-card.compact { padding: 8px 10px; }
.task-card.done { opacity: .6; }
.task-card.done .task-title { text-decoration: line-through; }
.task-main { flex: 1; min-width: 0; cursor: pointer; }
.task-title { font-weight: 800; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.task-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 2px; }
.task-meta.big { font-size: 14px; margin-bottom: 8px; }
.task-meta .sep { margin: 0 6px; opacity: .6; }
.class-name { display: inline-flex; align-items: center; font-weight: 700; color: var(--ink-2); }
.task-reason { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); background: var(--surface-2); padding: 5px 9px; border-radius: 9px; }
.rank { position: absolute; left: -12px; top: -10px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #6b4e00; font-weight: 900; font-size: 13px; display: grid; place-items: center; box-shadow: 0 2px 0 var(--gold-dark); }
.check { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--c); background: var(--surface); cursor: pointer; flex-shrink: 0; color: #fff; font-weight: 900; display: grid; place-items: center; margin-top: 1px; transition: transform .1s, background .15s; }
.check:hover { background: color-mix(in srgb, var(--c) 18%, var(--surface)); transform: scale(1.08); }
.task-card.done .check { background: var(--c); }
.compact .check { width: 22px; height: 22px; border-width: 2px; font-size: 12px; }
.icon-btn.play { color: var(--c); font-size: 13px; border: 2px solid var(--line); }
.icon-btn.play:hover { background: var(--c); color: #fff; border-color: var(--c); }
.mini-progress { height: 6px; border-radius: 99px; background: var(--ring-track); margin-top: 6px; overflow: hidden; max-width: 240px; }
.mini-progress span { display: block; height: 100%; background: var(--c); border-radius: 99px; }
.dragging { opacity: .45; }

/* ---------- Rings ---------- */
.ring { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.ring svg { position: absolute; inset: 0; }
.ring-arc { transition: stroke-dashoffset .6s ease; }
.ring-label { position: relative; font-size: 11px; font-weight: 900; }

/* ---------- Load pills & heat ---------- */
.load-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12.5px; font-weight: 800; white-space: nowrap; border: 2px solid; }
.load-light { --lc: var(--load-light); }
.load-moderate { --lc: var(--load-moderate); }
.load-heavy { --lc: var(--load-heavy); }
.load-overloaded { --lc: var(--load-over); }
.load-pill { border-color: var(--lc); color: var(--ink); background: color-mix(in srgb, var(--lc) 14%, var(--surface)); }
.heat-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 6px 0 10px; }
.heat-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; background: color-mix(in srgb, var(--lc) 10%, var(--surface)); }
.heat-day:hover { background: color-mix(in srgb, var(--lc) 20%, var(--surface)); }
.hd-name { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.hd-bar { height: 52px; width: 14px; border-radius: 99px; background: var(--ring-track); display: flex; align-items: flex-end; overflow: hidden; }
.hd-bar span { display: block; width: 100%; background: var(--lc); border-radius: 4px 4px 0 0; }
.heat-strip.big .hd-bar { height: 80px; width: 20px; }
.load-msg { font-weight: 700; font-size: 15px; }

/* ---------- Today ---------- */
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.side { position: sticky; top: 0; }
.focus-card { border-color: var(--accent); box-shadow: 0 4px 0 var(--accent-soft); }
.focus-card .list { gap: 12px; padding-left: 8px; }
.sub { margin-top: 16px; }
.energy-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, var(--surface), var(--accent-soft)); }
.energy-opts { display: flex; gap: 8px; margin-left: auto; }
.energy-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--surface); padding: 8px 16px; border-radius: 14px; font-weight: 800; cursor: pointer; }
.energy-btn span { font-size: 24px; }
.energy-btn:hover { border-color: var(--accent); }
.energy-set { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-weight: 700; color: var(--ink-2); flex-wrap: wrap; }
.load-card.tone-heavy, .load-card.tone-overloaded { border-color: color-mix(in srgb, var(--load-heavy) 60%, var(--line)); }
.collision { border-color: color-mix(in srgb, var(--load-heavy) 55%, var(--line)); background: color-mix(in srgb, var(--load-heavy) 6%, var(--surface)); }
.missed { border-color: color-mix(in srgb, var(--load-light) 45%, var(--line)); background: color-mix(in srgb, var(--load-light) 6%, var(--surface)); }
.missed-row { display: flex; align-items: center; gap: 8px; }
.missed-row .task-card { flex: 1; }
.sched { display: flex; flex-direction: column; gap: 6px; }
.sched-item { display: flex; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 10px; border-left: 4px solid var(--c); background: var(--surface-2); font-size: 14px; }
.sched-item.life { border-left-style: dashed; color: var(--ink-2); }
.sched-item.session, .sched-item.event { cursor: pointer; background: color-mix(in srgb, var(--c) 12%, var(--surface)); font-weight: 700; }
.sched-item.past { opacity: .5; }
.sched-item.now { outline: 2px solid var(--accent-2); }
.sched-item.done .sched-what { text-decoration: line-through; }
.sched-time { width: 120px; flex-shrink: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.sched-ico { margin-right: 6px; }

/* Do this now */
.now-card { border: none; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; padding: 18px 20px; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent-dark) 70%, #000); }
.now-card .task-meta, .now-card .class-name { color: rgba(255,255,255,.85); }
.now-kicker { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; background: var(--gold); color: #6b4e00; padding: 2px 10px; border-radius: 99px; margin-bottom: 8px; }
.now-main { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.now-title { font-size: 21px; font-weight: 900; line-height: 1.25; margin-bottom: 4px; }
.now-why { margin-top: 10px; font-size: 13.5px; background: rgba(255,255,255,.16); padding: 6px 10px; border-radius: 10px; }
.now-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.now-card .btn-primary { background: #fff; color: var(--accent-dark); border-color: rgba(0,0,0,.18); }
.now-card .btn-primary:hover { background: var(--accent-soft); }
.now-card .btn-ghost { color: #fff; }
.now-card .btn-ghost:hover { background: rgba(255,255,255,.15); }
[data-theme='midnight'] .now-card { color: #17142a; }
[data-theme='midnight'] .now-card .task-meta, [data-theme='midnight'] .now-card .class-name, [data-theme='midnight'] .now-card .btn-ghost { color: #17142a; }

/* Test radar */
.radar-card { border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }
.radar { display: flex; flex-direction: column; gap: 10px; }
.radar-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.radar-days { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; background: var(--c); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, #000); }
.radar-days b { font-size: 22px; font-weight: 900; }
.radar-days span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.radar-title { font-weight: 800; margin-bottom: 6px; }
.radar-title a:hover { text-decoration: underline; }
.radar-sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ready-bar { position: relative; display: flex; height: 12px; border-radius: 99px; background: var(--ring-track); overflow: hidden; max-width: 420px; }
.rb-done { background: var(--rc, var(--accent)); border-radius: 99px; }
.rb-plan { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rc, var(--accent)) 45%, transparent) 0 4px, transparent 4px 8px); }
.rt-ready { --rc: var(--load-light); }
.rt-on-track { --rc: var(--accent); }
.rt-behind { --rc: var(--load-heavy); }
.rt-no-plan { --rc: var(--load-over); }
.ready-tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 1px 9px; border-radius: 99px; color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, var(--surface)); border: 2px solid color-mix(in srgb, var(--rc) 35%, transparent); white-space: nowrap; }

/* Study Buddy card */
.mascot-card { display: flex; flex-direction: column; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--accent-soft), var(--surface) 70%); }
.mascot-wrap { cursor: pointer; }
.mascot-wrap.poked .buddy { animation: hop .5s ease-in-out; }
.bubble { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 10px 14px; font-weight: 700; text-align: center; font-size: 14px; width: 100%; }
.bubble::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: var(--surface); border-left: 2px solid var(--line); border-top: 2px solid var(--line); }
.bubble .btn { margin-top: 8px; }
.ask-mini { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.ask-sugs { display: flex; flex-direction: column; align-self: stretch; }
.notice { font-weight: 700; font-size: 14px; }
.notice.reset { background: #fff8e6; border-color: #ffe1a1; }
[data-theme='midnight'] .notice.reset { background: #3a3220; border-color: #5e4f2a; }
.quests { display: flex; flex-direction: column; gap: 10px; }
.quest { display: flex; align-items: center; gap: 10px; }
.quest.done .q-label { text-decoration: line-through; color: var(--muted); }
.q-label { font-weight: 700; font-size: 14px; }
.reset-card { background: linear-gradient(135deg, #fff5d6, var(--surface)); border-color: #ffe08a; }
[data-theme='midnight'] .reset-card { background: linear-gradient(135deg, #3a3220, var(--surface)); border-color: #5e4f2a; }

/* ---------- Ask ---------- */
.ask-page { display: flex; flex-direction: column; height: 100%; max-width: 840px; margin: 0 auto; }
.view:has(.ask-page) { padding-bottom: 24px; }
.chat { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 4px 2px 16px; min-height: 240px; }
.chat-empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg.user { justify-content: flex-end; }
.msg.user .msg-body { background: var(--accent); color: #fff; border-radius: 18px 18px 4px 18px; padding: 9px 14px; max-width: 75%; font-weight: 700; box-shadow: 0 3px 0 var(--accent-dark); }
[data-theme='midnight'] .msg.user .msg-body { color: #17142a; }
.msg.bot .msg-body { background: var(--surface); border: 2px solid var(--line); border-radius: 4px 18px 18px 18px; padding: 12px 16px; max-width: 86%; }
.msg-body p { margin: 0 0 8px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-avatar { flex-shrink: 0; margin-top: -4px; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.msg-meta { margin-top: 8px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.chat-list { margin: 6px 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.chat-task { border-bottom: 3px solid color-mix(in srgb, var(--c) 55%, transparent); }
.chat-task:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.center-sug { justify-content: center; max-width: 580px; margin-top: 10px; }
.ask-bar { display: flex; gap: 8px; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: var(--shadow); }
.ask-bar:focus-within { border-color: var(--accent); }
.ask-bar input { border: none !important; font-size: 15px; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Overwhelm mode ---------- */
.calm { position: fixed; inset: 0; z-index: 60; background: linear-gradient(160deg, #eaf6ff, #f4edff 60%, #fff0f5); display: grid; place-items: center; opacity: 0; transition: opacity .3s; overflow: auto; padding: 24px; }
[data-theme='midnight'] .calm { background: linear-gradient(160deg, #141c2b, #1d1830 60%, #2a1626); }
.calm.show { opacity: 1; }
.calm-inner { max-width: 560px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.calm-close { position: fixed; top: 18px; right: 22px; border: none; background: transparent; cursor: pointer; font-weight: 800; color: var(--muted); font-size: 14px; }
.calm h1 { font-size: 28px; }
.calm-sub { color: var(--ink-2); font-size: 16px; }
.calm-step { background: var(--surface); border-radius: 22px; padding: 22px; width: 100%; border: 2px solid var(--line); border-top: 6px solid var(--c, var(--accent)); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.calm-kicker { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.calm-task { font-size: 21px; font-weight: 800; }
.breath-circle { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #d6c8ff, #a98bff); display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #3b1f8a; transform: scale(.6); transition: transform 4s ease-in-out; margin: 30px 0; box-shadow: 0 0 60px rgba(150, 120, 255, .5); }
.breath-circle.in, .breath-circle.hold { transform: scale(1.15); }
.breath-circle.out { transform: scale(.6); }
body.calm-mode .fab { display: none; }

/* ---------- Calendar ---------- */
.cal-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-nav { display: flex; gap: 4px; }
.cal-title { font-size: 24px; margin: 0; min-width: 0; }
.btn-icon { min-width: 34px; justify-content: center; font-size: 18px; line-height: 1; }
.cal-menu { position: relative; }
.cal-menu > summary { list-style: none; }
.cal-menu > summary::-webkit-details-marker { display: none; }
.cal-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 290px; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.cal-menu-pop .btn { justify-content: flex-start; text-align: left; }
.cal-menu-pop .toggle { padding: 4px 10px; }
.cal-menu-pop .legend { padding: 0 10px 4px; margin-top: 0; }
.cal-tip { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 12px; padding: 6px 6px 6px 12px; margin-bottom: 12px; }
.cal-tip span { flex: 1; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); font-weight: 700; margin-top: 8px; }
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--line); }
.hint { margin: 4px 0 12px; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); gap: 1px; }
.month-dow { background: var(--surface-2); text-align: center; font-weight: 800; font-size: 12.5px; padding: 6px; color: var(--ink-2); text-transform: uppercase; }
.month-cell { background: var(--surface); min-height: 132px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.month-cell.heat { background: linear-gradient(var(--heat, transparent), var(--heat, transparent)), var(--surface); }
.month-cell.other { background: var(--surface-2); }
.month-cell.other > * { opacity: .55; }
.mc-head { display: flex; align-items: center; gap: 4px; }
.mc-num { font-weight: 800; font-size: 13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.mc-num:hover { background: var(--surface-2); }
.month-cell.today .mc-num { background: var(--accent); color: #fff; }
.mc-load { font-size: 13px; }
.mc-add { margin-left: auto; border: none; background: transparent; cursor: pointer; color: var(--muted); font-weight: 900; font-size: 16px; opacity: 0; width: 24px; height: 24px; border-radius: 6px; }
.month-cell:hover .mc-add, .tg-due:hover .mc-add { opacity: 1; }
.mc-add:hover { background: var(--surface-2); }
.mc-more { font-size: 12px; font-weight: 800; color: var(--muted); padding-left: 4px; }
.cal-chip { font-size: 12.5px; font-weight: 700; padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.cal-chip.session { background: transparent; border: 1.5px dashed var(--c); border-left: 3px solid var(--c); }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-chip.step { font-weight: 600; }
.cal-chip.type-test, .cal-chip.type-project { font-weight: 900; }
[data-drop-date].drop-over { outline: 3px dashed var(--accent-2); outline-offset: -3px; background: color-mix(in srgb, var(--accent-2) 10%, var(--surface)) !important; }
.week-sum { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.tg { border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: auto; max-height: calc(100vh - 230px); min-height: 460px; position: relative; }
.tg-head, .tg-allday, .tg-body { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(120px, 1fr)); }
.tg-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); }
.tg-day { height: 46px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-left: 1px solid var(--line); }
.tg-day .load-pill { font-size: 12px; padding: 1px 6px; }
.tg-day.heat { background: linear-gradient(var(--heat, transparent), var(--heat, transparent)), var(--surface); }
.tg-dow { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.tg-num { font-size: 18px; font-weight: 900; }
.tg-day.today .tg-num { color: var(--accent); }
.tg-allday { position: sticky; top: 46px; z-index: 2; background: var(--surface); border-bottom: 2px solid var(--line); }
.tg-gutter { padding: 4px; text-align: right; }
.tg-due { border-left: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 40px; min-width: 0; }
.tg-due .mc-add { align-self: flex-end; }
.tg-hour { font-size: 11px; color: var(--muted); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.tg-body .tg-hour:first-child { visibility: hidden; }
.tg-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--line) 60%, transparent) 0, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1px, transparent var(--hour, 64px)); }
.tg-col.today { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
.blk { position: absolute; left: 3px; right: 3px; border-radius: 9px; padding: 5px 8px; font-size: 12.5px; overflow: hidden; cursor: pointer; line-height: 1.3; }
.blk span { font-size: 11.5px; opacity: .9; }
.blk span, .blk b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk-class { background: color-mix(in srgb, var(--c) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 40%, var(--surface)); color: var(--ink-2); z-index: 1; }
.blk-life { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 6px, var(--surface) 6px, var(--surface) 12px); border: 1px solid var(--line); color: var(--muted); font-weight: 700; z-index: 1; }
.blk-life.protected { background: repeating-linear-gradient(135deg, #f0ebff, #f0ebff 6px, var(--surface) 6px, var(--surface) 12px); border-color: #ddd2ff; color: #6a4fc0; }
[data-theme='midnight'] .blk-life.protected { background: repeating-linear-gradient(135deg, #2a2448, #2a2448 6px, var(--surface) 6px, var(--surface) 12px); border-color: #3e3570; color: #c3b4ff; }
.blk-session, .blk-event { z-index: 2; background: var(--c); color: #fff; border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.15); cursor: grab; }
.blk-event { background: color-mix(in srgb, var(--c) 60%, #445); }
.blk.done { opacity: .5; }
.blk-free { z-index: 1; left: 3px; right: 3px; border: 1px dashed color-mix(in srgb, var(--load-light) 35%, transparent); background: color-mix(in srgb, var(--load-light) 5%, transparent); color: color-mix(in srgb, var(--load-light) 65%, var(--muted)); font-weight: 700; font-size: 11.5px; transition: background .15s, border-color .15s; }
.blk-free span { opacity: .75; }
.blk-free:hover { background: color-mix(in srgb, var(--load-light) 16%, transparent); border: 1px solid color-mix(in srgb, var(--load-light) 60%, transparent); }
.blk-free:hover span { opacity: 1; }
.tg-multi .blk-free span { opacity: 0; }
.tg-multi .blk-free:hover span { opacity: 1; }
.tg-multi .blk-free.peak span { opacity: .8; }
.blk-free.peak { background: color-mix(in srgb, #f5b400 7%, transparent); border-color: color-mix(in srgb, #f5b400 40%, transparent); color: color-mix(in srgb, #b98500 80%, var(--ink-2)); }
.tg-col { cursor: cell; }
.tg-col > * { cursor: pointer; }
.month-cell { cursor: pointer; }
.month-cell > * { cursor: auto; }
.mc-free { font-size: 11px; font-weight: 800; color: color-mix(in srgb, var(--load-light) 70%, var(--ink-2)); white-space: nowrap; }
.week-sum { flex-wrap: wrap; font-size: 14px; margin-bottom: 12px; min-height: 32px; }
.ws-sep { color: var(--muted); }
.ws-ok { color: var(--load-light); font-weight: 700; }
.ws-warn { color: #b7791f; font-weight: 700; }
[data-theme='midnight'] .ws-warn { color: #f3c56b; }
/* List (agenda) view */
.agenda { display: flex; flex-direction: column; gap: 10px; }
.ag-day { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.ag-day.today { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.ag-day.empty { padding: 6px 14px; background: transparent; border-style: dashed; }
.ag-day.empty .ag-date b { color: var(--muted); }
.ag-head { display: flex; align-items: center; gap: 8px; }
.ag-head:hover .mc-add, .ag-day.empty .mc-add { opacity: 1; }
.ag-date { font-size: 15px; }
.ag-day.today .ag-date b { color: var(--accent); }
.ag-free { border: none; background: color-mix(in srgb, var(--load-light) 10%, transparent); color: color-mix(in srgb, var(--load-light) 70%, var(--ink-2)); font: inherit; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; cursor: pointer; }
.ag-free:hover { background: color-mix(in srgb, var(--load-light) 20%, transparent); }
.ag-items { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ag-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.ag-time { font-size: 12px; font-weight: 800; color: var(--muted); text-align: right; }
.ag-main .cal-chip { font-size: 13.5px; padding: 5px 10px; }
.free-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.free-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 2px dashed color-mix(in srgb, var(--load-light) 55%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--load-light) 6%, var(--surface)); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.free-row:hover { border-style: solid; }
.free-row b { color: color-mix(in srgb, var(--load-light) 70%, var(--ink-2)); font-size: 13px; }
.slot-ideas { display: flex; flex-direction: column; gap: 8px; }
.slot-idea { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-left: 5px solid var(--c); border-radius: 12px; }
.slot-idea .grow > span { display: block; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 4; }
.now-line::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.day-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.day-panel { margin: 0; }
.load-items { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13.5px; }
.li { display: flex; align-items: center; gap: 6px; }

/* ---------- Classes ---------- */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.class-card { background: var(--surface); border: 2px solid var(--line); border-top: 8px solid var(--c); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; transition: transform .1s, box-shadow .15s; }
.class-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cc-top { display: flex; align-items: flex-start; gap: 8px; }
.cc-top h3 { flex: 1; font-size: 18px; }
.grade-badge { display: flex; flex-direction: column; align-items: center; font-weight: 900; font-size: 22px; line-height: 1; background: color-mix(in srgb, var(--c) 15%, var(--surface)); padding: 6px 10px; border-radius: 12px; }
.grade-badge small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.grade-badge.empty { color: var(--muted); }
.cat-bar { display: flex; gap: 2px; border-radius: 8px; overflow: hidden; font-size: 11px; font-weight: 800; }
.cat-bar span { background: color-mix(in srgb, var(--c) 20%, var(--surface)); padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.class-title { display: flex; align-items: center; gap: 8px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.grade-big { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 10px; }
.gb-letter { font-size: 48px; font-weight: 900; color: var(--accent); }
.gb-pct { font-size: 22px; font-weight: 800; color: var(--ink-2); }
.breakdown { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bd-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.bd-bar { width: 120px; height: 8px; background: var(--ring-track); border-radius: 99px; overflow: hidden; }
.bd-bar span { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.grade-list { border-top: 2px solid var(--line); margin-top: 8px; }
.grade-row { display: flex; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; align-items: center; }
.grade-row:hover { background: var(--surface-2); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.what-if { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Insights & charts ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.stat-val { font-size: 24px; font-weight: 900; }
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.insight-grid .card { margin: 0; }
.insight-grid + .card { margin-top: 16px; }
.hbar { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 10px; font-size: 13.5px; padding: 2px 0; }
.hbar-row:hover .hbar-fill { filter: brightness(1.08); }
.hbar-label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.hbar-track { height: 14px; }
.hbar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; }
.hbar-val { text-align: right; font-weight: 800; color: var(--ink); }
.vbar { position: relative; padding-left: 36px; }
.vbar-grid { position: absolute; left: 36px; right: 0; top: 0; }
.vbar-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.vbar-line span { position: absolute; left: -36px; top: -8px; font-size: 10.5px; color: var(--muted); width: 32px; text-align: right; }
.vbar-cols { position: relative; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.vbar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.vbar-col:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.vbar-fill { width: min(70%, 34px); border-radius: 4px 4px 0 0; min-height: 0; transition: height .5s ease; }
.vbar-labels { display: flex; gap: 2px; margin-top: 4px; }
.vbar-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.vbar-labels span.strong { font-weight: 900; color: var(--ink); }
.insight-list { padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--muted); padding: 6px; border-bottom: 2px solid var(--line); }
.table td { padding: 7px 6px; border-bottom: 1px solid var(--line); }

/* ---------- Profile ---------- */
.profile-hero { display: flex; gap: 24px; align-items: center; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); flex-wrap: wrap; }
.ph-mascot { text-align: center; }
.ph-main { flex: 1; min-width: 260px; }
.ph-title { font-size: 17px; color: var(--ink-2); margin-top: 4px; }
.ph-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ph-stats .stat { padding: 8px 10px; }
.ph-stats .stat-val { font-size: 20px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; text-align: center; border: 2px solid var(--line); }
.badge-ico { font-size: 30px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #fff3c4, var(--gold)); box-shadow: 0 3px 0 var(--gold-dark); }
.badge-name { font-size: 12px; font-weight: 800; line-height: 1.15; }
.badge.locked .badge-ico { filter: grayscale(1); opacity: .35; background: var(--surface-2); box-shadow: none; }
.badge.locked .badge-name { color: var(--muted); }
.badge.earned { border-color: #ffe08a; }
.wardrobe .seg { margin-bottom: 12px; }
.wardrobe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.wardrobe-item { border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wardrobe-item.on { border-color: var(--accent); background: var(--accent-soft); }
.wi-name { font-weight: 800; }
.wardrobe-ico { font-size: 40px; }
.theme-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 14px; background: var(--surface); cursor: pointer; font-weight: 800; font-size: 13px; }
.theme-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.theme-sw { display: flex; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); }
.theme-sw i { width: 34px; height: 44px; }
.settings .grid3 { margin-bottom: 8px; }

/* ---------- Study Buddy ---------- */
.buddy { overflow: visible; animation: bob 3s ease-in-out infinite; }
.b-body { fill: var(--b-body); }
.b-wing { transform-origin: center; }
.b-wing-red { fill: var(--b-wing); }
.b-wing-band { fill: var(--b-band); }
.b-wing-green { fill: var(--b-green); }
.b-wing-tip { fill: var(--b-tip); }
.b-scallop { fill: none; stroke: rgba(120, 0, 0, .22); stroke-width: 2; stroke-linecap: round; }
.b-beak { fill: var(--b-beak); stroke: #ddc9a6; stroke-width: 1.5; }
.b-beak-dark { fill: #4a4352; }
.b-beak-low { fill: var(--b-beak-low); }
.b-patch { fill: var(--b-patch); }
.b-patch-lines { stroke: #e8322e; stroke-width: 1.6; stroke-linecap: round; opacity: .35; }
.b-feet { stroke: var(--b-feet); stroke-width: 5; stroke-linecap: round; fill: none; }
.b-perch { fill: none; stroke: #8a5a3b; stroke-width: 9; stroke-linecap: round; }
.b-leaf { fill: #5cbf4a; }
.b-line { fill: none; stroke: #2a2140; stroke-width: 4; stroke-linecap: round; }
.b-thin { stroke-width: 3; }
.b-flap { animation: flap .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
.b-z { fill: var(--muted); font-weight: 900; }
.b-think { animation: bob 2s ease-in-out infinite; }
.mood-excited { animation: hop .8s ease-in-out infinite; }
.mood-sleepy { animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }
@keyframes flap { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

/* ---------- Modals ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(42, 33, 64, .45); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .16s; overflow: auto; }
.modal-wrap.show { opacity: 1; }
.modal { background: var(--surface); border-radius: 20px; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); transform: translateY(10px) scale(.98); transition: transform .16s; }
.modal-wrap.show .modal { transform: none; }
.modal.wide { width: min(880px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; }
.modal-head h2 { flex: 1; font-size: 19px; }
.modal-body { padding: 14px 20px 20px; }
.modal-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-weight: 800; font-size: 13.5px; color: var(--ink-2); }
.field em { font-weight: 600; color: var(--muted); font-style: normal; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.est-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.est-row input[type=number] { width: 90px; }
.est-row input[type=date] { width: auto; }
.est-row input[type=time] { width: auto; }
.day-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.day-picker label input { position: absolute; opacity: 0; }
.day-picker label span { display: block; padding: 5px 9px; border-radius: 9px; border: 2px solid var(--line); font-weight: 800; font-size: 12.5px; cursor: pointer; }
.day-picker label input:checked + span { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.day-picker label input:focus-visible + span { outline: 2px solid var(--accent-2); }
.cat-row { display: grid; grid-template-columns: 1fr 80px 34px; gap: 6px; margin-bottom: 6px; }
.meet-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; padding: 8px; background: var(--surface-2); border-radius: 12px; }
.meet-row input[type=time] { width: 120px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch input[type=radio] { position: absolute; opacity: 0; }
.swatch span { display: block; width: 30px; height: 30px; border-radius: 50%; background: var(--sw); cursor: pointer; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--line); }
.swatch input:checked + span { box-shadow: 0 0 0 3px var(--ink); }
.swatch.custom input { width: 34px; height: 34px; border: none; padding: 0; background: none; cursor: pointer; }
.kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.kind-opt input { position: absolute; opacity: 0; }
.kind-opt span { display: block; text-align: center; padding: 8px 4px; border-radius: 12px; border: 2px solid var(--line); font-size: 12.5px; font-weight: 800; cursor: pointer; line-height: 1.5; }
.kind-opt input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); }
.lb-ico { font-size: 24px; }
.qa-input { font-size: 18px !important; padding: 12px 14px !important; }
.qa-preview { display: flex; gap: 6px; flex-wrap: wrap; min-height: 30px; align-items: center; }
.qa-more summary { cursor: pointer; font-weight: 800; color: var(--ink-2); margin-bottom: 10px; }
.qa-more[open] > div { display: flex; flex-direction: column; gap: 12px; }
.kbd-hint { font-size: 13px; }
.detail h4 { margin-top: 16px; }
.notes { white-space: pre-wrap; background: var(--surface-2); padding: 8px 10px; border-radius: 10px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.session-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border-left: 4px solid var(--c); background: var(--surface-2); font-size: 13.5px; }
.session-row.done { opacity: .55; }
.session-when { font-weight: 800; width: 140px; flex-shrink: 0; }
.session-what { flex: 1; min-width: 0; }
.dump { font-size: 15px; }
.dump-table { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.dump-head, .dump-row { display: grid; grid-template-columns: 26px minmax(160px, 2fr) 1.2fr 1.1fr 140px 76px 100px; gap: 6px; align-items: start; }
.dump-head { font-weight: 800; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.dump-row { padding: 6px 0; border-top: 1px solid var(--line); }
.dump-row input, .dump-row select { padding: 6px 8px !important; font-size: 13px; }
.dump-row.skipped > *:not(input[type=checkbox]) { opacity: .4; }
.dump-row input[type=checkbox] { margin-top: 10px; width: 18px; height: 18px; accent-color: var(--accent); }
.dump-note { color: #9a5b00; font-size: 12px; margin-top: 3px; }
.dump-raw { color: var(--muted); font-size: 11.5px; margin-top: 2px; font-style: italic; }
input.guess { border-color: #ffd699 !important; }
.steps-list { display: flex; flex-direction: column; gap: 8px; }
.step-row { display: grid; grid-template-columns: 28px 1fr 150px 40px 80px 28px 34px; gap: 6px; align-items: center; }
.step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; display: grid; place-items: center; font-size: 13px; }
.plan-days { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow: auto; padding-right: 4px; }
.plan-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.plan-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-left: 4px solid var(--c); background: var(--surface-2); border-radius: 10px; margin-bottom: 4px; font-size: 14px; }
.plan-item input[type=time] { width: 120px; padding: 4px 8px !important; }
.timeline-plan { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; border-left: 3px dashed var(--line); padding-left: 16px; }
.tp-item { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; position: relative; }
.tp-item::before { content: ''; position: absolute; left: -24px; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); border: 3px solid var(--surface); }
.tp-day { font-weight: 800; color: var(--ink-2); font-size: 13px; }
.tp-card { padding: 8px 12px; border-radius: 12px; border-left: 5px solid var(--c); background: var(--surface-2); }
.tp-card.exam { border-left-color: var(--danger); background: #fff0f2; }
[data-theme='midnight'] .tp-card.exam { background: #3a1f28; }
.kbd-table td { padding: 6px 10px; }
.reset-step { min-height: 260px; display: flex; flex-direction: column; gap: 10px; }
.reset-step.center { align-items: center; text-align: center; }
.reset-step .stat-row { width: 100%; margin: 10px 0 0; }
.reset-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.reset-dots span { width: 40px; height: 6px; border-radius: 99px; background: var(--line); }
.reset-dots span.on, .reset-dots span.past { background: var(--accent); }
.won-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.reset-move { display: flex; align-items: center; gap: 10px; }
.reset-move input { width: 170px !important; }
.onboard { width: min(520px, 100%); }
.onboard h1 { margin: 8px 0; font-size: 23px; }

/* ---------- FAB, timer, toasts, tooltip, level up ---------- */
.fab { position: fixed; right: 28px; bottom: 28px; width: 64px; height: 64px; border-radius: 50%; border: none; background: var(--accent); color: #fff; font-size: 36px; font-weight: 600; cursor: pointer; box-shadow: 0 5px 0 var(--accent-dark), 0 10px 24px rgba(0,0,0,.18); z-index: 20; line-height: 1; transition: transform .1s; }
.fab:hover { transform: scale(1.06) rotate(90deg); }
.fab:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent-dark); }
.timer-widget { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-bottom: 4px solid var(--c); border-radius: 20px; padding: 8px 10px 8px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); min-width: 300px; }
.timer-widget.break { border-bottom-color: var(--accent-2); }
.tw-ring .ring-label { font-size: 12px; }
.tw-mode { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.tw-task { font-weight: 800; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-info { flex: 1; }
.tw-btns { display: flex; gap: 2px; }
.timer-full { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 18%, var(--bg)), var(--bg) 70%); }
.timer-full.break { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent-2) 20%, var(--bg)), var(--bg) 70%); }
.tf-exit { position: absolute; top: 18px; right: 18px; font-size: 20px; }
.tf-mode { font-size: 15px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.tf-task { font-size: clamp(22px, 4vw, 38px); font-weight: 900; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-ring { margin: 10px 0; }
.tf-ring .ring-label { font-size: calc(var(--tf-size, 300px) * .2); font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.tf-round { font-weight: 800; font-size: 17px; }
.tf-dots { display: flex; gap: 8px; }
.tf-dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--ring-track); }
.tf-dots span.now { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.tf-dots span.done { background: var(--c); opacity: .55; }
.tf-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.tf-btns .btn { font-size: 16px; padding: 12px 22px; }
.tf-hint { font-size: 13px; margin-top: 6px; }
.toasts { position: fixed; top: 70px; right: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-width: 380px; font-size: 14px; transform: translateX(120%); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.toast.show { transform: none; }
.toast.quest { border-color: var(--gold); }
.toast.badge { border-color: var(--gold); background: linear-gradient(135deg, #fffbea, var(--surface)); }
[data-theme='midnight'] .toast.badge { background: linear-gradient(135deg, #3a3220, var(--surface)); }
.toast-ico { font-size: 20px; }
.float-xp { position: fixed; z-index: 90; transform: translate(-50%, 0); font-weight: 900; color: var(--gold); text-shadow: 0 2px 0 #b58900, 0 0 10px rgba(255,200,0,.4); font-size: 20px; pointer-events: none; animation: floatup 1.2s ease-out forwards; }
@keyframes floatup { from { opacity: 1; transform: translate(-50%, 0) scale(.8); } 30% { transform: translate(-50%, -20px) scale(1.2); } to { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
.tooltip { position: fixed; z-index: 100; background: #2a2140; color: #fff; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; max-width: 280px; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 95; }
.levelup { position: fixed; inset: 0; z-index: 70; background: rgba(42, 33, 64, .6); display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.levelup.show { opacity: 1; }
.levelup-card { position: relative; background: var(--surface); border-radius: 28px; padding: 30px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; overflow: hidden; transform: scale(.6); transition: transform .5s cubic-bezier(.2, 1.6, .4, 1); min-width: 300px; }
.levelup.show .levelup-card { transform: scale(1); }
.levelup-burst { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(255, 201, 60, .16) 0 10deg, transparent 10deg 20deg); animation: spin 12s linear infinite; }
.levelup-card > *:not(.levelup-burst) { position: relative; }
.levelup-kicker { font-weight: 900; color: var(--gold); letter-spacing: 3px; font-size: 18px; text-shadow: 0 2px 0 #b58900; }
.levelup-num { font-size: 84px; font-weight: 900; line-height: 1; color: var(--accent); text-shadow: 0 5px 0 var(--accent-dark); animation: pop .7s cubic-bezier(.2, 1.8, .4, 1); }
.levelup-title { font-size: 18px; margin-bottom: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(0); } }
body.is-dragging [data-drop-date] { transition: background .1s; }

/* ---------- Prioritize ---------- */
.pz-filters { margin: -6px 0 14px; }
.pz-hero { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
.pz-buddy { flex-shrink: 0; }
.pz-advice { color: var(--ink-2); margin: 6px 0 12px; }
.pz-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pz-top li { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--line); border-left: 6px solid var(--c); border-radius: 14px; padding: 10px 12px; }
.pz-top li [data-action='open-task'] { cursor: pointer; }
.pz-rank { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 900; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 3px 0 var(--accent-dark); }
.pz-title { font-weight: 800; }
.pz-late { color: var(--danger); }
.pz-pin { filter: grayscale(1); opacity: .45; }
.pz-pin:hover { opacity: .8; background: var(--surface-2); }
.pz-pin.on { filter: none; opacity: 1; background: #fff3cf; }
[data-theme='midnight'] .pz-pin.on { background: #3a2e18; }
.pz-ok { font-size: 12px; font-weight: 800; color: var(--load-light); white-space: nowrap; }

.pz-axis { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; gap: 6px; margin-bottom: 16px; }
.pz-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .4px; }
.pz-axis-x { grid-column: 2; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .4px; }
.pz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pz-quad { border-radius: var(--radius); padding: 14px 16px; border: 2px solid var(--line); background: var(--surface); --q: var(--muted); border-top: 6px solid var(--q); min-width: 0; }
.pz-now { --q: var(--load-over); background: linear-gradient(180deg, var(--heat-overloaded), var(--surface) 120px); }
.pz-plan { --q: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 120px); }
.pz-quick { --q: var(--load-moderate); background: linear-gradient(180deg, var(--heat-moderate), var(--surface) 120px); }
.pz-later { --q: var(--muted); }
.pz-qhead { display: flex; align-items: center; gap: 8px; }
.pz-qico { font-size: 22px; }
.pz-count { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--q); color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.pz-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 360px; overflow: auto; }
.pz-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); border-left: 5px solid var(--c); }
.pz-item .check { width: 22px; height: 22px; border-width: 2px; margin: 0; }
.pz-item [data-action='open-task'] { cursor: pointer; }
.pz-item .icon-btn { width: 30px; height: 30px; }
.pz-none { text-align: center; padding: 14px 0; }

.pz-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pz-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pz-rankings { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pz-rrow { display: grid; grid-template-columns: 26px minmax(0, 220px) 1fr 36px; align-items: center; gap: 10px; }
.pz-rnum { font-weight: 900; color: var(--muted); text-align: right; }
.pz-rtitle { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pz-rtitle:hover { color: var(--accent-dark); }
.pz-bar { display: flex; height: 14px; border-radius: 99px; background: var(--ring-track); overflow: hidden; gap: 2px; }
.pz-bar span { display: block; height: 100%; }
.pz-score { text-align: right; }
@media (max-width: 820px) {
  .pz-grid { grid-template-columns: 1fr; }
  .pz-axis { grid-template-columns: 1fr; }
  .pz-axis-y, .pz-axis-x { display: none; }
  .pz-buddy { display: none; }
  .pz-rrow { grid-template-columns: 22px minmax(0, 1fr) 90px 30px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .today-grid { grid-template-columns: 1fr; }
  .side { position: static; }
  .insight-grid, .two-col { grid-template-columns: 1fr; }
  .day-layout { grid-template-columns: 1fr; }
  .dump-head { display: none; }
  .dump-row { grid-template-columns: 26px 1fr 1fr; }
  .step-row { grid-template-columns: 28px 1fr 140px; }
  .tb-test { display: none; }
}
@media (max-width: 820px) {
  #app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; flex-direction: row; padding: 6px; border-right: none; border-top: 2px solid var(--line); }
  .sidebar .brand, .sidebar-foot { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 0; padding: 4px 2px; font-size: 9.5px; letter-spacing: 0; border: none; min-width: 0; }
  .nav a.active { background: transparent; }
  .tb-brand { display: block; margin-right: auto; }
  .tb-ask { display: none; }
  .topbar { padding: 8px 12px; gap: 6px; }
  .xp-bar { width: 50px; }
  .view { padding: 16px 14px 150px; }
  .fab { bottom: 84px; right: 16px; width: 56px; height: 56px; }
  .timer-widget { bottom: 80px; min-width: 0; width: calc(100% - 100px); left: 12px; transform: none; }
  .month-cell { min-height: 74px; padding: 3px; }
  .cal-chip { font-size: 10.5px; padding: 1px 3px; }
  .ag-main .cal-chip { font-size: 13px; padding: 4px 8px; }
  .ag-row { grid-template-columns: 56px minmax(0, 1fr); }
  .cal-title { font-size: 20px; width: 100%; order: -1; }
  .grid3, .ph-stats { grid-template-columns: 1fr 1fr; }
  .tg-head, .tg-allday, .tg-body { grid-template-columns: 44px repeat(var(--cols), minmax(90px, 1fr)); }
  .energy-opts { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- First-time tour ---------- */
.tour { position: fixed; inset: 0; z-index: 60; opacity: 0; transition: opacity .2s; }
.tour.show { opacity: 1; }
/* Clicks on the page underneath are blocked while the tour is up. */
.tour::before { content: ''; position: absolute; inset: 0; }
.tour-spot { position: absolute; border-radius: 16px; box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(42, 33, 64, .55); transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease, opacity .2s; pointer-events: none; animation: tour-pulse 1.8s ease-in-out infinite; }
.tour-spot.none { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(42, 33, 64, .55); animation: none; }
@keyframes tour-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 9999px rgba(42, 33, 64, .55); } }
.tour-card { position: absolute; width: min(380px, calc(100vw - 24px)); display: flex; gap: 12px; align-items: flex-start; background: var(--surface); color: var(--ink); border: 2px solid var(--line); border-bottom-width: 5px; border-radius: var(--radius); padding: 16px 16px 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .22); transition: left .3s ease, top .3s ease; }
.tour-card.centered { width: min(440px, calc(100vw - 24px)); flex-direction: column; align-items: center; text-align: center; padding: 22px 22px 18px; }
.tour-card.centered .tour-body { width: 100%; }
.tour-buddy { flex-shrink: 0; }
.tour-buddy .buddy { display: block; }
.tour-body { flex: 1; min-width: 0; }
.tour-body h3 { margin: 2px 0 6px; font-size: 18px; font-weight: 900; }
.tour-body p { margin: 0 0 12px; color: var(--ink-2); }
.tour-step { font-weight: 800; text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }
.tour-dots { display: flex; gap: 5px; margin-bottom: 12px; }
.tour-card.centered .tour-dots { justify-content: center; }
.tour-dots span { width: 7px; height: 7px; border-radius: 99px; background: var(--line); transition: width .2s, background .2s; }
.tour-dots span.past { background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tour-dots span.on { width: 20px; background: var(--accent); }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-skip { color: var(--muted); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .tour-spot { animation: none; } }

/* School hours row (Profile) */
.school-row { margin: 10px 0; }

/* Coming up: meetings & appointments (Today) */
.coming-row { display: flex; align-items: center; gap: 8px; }
.coming-row .task-card { flex: 1; min-width: 0; }
.tag-now { background: var(--load-over); color: #fff; }
.tag-soon { background: var(--load-moderate); color: var(--ink); }
.wkend-note { margin: 8px 2px 0; }

/* Deadlines ("Due") stand out from study blocks and events in a warm red. */
.tg-allday { background: color-mix(in srgb, var(--due) 7%, var(--surface)); border-bottom: 2px solid color-mix(in srgb, var(--due) 45%, var(--line)); }
.tg-allday .tg-due { border-left-color: color-mix(in srgb, var(--due) 20%, var(--line)); }
.due-label { color: var(--due); font-size: 11.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; text-align: center; line-height: 1.3; padding-top: 6px; }
.tg-due .cal-chip, .ag-row.due .cal-chip { background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--due) 45%, var(--line)); border-left: 4px solid var(--c); color: var(--ink); }
.tg-due .cal-chip:hover, .ag-row.due .cal-chip:hover { border-color: var(--due); border-left-color: var(--c); }
.tg-due .cal-chip.done, .ag-row.due .cal-chip.done { border-color: var(--line); }
.tg-due .mc-more { color: var(--due); }
.ag-row.due .ag-time { color: var(--due); font-weight: 900; }