/* ───────────────── Mellow Days ─────────────────
   Plan gently. Live fully.
   Six colour 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: 'Fraunces', Georgia, serif;
  --font-script: 'Parisienne', 'Snell Roundhand', cursive;
  --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;
}

/* Mellow Peach — the brand theme */
:root, [data-theme=mellow] {
  --bg: #F7F1E8; --surface: #FFFCF7; --surface-2: #F2E9DE; --line: #E8DCCF;
  --ink: #4B3A36; --muted: #7A6962;
  --accent: #F6CDB8; --accent-ink: #7A3F2A; --accent-strong: #B9664A; --on-accent: #FFFFFF;
  --accent-2: #D9D2EE; --accent-2-ink: #54487E;
  --good: #5E8A62; --good-bg: #DDEAD8; --warn: #A26A1F; --warn-bg: #F7E5C3; --bad: #A9473F; --bad-bg: #F6D6D1;
}
[data-theme=lavender] {
  --bg: #F5F2FA; --surface: #FFFEFF; --surface-2: #ECE7F5; --line: #E0D9EE;
  --ink: #3E3652; --muted: #6E6683;
  --accent: #DCD3F0; --accent-ink: #4C3D7D; --accent-strong: #6F5BA8; --on-accent: #FFFFFF;
  --accent-2: #F6D6DF; --accent-2-ink: #8A3D58;
}
[data-theme=sage] {
  --bg: #F2F5EF; --surface: #FDFEFB; --surface-2: #E7EDE2; --line: #D9E2D3;
  --ink: #33413A; --muted: #66756C;
  --accent: #CFDCC8; --accent-ink: #34523A; --accent-strong: #4F6E4F; --on-accent: #FFFFFF;
  --accent-2: #F3E2C7; --accent-2-ink: #7A5622;
}
[data-theme=rose] {
  --bg: #FBF2F2; --surface: #FFFDFD; --surface-2: #F4E5E6; --line: #EDD8DA;
  --ink: #4A3238; --muted: #7D6268;
  --accent: #F2CED3; --accent-ink: #7E3047; --accent-strong: #A4506A; --on-accent: #FFFFFF;
  --accent-2: #E6DDF2; --accent-2-ink: #56457A;
}
[data-theme=sky] {
  --bg: #F1F5F8; --surface: #FDFEFF; --surface-2: #E4ECF2; --line: #D6E1EA;
  --ink: #2F3C47; --muted: #62717D;
  --accent: #CFE0EC; --accent-ink: #285271; --accent-strong: #3F6E8C; --on-accent: #FFFFFF;
  --accent-2: #F3DFD2; --accent-2-ink: #7B4A2E;
}
[data-theme=honey] {
  --bg: #FAF4E6; --surface: #FFFDF7; --surface-2: #F2E8D2; --line: #EADFC6;
  --ink: #45392A; --muted: #76695A;
  --accent: #F5DFAE; --accent-ink: #6C4C14; --accent-strong: #8C6420; --on-accent: #FFFFFF;
  --accent-2: #DDE7D3; --accent-2-ink: #3F5A39;
}

/* Dark mode — same accents, softened for night */
[data-mode=dark] {
  --bg: #1F1A1C; --surface: #292326; --surface-2: #332B2F; --line: #40363A;
  --ink: #F3E9E3; --muted: #B7A8A1;
  --accent: #4E3830; --accent-ink: #F8D3C1; --accent-strong: #F0A887; --on-accent: #2A1912;
  --accent-2: #3D3653; --accent-2-ink: #DCD3F2;
  --good: #9BC79F; --good-bg: #2D3B2E; --warn: #E7BE78; --warn-bg: #3E3322; --bad: #F0A39A; --bad-bg: #432A27;
  --sw-peach: #5C4034; --sw-lavender: #463F5E; --sw-sage: #3C4A3A; --sw-rose: #5A3A42; --sw-sky: #34485A; --sw-honey: #574828; --sw-oat: #4A4036;
  --shadow: 0 1px 2px rgb(0 0 0 / .25), 0 10px 30px -14px rgb(0 0 0 / .5);
}
[data-mode=dark][data-theme=lavender] { --bg: #1C1A22; --surface: #25222D; --surface-2: #2E2A38; --line: #3B3647; --accent: #3D3459; --accent-ink: #DCD3F2; --accent-strong: #B6A6E8; --on-accent: #1E1830; --accent-2: #4A2F3A; --accent-2-ink: #F6D6DF; }
[data-mode=dark][data-theme=sage] { --bg: #191D1A; --surface: #222823; --surface-2: #2B322C; --line: #374038; --accent: #2F4231; --accent-ink: #CFE3C8; --accent-strong: #9DC39D; --on-accent: #162017; --accent-2: #463A26; --accent-2-ink: #F3E2C7; }
[data-mode=dark][data-theme=rose] { --bg: #201A1C; --surface: #2A2225; --surface-2: #342A2E; --line: #42353A; --accent: #4F2E39; --accent-ink: #F6D2D9; --accent-strong: #EB9DB3; --on-accent: #2B141C; --accent-2: #3A3350; --accent-2-ink: #E6DDF2; }
[data-mode=dark][data-theme=sky] { --bg: #191C20; --surface: #21262B; --surface-2: #2A3036; --line: #363E46; --accent: #283E50; --accent-ink: #CFE0EC; --accent-strong: #8FC0E0; --on-accent: #12212D; --accent-2: #47352A; --accent-2-ink: #F3DFD2; }
[data-mode=dark][data-theme=honey] { --bg: #1E1B16; --surface: #28241D; --surface-2: #312C23; --line: #3F382C; --accent: #4A3B1C; --accent-ink: #F5DFAE; --accent-strong: #E2BC6C; --on-accent: #2A1F08; --accent-2: #2F3A2B; --accent-2-ink: #DDE7D3; }

[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; }

.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; align-items: center; gap: .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; 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; gap: .3rem; flex-shrink: 0; }
.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 · Mellow Days 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 { fill: var(--accent-strong); }
.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); }