/* ───────────────── Grid Life ─────────────────
   Lights out and away we go.
   The all-in-one life planner for race fans. Neutral paddock base + six team-inspired accents × light / dark. */

:root {
  --font-body: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Barlow Condensed', 'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-script: 'Barlow Condensed', sans-serif;
  --font-hand: 'Barlow Condensed', sans-serif;
  --fs: 16px;
  --r: 14px; --r-sm: 10px; --r-xs: 8px;
  --bw: 1px;
  --shadow: 0 1px 2px rgb(21 21 30 / .06), 0 8px 24px -14px rgb(21 21 30 / .22);
  --shadow-sm: 0 1px 2px rgb(21 21 30 / .08);
  --shadow-lg: 0 24px 60px -20px rgb(21 21 30 / .4);
  --sidebar: 264px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --carbon: #15151E;
}

/* Neutral paddock base; each theme swaps the team colours. */
:root, [data-theme] {
  --bg: #F3F3F1; --surface: #FFFFFF; --surface-2: #ECECE9; --line: #DDDDD8; --edge: #15151E; --grid: transparent;
  --ink: #15151E; --muted: #5D606B;
  --good: #1E7A4A; --good-bg: #DDF1E5; --warn: #9A5B00; --warn-bg: #FBEBCB; --bad: #C0262E; --bad-bg: #FBDCDD;
  --pill-line: #15151E;
  --sw-peach: #FBD9C2; --sw-lavender: #DCD8F2; --sw-sage: #D2EADB; --sw-rose: #F8D3DE; --sw-sky: #D3E3F6; --sw-honey: #F6E6B4; --sw-oat: #E9E6DF;
  --m1: #DCD8F2; --m2: #D3E3F6; --m3: #F6E6B4; --m4: #D2EADB; --m5: #F8D3DE;
}
:root, [data-theme=ferrari] {
  --accent-strong: #D40026; --accent: #FCDDE3; --accent-ink: #8A0019; --on-accent: #FFFFFF; --team2: #FFEB00;
  --accent-2: color-mix(in srgb, #FFEB00 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #FCDDE3; --rb2: color-mix(in srgb, #FFEB00 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #E8002D; --chart-line-c: #D40026;
}
[data-theme=mclaren] {
  --accent-strong: #E36F00; --accent: #FFE7D1; --accent-ink: #8A4200; --on-accent: #FFFFFF; --team2: #1E1E1E;
  --accent-2: color-mix(in srgb, #1E1E1E 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #FFE7D1; --rb2: color-mix(in srgb, #1E1E1E 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #FF8000; --chart-line-c: #E36F00;
}
[data-theme=mercedes] {
  --accent-strong: #00A88F; --accent: #D2F7F0; --accent-ink: #005E50; --on-accent: #FFFFFF; --team2: #1E1E1E;
  --accent-2: color-mix(in srgb, #1E1E1E 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #D2F7F0; --rb2: color-mix(in srgb, #1E1E1E 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #27F4D2; --chart-line-c: #00A88F;
}
[data-theme=redbull] {
  --accent-strong: #1F3F8C; --accent: #DCE5F6; --accent-ink: #142A5E; --on-accent: #FFFFFF; --team2: #FFC906;
  --accent-2: color-mix(in srgb, #FFC906 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #DCE5F6; --rb2: color-mix(in srgb, #FFC906 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #3671C6; --chart-line-c: #1F3F8C;
}
[data-theme=aston] {
  --accent-strong: #1A7F5D; --accent: #D6EFE5; --accent-ink: #0E4D38; --on-accent: #FFFFFF; --team2: #CEDC00;
  --accent-2: color-mix(in srgb, #CEDC00 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #D6EFE5; --rb2: color-mix(in srgb, #CEDC00 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #229971; --chart-line-c: #1A7F5D;
}
[data-theme=alpine] {
  --accent-strong: #0079A8; --accent: #D3EDF8; --accent-ink: #004A67; --on-accent: #FFFFFF; --team2: #FF87BC;
  --accent-2: color-mix(in srgb, #FF87BC 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #D3EDF8; --rb2: color-mix(in srgb, #FF87BC 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #0093CC; --chart-line-c: #0079A8;
}
[data-theme=williams] {
  --accent-strong: #1258BF; --accent: #DCE7F9; --accent-ink: #0B3A80; --on-accent: #FFFFFF; --team2: #00A3E0;
  --accent-2: color-mix(in srgb, #00A3E0 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #DCE7F9; --rb2: color-mix(in srgb, #00A3E0 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #1868DB; --chart-line-c: #1258BF;
}
[data-theme=racingbulls] {
  --accent-strong: #3F6BE0; --accent: #E2EAFF; --accent-ink: #203F93; --on-accent: #FFFFFF; --team2: #E50914;
  --accent-2: color-mix(in srgb, #E50914 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #E2EAFF; --rb2: color-mix(in srgb, #E50914 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #6692FF; --chart-line-c: #3F6BE0;
}
[data-theme=haas] {
  --accent-strong: #C8102E; --accent: #EEEFF0; --accent-ink: #4A4E52; --on-accent: #FFFFFF; --team2: #E6002B;
  --accent-2: color-mix(in srgb, #E6002B 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #EEEFF0; --rb2: color-mix(in srgb, #E6002B 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #B6BABD; --chart-line-c: #C8102E;
}
[data-theme=audi] {
  --accent-strong: #BB0A30; --accent: #F5DCE1; --accent-ink: #6E061C; --on-accent: #FFFFFF; --team2: #9AA0A6;
  --accent-2: color-mix(in srgb, #9AA0A6 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #F5DCE1; --rb2: color-mix(in srgb, #9AA0A6 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #BB0A30; --chart-line-c: #BB0A30;
}
[data-theme=cadillac] {
  --accent-strong: #8C6E33; --accent: #F1EADC; --accent-ink: #4E3D1C; --on-accent: #FFFFFF; --team2: #B8975A;
  --accent-2: color-mix(in srgb, #B8975A 22%, #FFFFFF); --accent-2-ink: #15151E;
  --rb1: #F1EADC; --rb2: color-mix(in srgb, #B8975A 22%, #FFFFFF); --rb3: #FCEBC4; --rb4: #DCEFE3; --rb5: #E2E0F4; --rb6: #FCE0CC;
  --chart: #1E1E1E; --chart-line-c: #8C6E33;
}

/* Dark mode: carbon fibre night race. */
[data-mode=dark] {
  --bg: #0F0F14; --surface: #18181F; --surface-2: #22222B; --line: #2E2E38; --edge: #000000;
  --ink: #F2F2F5; --muted: #A6A8B4;
  --good: #7FD6A1; --good-bg: #173A27; --warn: #F2C26B; --warn-bg: #3A2E12; --bad: #FF8A8F; --bad-bg: #431A1D;
  --pill-line: #F2F2F5;
  --sw-peach: #4A3325; --sw-lavender: #34314F; --sw-sage: #22402F; --sw-rose: #4A2633; --sw-sky: #233752; --sw-honey: #4A3F1C; --sw-oat: #34312B;
  --m1: #34314F; --m2: #233752; --m3: #4A3F1C; --m4: #22402F; --m5: #4A2633;
  --rb1: color-mix(in srgb, var(--accent-strong) 30%, #18181F); --rb2: #2A2A35; --rb3: #3D3520; --rb4: #1F3A2B; --rb5: #2E2B47; --rb6: #45302A;
  --accent: color-mix(in srgb, var(--accent-strong) 28%, #18181F); --accent-ink: color-mix(in srgb, var(--accent-strong) 35%, #ffffff); --accent-2: #26262F; --accent-2-ink: #E4E4EA;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -14px rgb(0 0 0 / .7); --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .8);
}
[data-mode=dark][data-theme=ferrari] { --accent-strong: #FF3355; --chart: #FF3355; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=mclaren] { --accent-strong: #FF8F1F; --chart: #FF8F1F; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=mercedes] { --accent-strong: #27F4D2; --chart: #27F4D2; --on-accent: #15151E; }
[data-mode=dark][data-theme=redbull] { --accent-strong: #5B8FE0; --chart: #5B8FE0; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=aston] { --accent-strong: #35C793; --chart: #35C793; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=alpine] { --accent-strong: #33B4E6; --chart: #33B4E6; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=williams] { --accent-strong: #5A95EE; --chart: #5A95EE; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=racingbulls] { --accent-strong: #8AAEFF; --chart: #8AAEFF; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=haas] { --accent-strong: #E6334E; --chart: #E6334E; --on-accent: #15151E; }
[data-mode=dark][data-theme=audi] { --accent-strong: #E83A5C; --chart: #E83A5C; --on-accent: #FFFFFF; }
[data-mode=dark][data-theme=cadillac] { --accent-strong: #C9A96E; --chart: #C9A96E; --on-accent: #15151E; }

[data-size=sm] { --fs: 15px; } [data-size=lg] { --fs: 18px; } [data-size=xl] { --fs: 20px; }
[data-easy="1"] { --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-head: 'Atkinson Hyperlegible', system-ui, sans-serif; letter-spacing: .01em; }
[data-easy="1"] body { word-spacing: .08em; line-height: 1.65; }
[data-calm="1"] *, [data-calm="1"] *::before, [data-calm="1"] *::after { animation: none !important; transition: none !important; }
[data-calm="1"] .calm-hide { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100dvh; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }
h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; } p { margin: 0; }
a { color: var(--accent-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-strong) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.stack { display: grid; gap: 1rem; }
.stack-sm { display: grid; gap: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.script { font-family: var(--font-script); font-weight: 400; }
.icon { flex-shrink: 0; }

/* ── Boot ─────────────────────────────── */
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot-logo { font-family: var(--font-script); font-size: 3rem; color: var(--accent-strong); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; transform: scale(.97); } }

/* ── App shell ────────────────────────── */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 1.25rem .9rem 1.5rem; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, var(--bg)); display: flex; flex-direction: column; gap: .25rem; scrollbar-width: thin; }
.brand { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1rem; text-decoration: none; color: var(--ink); }
.brand-word { display: flex; flex-direction: column; line-height: .9; }
.brand-word .script { font-size: 1.85rem; color: var(--ink); }
.brand-word small { font-size: .62rem; letter-spacing: .32em; font-weight: 700; color: var(--muted); padding-left: .2rem; }
.nav-hub { border-radius: var(--r-sm); }
.nav-hub > button, .nav-link { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 0; background: none; border-radius: 12px; text-align: left; font-weight: 600; color: var(--ink); text-decoration: none; font-size: .95rem; }
.nav-hub > button:hover, .nav-link:hover { background: var(--surface-2); }
.nav-hub.on > button { background: var(--accent); color: var(--accent-ink); }
.nav-hub .chev { margin-left: auto; opacity: .55; transition: transform .2s var(--ease); }
.nav-hub.open .chev { transform: rotate(180deg); }
.nav-pages { display: grid; padding: .2rem 0 .4rem 2.2rem; }
.nav-pages a { padding: .32rem .7rem; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 600; }
.nav-pages a:hover { color: var(--ink); background: var(--surface-2); }
.nav-pages a.on { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 55%, transparent); }
.sidebar-foot { margin-top: auto; padding-top: 1rem; display: grid; gap: .2rem; }
.sync { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--muted); padding: .4rem .7rem; }
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.sync.syncing .dot { background: var(--warn); animation: breathe 1s infinite; }
.sync.offline .dot, .sync.error .dot { background: var(--muted); }
.sync-pill { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); background: var(--surface); color: var(--good); border-radius: 999px; padding: .28rem .6rem; font-size: .74rem; font-weight: 700; white-space: nowrap; min-width: 0; max-width: 38vw; }
.sync-pill span { overflow: hidden; text-overflow: ellipsis; }
.sync-pill svg { flex: none; }
.sync-pill.syncing { color: var(--warn); }
.sync-pill.syncing svg { animation: spin 1.1s linear infinite; }
.sync-pill.offline, .sync-pill.error, .sync-pill.idle { color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 360px) { .sync-pill span { display: none; } }
@media (prefers-reduced-motion: reduce) { .sync-pill.syncing svg { animation: none; } }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.content { width: 100%; max-width: 1180px; margin: 0 auto; padding: 2rem 2.25rem 6rem; }
.banner { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center; text-align: center; padding: .55rem 1rem; background: var(--accent-2); color: var(--accent-2-ink); font-size: .88rem; font-weight: 600; }
.banner .btn { padding: .3rem .8rem; }
.banner .banner-sub { font-weight: 500; opacity: .85; }
.sidebar-buy { padding: .3rem .7rem .2rem; }
.sidebar-buy .btn { width: 100%; justify-content: center; }
.card.demo-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border: 0; color: var(--accent-ink); }
.demo-card h2 { margin: .15rem 0 .35rem; font-size: 1.35rem; line-height: 1.25; }
.demo-card .eyebrow { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.demo-card .muted { color: inherit; opacity: .8; margin: 0; }
.demo-perks { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .35rem .9rem; font-size: .88rem; font-weight: 600; }
.demo-perks li { display: flex; gap: .45rem; align-items: center; }
.demo-card-cta { display: grid; gap: .35rem; justify-items: center; text-align: center; }
@media (max-width: 700px) { .card.demo-card { grid-template-columns: 1fr; } .demo-card-cta { justify-items: stretch; } .demo-card-cta .btn { justify-content: center; } }

.fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 30; width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accent-strong); color: var(--on-accent); box-shadow: var(--shadow-lg); transition: transform .2s var(--ease); }
.fab:hover { transform: translateY(-2px) rotate(90deg); }
.bottom-nav { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 60; background: var(--surface); transform: translateX(-105%); transition: transform .28s var(--ease); box-shadow: var(--shadow-lg); padding-top: max(1.25rem, env(safe-area-inset-top)); }
  .shell.drawer .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgb(30 20 20 / .35); }
  .topbar { display: flex; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 40; padding: max(.6rem, env(safe-area-inset-top)) 1rem .6rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
  .topbar .brand { padding: 0; }
  .topbar .brand-word .script { font-size: 1.5rem; }
  .content { padding: 1.25rem 1rem 7.5rem; }
  .fab { display: none; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: .35rem .5rem max(.45rem, env(safe-area-inset-bottom)); }
  .bottom-nav a, .bottom-nav button { display: grid; justify-items: center; gap: .1rem; padding: .3rem 0; border: 0; background: none; color: var(--muted); font-size: .68rem; font-weight: 700; text-decoration: none; }
  .bottom-nav .on { color: var(--accent-strong); }
  .bottom-nav .bn-add span.plus { width: 44px; height: 44px; border-radius: 16px; background: var(--accent-strong); color: var(--on-accent); display: grid; place-items: center; margin-top: -2px; box-shadow: var(--shadow); }
}

/* ── Page header ──────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head p { margin-top: .35rem; max-width: 60ch; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--accent-strong); margin-bottom: .35rem; }

/* ── Cards & grids ────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.15rem 1.2rem; box-shadow: var(--shadow); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.card-head h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; }
.card-head h3 .icon { color: var(--accent-strong); }
.card.tone-accent { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.card.tone-accent2 { background: var(--accent-2); border-color: transparent; color: var(--accent-2-ink); }
.card.flat { box-shadow: none; }
.grid { display: grid; gap: 1rem; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-auto-sm { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 1.75rem 0 .75rem; }
.section-title h2 { font-size: 1.15rem; }

/* ── Buttons ──────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 1px solid transparent; border-radius: 999px; padding: .55rem 1.05rem; font-weight: 700; font-size: .92rem; line-height: 1.1; white-space: nowrap; transition: background .15s, transform .15s var(--ease), box-shadow .15s; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent-strong); color: var(--on-accent); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent-strong) 80%, transparent); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-soft { background: var(--accent); color: var(--accent-ink); }
.btn-soft:hover { filter: brightness(.97); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-outline { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--surface-2); }
.btn-danger { background: var(--bad-bg); color: var(--bad); }
.btn-sm { padding: .38rem .75rem; font-size: .82rem; }
.btn-icon { padding: .5rem; }
.btn-sm.btn-icon { padding: .35rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link { background: none; border: 0; padding: 0; color: var(--accent-strong); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { background: none; border: 0; padding: .3rem; border-radius: 8px; color: var(--muted); display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

/* ── Chips, tabs ──────────────────────── */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.chip.tone-good { background: var(--good-bg); color: var(--good); }
.chip.tone-warn { background: var(--warn-bg); color: var(--warn); }
.chip.tone-bad { background: var(--bad-bg); color: var(--bad); }
.chip.tone-accent { background: var(--accent); color: var(--accent-ink); }
.chip.tone-accent2 { background: var(--accent-2); color: var(--accent-2-ink); }
.tabs { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--surface-2); border-radius: 999px; margin-bottom: 1rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs button { border: 0; background: none; padding: .42rem .9rem; border-radius: 999px; font-weight: 700; font-size: .86rem; color: var(--muted); white-space: nowrap; }
.tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ── Forms ────────────────────────────── */
.input { width: 100%; max-width: 100%; min-width: 0; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-strong) 20%, transparent); }
textarea.input { resize: vertical; min-height: 5rem; line-height: 1.5; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.input-bare { border-color: transparent; background: transparent; padding: .35rem .4rem; }
.input-bare:focus { background: var(--surface); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.field { display: grid; gap: .35rem; grid-column: span 2; align-content: start; }
.field.half { grid-column: span 1; }
.field > label { font-weight: 700; font-size: .86rem; }
.req { color: var(--accent-strong); }
.form-err { color: var(--bad); background: var(--bad-bg); padding: .5rem .75rem; border-radius: var(--r-xs); margin-top: .9rem; font-weight: 600; font-size: .9rem; }
.form-actions { display: flex; gap: .5rem; margin-top: 1.25rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 520px) { .field.half { grid-column: span 2; } }
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 42px; height: 24px; border-radius: 99px; background: var(--line); position: relative; transition: background .2s; flex-shrink: 0; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .2s var(--ease); }
.switch input:checked + span { background: var(--accent-strong); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent-strong) 55%, transparent); outline-offset: 2px; }
.switch em { font-style: normal; font-size: .92rem; }
.swatches { display: flex; gap: .45rem; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.swatch.on { box-shadow: 0 0 0 2px var(--accent-strong); }
.sw-peach { background: var(--sw-peach); } .sw-lavender { background: var(--sw-lavender); } .sw-sage { background: var(--sw-sage); } .sw-rose { background: var(--sw-rose); } .sw-sky { background: var(--sw-sky); } .sw-honey { background: var(--sw-honey); } .sw-oat { background: var(--sw-oat); }
.rating { display: flex; gap: .15rem; }
.rating button { border: 0; background: none; padding: .15rem; color: var(--line); }
.rating button.on { color: var(--accent-strong); }
.rating button.on svg { fill: currentColor; }
.day-pick { display: flex; gap: .3rem; }
.day-pick button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: .82rem; color: var(--muted); }
.day-pick button.on { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
.image-input { display: grid; gap: .5rem; }
.image-input img, .image-ph { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.image-ph { height: 120px; display: grid; place-items: center; color: var(--muted); border: 1.5px dashed var(--line); }
.checklist-edit { display: grid; gap: .15rem; border: 1px solid var(--line); border-radius: var(--r-xs); padding: .35rem .5rem; background: var(--surface); }
.cl-row { display: flex; align-items: center; gap: .4rem; }
.cl-row .input { flex: 1; }
.cl-tools { display: flex; opacity: .6; }
.cl-add { color: var(--muted); padding-left: .2rem; }
.amount-prompt { display: flex; gap: .4rem; align-items: center; margin-top: .6rem; }
.amount-prompt .input { max-width: 130px; padding: .45rem .7rem; }

/* ── Check ────────────────────────────── */
.check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent); background: var(--surface); display: grid; place-items: center; color: var(--on-accent); padding: 0; transition: background .15s, border-color .15s, transform .15s var(--ease); }
.check:hover { border-color: var(--accent-strong); }
.check.on { background: var(--accent-strong); border-color: var(--accent-strong); animation: pop .25s var(--ease); }
.check-sm { width: 19px; height: 19px; border-radius: 6px; }
.check-lg { width: 32px; height: 32px; border-radius: 50%; }
@keyframes pop { 50% { transform: scale(1.15); } }

/* ── Lists ────────────────────────────── */
.items { display: grid; gap: .5rem; }
.item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.item.done .item-title { text-decoration: line-through; color: var(--muted); }
.item-main { flex: 1 1 9rem; min-width: 0; border: 0; background: none; padding: 0; text-align: left; display: grid; gap: .25rem; }
.item-title { font-weight: 700; overflow-wrap: anywhere; }
.item-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.item-note { font-size: .86rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-thumb { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.item-actions { display: flex; flex-wrap: wrap; gap: .3rem; flex-shrink: 0; max-width: 100%; }
.item .progress { margin-top: .25rem; }
.item.bar-left { border-left: 5px solid var(--sw-peach); }
.group-title { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--muted); margin: 1.25rem 0 .5rem; }
.search { position: relative; margin-bottom: 1rem; max-width: 360px; }
.search .icon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { padding-left: 2.3rem; border-radius: 999px; }

.gallery { columns: 3 220px; column-gap: 1rem; }
.gallery-card { break-inside: avoid; margin-bottom: 1rem; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; display: block; width: 100%; padding: 0; text-align: left; }
.gallery-card img { width: 100%; }
.gallery-card .gc-body { padding: .8rem 1rem; display: grid; gap: .3rem; }
.gallery-card.text-only { padding: 1.4rem 1.2rem; font-family: var(--font-head); font-size: 1.15rem; line-height: 1.35; }

/* ── Stats & progress ─────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem; }
.stat-label { font-size: .76rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.stat-value { font-family: var(--font-head); font-size: 1.45rem; margin-top: .15rem; }
.stat-hint { font-size: .8rem; color: var(--muted); }
.stat.tone-accent { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.stat.tone-accent .stat-label, .stat.tone-accent .stat-hint { color: inherit; opacity: .8; }
.progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong); transition: width .5s var(--ease); }
.progress.tone-good span { background: var(--good); } .progress.tone-warn span { background: var(--warn); } .progress.tone-bad span { background: var(--bad); }
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { position: absolute; inset: 0; }
.ring circle { transition: stroke-dashoffset .6s var(--ease); }
.ring-label { position: relative; text-align: center; font-weight: 800; }

/* ── Tip / empty / modal / toast ──────── */
.tip { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--r-sm); background: var(--accent-2); color: var(--accent-2-ink); margin-bottom: 1.25rem; font-size: .92rem; }
.tip-icon { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 70%, transparent); display: grid; place-items: center; flex-shrink: 0; }
.tip-body { flex: 1; display: grid; gap: .15rem; }
.tip .btn-ghost { color: inherit; }
.empty { text-align: center; padding: 2.5rem 1rem; display: grid; gap: .5rem; justify-items: center; border: 1.5px dashed var(--line); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 50%, transparent); }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); margin-bottom: .25rem; }
.empty p { max-width: 42ch; }
.empty .btn { margin-top: .5rem; }
.modal-wrap { position: fixed; inset: 0; z-index: 80; background: rgb(35 22 20 / .38); display: grid; place-items: center; padding: 1rem; animation: fade .18s ease; backdrop-filter: blur(2px); }
.modal { width: min(560px, 100%); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--surface); border-radius: calc(var(--r) + 4px); box-shadow: var(--shadow-lg); animation: rise .25s var(--ease); }
.modal-wide { width: min(820px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.25rem .4rem; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal-body { padding: .5rem 1.25rem 1.35rem; }
@media (max-width: 600px) { .modal-wrap { place-items: end stretch; padding: 0; } .modal { width: 100%; border-radius: 24px 24px 0 0; max-height: 92dvh; padding-bottom: env(safe-area-inset-bottom); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.toasts { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 90; display: grid; gap: .5rem; width: max-content; max-width: calc(100vw - 2rem); }
.toast { display: flex; align-items: center; gap: .6rem; background: var(--ink); color: var(--bg); padding: .7rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; box-shadow: var(--shadow-lg); animation: rise .25s var(--ease); }
.toast .link { color: var(--bg); }
@media (max-width: 900px) { .toasts { bottom: 6.5rem; } }

/* ── Date nav ─────────────────────────── */
.date-nav { display: flex; align-items: center; gap: .25rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.date-nav-label { font-family: var(--font-head); font-size: 1.15rem; min-width: 11ch; text-align: center; padding: 0 .25rem; }

/* ── Home ─────────────────────────────── */
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hello h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); }
.hello h1 .script { color: var(--accent-strong); font-size: 1.25em; margin-left: .15em; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.big-number { font-family: var(--font-head); font-size: 2.3rem; line-height: 1; }
.mood-row { display: flex; justify-content: space-between; gap: .3rem; }
.mood-btn { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: .55rem 0 .4rem; font-size: 1.45rem; display: grid; justify-items: center; gap: .1rem; transition: transform .15s var(--ease), background .15s; }
.mood-btn small { font-size: .62rem; font-weight: 700; color: var(--muted); }
.mood-btn:hover { transform: translateY(-2px); }
.mood-btn.on { background: var(--accent); border-color: transparent; }
.nudge { display: flex; gap: .65rem; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; text-decoration: none; color: inherit; }
.nudge:last-child { border-bottom: 0; }
.nudge-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--accent-strong); flex-shrink: 0; }
.install-card { display: flex; gap: 1rem; align-items: center; }
.install-card ol { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .9rem; }

/* ── Planner ──────────────────────────── */
.day-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.month-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .day-layout, .month-layout { grid-template-columns: 1fr; } }
.timeline { position: relative; margin-left: 3.4rem; border-left: 1px solid var(--line); }
.tl-hour { position: absolute; left: -3.4rem; width: 3rem; text-align: right; font-size: .72rem; color: var(--muted); transform: translateY(-.55em); font-weight: 700; }
.tl-line { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); }
.tl-block { position: absolute; left: .4rem; right: .4rem; border-radius: 12px; padding: .35rem .6rem; font-size: .85rem; overflow: hidden; border: 0; text-align: left; color: var(--ink); background: var(--sw-peach); display: flex; flex-direction: column; box-shadow: 0 1px 0 rgb(0 0 0 / .04); }
.tl-block strong { font-weight: 700; } .tl-block span { font-size: .74rem; opacity: .75; }
.tl-now { position: absolute; left: -5px; right: 0; height: 2px; background: var(--bad); z-index: 2; }
.tl-now::before { content: ''; position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.add-row { display: flex; gap: .5rem; margin-bottom: .75rem; }
.add-row .input { flex: 1; }
.task { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; padding: .55rem .25rem; border-bottom: 1px solid var(--line); }
.task:last-child { border-bottom: 0; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-title { flex: 1 1 8rem; min-width: 0; border: 0; background: none; text-align: left; padding: 0; font-weight: 600; overflow-wrap: anywhere; }
.task .star { color: var(--line); }
.task .star.on { color: var(--accent-strong); }
.task .star.on svg { fill: currentColor; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.week-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .65rem; min-height: 220px; display: flex; flex-direction: column; gap: .3rem; }
.week-col.today { border-color: var(--accent-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong) 25%, transparent); }
.week-col h4 { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); display: flex; justify-content: space-between; }
.week-col h4 b { font-family: var(--font-head); font-size: 1.25rem; color: var(--ink); letter-spacing: 0; text-transform: none; }
.mini-item { font-size: .82rem; padding: .25rem .45rem; border-radius: 8px; background: var(--surface-2); display: flex; gap: .35rem; align-items: center; border: 0; text-align: left; width: 100%; overflow-wrap: anywhere; }
.mini-item.ev { background: var(--accent-2); color: var(--accent-2-ink); }
.mini-row { display: flex; gap: .35rem; align-items: center; }
.mini-row .mini-item { flex: 1; min-width: 0; }
.cal-btn { flex: none; color: var(--muted); }
.cal-add { margin-top: .6rem; display: flex; justify-content: center; }
.mini-item.done { text-decoration: line-through; opacity: .6; }
.week-add { margin-top: auto; }
.week-add input { font-size: .82rem; padding: .35rem .5rem; }
@media (max-width: 1100px) { .week-grid { grid-template-columns: 1fr; } .week-col { min-height: 0; } }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); gap: 1px; }
.month-dow { background: var(--surface-2); text-align: center; font-size: .72rem; font-weight: 800; color: var(--muted); padding: .45rem 0; text-transform: uppercase; letter-spacing: .1em; }
.month-day { background: var(--surface); min-height: 104px; padding: .35rem .4rem; display: flex; flex-direction: column; gap: .2rem; border: 0; text-align: left; overflow: hidden; }
.month-day.out { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); color: var(--muted); }
.month-day.sel { box-shadow: inset 0 0 0 2px var(--accent-strong); }
.month-day .num { font-weight: 800; font-size: .82rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.month-day.today .num { background: var(--accent-strong); color: var(--on-accent); }
.month-day .lbl { font-size: .7rem; padding: .05rem .35rem; border-radius: 6px; background: var(--accent-2); color: var(--accent-2-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.month-day .lbl.k-bill { background: var(--warn-bg); color: var(--warn); }
.month-day .lbl.k-bday { background: var(--accent); color: var(--accent-ink); }
.month-day .lbl.k-task { background: var(--surface-2); color: var(--muted); }
@media (max-width: 720px) { .month-day { min-height: 58px; } .month-day .lbl { font-size: 0; height: 6px; width: 6px; padding: 0; border-radius: 50%; } .month-day .lbls { display: flex; gap: 2px; flex-wrap: wrap; } }
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.mini-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: .7rem; text-align: center; }
.mini-month span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; }
.mini-month .has { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.mini-month .td { background: var(--accent-strong); color: var(--on-accent); font-weight: 800; }
.mini-month .out { visibility: hidden; }

/* focus timer */
.focus-wrap { display: grid; justify-items: center; gap: 1.25rem; padding: 1rem 0; }
.focus-time { font-family: var(--font-head); font-size: clamp(2.8rem, 2rem + 4vw, 4.2rem); font-variant-numeric: tabular-nums; }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; width: 100%; }
.sound-btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: .7rem .5rem; display: grid; justify-items: center; gap: .3rem; font-weight: 700; font-size: .82rem; }
.sound-btn.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.preset-row { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
input[type=range] { accent-color: var(--accent-strong); width: 100%; }
.countdown-card { text-align: center; display: grid; gap: .2rem; padding: 1.4rem 1rem; cursor: pointer; }
.countdown-card .big-number { font-size: 3rem; }

/* money */
.battery { display: flex; align-items: center; gap: .15rem; }
.battery-body { flex: 1; height: 26px; border: 2px solid var(--ink); border-radius: 7px; padding: 2px; opacity: .85; }
.battery-fill { height: 100%; border-radius: 4px; background: var(--good); transition: width .5s var(--ease); }
.battery-fill.mid { background: var(--warn); } .battery-fill.low { background: var(--bad); }
.battery-cap { width: 4px; height: 10px; background: var(--ink); border-radius: 0 2px 2px 0; opacity: .85; }
.jar { width: 92px; height: 118px; }
.jar-card { display: grid; justify-items: center; text-align: center; gap: .4rem; }
.spark { width: 100%; height: 80px; }
.money-big { font-family: var(--font-head); font-size: 2.2rem; line-height: 1.1; }

/* habits & wellness */
.habit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.habit-days { display: flex; gap: .3rem; }
.habit-day { display: grid; justify-items: center; gap: .15rem; font-size: .66rem; font-weight: 800; color: var(--muted); }
.habit-day .check { border-radius: 50%; }
.habit-day.off .check { opacity: .35; }
.habit-day.td span { color: var(--accent-strong); }
@media (max-width: 620px) { .habit-row { grid-template-columns: 1fr; } }
.meal-table { display: grid; grid-template-columns: 7.5rem repeat(4, minmax(0, 1fr)); gap: .4rem; align-items: stretch; }
.meal-table .mh { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); padding: .2rem .25rem; }
.meal-table .md { font-weight: 700; font-size: .88rem; padding: .5rem .25rem; }
.meal-table .md.td { color: var(--accent-strong); }
.meal-table .input { padding: .45rem .6rem; font-size: .88rem; }
@media (max-width: 760px) { .meal-table { grid-template-columns: 1fr 1fr; } .meal-table .mh { display: none; } .meal-table .md { grid-column: span 2; padding-top: .9rem; border-top: 1px solid var(--line); } }
.mood-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.mood-cell { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; background: var(--surface-2); border: 0; padding: 0; }
.mood-cell.m1 { background: #D9D3E6; } .mood-cell.m2 { background: #D5DFEA; } .mood-cell.m3 { background: #EFE5CF; } .mood-cell.m4 { background: #F6D9C5; } .mood-cell.m5 { background: #F4C3B0; }
[data-mode=dark] .mood-cell.m1 { background: #3E3950; } [data-mode=dark] .mood-cell.m2 { background: #33404E; } [data-mode=dark] .mood-cell.m3 { background: #4A4231; } [data-mode=dark] .mood-cell.m4 { background: #5A4134; } [data-mode=dark] .mood-cell.m5 { background: #6A3F31; }
.mood-cell.td { box-shadow: 0 0 0 2px var(--accent-strong); }
.tag-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag-pick button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .3rem .75rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.tag-pick button.on { background: var(--accent-2); color: var(--accent-2-ink); border-color: transparent; }
.level { display: flex; gap: .3rem; }
.level button { flex: 1; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 800; color: var(--muted); }
.level button.on { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
.jar-big { width: 150px; height: 190px; margin: 0 auto; }
.note-paper { background: var(--sw-honey); color: var(--ink); padding: 1.5rem; border-radius: 6px 18px 6px 18px; font-family: var(--font-head); font-size: 1.25rem; line-height: 1.4; box-shadow: var(--shadow); transform: rotate(-1deg); }
[data-mode=dark] .note-paper { color: var(--ink); }
.course-col h3 { display: flex; align-items: center; gap: .4rem; }
.quarter-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; display: grid; gap: .5rem; align-content: start; }
.quarter-col h3 { display: flex; justify-content: space-between; align-items: baseline; }

/* settings */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.set-row:last-child { border-bottom: 0; }
.set-row > * { min-width: 0; max-width: 100%; }
.set-row > div:first-child { display: grid; gap: .1rem; max-width: 46ch; }
.set-row strong { font-size: .95rem; }
.set-row small { color: var(--muted); font-size: .84rem; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.theme-opt { border: 2px solid var(--line); border-radius: var(--r-sm); padding: .6rem; background: var(--surface); display: grid; gap: .4rem; text-align: left; font-weight: 700; font-size: .84rem; }
.theme-opt.on { border-color: var(--accent-strong); }
.theme-dots { display: flex; gap: .25rem; }
.theme-dots i { width: 22px; height: 22px; border-radius: 50%; display: block; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: .2rem; gap: .15rem; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: .38rem .8rem; border-radius: 999px; font-weight: 700; font-size: .84rem; color: var(--muted); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.order-list { display: grid; gap: .35rem; }
.order-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 600; }
.order-item.off { opacity: .55; }
.order-item .grow { min-width: 0; }

/* ── Auth ─────────────────────────────── */
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-art { position: relative; overflow: hidden; background: var(--accent); color: var(--accent-ink); padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-art .blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.auth-art h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); max-width: 14ch; position: relative; }
.auth-art p { position: relative; max-width: 36ch; margin-top: 1rem; }
.auth-art .brand { position: relative; padding: 0; color: var(--accent-ink); }
.auth-art .brand-word .script { color: var(--accent-ink); font-size: 2.3rem; }
.auth-art .brand-word small { color: var(--accent-ink); opacity: .7; }
.auth-feats { position: relative; display: grid; gap: .5rem; font-weight: 700; font-size: .95rem; }
.auth-feats div { display: flex; gap: .5rem; align-items: center; }
.auth-panel { display: grid; place-items: center; padding: 2rem 1.25rem; }
.auth-box { width: min(400px, 100%); display: grid; gap: 1rem; }
.auth-box h1 { font-size: 2rem; }
.auth-box form { display: grid; gap: .85rem; }
.auth-box label { display: grid; gap: .35rem; font-weight: 700; font-size: .88rem; }
.auth-box .btn-primary { padding: .8rem 1rem; font-size: 1rem; }
.auth-alt { text-align: center; font-size: .92rem; color: var(--muted); }
.auth-ok { background: var(--good-bg); color: var(--good); padding: .75rem 1rem; border-radius: var(--r-xs); font-weight: 600; font-size: .92rem; }
.pw-wrap { position: relative; }
.pw-wrap .icon-btn { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); }
.order-help { font-size: .86rem; background: var(--surface-2); border-radius: var(--r-sm); padding: .85rem 1rem; color: var(--muted); }
.order-help b { color: var(--ink); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-art { padding: 2rem 1.5rem 2.25rem; min-height: 0; } .auth-art h2 { font-size: 1.8rem; } .auth-feats { display: none; } .auth-art p { display: none; } }

@media print { .sidebar, .topbar, .bottom-nav, .fab, .page-actions, .banner { display: none !important; } .shell { display: block; } .card { box-shadow: none; } }

/* ═════════════ v1.1 · Soft Era refresh ═════════════
   Softer surfaces, a moonlit hero, energy check-in and weekly dashboards. */
:root { --r: 22px; --hero-glow: var(--sw-honey); --hero-hill-1: color-mix(in srgb, var(--accent-2) 70%, var(--surface)); --hero-hill-2: color-mix(in srgb, var(--accent) 60%, var(--surface)); }
[data-mode=dark] { --hero-glow: #6b5a3a; --hero-hill-1: color-mix(in srgb, var(--accent-2) 80%, var(--bg)); --hero-hill-2: color-mix(in srgb, var(--accent) 80%, var(--bg)); }

body { background:
  radial-gradient(900px 520px at 8% -8%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
  radial-gradient(760px 480px at 100% 0%, color-mix(in srgb, var(--accent-2) 42%, transparent), transparent 70%),
  var(--bg); background-attachment: fixed; }
.sidebar { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card { border-color: color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--surface) 92%, transparent); }
a.card, .dash, .strip-tile { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.card:hover, .dash:hover, .strip-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(75 58 54 / .05), 0 18px 36px -18px rgb(75 58 54 / .28); }
.eyebrow::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: .5em; vertical-align: .12em; opacity: .7; }
.nav-hub.on > button { box-shadow: inset 3px 0 0 var(--accent-strong); }
.brand-tag { font-family: var(--font-head); font-style: italic; font-size: .82rem; color: var(--muted); padding: 0 .55rem .9rem; margin-top: -.6rem; }

/* priority chips */
.pri { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .14rem .5rem; border-radius: 6px; white-space: nowrap; }
.pri-high { background: var(--sw-rose); color: #7E3047; } .pri-med { background: var(--sw-honey); color: #6C4C14; } .pri-low { background: var(--sw-sage); color: #34523A; }
[data-mode=dark] .pri-high { color: #F6D2D9; } [data-mode=dark] .pri-med { color: #F5DFAE; } [data-mode=dark] .pri-low { color: #CFE3C8; }

/* hero */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1rem; align-items: end;
  padding: 1.75rem 1.9rem 1.6rem; border-radius: 28px; margin-bottom: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, var(--surface)) 0%, color-mix(in srgb, var(--accent-2) 80%, var(--surface)) 100%);
  color: var(--ink); box-shadow: var(--shadow); }
.hero h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); margin: .1rem 0 .4rem; }
.hero h1 .script { color: var(--accent-strong); font-size: 1.22em; margin-left: .12em; }
.hero .eyebrow { color: var(--accent-ink); }
.hero-sum { max-width: 54ch; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.hero-side { position: relative; align-self: stretch; min-height: 160px; }
.hero-art { position: absolute; right: -1.9rem; bottom: -1.6rem; width: 280px; height: auto; }
.hero-ring { position: absolute; left: 0; top: 0; background: color-mix(in srgb, var(--surface) 75%, transparent); border-radius: 50%; padding: 6px; backdrop-filter: blur(6px); }
.hero-ring .ring-label span { font-size: .95rem; }
.energy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.1rem; }
.energy-q { font-weight: 800; font-size: .82rem; margin-right: .25rem; color: var(--accent-ink); }
.energy-btn { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid color-mix(in srgb, var(--surface) 60%, transparent); background: color-mix(in srgb, var(--surface) 62%, transparent);
  border-radius: 16px; padding: .45rem .85rem .45rem .65rem; text-align: left; color: var(--ink); transition: background .15s, transform .15s var(--ease); }
.energy-btn span { display: grid; line-height: 1.15; } .energy-btn b { font-size: .88rem; } .energy-btn small { font-size: .7rem; color: var(--muted); }
.energy-btn .icon { color: var(--accent-strong); }
.energy-btn:hover { transform: translateY(-1px); }
.energy-btn.on { background: var(--surface); border-color: var(--accent-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong) 25%, transparent); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding: 1.35rem 1.2rem 1.25rem; } .hero-side { position: absolute; inset: 0; pointer-events: none; min-height: 0; }
  .hero-art { width: 112px; opacity: .8; right: -.5rem; bottom: -.45rem; } .hero-ring { display: none; } .energy-btn small { display: none; }
  .energy { padding-right: 96px; } }

/* today strip */
.today-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.strip-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; grid-template-areas: "icon label" "value value" "hint hint"; align-items: center; column-gap: .55rem;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-radius: 18px; padding: .8rem 1rem; text-decoration: none; color: var(--ink); }
.strip-icon { grid-area: icon; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.strip-tile:nth-child(2) .strip-icon { background: var(--sw-sage); color: var(--ink); } .strip-tile:nth-child(3) .strip-icon { background: var(--sw-honey); color: var(--ink); } .strip-tile:nth-child(4) .strip-icon { background: var(--accent-2); color: var(--accent-2-ink); }
.strip-label { grid-area: label; min-width: 0; font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; hyphens: auto; overflow-wrap: anywhere; }
.strip-value { grid-area: value; font-family: var(--font-head); font-size: 1.7rem; margin-top: .3rem; line-height: 1.1; }
.strip-hint { grid-area: hint; font-size: .78rem; color: var(--muted); min-height: 1em; }
@media (max-width: 760px) { .today-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* grid */
.home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-cell { min-width: 0; display: grid; } .home-cell > * { min-width: 0; } .home-cell:empty { display: none; }
.home-cell.wide { grid-column: span 2; }
.home-grid { grid-auto-flow: row dense; align-items: stretch; }
.home-cell.tall { grid-row: span 2; }
@media (max-width: 1180px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .home-grid { grid-template-columns: 1fr; } .home-cell.wide { grid-column: auto; } .home-cell.tall { grid-row: auto; } }

/* one small thing */
.one-thing { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--surface) 55%, color-mix(in srgb, var(--accent-2) 55%, var(--surface))); }
.one-thing::after { content: '“'; position: absolute; right: 1.1rem; top: -.6rem; font-family: var(--font-head); font-size: 7rem; line-height: 1; color: var(--accent-2); opacity: .9; pointer-events: none; }
.one-thing h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-top: .35rem; max-width: 30ch; position: relative; z-index: 1; }

/* dashboards */
.dash { display: flex; flex-direction: column; gap: .7rem; }
.dash-head { display: flex; gap: .65rem; align-items: flex-start; }
.dash-head h3 { font-size: 1rem; } .dash-head p { margin-top: .1rem; }
.dash-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); flex-shrink: 0; }
.dash-value { display: flex; align-items: baseline; gap: .4rem; }
.dash-value .big-number { font-size: 2.1rem; }
.dash-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.dash-ring { display: grid; justify-items: center; gap: .2rem; }
.wk-bars { width: 100%; height: auto; overflow: visible; }
.wk-bar { fill: color-mix(in srgb, var(--accent-strong) 55%, var(--surface)); transition: fill .15s; }
.wk-bar.td { fill: var(--accent-strong); }
.wk-hit { fill: transparent; } .wk-hit:hover + .wk-bar { filter: brightness(.92); }
.wk-lbl { font-size: 10px; font-weight: 800; fill: var(--muted); font-family: var(--font-body); } .wk-lbl.td { fill: var(--accent-strong); }
.habit-mini { display: grid; gap: .3rem; font-size: .84rem; } .habit-mini div { display: flex; justify-content: space-between; gap: .5rem; }
.habit-mini span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mood-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.mood-week > div { display: grid; gap: .2rem; justify-items: center; } .mood-week .mood-cell { width: 100%; max-width: 38px; font-size: 1rem; }
.mood-week small { font-size: .66rem; font-weight: 800; color: var(--muted); }

/* spotify */
.sp-card { display: flex; flex-direction: column; }
.sp-frame { border-radius: 14px; overflow: hidden; background: var(--surface-2); transition: height .25s var(--ease); }
.sp-frame iframe { display: block; border: 0; }
.sp-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .6rem; }
.sp-chips button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .28rem .75rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.sp-chips button.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.sp-add { display: grid; gap: .55rem; }
.sp-add details summary { cursor: pointer; font-weight: 700; }

/* cycle */
.cycle-hero { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.cycle-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cy-day { position: relative; aspect-ratio: 1.3; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 700; font-size: .85rem; color: var(--ink); }
.cy-day.out { opacity: .35; } .cy-day.sel { box-shadow: 0 0 0 2px var(--accent-strong); } .cy-day.td { border-color: var(--accent-strong); }
.cy-period, .cy-key.cy-period { background: var(--sw-rose) !important; } .cy-pred, .cy-key.cy-pred { background: repeating-linear-gradient(45deg, var(--sw-rose) 0 4px, var(--surface) 4px 8px) !important; }
.cy-fert, .cy-key.cy-fert { background: var(--sw-lavender) !important; }
.cy-dot { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent-strong); }
.cy-key { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin: 0 .2rem 0 .6rem; vertical-align: -1px; border: 1px solid var(--line); }

/* Money · income sources */
.income-list { display: grid; gap: .35rem; margin-top: .75rem; }
.income-row { display: flex; align-items: center; gap: .5rem; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-xs); padding: .45rem .6rem; text-align: left; color: inherit; }
.income-row:hover { border-color: var(--accent-strong); }
.income-row .income-name { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.income-row strong { font-size: .9rem; }
.month-day .lbl.k-income { background: var(--good-bg, #E3EEDD); color: var(--good, #4F6E4F); }
.income-row .income-main { color: var(--accent-strong); font-size: .85rem; }

/* Limited-time sale tag (demo only) */
.sale-tag { display: inline-flex; align-items: center; gap: .3rem; background: #B4553A; color: #fff; border-radius: 999px; padding: .2rem .65rem; font-size: .74rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; max-width: 100%; text-align: center; box-shadow: 0 4px 10px -4px rgba(122,63,42,.5); }
.sale-tag::before { content: '✦'; }
.sale-tag.big { font-size: .82rem; padding: .3rem .8rem; margin: .1rem 0 .35rem; transform: rotate(-2deg); }
.banner .sale-tag { animation: sale-pulse 2.4s ease-in-out infinite; }
@keyframes sale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .banner .sale-tag { animation: none; } }

/* ── Music player that keeps playing on every page ── */
.sp-launch { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 16px; background: var(--surface-2); }
.sp-launch.on { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.sp-launch strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-launch small { display: block; line-height: 1.35; }
.sp-disc { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.sp-launch.on .sp-disc { animation: sp-spin 6s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.player-dock { position: fixed; z-index: 35; right: calc(1.5rem + 68px); bottom: 1.5rem; width: min(360px, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: .4rem .45rem .45rem; }
.pd-bar { display: flex; align-items: center; gap: .15rem; }
.pd-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; border: 0; background: none; padding: .3rem .45rem; font: inherit; font-weight: 800; font-size: .85rem; color: var(--ink); text-align: left; }
.pd-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-name svg { color: var(--accent-strong); flex: none; }
.pd-frame { height: 152px; border-radius: 14px; overflow: hidden; margin-top: .3rem; transition: height .25s var(--ease); }
.player-dock.big .pd-frame { height: 352px; }
.player-dock.min { width: auto; max-width: min(300px, calc(100vw - 2rem)); padding: .3rem .4rem; border-radius: 999px; }
.player-dock.min .pd-frame { height: 0; margin: 0; }
.pd-frame iframe { display: block; border: 0; }
.shell.has-player .content { padding-bottom: 13rem; }
@media (max-width: 900px) {
  .player-dock { left: .75rem; right: .75rem; width: auto; bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
  .player-dock.min { left: auto; }
  .player-dock.big .pd-frame { height: 290px; }
  .shell.has-player .content { padding-bottom: 17rem; }
  .shell.has-player-min .content { padding-bottom: 10rem; }
}
@media (prefers-reduced-motion: reduce) { .sp-launch.on .sp-disc { animation: none; } }
@media print { .player-dock { display: none !important; } }

/* ── DigiPixels credit, devices ── */
.made-by { font-size: .78rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.made-by b { color: var(--accent-strong); font-weight: 800; }
.made-by:hover b { text-decoration: underline; }
.made-by.side { display: block; padding: .55rem .7rem 0; }
.auth-art .made-by { color: inherit; opacity: .8; position: relative; }
.auth-art .made-by b { color: inherit; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.device-list li { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: 14px; background: var(--surface-2); }
.device-list small { display: block; }
.device-me { font-size: .7rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }


/* ── Grid Life identity (base): outlined pastel tiles ── */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.005em; }
.script { font-family: 'Fredoka', Georgia, serif; font-style: italic; font-weight: 500; }
.wordmark { font-family: 'Fredoka', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.75rem; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.topbar .wordmark { font-size: 1.45rem; }
.auth-art .wordmark { font-size: 2.1rem; color: var(--accent-ink); }
.boot-logo { font-family: 'Fredoka', Georgia, serif; font-style: italic; font-weight: 600; font-size: 2.6rem; color: var(--accent-strong); }
.brand-tag { font-family: 'Fredoka', Georgia, serif; font-style: italic; }
.nav-hub > button > svg:first-child { box-sizing: content-box; padding: 5px; border-radius: 9px; background: var(--hub, var(--accent)); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pill-line); }
[data-mode=dark] .nav-hub > button > svg:first-child { background: color-mix(in srgb, var(--hub, var(--accent)) 35%, var(--surface)); box-shadow: none; }
.card-head h3 .icon { color: var(--accent-strong); }
.hero { background: linear-gradient(135deg, color-mix(in srgb, var(--rb1) 75%, var(--surface)) 0%, color-mix(in srgb, var(--rb2) 70%, var(--surface)) 60%, color-mix(in srgb, var(--rb3) 60%, var(--surface)) 100%); border: 1.5px solid color-mix(in srgb, var(--pill-line) 18%, transparent); }
[data-mode=dark] .hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, var(--surface)) 0%, var(--surface) 100%); }
.hello h1 .script, .hero h1 .script { color: var(--accent-strong); font-size: 1.08em; }
.eyebrow { color: var(--accent-strong); }
.btn-primary { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent-strong) 65%, transparent); }
.sale-tag { background: var(--rb1); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pill-line); }
[data-mode=dark] .sale-tag { color: #3B2A2E; }
.mood-cell.m1 { background: var(--rb3); } .mood-cell.m2 { background: var(--sw-sky); } .mood-cell.m3 { background: var(--rb5); } .mood-cell.m4 { background: var(--rb2); } .mood-cell.m5 { background: var(--rb1); }
[data-mode=dark] .mood-cell { filter: saturate(.8) brightness(.55); }
:root { --hero-glow: var(--rb5); --hero-hill-1: color-mix(in srgb, var(--rb1) 80%, var(--surface)); --hero-hill-2: color-mix(in srgb, var(--rb2) 80%, var(--surface)); }
[data-mode=dark] { --hero-glow: color-mix(in srgb, var(--accent-strong) 30%, var(--bg)); --hero-hill-1: color-mix(in srgb, var(--accent) 80%, var(--bg)); --hero-hill-2: color-mix(in srgb, var(--accent-2) 80%, var(--bg)); }

/* ── Charts: one soft colour per theme, outlined like the tiles ── */
:root { --chart-ring: var(--chart); --chart-track: color-mix(in srgb, var(--chart) 25%, var(--surface)); --chart-line: var(--chart-line-c); }
.wk-bar, .wk-bar.c0, .wk-bar.c1, .wk-bar.c2, .wk-bar.c3, .wk-bar.c4, .wk-bar.c5 { fill: var(--chart); stroke: color-mix(in srgb, var(--pill-line) 55%, transparent); stroke-width: 1; }
.wk-bar.td { stroke: var(--pill-line); stroke-width: 2; }
.progress span { background: var(--chart); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-line) 40%, transparent); }
.spark polyline { stroke-width: 3.5; }

/* ── Glow, Style & Soft life ── */
.glow-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .glow-cols { grid-template-columns: 1fr; } }
.glow-step { display: flex; align-items: center; gap: .65rem; padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.glow-step:last-child { border-bottom: 0; }
.glow-step .grow { min-width: 0; }
.glow-step small { display: block; color: var(--muted); }
.glow-add { display: flex; gap: .5rem; margin-top: .7rem; }
.glow-add .input { flex: 1; min-width: 0; }
.ritual { border-radius: var(--r); padding: 1.1rem 1.2rem; background: color-mix(in srgb, var(--rb1) 55%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--pill-line) 22%, transparent); }
.ritual q { display: block; font-family: 'Fredoka', Georgia, serif; font-style: italic; font-size: 1.3rem; line-height: 1.35; quotes: none; margin: .2rem 0 .8rem; }
.phase-pill { display: inline-block; padding: .2rem .7rem; border-radius: 99px; background: var(--rb1); color: var(--ink); font-weight: 800; font-size: .8rem; box-shadow: inset 0 0 0 1.5px var(--pill-line); }
[data-mode=dark] .phase-pill { color: #3B2A2E; }
.sync-tips { display: grid; gap: .45rem; margin-top: .7rem; }
.sync-tips div { display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; font-size: .92rem; line-height: 1.35; }
.dump-card textarea { min-height: 3.2rem; }
.dump-mini { display: grid; gap: .35rem; margin-top: .65rem; }
.dump-mini .row { display: flex; align-items: center; gap: .3rem; padding: .35rem .5rem; border-radius: 12px; background: var(--surface-2); }
.dump-mini .row span { flex: 1; min-width: 0; font-weight: 600; font-size: .9rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ── Priority matrix, ideal week and deep work stats ── */
h1, h2, h3 { letter-spacing: 0; }
.wordmark { font-weight: 600; font-style: normal; letter-spacing: .01em; }
.wordmark i { font-style: italic; font-weight: 500; color: var(--accent-strong); }
.boot-logo { font-style: normal; }
.field > span { font-weight: 700; font-size: .86rem; }
.form > .field { margin-bottom: .8rem; }
.matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .matrix { grid-template-columns: 1fr; } }
.quad { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.quad-head { display: flex; align-items: center; gap: .65rem; }
.quad-head div { flex: 1; min-width: 0; } .quad-head h3 { font-size: 1.15rem; } .quad-head small { color: var(--muted); }
.quad-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--pill-line); color: var(--ink); }
.quad-do .quad-icon { background: var(--rb1); } .quad-plan .quad-icon { background: var(--rb4); } .quad-delegate .quad-icon { background: var(--rb5); } .quad-drop .quad-icon { background: var(--rb3); }
[data-mode=dark] .quad-icon { background: var(--surface-2) !important; box-shadow: none; }
.quad-list { display: grid; gap: .25rem; flex: 1; }
.quad-row { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.quad-row .task-title { flex: 1; min-width: 0; text-align: left; }
.quad-move { max-width: 7.5rem; font: inherit; font-size: .78rem; padding: .25rem .35rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.iw-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 900px) { .iw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iw-col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem; display: grid; gap: .45rem; align-content: start; min-height: 7rem; }
.iw-col h4 { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.iw-block { text-align: left; border: 0; border-radius: 10px; padding: .45rem .55rem; color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-line) 30%, transparent); cursor: pointer; display: grid; font: inherit; }
.iw-block strong { font-size: .86rem; line-height: 1.2; } .iw-block span { font-size: .72rem; opacity: .8; }
.dw-chart { width: 100%; height: auto; display: block; }
.dw-goal { stroke: var(--chart-line); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dw-label { display: grid; gap: .3rem; margin-bottom: .7rem; }
.kr-row { display: flex; align-items: center; gap: .45rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.kr-row .grow { flex: 1; min-width: 0; display: grid; gap: .3rem; }
.kr-row .icon-btn { font-size: 1.1rem; font-weight: 800; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); }
.kr-plus { background: var(--accent) !important; }
.kr-edit { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem 4.6rem 2rem; gap: .4rem; margin-top: .45rem; align-items: center; }
.okr-move { display: flex; gap: .45rem; align-items: flex-start; margin-top: .7rem; padding: .55rem .7rem; border-radius: 12px; background: var(--surface-2); font-size: .9rem; }
.okr-move .icon { flex: none; margin-top: .15rem; color: var(--accent-strong); }
.q-goal { display: grid; gap: .3rem; padding: .5rem 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.q-goal:last-child { border-bottom: 0; }
.top3-in { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.top3-in b, .top3-num { display: grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--rb5); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--pill-line); font-family: var(--font-head); }
[data-mode=dark] .top3-in b, [data-mode=dark] .top3-num { background: var(--surface-2); box-shadow: none; color: var(--ink); }
.score-btn { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; }
.score-btn.on { background: var(--accent-strong); color: var(--on-accent); border-color: var(--accent-strong); }
.ns-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; font-size: .8rem; }
.ns-day { aspect-ratio: 1; border: 0; border-radius: 9px; background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.ns-day:disabled { opacity: .4; cursor: default; }
.ns-day.on { background: var(--chart); box-shadow: inset 0 0 0 1.5px var(--pill-line); opacity: 1; }
/* ── Grid Life: groovy type, checkerboard trim, stickers, shelf, year in pixels ── */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; }
.wordmark, .boot-logo { font-family: 'Shrikhand', 'Fredoka', cursive !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: .01em; }
.wordmark { color: var(--accent-strong) !important; -webkit-text-stroke: .6px var(--pill-line); paint-order: stroke fill; }
.hero h1 { font-family: 'Shrikhand', 'Fredoka', cursive; font-weight: 400; letter-spacing: .005em; }
.hero h1 .script, .hello h1 .script { font-family: 'Shrikhand', cursive; font-style: normal; color: var(--accent-strong); }
.script { font-family: 'Shrikhand', 'Fredoka', cursive; font-style: normal; font-weight: 400; }
.brand-tag { font-family: 'Fredoka', sans-serif; font-style: normal; font-weight: 500; }
.stat-value, .big-number, .money-big, .strip-value, .focus-time { font-family: 'Fredoka', var(--font-body); font-weight: 600; }
.hero { padding-bottom: 2.2rem !important; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 1.5px solid color-mix(in srgb, var(--pill-line) 25%, transparent);
  background: repeating-conic-gradient(var(--rb1) 0 25%, var(--surface) 0 50%) 0 0 / 14px 14px; opacity: .9; }
[data-mode=dark] .hero::after { opacity: .35; }
.field > span { font-weight: 700; font-size: .86rem; }
.sticker-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1.1rem .8rem; }
.sticker-slot { display: grid; justify-items: center; gap: .4rem; text-align: center; }
.sticker-slot small { font-weight: 700; color: var(--muted); font-size: .78rem; }
.sticker { display: grid; place-items: center; border-radius: 50%; background: var(--tint); border: 2px solid var(--pill-line); box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px color-mix(in srgb, var(--pill-line) 35%, transparent), 0 8px 14px -8px rgb(0 0 0 / .35); transform: rotate(var(--rot)); }
.sticker span { line-height: 1; }
.sticker-lg { width: 84px; height: 84px; } .sticker-lg span { font-size: 2.6rem; }
.sticker-md { width: 60px; height: 60px; } .sticker-md span { font-size: 1.9rem; }
.sticker-sm { width: 44px; height: 44px; } .sticker-sm span { font-size: 1.35rem; }
.sticker.locked { background: var(--surface-2); border-style: dashed; box-shadow: none; filter: grayscale(1); opacity: .55; }
.sticker.locked span { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--muted); font-size: 1.3rem; }
.sticker-row { display: flex; gap: .9rem; flex-wrap: wrap; padding: .3rem .2rem; }
.shelf { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; padding: .4rem .2rem 0; border-bottom: 6px solid color-mix(in srgb, var(--pill-line) 70%, var(--surface)); }
.spine { width: 34px; border: 1.5px solid var(--pill-line); border-radius: 5px 5px 2px 2px; display: grid; place-items: center; overflow: hidden; }
.spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 92%; color: var(--ink); }
.mood-pick { display: flex; gap: .35rem; }
.mood-pick button { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--pill-line) 30%, transparent); font-size: 1.15rem; cursor: pointer; opacity: .7; }
.mood-pick button.on { opacity: 1; border: 2px solid var(--pill-line); transform: scale(1.08); }
.oneline-photo { position: relative; margin-top: .6rem; } .oneline-photo img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; display: block; }
.oneline-photo .icon-btn { position: absolute; top: .4rem; right: .4rem; background: var(--surface); }
.oneline-done { display: flex; gap: .6rem; align-items: flex-start; } .oneline-done span { font-size: 1.6rem; }
.oneline-done q { quotes: none; font-family: 'Fredoka', sans-serif; font-size: 1.15rem; line-height: 1.35; }
.pixels { display: grid; grid-template-columns: 1.4rem repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 360px; }
.px-m, .px-d { font-size: .66rem; font-weight: 800; color: var(--muted); text-align: center; line-height: 1; align-self: center; }
.px { aspect-ratio: 1; min-height: 10px; border: 0; border-radius: 4px; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-line) 12%, transparent); width: 100%; }
i.px { width: 14px; height: 14px; }
.px.today { box-shadow: 0 0 0 2px var(--pill-line); }
.px:disabled { cursor: default; }

/* ════════════ Grid Life skin: grid paper, outlined cards, serif + italic accents ════════════ */
body { background-color: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 26px 26px; background-attachment: fixed; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; font-optical-sizing: auto; }
h1 { font-weight: 700; letter-spacing: -.02em; }
h1 em, h2 em, h3 em, .hero h1 em { font-style: italic; font-weight: 500; color: var(--accent-strong); }
.script { font-family: var(--font-head); font-style: italic; font-weight: 500; }
.stat-value, .big-number, .money-big, .strip-value, .focus-time, .date-nav-label { font-family: var(--font-head); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.wordmark, .boot-logo { font-family: var(--font-head) !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--ink) !important; -webkit-text-stroke: 0 !important; }
.wordmark i, .boot-logo i { font-style: italic; font-weight: 500; color: var(--accent-strong); }
.wordmark { font-size: 1.65rem; }
.brand-tag { font-family: var(--font-hand); font-style: normal; font-size: 1.15rem; color: var(--muted); margin-top: -.75rem; }

/* outlines */
.card, .stat, .strip-tile, .gallery-card, .iw-col, .quad, .board-col, .exam-card, .deck, .modal, .all-hub, .player-dock { border: var(--bw) solid var(--edge) !important; box-shadow: var(--shadow); }
.card { border-radius: var(--r); background: var(--surface); }
.item, .asg, .class-row, .fc-item, .income-row, .mini-item { border: var(--bw) solid var(--edge); box-shadow: var(--shadow-sm); border-radius: var(--r-sm); background: var(--surface); }
.stat { border-radius: var(--r-sm); background: var(--surface); }
.stat.tone-accent { background: var(--accent); color: var(--accent-ink); }
.card.tone-accent { background: var(--accent); color: var(--accent-ink); }
.card.tone-accent2 { background: var(--accent-2); color: var(--accent-2-ink); }
.card-head h3 { font-size: 1.12rem; }
.card-head h3 .icon { color: var(--ink); background: var(--rb1); border: var(--bw) solid var(--edge); border-radius: 9px; padding: 3px; box-sizing: content-box; }
[data-mode=dark] .card-head h3 .icon { color: var(--ink); }
.home-cell:nth-child(6n+2) .card { background: color-mix(in srgb, var(--rb2) 42%, var(--surface)); }
.home-cell:nth-child(6n+4) .card { background: color-mix(in srgb, var(--rb3) 40%, var(--surface)); }
.home-cell:nth-child(6n+5) .card { background: color-mix(in srgb, var(--rb4) 40%, var(--surface)); }
.home-cell:nth-child(6n+2) .card-head h3 .icon { background: var(--rb2); } .home-cell:nth-child(6n+4) .card-head h3 .icon { background: var(--rb3); } .home-cell:nth-child(6n+5) .card-head h3 .icon { background: var(--rb4); }
.home-cell .card .task, .home-cell .card .class-row { background: var(--surface); }

/* eyebrow = pink pill with a sparkle */
.eyebrow, .pill-label { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .8rem; border-radius: 999px; background: var(--accent-2); color: var(--ink); border: var(--bw) solid var(--edge);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; margin-bottom: .6rem; width: fit-content; }
.eyebrow::before { content: '✦'; font-size: .85rem; letter-spacing: 0; width: auto; height: auto; background: none; border-radius: 0; margin: 0; opacity: 1; vertical-align: 0; }
.demo-card .eyebrow { opacity: 1; margin-bottom: .2rem; } .demo-card .eyebrow .icon { display: none; }
.eyebrow-mini { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); line-height: 1.05; }
.page-head { margin-bottom: 1.4rem; }

/* buttons */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary { background: var(--ink); color: var(--bg); border: var(--bw) solid var(--edge); box-shadow: none; }
[data-mode=dark] .btn-primary { background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { filter: none; transform: translate(-1px, -1px); box-shadow: var(--shadow-sm); }
.btn-soft { background: var(--surface); color: var(--ink); border: var(--bw) solid var(--edge); }
.btn-soft:hover { background: var(--accent); filter: none; }
.btn-outline { background: var(--surface); border: var(--bw) solid var(--edge); color: var(--ink); }
.btn-danger { border: var(--bw) solid var(--bad); }
.link { color: var(--accent-strong); }

/* tabs: underline style */
.tabs { background: var(--surface); border: var(--bw) solid var(--edge); padding: .22rem; }
.tabs button.on { background: var(--ink); color: var(--bg); box-shadow: none; }
[data-mode=dark] .tabs button.on { background: var(--accent-strong); color: var(--on-accent); }
.hub-tabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; margin: -.5rem 0 1.4rem; border-bottom: var(--bw) solid var(--line); }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tabs a { flex: none; padding: .7rem .85rem .65rem; font-weight: 700; font-size: .9rem; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; }
.hub-tabs a:hover { color: var(--ink); }
.hub-tabs a.on { color: var(--ink); border-bottom-color: var(--ink); }
[data-mode=dark] .hub-tabs a.on { border-bottom-color: var(--accent-strong); }

/* forms */
.input { border: var(--bw) solid color-mix(in srgb, var(--edge) 35%, var(--line)); border-radius: 12px; background: var(--surface); }
.input:focus { border-color: var(--edge); box-shadow: var(--shadow-sm); }
.check { border-radius: 50%; border: var(--bw) solid var(--edge); }
.check.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
[data-mode=dark] .check.on { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.chip { background: var(--surface-2); color: var(--ink); border: 1px solid color-mix(in srgb, var(--edge) 18%, transparent); }
.seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.seg button { border: var(--bw) solid var(--edge); background: var(--surface); border-radius: 999px; padding: .35rem .8rem; font-weight: 700; font-size: .84rem; }
.seg button.on { background: var(--ink); color: var(--bg); }
.tip { background: var(--accent); color: var(--accent-ink); border: var(--bw) solid var(--edge); box-shadow: var(--shadow-sm); }
.empty { border: var(--bw) dashed color-mix(in srgb, var(--edge) 45%, transparent); background: var(--surface); }
.empty-icon { background: var(--rb1); color: var(--ink); border: var(--bw) solid var(--edge); }
.modal { border-radius: 22px; box-shadow: var(--shadow-lg); }
.toast { background: var(--ink); color: var(--bg); border: var(--bw) solid var(--edge); }
.progress { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--edge) 30%, transparent); height: 10px; }
.progress span { background: var(--chart); box-shadow: inset -1px 0 0 color-mix(in srgb, var(--edge) 50%, transparent); }
:root { --chart-ring: var(--accent-strong); --chart-track: color-mix(in srgb, var(--chart) 35%, var(--surface)); }
.group-title { color: var(--ink); }

/* shell */
.sidebar { background: var(--surface); border-right: var(--bw) solid var(--edge); }
.nav-hub > button, .nav-link { font-weight: 600; }
.nav-hub.on > button { background: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 var(--bw) var(--edge); }
.nav-hub > button > svg:first-child { box-sizing: content-box; padding: 4px; border-radius: 8px; background: var(--hub, var(--accent)); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--edge); }
[data-mode=dark] .nav-hub > button > svg:first-child { box-shadow: none; }
.nav-pages a.on { background: var(--surface-2); color: var(--ink); font-weight: 800; }
.banner { background: var(--ink); color: var(--bg); }
.banner .btn-primary { background: var(--accent-2); color: var(--ink); }
.sale-tag { background: var(--rb2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--edge); }
[data-mode=dark] .sale-tag { color: var(--ink); }
.fab { background: var(--ink); color: var(--bg); border: var(--bw) solid var(--edge); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .topbar { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: var(--bw) solid var(--line); display: grid; grid-template-columns: 44px 1fr auto 44px; }
  .topbar .brand { justify-self: center; } .topbar .grow { display: none; }
  .topbar .wordmark { font-size: 1.5rem; }
  .bottom-nav { background: var(--surface); border-top: var(--bw) solid var(--edge); padding-top: .25rem; overflow: visible; }
  .bottom-nav .on { color: var(--ink); } .bottom-nav .on .bn-ic { background: var(--accent); }
  .bottom-nav a, .bottom-nav button { color: var(--muted); font-size: .7rem; }
  .bn-ic { position: relative; display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; }
  .bn-badge { position: absolute; top: -6px; right: 0; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 99px; background: var(--rb2); color: var(--ink); border: 1.5px solid var(--edge); font: 800 .68rem/16px var(--font-body); font-style: normal; text-align: center; }
  .bottom-nav .bn-add span.plus { width: 60px; height: 60px; border-radius: 50%; margin-top: -26px; background: var(--ink); color: var(--bg); box-shadow: 0 0 0 5px var(--surface), var(--shadow-sm); }
  [data-mode=dark] .bottom-nav .bn-add span.plus { background: var(--accent-strong); color: var(--on-accent); }
  .hub-tabs { margin: -.25rem -1rem 1.1rem; padding: 0 .6rem; }
}

/* Home */
.home-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 1000px) { .home-top { grid-template-columns: 1fr; } }
.dreamboard { position: relative; border: var(--bw) solid var(--edge); border-radius: 24px; box-shadow: var(--shadow); padding: 1.1rem 1.15rem 1.3rem; min-width: 0; overflow: hidden;
  background: radial-gradient(circle, color-mix(in srgb, var(--edge) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px, color-mix(in srgb, var(--rb3) 38%, var(--surface)); }
.dreamboard::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: var(--rb2); opacity: .55; pointer-events: none; }
.dreamboard > * { position: relative; z-index: 1; }
.dreamboard .pill-label { margin: 0; }
.polaroids { display: flex; flex-wrap: wrap; gap: 1rem .6rem; margin-top: 1.2rem; justify-content: center; }
.polaroid { position: relative; width: 112px; background: #FFFEFB; padding: 10px 6px 4px; box-shadow: 0 1px 0 rgb(0 0 0 / .06), 0 8px 16px -10px rgb(0 0 0 / .45); transform: rotate(var(--rot)); text-decoration: none; color: #2A2533; display: grid; gap: 4px; transition: transform .2s var(--ease); }
.polaroid:hover { transform: rotate(0deg) scale(1.05); z-index: 2; }
.polaroid::before { content: ''; position: absolute; top: -7px; left: 50%; width: 46px; height: 15px; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--rb1) 80%, transparent); border-left: 2px dotted rgb(255 255 255 / .7); border-right: 2px dotted rgb(255 255 255 / .7); opacity: .9; }
.polaroid:nth-child(3n+2)::before { background: color-mix(in srgb, var(--rb2) 85%, transparent); transform: translateX(-50%) rotate(4deg); }
.polaroid:nth-child(3n)::before { background: color-mix(in srgb, var(--rb4) 85%, transparent); }
.polaroid img, .polaroid-ph { width: 100%; aspect-ratio: 1.1; object-fit: cover; display: grid; place-items: center; font-size: 2.1rem; }
.polaroid-cap { font-family: var(--font-hand); font-size: 1rem; line-height: 1.05; text-align: center; padding: 0 2px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-mode=dark] .dreamboard { background: radial-gradient(circle, rgb(255 255 255 / .09) 1.2px, transparent 1.6px) 0 0 / 18px 18px, var(--surface); }
.hero { margin: 0; border-radius: 24px; border: var(--bw) solid var(--edge) !important; box-shadow: var(--shadow); background: var(--surface) !important; grid-template-columns: minmax(0, 1fr) auto; padding: 1.4rem 1.5rem !important; align-items: start; }
.hero::after { display: none !important; }
.hero h1 { font-family: var(--font-head) !important; font-weight: 700 !important; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin: .2rem 0 .45rem; }
.hero .pill-label { background: var(--rb3); }
.hero-side { min-height: 0; } .hero-ring { position: static; background: none; display: grid; justify-items: center; gap: .2rem; padding: 0; backdrop-filter: none; }
.hero-ring small { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.energy-btn { border: var(--bw) solid var(--edge); background: var(--surface); }
.energy-btn.on { background: var(--accent); box-shadow: var(--shadow-sm); border-color: var(--edge); }
.energy-btn .icon { color: var(--ink); } .energy-q { color: var(--muted); }
@media (max-width: 760px) { .polaroid:nth-child(n+7) { display: none; } .hero { grid-template-columns: 1fr; } .hero-side { display: none; } .energy { padding-right: 0; } .polaroid { width: 92px; } .polaroid-cap { font-size: .9rem; } }
.strip-tile { border-radius: 16px; }
.strip-icon { background: var(--rb1); color: var(--ink); border: var(--bw) solid var(--edge); }
.strip-tile:nth-child(2) .strip-icon { background: var(--rb2); } .strip-tile:nth-child(3) .strip-icon { background: var(--rb3); } .strip-tile:nth-child(4) .strip-icon { background: var(--rb4); }
.one-thing::after { display: none; }
.dash-icon, .nudge-icon { background: var(--rb1); color: var(--ink); border: var(--bw) solid var(--edge); }
.wk-bar, .wk-bar.c0, .wk-bar.c1, .wk-bar.c2, .wk-bar.c3, .wk-bar.c4, .wk-bar.c5 { fill: var(--chart); stroke: var(--edge); stroke-width: 1; }
.wk-bar.td { fill: var(--accent-strong); }
.mood-btn { border: var(--bw) solid var(--edge); } .mood-btn.on { background: var(--accent); box-shadow: var(--shadow-sm); }

/* Grid Life: subjects, assignments, timetable, exams, grades, flashcards, stats */
.subj-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--edge); flex: none; }
.subj-chip { display: inline-flex; align-items: center; padding: .14rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 800; color: var(--ink); border: 1px solid color-mix(in srgb, var(--edge) 45%, transparent); }
.filter-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.filter { display: inline-flex; align-items: center; gap: .4rem; border: var(--bw) solid var(--edge); background: var(--surface); border-radius: 999px; padding: .32rem .75rem; font-weight: 700; font-size: .84rem; color: var(--ink); }
.filter.on { background: var(--ink); color: var(--bg); }
.filter-row + .tabs { margin: 0; }
.asg-list { display: grid; gap: .55rem; }
.asg { display: grid; gap: .45rem; padding: .7rem .85rem .75rem 1.2rem; position: relative; overflow: hidden; }
.asg::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--subj); border-right: 1px solid color-mix(in srgb, var(--edge) 40%, transparent); }
.asg.done .asg-title { text-decoration: line-through; color: var(--muted); }
.asg-top { display: flex; gap: .6rem; align-items: center; }
.asg-title { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; font-weight: 700; font-size: .98rem; color: var(--ink); }
.asg-move { display: flex; justify-content: space-between; gap: .5rem; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }
.board-col { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: var(--r); padding: .8rem; display: grid; gap: .55rem; }
.board-col:nth-child(1) { background: color-mix(in srgb, var(--rb2) 35%, var(--surface)); } .board-col:nth-child(2) { background: color-mix(in srgb, var(--rb3) 35%, var(--surface)); } .board-col:nth-child(3) { background: color-mix(in srgb, var(--rb4) 35%, var(--surface)); }
.board-col h3 { font-size: 1.05rem; display: flex; justify-content: space-between; padding: 0 .2rem; }
.add-dashed { display: flex; align-items: center; justify-content: center; gap: .4rem; border: var(--bw) dashed color-mix(in srgb, var(--edge) 45%, transparent); background: color-mix(in srgb, var(--surface) 60%, transparent); border-radius: var(--r-sm); padding: .6rem; font-weight: 700; color: var(--muted); }
.tt-wide { padding: .8rem; overflow-x: auto; }
.tt-grid { display: grid; gap: 0 6px; min-width: 620px; }
.tt-head { text-align: center; font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding: .3rem 0 .6rem; color: var(--muted); }
.tt-head.td { color: var(--ink); } .tt-head.td::after { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong); margin: .25rem auto 0; }
.tt-hours { position: relative; }
.tt-hours span { position: absolute; right: .4rem; transform: translateY(-.55em); font-size: .68rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tt-col { position: relative; border-radius: 12px; background-image: linear-gradient(to bottom, color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px); background-color: color-mix(in srgb, var(--surface-2) 45%, transparent); cursor: copy; }
.tt-col.td { background-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.tt-block { position: absolute; left: 3px; right: 3px; border: var(--bw) solid var(--edge); border-radius: 10px; padding: .3rem .45rem; text-align: left; display: flex; flex-direction: column; overflow: hidden; color: var(--ink); cursor: pointer; font: inherit; line-height: 1.2; }
.tt-block strong { font-size: .8rem; } .tt-block span { font-size: .68rem; opacity: .8; }
.tt-block.now { box-shadow: var(--shadow-sm); outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.tt-now { position: absolute; left: -3px; right: -3px; height: 2px; background: var(--bad); z-index: 2; pointer-events: none; }
.tt-now::before { content: ''; position: absolute; left: -2px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.tt-narrow { display: none; }
@media (max-width: 760px) { .tt-wide { display: none; } .tt-narrow { display: block; } }
.day-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .3rem; margin-bottom: .9rem; }
.day-tabs button { border: var(--bw) solid var(--edge); background: var(--surface); border-radius: 12px; padding: .45rem 0; font-weight: 800; font-size: .82rem; color: var(--ink); }
.day-tabs button.on { background: var(--ink); color: var(--bg); }
.class-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem .55rem .55rem; text-decoration: none; color: var(--ink); width: 100%; text-align: left; font: inherit; cursor: pointer; }
.class-row .class-time { display: grid; justify-items: center; padding: .35rem .55rem; border-radius: 10px; background: var(--subj); border: 1px solid color-mix(in srgb, var(--edge) 40%, transparent); min-width: 4.4rem; line-height: 1.15; }
.class-row .class-time b { font-size: .86rem; } .class-row .class-time small { font-size: .7rem; opacity: .75; }
.class-row strong { display: block; } .class-row small { color: var(--muted); }
.class-row.past { opacity: .5; }
.class-row.now { box-shadow: var(--shadow); background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.now-pill, .due-pill { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .15rem .55rem; border-radius: 999px; background: var(--ink); color: var(--bg); }
.subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.subj-card { display: grid; gap: .5rem; padding-top: 0; overflow: hidden; }
.subj-band { margin: 0 -1.2rem .4rem; padding: .55rem 1.2rem; display: flex; justify-content: space-between; font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; border-bottom: var(--bw) solid var(--edge); }
.subj-name { font-size: 1.35rem; }
.subj-grade { display: flex; align-items: center; gap: .9rem; padding: .5rem 0; }
.subj-links { display: grid; gap: .3rem; border-top: 1px dashed var(--line); padding-top: .55rem; }
.subj-links a { font-size: .86rem; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subj-links a:hover { color: var(--accent-strong); }
.subj-table { display: grid; gap: .2rem; }
.subj-tr { display: flex; align-items: center; gap: .6rem; padding: .45rem .4rem; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: var(--ink); border-radius: 8px; }
button.subj-tr:hover, .subj-tr.on { background: var(--surface-2); }
.subj-tr .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.subj-bar { position: relative; width: 28%; } .subj-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--edge); }
.subj-tr b { width: 3.8rem; text-align: right; flex: none; }
.letter { width: 2rem; text-align: center; font-family: var(--font-head); font-weight: 700; }
.grade-score { display: grid; justify-items: end; line-height: 1.1; } .grade-score b { font-family: var(--font-head); font-size: 1.25rem; } .grade-score small { color: var(--muted); font-size: .75rem; }
.calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.calc label { display: grid; gap: .3rem; font-weight: 700; font-size: .82rem; }
.calc-out { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--r-sm); background: var(--accent); border: var(--bw) solid var(--edge); display: grid; gap: .1rem; }
.calc-out span { font-weight: 700; font-size: .85rem; } .calc-out b { font-family: var(--font-head); font-size: 2.2rem; line-height: 1.1; } .calc-out small { color: var(--accent-ink); }
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.exam-top { display: flex; gap: .85rem; align-items: flex-start; }
.exam-count { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 16px; border: var(--bw) solid var(--edge); display: grid; place-content: center; text-align: center; line-height: 1; color: var(--ink); }
.exam-count b { font-family: var(--font-head); font-size: 1.75rem; } .exam-count small { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-top: .15rem; }
.exam-card h3 { font-size: 1.2rem; margin: .1rem 0 .15rem; }
.topics { display: grid; gap: .1rem; margin-top: .7rem; }
.topic { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.conf { border: 0; background: none; font-size: 1rem; padding: .1rem; cursor: pointer; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.2rem; }
.deck { position: relative; display: grid; gap: .35rem; text-align: left; border-radius: var(--r); padding: 1rem 1.1rem; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; border-top: 10px solid var(--subj) !important; }
.deck strong { font-family: var(--font-head); font-size: 1.25rem; }
.deck-stack { position: absolute; inset: 0; transform: translate(6px, 6px) rotate(1.5deg); border: var(--bw) solid var(--edge); border-radius: var(--r); background: var(--surface-2); z-index: -1; }
.deck:hover { transform: translate(-1px, -2px); }
.due-pill { width: fit-content; background: var(--rb2); color: var(--ink); border: 1px solid var(--edge); }
.fc-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .5rem; }
@media (max-width: 640px) { .fc-add { grid-template-columns: 1fr; } }
.fc-list { display: grid; gap: .5rem; margin-top: 1rem; }
.fc-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; }
.fc-item .grow { min-width: 0; display: grid; } .fc-item span { color: var(--muted); font-size: .9rem; }
.box-pill { font-size: .7rem; font-weight: 800; padding: .12rem .5rem; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.study { display: grid; gap: 1rem; }
.flash { min-height: 230px; border: var(--bw) solid var(--edge); border-radius: 20px; box-shadow: var(--shadow); background: var(--surface) repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--rb1) 70%, transparent) 31px 32px); display: grid; place-content: center; gap: .6rem; text-align: center; padding: 1.5rem; font: inherit; color: var(--ink); cursor: pointer; position: relative; }
.flash.flipped { background-color: color-mix(in srgb, var(--rb3) 40%, var(--surface)); }
.flash-side { position: absolute; top: .8rem; left: 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.flash-text { font-family: var(--font-head); font-size: 1.45rem; line-height: 1.3; }
.rate-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.rate { display: grid; gap: .1rem; justify-items: center; border: var(--bw) solid var(--edge); border-radius: 14px; padding: .55rem .3rem; font-weight: 800; background: var(--surface); color: var(--ink); cursor: pointer; }
.rate small { font-weight: 600; color: var(--muted); font-size: .72rem; }
.rate-bad { background: var(--bad-bg); } .rate-warn { background: var(--warn-bg); } .rate-good { background: var(--good-bg); } .rate-accent { background: var(--accent); }
.btn.wide { width: 100%; }
.study-done { text-align: center; display: grid; gap: .6rem; justify-items: center; padding: 1rem 0; }
.vbars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; height: 190px; align-items: end; }
.vbar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; justify-items: center; gap: .25rem; }
.vbar-fill { align-self: end; width: 100%; max-width: 40px; border: var(--bw) solid var(--edge); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--chart); min-height: 0; }
.vbar.td .vbar-fill { background: var(--accent-strong); }
.vbar-v { font-size: .72rem; font-weight: 800; color: var(--muted); align-self: end; }
.vbar small { font-size: .72rem; font-weight: 800; color: var(--muted); border-top: var(--bw) solid var(--edge); width: 100%; text-align: center; padding-top: .25rem; }
.hbars { display: grid; gap: .6rem; }
.hbar { display: grid; grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .88rem; }
.hbar-l { display: flex; align-items: center; gap: .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.hbar-t { height: 14px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .hbar-t i { display: block; height: 100%; background: var(--chart); border-right: var(--bw) solid var(--edge); }
.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.all-hub { display: grid; gap: .7rem; align-content: start; }
.all-hub-head { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: var(--ink); }
.all-hub-head strong { display: block; font-family: var(--font-head); font-size: 1.2rem; } .all-hub-head small { color: var(--muted); font-size: .82rem; }
.all-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--hub); border: var(--bw) solid var(--edge); flex: none; }
.all-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.all-links a { padding: .3rem .65rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: .84rem; font-weight: 600; }
.all-links a:hover { background: var(--accent); }
[data-mode=dark] .polaroid { background: #EDE9F2; }


/* ════════════ Grid Life race skin: clean paddock cards, condensed italic type, timing numbers ════════════ */
body { background: var(--bg); background-image: none; font-weight: 500; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: .005em; font-style: normal; }
h1 { font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.005em; }
h1 em, h2 em, h3 em, .hero h1 em { font-family: var(--font-head); font-style: italic; font-weight: 800; color: var(--accent-strong); font-size: 1em; line-height: inherit; margin-right: 0; }
.card-head h3 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.card-head h3 em { font-weight: 700; font-style: normal; color: inherit; font-size: 1em; }
.card-head h3 .icon { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 7px; padding: 4px; }
.stat-value, .big-number, .money-big, .strip-value, .focus-time, .date-nav-label, .mono, .cd b, .grade-score b, .letter { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wordmark, .boot-logo { font-family: var(--font-head) !important; font-weight: 800 !important; font-style: italic !important; text-transform: uppercase; letter-spacing: .01em; color: var(--ink) !important; }
.wordmark i, .boot-logo i { font-family: var(--font-head); font-style: italic; font-weight: 800; color: var(--accent-strong); font-size: 1em; }
.brand-tag { font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: -.6rem; }

/* cards: clean, no tilt, no tape */
.card, .stat, .strip-tile, .gallery-card, .iw-col, .quad, .board-col, .exam-card, .deck, .modal, .all-hub, .player-dock { border: 1px solid var(--line) !important; box-shadow: var(--shadow); border-radius: var(--r); }
.home-cell .card { transform: none !important; background: var(--surface) !important; }
.home-cell .card::before { display: none !important; }
.home-cell .card { border-top: 3px solid var(--accent-strong) !important; }
.item, .asg, .class-row, .fc-item, .income-row, .mini-item { border: 1px solid var(--line); box-shadow: none; }
.stat.tone-accent { background: var(--carbon); color: #fff; border-color: var(--carbon) !important; }
.stat.tone-accent .stat-label, .stat.tone-accent .stat-hint { color: #fff; opacity: .7; }
.stat.tone-accent .stat-value { color: #fff; }
.stat-label { font-family: var(--font-head); letter-spacing: .1em; }
.tip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--accent-strong); border-style: solid; box-shadow: none; }
.tip-icon { background: var(--accent); color: var(--accent-ink); }

/* eyebrow: a slanted timing-tower tag */
.eyebrow, .pill-label { font-family: var(--font-head); font-style: italic; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8rem; color: #fff; background: var(--accent-strong); border: 0; border-radius: 0; padding: .3rem 1.1rem .3rem .8rem; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.eyebrow::before { content: ''; display: none; }
.eyebrow-mini { font-family: var(--font-head); font-style: italic; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .78rem; color: var(--accent-strong); }
.page-head h1 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.2rem); line-height: .95; }

/* buttons, tabs, inputs */
.btn { border-radius: 9px; font-family: var(--font-head); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .95rem; }
.btn-sm { font-size: .82rem; }
.btn-primary { background: var(--accent-strong) !important; color: var(--on-accent) !important; border: 0 !important; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--accent-strong) 80%, transparent); }
.btn-soft, .btn-outline { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-soft:hover, .btn-outline:hover { border-color: var(--accent-strong); background: var(--surface); }
.tabs { background: var(--surface-2); border: 0; border-radius: 10px; }
.tabs button { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; border-radius: 8px; }
.tabs button.on, .filter.on, .seg button.on, .day-tabs button.on { background: var(--carbon) !important; color: #fff !important; box-shadow: none !important; }
[data-mode=dark] .tabs button.on, [data-mode=dark] .filter.on, [data-mode=dark] .seg button.on { background: var(--accent-strong) !important; }
.filter, .seg button, .day-tabs button, .energy-btn { border: 1px solid var(--line) !important; border-radius: 8px; }
.hub-tabs { border-bottom: 1px solid var(--line); }
.hub-tabs a { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .92rem; }
.hub-tabs a.on { color: var(--ink); border-bottom-color: var(--accent-strong); }
.input { border: 1px solid var(--line); border-radius: 9px; }
.input:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-strong) 18%, transparent); }
.check { border: 1.75px solid color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 6px; }
.check.on { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.chip { border: 0; background: var(--surface-2); color: var(--ink); }
.progress { border: 0; background: var(--surface-2); height: 8px; }
.progress span { background: var(--accent-strong); box-shadow: none; }
.empty { border: 1.5px dashed var(--line); }
.empty-icon { background: var(--accent); color: var(--accent-ink); border: 0; }
.modal { border-radius: 16px; }

/* shell */
.sidebar { background: var(--surface); border-right: 1px solid var(--line); }
.nav-hub.on > button { background: var(--carbon); color: #fff; box-shadow: none; }
.nav-hub.on > button > svg:first-child { background: var(--accent-strong) !important; color: #fff; box-shadow: none !important; }
.nav-hub > button > svg:first-child { background: var(--surface-2) !important; color: var(--ink); box-shadow: none !important; border-radius: 7px; }
.nav-pages a.on { background: var(--accent); color: var(--accent-ink); }
.banner { background: var(--carbon); color: #fff; }
.banner .btn-primary { background: var(--accent-strong) !important; }
.sale-tag { background: var(--accent-strong); color: #fff; box-shadow: none; }
.fab { background: var(--accent-strong); color: #fff; border: 0; }
@media (max-width: 900px) {
  .topbar { background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--line); }
  .bottom-nav { background: var(--surface); border-top: 1px solid var(--line); }
  .bottom-nav .on { color: var(--accent-strong); } .bottom-nav .on .bn-ic { background: var(--accent); }
  .bottom-nav .bn-add span.plus { background: var(--accent-strong) !important; color: #fff !important; box-shadow: 0 0 0 5px var(--surface), 0 8px 18px -8px color-mix(in srgb, var(--accent-strong) 80%, transparent); }
  .bn-badge { background: var(--accent-strong); color: #fff; border: 2px solid var(--surface); }
}

/* chequered flag pattern */
:root { --chequer: repeating-conic-gradient(var(--carbon) 0 25%, #FFFFFF 0 50%) 0 0 / 14px 14px; }

/* Home */
.home-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.race-hero { position: relative; overflow: hidden; border-radius: 18px; background: var(--carbon); color: #fff; box-shadow: var(--shadow); min-height: 230px; display: flex; }
.race-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--accent-strong); }
.race-hero::after { content: ''; position: absolute; right: -40px; top: -20px; bottom: -20px; width: 180px; background: repeating-linear-gradient(115deg, transparent 0 18px, color-mix(in srgb, var(--accent-strong) 60%, transparent) 18px 26px); opacity: .55; }
.rh-flag { position: absolute; right: 0; top: 0; width: 98px; height: 56px; background: var(--chequer); opacity: .9; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); z-index: 1; }
.rh-in { position: relative; z-index: 2; padding: 1.4rem 1.6rem 1.3rem 1.8rem; color: #fff; text-decoration: none; display: grid; gap: .25rem; align-content: start; width: 100%; }
.rh-in h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: 1; margin-top: .2rem; }
.rh-in p { opacity: .75; }
.race-hero .eyebrow-mini { color: color-mix(in srgb, var(--accent-strong) 55%, #fff); }
.rh-status { margin-top: .5rem; font-size: .85rem; opacity: .8; font-weight: 600; }
.hero { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 18px; box-shadow: var(--shadow); }
.hero .pill-label { background: var(--carbon); }
.hero h1 { font-family: var(--font-head) !important; font-style: italic !important; font-weight: 800 !important; text-transform: uppercase; }
.hero h1 em { color: var(--accent-strong); }
.hero-ring .ring-label span { font-family: var(--font-mono); }
.energy-btn.on { background: var(--accent); border-color: var(--accent-strong) !important; }
.energy-btn .icon { color: var(--accent-strong); }
.strip-tile { border-radius: 12px; }
.strip-icon, .dash-icon, .nudge-icon { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; }
.strip-tile:nth-child(2) .strip-icon, .strip-tile:nth-child(3) .strip-icon, .strip-tile:nth-child(4) .strip-icon { background: var(--surface-2); color: var(--ink); }
.strip-label { font-family: var(--font-head); }
.wk-bar, .wk-bar.c0, .wk-bar.c1, .wk-bar.c2, .wk-bar.c3, .wk-bar.c4, .wk-bar.c5 { fill: color-mix(in srgb, var(--accent-strong) 45%, var(--surface)); stroke: none; }
.wk-bar.td { fill: var(--accent-strong); }
.mood-btn { border: 1px solid var(--line); } .mood-btn.on { background: var(--accent); }
@media (max-width: 1000px) { .home-top { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .race-hero::after { width: 110px; } }

/* countdown */
.cd { display: flex; gap: .4rem; margin: .5rem 0 .2rem; }
.cd span { display: grid; justify-items: center; min-width: 3.1rem; padding: .4rem .3rem .3rem; border-radius: 8px; background: var(--surface-2); line-height: 1; }
.cd b { font-size: 1.35rem; }
.cd small { font-size: .62rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--muted); margin-top: .25rem; }
.cd-big span { min-width: 4rem; padding: .55rem .4rem .45rem; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); }
.cd-big b { font-size: 2rem; color: #fff; }
.cd-big small { color: rgb(255 255 255 / .6); }
.cd-live { font-family: var(--font-head); font-style: italic; font-weight: 800; font-size: 1.6rem; text-transform: uppercase; }
.card .cd-big span, .gp-hero .cd-big span { }

/* season list */
.next-gp, .gp-hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem 1.3rem 1.8rem; border-radius: 16px; background: var(--carbon); color: #fff; text-decoration: none; margin-bottom: 1rem; box-shadow: var(--shadow); }
.next-gp::before, .gp-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--accent-strong); }
.next-gp::after, .gp-hero::after { content: ''; position: absolute; right: 0; top: 0; width: 84px; height: 42px; background: var(--chequer); opacity: .25; }
.next-gp h2, .gp-hero h1 { font-style: italic; font-weight: 800; text-transform: uppercase; line-height: 1; margin: .25rem 0; color: #fff; }
.gp-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
.next-gp p, .gp-hero p { opacity: .75; }
.next-gp .eyebrow-mini, .gp-hero .eyebrow-mini { color: color-mix(in srgb, var(--accent-strong) 55%, #fff); }
.gp-hero .btn-soft, .gp-hero .btn-ghost { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .2); }
.gp-hero .cal-add { display: inline-block; }
.gp-list { display: grid; gap: .45rem; }
.gp-row { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.gp-row:hover { border-color: var(--accent-strong); }
.gp-row.past { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.gp-row .grow { min-width: 0; display: grid; } .gp-row strong { font-family: var(--font-head); font-size: 1.1rem; text-transform: uppercase; font-style: italic; letter-spacing: .01em; }
.gp-row small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-round { font-family: var(--font-mono); font-weight: 700; font-size: .8rem; color: var(--muted); width: 2.2rem; }
.gp-flag { font-size: 1.5rem; }
.gp-when { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--accent-strong); white-space: nowrap; }
.gp-win { font-size: .85rem; white-space: nowrap; }
.gp-status { font-size: 1.1rem; }
.tag-sprint { font-family: var(--font-head); font-style: italic; text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .1em; background: var(--accent); color: var(--accent-ink); padding: .1rem .45rem; border-radius: 4px; }
@media (max-width: 600px) { .gp-round { display: none; } .gp-status { display: none; } }
.drv { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-head); font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.drv i { width: 4px; height: 1.05em; border-radius: 2px; display: inline-block; }

/* weekend */
.sess { display: grid; gap: .25rem; }
.sess-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6rem; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; background: var(--surface-2); font-size: .92rem; position: relative; }
.sess-row b { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.sess-row .mono { text-align: right; }
.sess-row.past { opacity: .5; }
.sess-row.is-race { background: var(--carbon); color: #fff; }
.sess-row.live { outline: 2px solid var(--accent-strong); }
.live-dot { position: absolute; right: .5rem; top: -.55rem; background: var(--accent-strong); color: #fff; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: .05rem .4rem; border-radius: 4px; }
.sess-mini .sess-row { padding: .3rem .5rem; font-size: .85rem; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; }
.pick { display: grid; gap: .2rem; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--muted); }
.pick .input { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ink); padding: .5rem .6rem; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; align-items: end; }
.pod { display: grid; justify-items: center; gap: .3rem; padding: .6rem .3rem; border-radius: 10px 10px 0 0; background: var(--surface-2); text-align: center; }
.pod b { font-family: var(--font-mono); font-size: 1.1rem; }
.pod-1 { background: var(--carbon); color: #fff; padding-top: 1.2rem; } .pod-2 { padding-top: .8rem; }
.pod .drv { white-space: normal; justify-content: center; font-size: .9rem; }

/* predictions & standings */
.lb { display: grid; gap: .3rem; }
.lb-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 9px; background: var(--surface-2); }
.lb-row.lead { background: var(--carbon); color: #fff; } .lb-row.lead small { color: rgb(255 255 255 / .6) !important; }
.lb-pos { font-family: var(--font-mono); font-weight: 700; width: 1.4rem; }
.lb-row b { font-size: 1.15rem; }
.pred-table { padding: .3rem; overflow-x: auto; }
.pt-row { display: grid; grid-template-columns: minmax(9rem, 1.6fr) minmax(4.5rem, 1fr) repeat(auto-fit, minmax(3.5rem, 1fr)); gap: .5rem; align-items: center; padding: .5rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .9rem; min-width: 480px; }
.pt-row:last-child { border-bottom: 0; }
.pt-head { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .78rem; color: var(--muted); }
a.pt-row:hover { background: var(--surface-2); }
.standings { padding: .5rem .8rem; display: grid; gap: .1rem; }
.st-row { display: grid; grid-template-columns: 1.8rem minmax(0, 11rem) minmax(0, 1fr) 3rem; gap: .7rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.st-row:last-child { border-bottom: 0; }
.st-pos { font-family: var(--font-mono); font-weight: 700; color: var(--muted); }
.st-row:nth-child(-n+3) .st-pos { color: var(--accent-strong); }
.st-name { display: grid; min-width: 0; } .st-name small { font-size: .74rem; }
.st-bar { height: 10px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .st-bar i { display: block; height: 100%; border-radius: 3px; }
.st-row b { text-align: right; }
.standings.mini { padding: 0; } .standings.mini .st-row { grid-template-columns: 1.4rem 3.4rem minmax(0, 1fr) 2.6rem; padding: .35rem 0; }
.diary { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.diary-card { text-decoration: none; color: var(--ink); display: grid; gap: .15rem; }
.diary-card strong { font-family: var(--font-head); text-transform: uppercase; font-style: italic; font-size: 1.1rem; }
.stars { color: #E7A812; letter-spacing: 1px; white-space: nowrap; }

/* budget */
.bud { display: grid; gap: .45rem; }
.bud-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 5.5rem 5.5rem minmax(3rem, 1fr); gap: .45rem; align-items: center; }
.bud-row .input { padding: .4rem .5rem; font-size: .88rem; }
.bud-l { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .bud-row { grid-template-columns: minmax(0, 1fr) 4.6rem 4.6rem; } .bud-bar { grid-column: 1 / -1; } }
.cd-mini { text-align: center; } .cd-mini b { display: block; font-family: var(--font-mono); font-size: 1.8rem; } .cd-mini small { color: var(--muted); font-size: .72rem; text-transform: uppercase; font-family: var(--font-head); letter-spacing: .1em; }
.nr { display: grid; text-decoration: none; color: var(--ink); } .nr strong { font-family: var(--font-head); font-size: 1.2rem; text-transform: uppercase; font-style: italic; }
.all-icon { background: var(--accent) !important; border: 0 !important; color: var(--accent-ink); }
.all-hub-head strong { font-family: var(--font-head); text-transform: uppercase; font-style: italic; }
.syncbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .55rem .8rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.syncbar > .icon { color: var(--accent-strong); }
.syncbar .grow { min-width: 12rem; color: var(--muted); }
.syncbar .switch em { font-size: .85rem; font-weight: 700; }
.tag-prov, .tag-cancel { font-family: var(--font-head); font-style: italic; text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .1em; padding: .1rem .45rem; border-radius: 4px; background: var(--warn-bg); color: var(--warn); }
.tag-cancel { background: var(--bad-bg); color: var(--bad); }