/* =========================================================
   Themes: picked at first launch and in Settings.
   Pet colours apply wherever data-theme is set, so swatch previews work too.
   ========================================================= */
:root { --logo: #1f3a2e; --pet-body: #5fb87d; --pet-belly: #d4f0dc; --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-theme="sage"]     { --logo: #1f3a2e; --pet-body: #5fb87d; --pet-belly: #d4f0dc; }
[data-theme="rose"]     { --logo: #9c3d5a; --pet-body: #f29bb2; --pet-belly: #ffe4eb; }
[data-theme="lavender"] { --logo: #5b4a9e; --pet-body: #b39cf0; --pet-belly: #ede6ff; }
[data-theme="ocean"]    { --logo: #1d5a73; --pet-body: #5cb8d6; --pet-belly: #d9f2fa; }
[data-theme="honey"]    { --logo: #8a4b12; --pet-body: #f2b84b; --pet-belly: #fff0cc; }

:root[data-theme="rose"]     { --bg: #fbf4f3; --surface: #fffbfa; --surface-2: #f6e9e8; --line: #eddcda; --brand: #9c3d5a; --brand-ink: #fffaf8; --accent: #f0a35e; }
:root[data-theme="lavender"] { --bg: #f6f4fb; --surface: #fdfcff; --surface-2: #ece8f6; --line: #e0daef; --brand: #5b4a9e; --brand-ink: #fbfaff; --accent: #f2a9bd; }
:root[data-theme="ocean"]    { --bg: #f2f6f7; --surface: #fbfdfd; --surface-2: #e4eef0; --line: #d6e3e6; --brand: #1d5a73; --brand-ink: #f5fbfc; --accent: #f5b85b; }
:root[data-theme="honey"]    { --bg: #faf5ec; --surface: #fffcf6; --surface-2: #f2e9d8; --line: #e8dcc4; --brand: #8a4b12; --brand-ink: #fffaf2; --accent: #e57a5a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"])[data-theme="rose"]     { --bg: #171214; --surface: #211a1d; --surface-2: #2c2226; --line: #3a2d32; --brand: #f2a7bd; --brand-ink: #2a0f19; }
  :root:not([data-mode="light"])[data-theme="lavender"] { --bg: #13121a; --surface: #1c1a26; --surface-2: #262335; --line: #322e45; --brand: #c4b5fd; --brand-ink: #1a1238; }
  :root:not([data-mode="light"])[data-theme="ocean"]    { --bg: #101619; --surface: #172025; --surface-2: #1f2b31; --line: #2a3940; --brand: #8ccfe3; --brand-ink: #0b2530; }
  :root:not([data-mode="light"])[data-theme="honey"]    { --bg: #16130e; --surface: #201b14; --surface-2: #2b241a; --line: #3a3022; --brand: #f5c27a; --brand-ink: #2b1804; }
}
:root[data-mode="dark"][data-theme="rose"]     { --bg: #171214; --surface: #211a1d; --surface-2: #2c2226; --line: #3a2d32; --brand: #f2a7bd; --brand-ink: #2a0f19; }
:root[data-mode="dark"][data-theme="lavender"] { --bg: #13121a; --surface: #1c1a26; --surface-2: #262335; --line: #322e45; --brand: #c4b5fd; --brand-ink: #1a1238; }
:root[data-mode="dark"][data-theme="ocean"]    { --bg: #101619; --surface: #172025; --surface-2: #1f2b31; --line: #2a3940; --brand: #8ccfe3; --brand-ink: #0b2530; }
:root[data-mode="dark"][data-theme="honey"]    { --bg: #16130e; --surface: #201b14; --surface-2: #2b241a; --line: #3a3022; --brand: #f5c27a; --brand-ink: #2b1804; }

body { font-family: var(--font); }
.brand .logo { width: 30px; height: 30px; stroke: none; border-radius: 8px; flex: none; }

/* Studying needs the whole screen: no Add button on study screens. */
body[data-page="study"] .fab, body[data-page="cards"] .fab,
body[data-page="quiz"] .fab, body[data-page="notes"] .fab, body[data-page="settings"] .fab { display: none; }
h1 { font-weight: 800; }

/* ---------- pet ---------- */
/* The app's icon rule (svg { stroke: currentColor }) must not outline the pet. */
.pet, .egg { display: block; overflow: visible; stroke: none; flex: none; }
.pet-bob { transform-origin: 60px 108px; animation: pet-bob 2.6s ease-in-out infinite; }
.pet-sleepy .pet-bob { animation-duration: 4.5s; }
.pet-excited .pet-bob { animation: pet-hop 1.1s ease-in-out infinite; }
.pet-z { animation: pet-z 2.4s ease-in-out infinite; }
.pet-dots circle { animation: pet-blink 1.2s infinite; }
.pet-dots circle:nth-child(2) { animation-delay: .2s; }
.pet-dots circle:nth-child(3) { animation-delay: .4s; }
@keyframes pet-bob { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes pet-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-8px) scale(.97, 1.04); } 60% { transform: translateY(0) scale(1.04, .96); } }
@keyframes pet-z { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes pet-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.egg-wobble { transform-origin: 60px 104px; animation: egg-wobble 1.8s ease-in-out infinite; }
@keyframes egg-wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-3deg); } }

.pet-card {
  display: flex; gap: 12px; align-items: center; margin: 8px 0 14px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
}
.pet-card-pet { flex: none; }
.pet-card-main { flex: 1; min-width: 0; }
.pet-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 17px; }
.pet-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bubble {
  margin: 6px 0 0; padding: 9px 12px; border-radius: 4px 14px 14px 14px;
  background: var(--surface-2); color: var(--ink); font-size: 15px; line-height: 1.4;
}
.bubble-center { border-radius: 14px; text-align: center; max-width: 420px; margin: 8px auto 0; }
.chip-fire { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; border-radius: 12px; }

.hub-pet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: 8px; }
.hub-pet h1 { margin: 6px 0 0; }
.hub-pet .btn-block { margin-top: 16px; max-width: 420px; }
.hub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; margin-top: 16px; }
.hub-stats > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hub-stats b { font-size: 18px; }
.hub-stats span { font-size: 12px; color: var(--ink-3); }
.xp { width: 80%; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 4px; }
.xp i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }

.study-strip {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin: 0 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.study-strip .pet { flex: none; }
.study-strip-main { flex: 1; min-width: 0; }
.study-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px;
}
.chip-btn:hover { background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); }
.study-row { display: block; }
.study-row:hover { background: transparent; }

.thinking, .hatch { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 8px; }
.hatch { padding: 4px 0 0; }
.hatch h3 { margin-top: 6px; }
.hatch .sub { margin-bottom: 8px; }
.hatch .taps { width: 100%; margin: 6px 0; }
.hatch .field { width: 100%; }
.xp-gain { font-size: 26px; font-weight: 800; color: var(--brand); margin: 4px 0; }
.study-title { font-size: 22px; margin-bottom: 8px; }

.progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 6px 0; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .3s ease; }

.flash {
  width: 100%; min-height: 260px; margin: 8px 0 14px; padding: 26px 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: var(--surface); border: 2px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
  animation: flash-in .25s ease;
}
.flash.flipped { border-color: var(--brand); animation: flash-flip .3s ease; }
.flash-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.flash-q { font-size: 14px; color: var(--ink-2); }
.flash-text { font-size: 21px; font-weight: 700; line-height: 1.35; }
@keyframes flash-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes flash-flip { from { transform: rotateY(70deg); opacity: .4; } }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grade .btn-block { grid-column: 1 / -1; }
.grade-again { color: var(--danger); }
.grade-good { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.grade-easy { color: var(--ok); }

.q-text { font-size: 20px; font-weight: 800; line-height: 1.35; margin: 12px 0 14px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px; font-weight: 600; font-size: 16px;
}
.option:not(:disabled):hover { border-color: var(--brand); }
.option:disabled { cursor: default; }
.opt-letter { flex: none; width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; font-size: 14px; }
.option.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.option.correct .opt-letter { background: var(--ok); color: var(--surface); }
.option.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.option.wrong .opt-letter { background: var(--danger); color: var(--surface); }
.why { margin: 14px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 15px; }
.why-right strong { color: var(--ok); }
.why-wrong strong { color: var(--danger); }

.notes { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; margin: 10px 0; }
.notes-title { text-transform: none; letter-spacing: -.01em; font-size: 20px; color: var(--ink); margin: 0 0 8px; }
.notes-summary { color: var(--ink-2); margin: 0 0 6px; }
.notes h3 { font-size: 16px; margin: 18px 0 6px; color: var(--brand); }
.notes ul { margin: 0; padding-left: 20px; }
.notes li { margin: 4px 0; }
.notes dt { font-weight: 800; margin-top: 8px; }
.notes dd { margin: 2px 0 0; color: var(--ink-2); }
.exam-focus { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 14px; padding: 2px 14px 12px; margin-top: 16px; }

/* ---------- theme picker ---------- */
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; margin: 8px 0; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 16px;
  border: 2px solid transparent; background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink);
}
.swatch .pet-bob { animation: none; }
.swatch[aria-pressed="true"] { border-color: var(--brand); background: var(--surface); }

/* ---------- light / dark picker ---------- */
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.segmented button { min-height: 42px; border: 0; border-radius: 11px; background: transparent; font-weight: 700; color: var(--ink-2); }
.segmented button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- quiz: answer like a test, results at the end ---------- */
.option.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.option.selected .opt-letter { background: var(--brand); color: var(--brand-ink); }
.quiz-nav { display: flex; gap: 10px; margin-top: 16px; }
.quiz-nav .btn-primary { flex: 1; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.quiz-end { justify-content: center; width: 100%; max-width: 420px; }

.score-ring {
  --pct: 0;
  width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin: 6px 0 2px;
  background: conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--surface-2) 0);
}
.score-ring span {
  width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); font-size: 30px; font-weight: 800;
}

.review { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.review-item { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--ok); border-radius: 16px; padding: 14px; }
.review-item.is-wrong { border-left-color: var(--danger); }
.review-head { font-size: 13px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.review-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; margin-right: 4px; color: #fff; background: var(--ok); font-size: 13px; }
.is-wrong .review-mark { background: var(--danger); }
.review-q { font-weight: 800; margin: 6px 0 8px; }
.review-a { padding: 8px 10px; border-radius: 10px; margin-top: 6px; font-weight: 600; }
.review-a.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.review-a.bad { background: color-mix(in srgb, var(--danger) 10%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.review-why { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

/* ---------- "how many?" setup ---------- */
.setup { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 0 16px; max-width: 460px; margin: 0 auto; }
.setup-title { text-transform: none; letter-spacing: -.01em; font-size: 22px; color: var(--ink); margin: 6px 0 2px; }
.count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.count {
  min-height: 64px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface);
  font-size: 22px; font-weight: 800; color: var(--ink);
}
.count[aria-checked="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand); }
.setup .hint { margin: 0; }
.segmented.two { grid-template-columns: repeat(2, 1fr); width: 100%; }

/* ---------- CBT exam room ---------- */
.exam-bar {
  position: sticky; top: 62px; z-index: 5; display: flex; align-items: center; gap: 10px;
  margin: 0 -16px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.exam-q { flex: 1; font-size: 15px; color: var(--ink-2); }
.exam-q b { color: var(--ink); }
.exam-timer {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 17px; padding: 4px 10px; border-radius: 10px;
  background: var(--surface-2); color: var(--ink);
}
.exam-timer.low { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); animation: pet-blink 1s infinite; }
.palette { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.palette::-webkit-scrollbar { display: none; }
.pal {
  flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--surface); font-weight: 700; font-size: 14px; color: var(--ink-2);
}
.pal.done { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); border-color: transparent; color: var(--ink); }
.pal.current { border: 2px solid var(--brand); color: var(--brand); }
.quiz-nav .btn { flex: 1; }

/* ---------- flashcard grading ---------- */
.grade-2 { grid-template-columns: 1fr 1fr; }
.grade-wrong { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); min-height: 56px; }
.grade-right { background: var(--ok); color: #fff; border-color: var(--ok); min-height: 56px; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .grade-right { color: #0e1a13; } }
:root[data-mode="dark"] .grade-right { color: #0e1a13; }

/* AI text can contain inline code (postfix expressions, pseudo-code). */
.q-text code, .option code, .flash code, .review code, .notes code, .why code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em;
  background: var(--surface-2); padding: 1px 6px; border-radius: 6px; white-space: pre-wrap;
}

/* ---------- the roaming pet ---------- */
.roam {
  position: fixed; left: 0; right: 0; bottom: var(--roam-bottom, calc(84px + env(safe-area-inset-bottom)));
  height: 0; z-index: 30; pointer-events: none;
}
.roam-mover {
  position: absolute; bottom: 0; left: 0; transform: translate(var(--x, 12px), var(--y, 0px));
  transition-property: transform; transition-timing-function: linear;
}
.roam-pet { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; display: block; border: 0; background: none; padding: 0; cursor: grab; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .12)); }
.roam-flip { display: block; transition: transform .2s ease; }
.roam.facing-left .roam-flip { transform: scaleX(-1); }
.roam.walking .pet-bob { animation: roam-step .45s ease-in-out infinite; }
.roam.hopping .roam-pet { animation: roam-hop .7s ease; }
@keyframes roam-step { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes roam-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-26px); } 70% { transform: translateY(0) scale(1.06, .94); } }
.roam-bubble {
  pointer-events: auto; position: absolute; bottom: 72px; left: 0; width: min(320px, calc(100vw - 24px));
  padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 8px 28px rgb(0 0 0 / .16); font-size: 15px; animation: rise .2s ease;
}
.roam.bubble-left .roam-bubble { left: auto; right: -8px; border-radius: 16px 16px 4px 16px; }
.roam-bubble p { margin: 0 0 6px; }
.roam-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.roam-course { font-size: 12px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.roam-q { font-weight: 800; }
.roam-options { display: flex; flex-direction: column; gap: 6px; }
.roam-opt { text-align: left; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg); font-size: 14px; color: var(--ink); }
.roam-opt.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface)); }
.roam-opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.roam-result { margin-top: 8px !important; font-weight: 700; }
body[data-page="quiz"] .roam, body[data-page="cards"] .roam { display: none; }

/* Picked up: dangle. Dropped: fall back to the ground with a bounce. */
.roam.dragging .roam-pet { cursor: grabbing; }
.roam.dragging .pet-bob { animation: roam-dangle .6s ease-in-out infinite; transform-origin: 60px 20px; }
.roam.landing .roam-mover { transition: transform .6s cubic-bezier(.5, 1.8, .6, 1) !important; }
@keyframes roam-dangle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* =========================================================
   App shell: bottom navigation, like an installed app.
   ========================================================= */
:root { --tabbar-h: 64px; --roam-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) - 6px); }
body { padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
.fab { display: none !important; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tab {
  height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); text-decoration: none; font-size: 11px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab svg { width: 24px; height: 24px; transition: transform .2s ease; }
.tab[aria-current="page"] { color: var(--brand); }
.tab[aria-current="page"] svg { transform: translateY(-1px) scale(1.08); stroke-width: 2.4; }
.tab:active svg { transform: scale(.9); }
.tab-add { justify-content: flex-end; padding-bottom: 8px; }
.tab-add-btn {
  width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; margin-top: -26px;
  background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 45%, transparent);
  transition: transform .15s ease;
}
.tab-add-btn svg { width: 26px; height: 26px; stroke-width: 2.6; }
.tab-add:active .tab-add-btn { transform: scale(.94); }

/* Exams and flashcards get the whole screen. */
body[data-page="quiz"] .tabbar, body[data-page="cards"] .tabbar { display: none; }
body[data-page="quiz"], body[data-page="cards"] { padding-bottom: 32px; }

.upload-bar { bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); right: 16px; }
.toast { bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom)); }

/* =========================================================
   Home hero: greeting, today's mission, one big button.
   ========================================================= */
.hero {
  position: relative; overflow: hidden; margin: 6px 0 16px; padding: 20px 18px 18px; border-radius: 26px;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pet-body) 55%, transparent) 0%, transparent 60%),
    linear-gradient(150deg, var(--logo), color-mix(in srgb, var(--logo) 70%, #000));
  color: #fff; box-shadow: 0 10px 30px color-mix(in srgb, var(--logo) 35%, transparent);
}
.hero::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: color-mix(in srgb, #fff 8%, transparent);
}
.hero > * { position: relative; z-index: 1; }
.hero-top { display: flex; gap: 10px; align-items: flex-start; }
.hero-text { flex: 1; min-width: 0; }
.hero-date { margin: 0; font-size: 13px; font-weight: 700; opacity: .75; }
.hero-hi { margin: 2px 0 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.hero-mission { margin: 10px 0 0; font-size: 17px; font-weight: 800; }
.hero-line { margin: 4px 0 0; font-size: 14px; opacity: .85; }
.hero-pet { flex: none; margin: -6px -6px 0 0; }
.hero-stats { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }
.hero-stats span {
  padding: 5px 10px; border-radius: 99px; font-size: 13px; font-weight: 800;
  background: color-mix(in srgb, #fff 16%, transparent); backdrop-filter: blur(4px);
}
.hero-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; min-height: 52px; border-radius: 16px;
  background: #fff; color: var(--logo); font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / .15); transition: transform .15s ease;
}
.hero-cta:active { transform: scale(.98); }
.hero-cta svg { width: 20px; height: 20px; stroke-width: 2.6; }

/* ---------- Plan (timetable) ---------- */
.plan-start { display: grid; gap: 10px; }
.plan-start .tap { min-height: 72px; }
.day-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--surface); font-weight: 800; font-size: 13px; color: var(--ink-2);
}
.day-chip i { font-style: normal; font-size: 11px; min-height: 14px; color: var(--brand); }
.day-chip.today { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.day-chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.day-chip.on i { color: var(--brand-ink); }
.class-row { cursor: default; }
.class-row:hover { background: transparent; }
.class-row.off { opacity: .45; }
.class-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; }
.class-time { flex: none; width: 58px; display: flex; flex-direction: column; font-size: 14px; }
.class-time span { font-size: 12px; color: var(--ink-3); }
.class-row .meta a { color: var(--brand); font-weight: 700; text-decoration: none; }
.q small.hint { display: block; font-size: 13px; font-weight: 600; }

/* ---------- top bar: light/dark toggle shows the mode you'd switch to ---------- */
#mode-btn .icon-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) #mode-btn .icon-sun { display: block; } :root:not([data-mode="light"]) #mode-btn .icon-moon { display: none; } }
:root[data-mode="dark"] #mode-btn .icon-sun { display: block; }
:root[data-mode="dark"] #mode-btn .icon-moon { display: none; }

/* ---------- reminders ---------- */
.rem-list { display: flex; flex-direction: column; }
.rem-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rem-row:last-child { border-bottom: 0; }
.rem-row span { flex: 1; display: flex; flex-direction: column; }
.rem-row small { color: var(--ink-3); font-size: 13px; }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 99px; position: relative;
  background: var(--line); cursor: pointer; transition: background .2s ease;
}
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s ease; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }

/* ---------- pop question ---------- */
.pop { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 8px; }
.pop .options, .pop #pop-result { width: 100%; text-align: left; }
.pop-course { margin: 6px 0 0; font-size: 13px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- sign in / create account ---------- */
body.signed-out .tabbar, body.signed-out .roam, body.signed-out .topbar-actions,
body.guest .tabbar, body.guest .roam { display: none !important; }
body.signed-out, body.guest { padding-bottom: 32px; }
.auth { max-width: 420px; margin: 0 auto; padding: 8px 0 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-hero {
  text-align: center; padding: 22px 18px 18px; border-radius: 26px; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pet-body) 55%, transparent) 0%, transparent 60%),
    linear-gradient(150deg, var(--logo), color-mix(in srgb, var(--logo) 70%, #000));
}
.auth-pet { display: flex; justify-content: center; }
.auth-hero h1 { color: #fff; margin: 6px 0 4px; font-size: 30px; }
.auth-hero p { margin: 0; opacity: .9; }
.auth-form .field { margin: 10px 0; }
.pw { position: relative; }
.pw .input { padding-right: 70px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--brand); font-weight: 800; padding: 8px; }
.finger-btn svg { width: 22px; height: 22px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 13px; margin: 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-note { text-align: center; margin: 0; }
.prog-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.guest-banner { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin: 6px 0 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--brand); }
.guest-banner p { margin: 0; font-weight: 700; }

/* ---------- the pet lives on the whole screen (overrides the old floor-only layout) ---------- */
.roam { top: 0; bottom: 0; left: 0; right: 0; height: auto; }
.roam-mover { top: 0; bottom: auto; left: 0; width: 64px; height: 64px; transition: none !important; will-change: transform; }
.roam-flip { transition: transform .3s ease; }
.roam-bubble { bottom: 70px; }
.roam.bubble-below .roam-bubble { bottom: auto; top: 70px; border-radius: 4px 16px 16px 16px; }
.roam.bubble-left .roam-bubble { left: auto; right: 0; }
.roam.bubble-left.bubble-below .roam-bubble { border-radius: 16px 4px 16px 16px; }
.roam.climbing .pet-bob { animation: roam-step .6s ease-in-out infinite; }
.roam.held .roam-pet { cursor: grabbing; }
.roam.held .pet-bob, .roam.falling .pet-bob { animation: roam-dangle .5s ease-in-out infinite; transform-origin: 60px 20px; }
.roam.landing .roam-pet { animation: roam-squash .4s ease; }
@keyframes roam-squash { 0% { transform: scale(1.15, .8); } 60% { transform: scale(.95, 1.05); } 100% { transform: none; } }

/* ---------- brand with programme underneath; hero clock ---------- */
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-text small {
  font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.hero-date { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hero-clock { font-size: 15px; font-weight: 800; opacity: 1; font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, #fff 16%, transparent); }

/* ---------- chat with your buddy ---------- */
body[data-page="chat"] .tabbar, body[data-page="chat"] .roam { display: none !important; }
body[data-page="chat"] { padding-bottom: 0; }
.chat { display: flex; flex-direction: column; min-height: calc(100dvh - 70px); }
.chat-head {
  position: sticky; top: 62px; z-index: 5; display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.chat-who { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.chat-who span { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.chat-scope { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.chat-scope select { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px; font-weight: 700; }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 0 110px; }
.chat-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 4px; }
.chat-empty p { margin: 4px 0; }
.chat-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.msg.me { justify-content: flex-end; }
.msg-avatar { flex: none; }
.msg-body { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.msg.me .msg-body { background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.msg.pet .msg-body { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg-body p { margin: 0 0 6px; }
.msg-body p:last-child { margin-bottom: 0; }
.msg-body ul { margin: 4px 0 6px; padding-left: 18px; }
.msg-body code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--surface-2); padding: 1px 5px; border-radius: 6px; }
.msg-tag { display: inline-block; font-size: 12px; font-weight: 800; color: var(--ink-3); margin-bottom: 4px; }
.msg-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-sources .chip { text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.typing { display: flex; gap: 4px; padding: 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: pet-blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
.chat-input {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; align-items: flex-end;
  max-width: 760px; margin: 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.chat-input textarea {
  flex: 1; resize: none; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface);
  padding: 11px 16px; font: inherit; font-size: 16px; max-height: 140px; outline: none;
}
.chat-input textarea:focus { border-color: var(--brand); }
.chat-send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); }
.chat-send svg { width: 22px; height: 22px; stroke-width: 2.6; }
.chat-cta { font-size: 16px; }

.get-app ol { margin: 10px 0 0; padding-left: 18px; }
.get-app li { margin: 3px 0; }