/* ───────────────── Brightside ─────────────────
   Plan bright. Live bold.
   Rainbow + five bold themes × light / dark, calm mode, text size and easy-read font. */

:root {
  --font-body: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --font-script: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --fs: 16px;
  --r: 20px; --r-sm: 14px; --r-xs: 10px;
  --shadow: 0 1px 2px rgb(75 58 54 / .04), 0 10px 30px -14px rgb(75 58 54 / .18);
  --shadow-lg: 0 24px 60px -20px rgb(40 25 20 / .35);
  --sidebar: 264px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* pastel swatches used for tags, blocks and jars */
  --sw-peach: #F6CDB8; --sw-lavender: #D9D2EE; --sw-sage: #CFDCC8; --sw-rose: #F2CED3;
  --sw-sky: #CFE0EC; --sw-honey: #F5DFAE; --sw-oat: #EADFD1;
}

/* ── Themes: each sets surfaces, ink, accents and its own six-colour "rainbow" (--rb1…--rb6).
   The rainbow colours fill hub tiles, tags and the colour stripe, so every theme stays colourful. ── */

/* Rainbow, the brand theme: soft pastel rainbow on clean white, black type, periwinkle accent */
:root, [data-theme=rainbow] {
  --bg: #F5F5F7; --surface: #FFFFFF; --surface-2: #F0F0F3; --line: #E4E4EA;
  --ink: #17171C; --muted: #5E5E6B;
  --accent: #E3EAFF; --accent-ink: #2F4BB0; --accent-strong: #4C6FDB; --on-accent: #FFFFFF;
  --accent-2: #FCF0B5; --accent-2-ink: #5C4A00;
  --rb1: #F7C6DA; --rb2: #FBCFB2; --rb3: #FBEBA3; --rb4: #C8EACB; --rb5: #BEE3EE; --rb6: #D8CBF4;
  --good: #2B8A3E; --good-bg: #D6F2D9; --warn: #8A5A00; --warn-bg: #FCF0B5; --bad: #B4233C; --bad-bg: #FBD9E4;
  --pill-line: #17171C;
}
[data-theme=neon] {
  --bg: #FFF7FC; --surface: #FFFFFF; --surface-2: #FBEEF6; --line: #F3DDEB;
  --ink: #25172A; --muted: #6E5A72;
  --accent: #FFD6EC; --accent-ink: #8C0050; --accent-strong: #D6006F; --on-accent: #FFFFFF;
  --accent-2: #E4FF9A; --accent-2-ink: #3B5000;
  --rb1: #FF4FA3; --rb2: #FF8A3D; --rb3: #D8F046; --rb4: #3EE6B0; --rb5: #3FC5FF; --rb6: #B266FF;
}
[data-theme=ocean] {
  --bg: #F1F9FA; --surface: #FFFFFF; --surface-2: #E4F2F4; --line: #D3E7EA;
  --ink: #102F38; --muted: #567079;
  --accent: #C9EEF0; --accent-ink: #0B5560; --accent-strong: #0B7A85; --on-accent: #FFFFFF;
  --accent-2: #FFE0D4; --accent-2-ink: #8A3517;
  --rb1: #FF8C7A; --rb2: #FFC078; --rb3: #9BE7D8; --rb4: #38D9A9; --rb5: #3BC9DB; --rb6: #4C8DF6;
}
[data-theme=sunset] {
  --bg: #FFF6EF; --surface: #FFFFFF; --surface-2: #FCEBDD; --line: #F4DCC8;
  --ink: #2E1D1A; --muted: #75605A;
  --accent: #FFDCC6; --accent-ink: #8A2D0A; --accent-strong: #C4420E; --on-accent: #FFFFFF;
  --accent-2: #F6D3EA; --accent-2-ink: #7A1F5C;
  --rb1: #E8590C; --rb2: #FF922B; --rb3: #FFC94D; --rb4: #FF7AA2; --rb5: #D9480F; --rb6: #A14CC4;
}
[data-theme=forest] {
  --bg: #F3F7F0; --surface: #FFFFFF; --surface-2: #E6EFE1; --line: #D6E3CF;
  --ink: #1C2B1F; --muted: #5B6B5D;
  --accent: #D0EBCB; --accent-ink: #1F5B2A; --accent-strong: #2E7D3D; --on-accent: #FFFFFF;
  --accent-2: #F7E7B5; --accent-2-ink: #6B4E00;
  --rb1: #E9A23B; --rb2: #C9D46A; --rb3: #74C476; --rb4: #2FA36B; --rb5: #4BA3A3; --rb6: #8C6A4F;
}
[data-theme=mono] {
  --bg: #F7F7F7; --surface: #FFFFFF; --surface-2: #EFEFEF; --line: #E2E2E2;
  --ink: #141414; --muted: #5F5F5F;
  --accent: #E8E8E8; --accent-ink: #141414; --accent-strong: #141414; --on-accent: #FFFFFF;
  --accent-2: #FFE066; --accent-2-ink: #4A3B00;
  --rb1: #D4D4D4; --rb2: #BDBDBD; --rb3: #FFE066; --rb4: #D4D4D4; --rb5: #BDBDBD; --rb6: #A6A6A6;
}
:root {
  --sw-peach: #FFD1B3; --sw-lavender: #DCCFFF; --sw-sage: #C3F0CB; --sw-rose: #FFC9D9;
  --sw-sky: #C3E5FF; --sw-honey: #FFE38A; --sw-oat: #ECE5D8;
  --rainbow: linear-gradient(90deg, var(--rb1), var(--rb2), var(--rb3), var(--rb4), var(--rb5), var(--rb6));
}

/* Dark mode: deep neutral surfaces; every theme keeps its colours, a little brighter for night */
[data-mode=dark] {
  --bg: #141318; --surface: #1D1B22; --surface-2: #26232D; --line: #34303D;
  --ink: #F4F1F8; --muted: #ABA5B6;
  --accent: #34295A; --accent-ink: #DCD0FF; --accent-strong: #A98BFF; --on-accent: #17102E;
  --accent-2: #463A12; --accent-2-ink: #FFE08A;
  --good: #8CE99A; --good-bg: #1E3A25; --warn: #FFD43B; --warn-bg: #3D3311; --bad: #FFA8A8; --bad-bg: #452224;
  --sw-peach: #5E3A26; --sw-lavender: #3D3366; --sw-sage: #24492E; --sw-rose: #5C2A3C; --sw-sky: #1F4060; --sw-honey: #5A4A12; --sw-oat: #3A3530;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
}
[data-mode=dark][data-theme=rainbow], [data-mode=dark]:not([data-theme]) { --accent: #26325C; --accent-ink: #D3DDFF; --accent-strong: #8FA8FF; --on-accent: #10183A; --accent-2: #3F3714; --accent-2-ink: #FBEBA3; --pill-line: #F4F1F8; }
[data-mode=dark][data-theme=neon] { --bg: #120C14; --surface: #1C141F; --surface-2: #261B2A; --line: #3A2A3F; --accent: #4D1236; --accent-ink: #FFC2E2; --accent-strong: #FF5CB0; --on-accent: #2A0418; --accent-2: #2F3D05; --accent-2-ink: #E4FF9A; }
[data-mode=dark][data-theme=ocean] { --bg: #0D1719; --surface: #142023; --surface-2: #1B2A2E; --line: #27393E; --accent: #0F3E44; --accent-ink: #B9F1F4; --accent-strong: #4FD1DB; --on-accent: #062226; --accent-2: #4A2216; --accent-2-ink: #FFD0BF; }
[data-mode=dark][data-theme=sunset] { --bg: #170F0C; --surface: #211713; --surface-2: #2C1E18; --line: #3D2B23; --accent: #4F2410; --accent-ink: #FFD3B8; --accent-strong: #FF8A4C; --on-accent: #2C1003; --accent-2: #44173A; --accent-2-ink: #F6C6E6; }
[data-mode=dark][data-theme=forest] { --bg: #0F150F; --surface: #161E17; --surface-2: #1E281F; --line: #2B382C; --accent: #1C4224; --accent-ink: #C6EBC4; --accent-strong: #6FCF7F; --on-accent: #0B2410; --accent-2: #3F3410; --accent-2-ink: #F7E2A0; }
[data-mode=dark][data-theme=mono] { --bg: #0E0E0E; --surface: #171717; --surface-2: #212121; --line: #303030; --accent: #2C2C2C; --accent-ink: #F2F2F2; --accent-strong: #F2F2F2; --on-accent: #111111; --accent-2: #3D3410; --accent-2-ink: #FFE066;
  --rb1: #4A4A4A; --rb2: #5A5A5A; --rb3: #C9A800; --rb4: #4A4A4A; --rb5: #5A5A5A; --rb6: #6A6A6A; }

[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 · Brightside 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: 190px; opacity: .55; right: -1.5rem; bottom: -1.2rem; } .hero-ring { display: none; } .energy-btn small { display: none; } }

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


/* ── Brightside identity: rainbow stripe, wordmark, colourful hub tiles ── */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; }
.script { font-weight: 600; }
.wordmark { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.topbar .wordmark { font-size: 1.35rem; }
.auth-art .wordmark { font-size: 2rem; color: var(--accent-ink); }
.boot-logo { font-weight: 700; font-size: 2.6rem; color: var(--ink); background: var(--rainbow); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-tag { font-style: normal; font-weight: 600; }
.main { position: relative; }
.main::before { content: ''; display: block; height: 5px; background: var(--rainbow); }
@media (max-width: 900px) { .main::before { position: sticky; top: 0; z-index: 41; height: 4px; } }
.nav-hub > button > .icon:first-child, .nav-hub > button > svg:first-child { box-sizing: content-box; padding: 5px; border-radius: 9px; background: color-mix(in srgb, var(--hub, var(--accent)) 70%, var(--surface)); color: var(--ink); }
[data-mode=dark] .nav-hub > button > svg:first-child { background: color-mix(in srgb, var(--hub, var(--accent)) 38%, var(--surface)); }
.card-head h3 .icon { color: var(--accent-strong); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--rainbow); }
.hello h1 .script, .hero h1 .script { color: var(--accent-strong); font-size: 1.05em; }
.sidebar .brand-tag { color: var(--muted); }
.btn-primary { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent-strong) 70%, transparent); }
.sale-tag { background: #D6213F; }
.mood-cell.m1 { background: color-mix(in srgb, var(--rb6) 45%, var(--surface)); } .mood-cell.m2 { background: color-mix(in srgb, var(--rb5) 45%, var(--surface)); }
.mood-cell.m3 { background: color-mix(in srgb, var(--rb3) 50%, var(--surface)); } .mood-cell.m4 { background: color-mix(in srgb, var(--rb2) 50%, var(--surface)); } .mood-cell.m5 { background: color-mix(in srgb, var(--rb1) 50%, var(--surface)); }
[data-mode=dark] .mood-cell.m1, [data-mode=dark] .mood-cell.m2, [data-mode=dark] .mood-cell.m3, [data-mode=dark] .mood-cell.m4, [data-mode=dark] .mood-cell.m5 { background-blend-mode: normal; }
[data-mode=dark] .mood-cell.m1 { background: color-mix(in srgb, var(--rb6) 35%, var(--surface)); } [data-mode=dark] .mood-cell.m2 { background: color-mix(in srgb, var(--rb5) 35%, var(--surface)); }
[data-mode=dark] .mood-cell.m3 { background: color-mix(in srgb, var(--rb3) 35%, var(--surface)); } [data-mode=dark] .mood-cell.m4 { background: color-mix(in srgb, var(--rb2) 35%, var(--surface)); } [data-mode=dark] .mood-cell.m5 { background: color-mix(in srgb, var(--rb1) 35%, var(--surface)); }
[data-mode=dark] { --hero-glow: color-mix(in srgb, var(--rb3) 40%, var(--bg)); }
:root { --hero-glow: color-mix(in srgb, var(--rb3) 60%, var(--surface)); }

/* Pastel pills with a thin dark outline (Rainbow theme), like premium planner badges */
[data-theme=rainbow] .nav-hub > button > svg:first-child { background: var(--hub); box-shadow: inset 0 0 0 1.5px var(--pill-line); color: #17171C; }
[data-mode=dark][data-theme=rainbow] .nav-hub > button > svg:first-child { background: var(--hub); color: #17171C; box-shadow: none; }
[data-theme=rainbow] .sale-tag { background: var(--rb1); color: #17171C; box-shadow: inset 0 0 0 1.5px #17171C; }
[data-theme=rainbow] .main::before { height: 6px; }
[data-theme=rainbow] .hero { background: linear-gradient(135deg, color-mix(in srgb, var(--rb5) 55%, var(--surface)) 0%, color-mix(in srgb, var(--rb6) 45%, var(--surface)) 55%, color-mix(in srgb, var(--rb1) 45%, var(--surface)) 100%); }
[data-mode=dark][data-theme=rainbow] .hero { background: linear-gradient(135deg, color-mix(in srgb, var(--rb5) 18%, var(--surface)) 0%, color-mix(in srgb, var(--rb6) 16%, var(--surface)) 55%, color-mix(in srgb, var(--rb1) 16%, var(--surface)) 100%); }
[data-theme=rainbow] .eyebrow { color: var(--accent-strong); }
[data-theme=rainbow] .boot-logo { -webkit-text-fill-color: initial; background: none; color: var(--accent-strong); }
[data-theme=rainbow] .mood-cell.m1 { background: var(--rb6); } [data-theme=rainbow] .mood-cell.m2 { background: var(--rb5); } [data-theme=rainbow] .mood-cell.m3 { background: var(--rb3); } [data-theme=rainbow] .mood-cell.m4 { background: var(--rb2); } [data-theme=rainbow] .mood-cell.m5 { background: var(--rb1); }
[data-mode=dark][data-theme=rainbow] .mood-cell { color: #17171C; }

/* ── Charts: rings, weekly bars, progress bars and trend lines use the theme's rainbow ── */
:root { --chart1: var(--rb1); --chart2: var(--rb2); --chart3: var(--rb3); --chart4: var(--rb4); --chart5: var(--rb5); --chart6: var(--rb6);
  --chart-ring: var(--rb1); --chart-track: var(--surface-2); --chart-line: var(--accent-strong); }
/* Rainbow: pastel chart colours, a touch deeper than the badges so bars stand out on white */
/* Rainbow: one soft blue for every chart (same as the Mind tile), outlined like the badges */
[data-theme=rainbow] { --chart1: #B3DCEB; --chart2: #B3DCEB; --chart3: #B3DCEB; --chart4: #B3DCEB; --chart5: #B3DCEB; --chart6: #B3DCEB;
  --chart-ring: #9ACFE3; --chart-track: #E6F3F8; --chart-line: #7FBBD3; }
[data-mode=dark][data-theme=rainbow] { --chart-track: #22343C; }
[data-theme=mono] { --chart-ring: var(--ink); --chart-line: var(--ink); }
.wk-bar.c0 { fill: var(--chart1); } .wk-bar.c1 { fill: var(--chart2); } .wk-bar.c2 { fill: var(--chart3); }
.wk-bar.c3 { fill: var(--chart4); } .wk-bar.c4 { fill: var(--chart5); } .wk-bar.c5 { fill: var(--chart6); }
.wk-bar { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; }
.wk-bar.td { stroke: var(--ink); stroke-width: 2; }

.progress span { background: var(--chart5); }
[data-theme=rainbow] .progress span { background: var(--chart1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent); }
.spark polyline { stroke-width: 3.5; }