:root {
  color-scheme: light;
  --canvas: oklch(0.972 0.007 250); --canvas-deep: oklch(0.935 0.012 250); --paper: oklch(0.995 0.003 250);
  --ink: oklch(0.225 0.025 260); --muted: oklch(0.51 0.025 260); --quiet: oklch(0.78 0.016 260);
  --primary: oklch(0.57 0.19 283); --primary-deep: oklch(0.47 0.19 283); --primary-soft: oklch(0.925 0.045 283);
  --teal: oklch(0.69 0.12 184); --teal-soft: oklch(0.94 0.047 184); --coral: oklch(0.72 0.14 29); --coral-soft: oklch(0.945 0.045 29);
  --gold: oklch(0.8 0.14 86); --danger: oklch(0.58 0.2 25);
  --shadow: 0 1px 2px oklch(0.2 0.03 260 / .04), 0 18px 45px oklch(0.2 0.03 260 / .07);
  --radius-sm: .9rem; --radius-md: 1.35rem; --radius-lg: 2rem;
  --app-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), var(--telegram-safe-bottom, 0px));
  --app-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px), var(--telegram-safe-left, 0px));
  --app-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px), var(--telegram-safe-right, 0px));
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: oklch(0.17 0.018 260); --canvas-deep: oklch(0.215 0.021 260); --paper: oklch(0.235 0.022 260);
  --ink: oklch(0.955 0.008 250); --muted: oklch(0.72 0.018 255); --quiet: oklch(0.42 0.022 260);
  --primary: oklch(0.72 0.16 283); --primary-deep: oklch(0.78 0.13 283); --primary-soft: oklch(0.31 0.075 283);
  --teal: oklch(0.75 0.12 184); --teal-soft: oklch(0.29 0.055 184); --coral: oklch(0.76 0.13 29); --coral-soft: oklch(0.3 0.06 29);
  --shadow: 0 1px 1px oklch(0 0 0 / .18), 0 20px 55px oklch(0 0 0 / .22);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { width: 100%; min-height: 100%; overflow-x: clip; background: var(--canvas); scroll-behavior: smooth; }
body { width: 100%; min-width: 0; min-height: 100%; margin: 0; overflow-x: clip; color: var(--ink); background: var(--canvas); }
button, input, textarea, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
button:active { scale: .96; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
a { color: var(--primary-deep); text-underline-position: from-font; text-decoration-thickness: from-font; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; }
p { text-wrap: pretty; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.skip-link { position: fixed; z-index: 100; inset: .75rem auto auto .75rem; transform: translateY(-5rem); padding: .7rem 1rem; border-radius: .75rem; color: white; background: var(--primary-deep); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 .4rem; color: var(--muted); font-size: .72rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }

.auth-screen { display: grid; min-height: 100vh; min-height: 100dvh; background: var(--paper); }
.auth-art { position: relative; min-height: 16rem; overflow: hidden; background: radial-gradient(circle at 18% 20%, var(--coral), transparent 33%), radial-gradient(circle at 86% 78%, var(--teal), transparent 31%), linear-gradient(145deg, oklch(0.36 0.16 282), oklch(0.22 0.11 264)); }
.orbit { position: absolute; border: 1px solid oklch(1 0 0 / .18); border-radius: 50%; }
.orbit-one { width: 25rem; height: 25rem; inset: -12rem auto auto -8rem; }.orbit-two { width: 20rem; height: 20rem; inset: auto -8rem -10rem auto; }
.home-mark { position: absolute; inset: 50% auto auto 50%; width: 11rem; height: 8rem; transform: translate(-50%, -50%); }
.home-mark span { position: absolute; width: 7rem; height: 7rem; border-radius: 50%; background: oklch(0.98 0.01 80 / .95); box-shadow: 0 18px 60px oklch(0 0 0 / .16); }
.home-mark span:nth-child(1) { inset-inline-start: 0; }.home-mark span:nth-child(2) { inset-inline-end: 0; background: oklch(0.9 0.055 29); }.home-mark span:nth-child(3) { width: 3.5rem; height: 3.5rem; inset: 3.5rem auto auto 3.75rem; background: oklch(0.82 0.13 86); }
.auth-card { align-self: end; padding: 2rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--paper); }
.auth-card h1 { max-width: 13ch; font-size: clamp(2.4rem, 11vw, 4.7rem); letter-spacing: -.065em; }
.auth-copy { max-width: 36rem; margin: 1rem 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.feature-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.feature-row span { padding: .55rem .75rem; border-radius: 999px; color: var(--primary-deep); background: var(--primary-soft); font-size: .76rem; font-weight: 700; }
.telegram-login { display: grid; gap: .75rem; min-height: 3.4rem; }.telegram-fallback { max-width: 25rem; }.auth-help { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; }

.app-shell { width: 100%; min-width: 0; min-height: 100vh; }.sidebar { display: none; }
.app-column { width: min(100%, 76rem); min-width: 0; max-width: 100%; margin: auto; padding-block: calc(1rem + var(--app-safe-top)) calc(7.25rem + var(--app-safe-bottom)); padding-inline: calc(1rem + var(--app-safe-left)) calc(1rem + var(--app-safe-right)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; margin-bottom: 1rem; }
.topbar h1 { font-size: clamp(1.65rem, 7vw, 2.35rem); letter-spacing: -.045em; }
.topbar-actions { display: flex; gap: .5rem; }
.icon-button { display: grid; place-items: center; width: 2.9rem; min-width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: .95rem; color: var(--ink); background: var(--paper); box-shadow: 0 1px 2px oklch(0.2 0.03 260 / .08); transition-property: scale, background-color; transition-duration: 140ms; }
.icon-button svg { width: 1.25rem; height: 1.25rem; }
main, #view-root { min-width: 0; max-width: 100%; } main { min-height: 60vh; outline: 0; } main:focus-visible { outline: 0; }.view-stack { display: grid; min-width: 0; gap: 1.5rem; }.dashboard-grid { display: grid; gap: 1.5rem; }

.hero-card { position: relative; display: grid; gap: 1.5rem; overflow: hidden; padding: 1.35rem; border-radius: var(--radius-lg); color: white; background: radial-gradient(circle at 96% 10%, oklch(0.72 0.14 29 / .75), transparent 34%), linear-gradient(135deg, oklch(0.42 0.18 282), oklch(0.3 0.14 258)); box-shadow: 0 24px 60px oklch(0.35 0.16 275 / .22); }
.hero-card .eyebrow, .hero-card p { color: oklch(0.92 0.025 280); }.hero-card h2 { max-width: 15ch; font-size: clamp(2rem, 9vw, 3.9rem); letter-spacing: -.065em; }.hero-card p { max-width: 38rem; margin: .85rem 0 0; line-height: 1.5; }
.hero-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; align-self: end; }
.hero-metrics button { min-width: 0; min-height: 5.8rem; padding: 1rem; border: 1px solid oklch(1 0 0 / .16); border-radius: 1.35rem; color: white; background: oklch(1 0 0 / .11); backdrop-filter: blur(12px); text-align: start; }
.hero-metrics strong { display: block; overflow: hidden; font-size: clamp(1rem, 5vw, 1.75rem); letter-spacing: -.045em; text-overflow: ellipsis; white-space: nowrap; }.hero-metrics span { display: block; margin-top: .3rem; color: oklch(0.92 0.02 280); font-size: .75rem; }

.overview-page { gap: 1rem; }.overview-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem .1rem .2rem; }.overview-intro h2 { max-width: 18ch; font-size: clamp(1.55rem, 7vw, 2.4rem); letter-spacing: -.045em; }.overview-intro > div > p:last-child { margin: .45rem 0 0; color: var(--muted); font-size: .82rem; }.overview-avatars { display: flex; flex: 0 0 auto; padding-inline-end: .25rem; }.overview-avatars span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-inline-end: -.45rem; border: 3px solid var(--canvas); border-radius: 50%; color: white; background: var(--primary); font-size: .75rem; font-weight: 800; }.overview-avatars span:nth-child(2n) { background: var(--coral); }.overview-primary-grid, .overview-summary-grid { display: grid; gap: .75rem; }.overview-card, .summary-card { min-width: 0; border: 0; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); text-align: start; }.overview-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 7rem; padding: 1rem; border-radius: var(--radius-md); }.overview-card h3 { font-size: 1rem; }.overview-card div > p:last-child { margin: .4rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }.summary-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; color: var(--primary-deep); background: var(--primary-soft); }.summary-icon.teal { color: var(--teal); background: var(--teal-soft); }.summary-icon.coral { color: var(--coral); background: var(--coral-soft); }.summary-icon.gold { color: oklch(.55 .13 75); background: oklch(.94 .06 85); }.summary-icon svg { width: 1.25rem; height: 1.25rem; }.summary-arrow { color: var(--muted); font-size: 1.25rem; }.overview-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.summary-card { display: grid; align-content: start; gap: .55rem; min-height: 8.8rem; padding: .85rem; border-radius: var(--radius-md); }.summary-card .summary-icon { width: 2.35rem; height: 2.35rem; }.summary-card strong { margin-top: .15rem; font-size: .82rem; }.summary-card small { overflow: hidden; color: var(--muted); font-size: .68rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.mini-progress { height: .35rem; overflow: hidden; border-radius: 999px; background: var(--canvas-deep); }.mini-progress i { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--coral)); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }.section-head h2 { font-size: 1.25rem; letter-spacing: -.025em; }
.text-button { min-height: 2.75rem; padding: .25rem 0; border: 0; color: var(--primary-deep); background: transparent; font-size: .83rem; font-weight: 740; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 3.2rem; padding: .75rem 1rem; border: 0; border-radius: 1rem; font-weight: 760; transition-property: scale, background-color, color; transition-duration: 140ms; }
.button svg { width: 1.1rem; height: 1.1rem; }.button-primary { color: white; background: var(--primary); box-shadow: 0 10px 24px oklch(0.45 0.18 283 / .2); }.button-primary:hover { background: var(--primary-deep); }.button-secondary { color: var(--primary-deep); background: var(--primary-soft); }.button-quiet { color: var(--muted); background: transparent; }.button-inline { width: auto; min-height: 2.8rem; padding-inline: .85rem; font-size: .8rem; white-space: nowrap; }

.entry-list, .timeline, .plan-grid, .wish-grid, .note-grid { display: grid; gap: .75rem; }
.entry-card, .plan-card, .wish-card, .note-card, .calendar-card, .settings-card, .empty-card, .member-card { background: var(--paper); box-shadow: var(--shadow); }
.entry-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; min-height: 5.2rem; padding: .85rem; border-radius: var(--radius-md); }.entry-card.is-done { opacity: .58; }.entry-card.is-done h3 { text-decoration: line-through; }
.entry-main { min-width: 0; }.entry-main h3 { font-size: .98rem; }.entry-meta { display: flex; flex-wrap: wrap; gap: .25rem .65rem; margin-top: .38rem; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.kind-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .95rem; color: var(--primary-deep); background: var(--primary-soft); }.kind-icon.event { color: var(--teal); background: var(--teal-soft); }.kind-icon.reminder { color: var(--coral); background: var(--coral-soft); }.kind-icon svg { width: 1.25rem; height: 1.25rem; }
.complete-button { display: grid; place-items: center; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: 0; border: 1.5px solid var(--quiet); border-radius: 50%; color: transparent; background: transparent; }.complete-button[aria-pressed="true"] { border-color: var(--teal); color: var(--paper); background: var(--teal); }.complete-button svg { width: 1rem; height: 1rem; stroke-width: 2.4; }
.card-actions { display: flex; gap: .35rem; align-items: center; }.card-action { display: grid; place-items: center; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: var(--canvas); }.card-action svg { width: 1.05rem; height: 1.05rem; }.push-end { margin-inline-start: auto; }

.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }.quick-card { min-height: 8.5rem; padding: 1rem; border: 0; border-radius: var(--radius-md); color: var(--ink); text-align: start; box-shadow: var(--shadow); }.quick-card.teal { background: var(--teal-soft); }.quick-card.coral { background: var(--coral-soft); }.quick-card svg { width: 1.35rem; height: 1.35rem; }.quick-card strong { display: block; margin-top: 1.7rem; }.quick-card span { display: block; margin-top: .3rem; color: var(--muted); font-size: .75rem; line-height: 1.4; }

.calendar-card { min-width: 0; padding: 1rem; overflow: hidden; border-radius: var(--radius-lg); }.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }.calendar-head h2 { font-size: 1.15rem; }.week-controls { display: flex; gap: .35rem; }.week-controls .icon-button { width: 2.55rem; min-width: 2.55rem; height: 2.55rem; font-size: 1.45rem; box-shadow: none; background: var(--canvas); }.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; width: 100%; min-width: 0; }.day-chip { position: relative; min-width: 0; min-height: 4.4rem; padding: .55rem .1rem; border-radius: .9rem; color: var(--muted); background: var(--canvas); text-align: center; }.day-chip span { display: block; overflow: hidden; font-size: .6rem; text-transform: uppercase; }.day-chip strong { display: block; margin-top: .32rem; color: var(--ink); font-size: .9rem; font-variant-numeric: tabular-nums; }.day-chip i { display: block; width: .35rem; height: .35rem; margin: .35rem auto 0; border-radius: 50%; background: var(--coral); }.day-chip.today { color: oklch(0.93 0.02 280); background: var(--primary); }.day-chip.today strong { color: white; }.calendar-add { margin-top: .8rem; min-height: 2.85rem; box-shadow: none; }

.savings-hero { position: relative; overflow: hidden; padding: 1.35rem; border-radius: var(--radius-lg); color: oklch(0.24 0.04 86); background: linear-gradient(135deg, oklch(0.91 0.09 86), oklch(0.83 0.14 78)); box-shadow: 0 22px 55px oklch(0.7 0.12 78 / .2); }.savings-hero .eyebrow { color: oklch(0.42 0.08 70); }.savings-hero h2 { max-width: calc(100% - 5rem); font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }.savings-hero h2 span { display: block; margin-top: .25rem; font-size: .9rem; font-weight: 600; letter-spacing: 0; }.savings-hero p { margin: .7rem 0 0; }.piggy { position: absolute; inset: 1.2rem 1rem auto auto; width: 4.3rem; height: 3.6rem; border-radius: 48% 52% 45% 55%; background: oklch(0.98 0.025 80 / .8); }.piggy span { position: absolute; inset: .45rem auto auto 1rem; }.piggy i { position: absolute; width: 1.1rem; height: 1.1rem; inset: -.25rem .5rem auto auto; border-radius: 70% 30%; background: inherit; transform: rotate(-25deg); }.budget-bar { height: .65rem; overflow: hidden; margin-top: 1.2rem; border-radius: 999px; background: oklch(0.25 0.03 260 / .13); }.budget-bar span { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--coral)); }
.plan-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }.plan-card { padding: 1.1rem; border-radius: var(--radius-md); }.plan-top { display: flex; gap: .8rem; align-items: center; }.plan-symbol { display: grid; place-items: center; flex: 0 0 2.8rem; height: 2.8rem; border-radius: .9rem; color: var(--primary-deep); background: var(--primary-soft); font-size: 1.3rem; }.plan-amount { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: 1.3rem; font-variant-numeric: tabular-nums; }.plan-amount strong { font-size: 1.3rem; }.plan-amount span { color: var(--muted); font-size: .75rem; }.plan-card .button { margin-top: 1rem; }

.wish-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }.wish-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; min-height: 8rem; padding: .9rem; overflow: hidden; border: 1px solid color-mix(in oklch, var(--quiet) 52%, transparent); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--paper), color-mix(in oklch, var(--coral-soft) 28%, var(--paper))); transition: transform 160ms ease-out, box-shadow 160ms ease-out; }.wish-card:hover { transform: translateY(-2px); }.wish-card.is-bought { opacity: .58; }.wish-art { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border-radius: .85rem; color: var(--coral); background: var(--coral-soft); }.wish-art svg { width: 1.15rem; height: 1.15rem; }.wish-main { display: flex; min-width: 0; flex-direction: column; }.wish-main .eyebrow { font-size: .6rem; }.wish-main h3 { margin-top: .18rem; overflow-wrap: anywhere; font-size: 1.05rem; line-height: 1.25; }.wish-description { display: -webkit-box; min-height: 2.35em; overflow: hidden; margin: .4rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.wish-description.is-empty { opacity: .62; }.wish-meta { display: flex; flex-wrap: wrap; gap: .45rem .6rem; align-items: center; min-height: 2.35rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--canvas-deep); color: var(--muted); font-size: .7rem; }.wish-meta strong { color: var(--ink); font-size: .9rem; font-variant-numeric: tabular-nums; }.wish-meta a { display: inline-flex; align-items: center; gap: .25rem; min-height: 2rem; padding: .35rem .6rem; border-radius: 999px; color: var(--primary-deep); background: var(--primary-soft); font-weight: 750; text-decoration: none; }.wish-meta a i { font-style: normal; }.wish-card .card-actions { gap: .25rem; }.wish-card .card-action, .wish-card .complete-button { width: 2.35rem; min-width: 2.35rem; height: 2.35rem; }
.note-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }.note-card { min-height: 11rem; padding: 1.1rem; border-radius: var(--radius-md); }.note-card:nth-child(3n+1) { background: var(--primary-soft); }.note-card:nth-child(3n+2) { background: var(--teal-soft); }.note-card:nth-child(3n) { background: var(--coral-soft); }.note-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.note-head .card-action { width: 2.35rem; min-width: 2.35rem; height: 2.35rem; background: color-mix(in oklch, var(--paper) 58%, transparent); }.note-card > p:last-child { display: -webkit-box; overflow: hidden; margin: .7rem 0 0; color: var(--muted); font-size: .83rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.empty-card { grid-column: 1 / -1; padding: 1.5rem; border-radius: var(--radius-md); text-align: center; }.empty-symbol { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto .8rem; border-radius: 50%; color: var(--primary-deep); background: var(--primary-soft); font-size: 1.5rem; }.empty-card p { max-width: 30rem; margin: .5rem auto 1rem; color: var(--muted); line-height: 1.5; }.empty-card .button { max-width: 20rem; }

.settings-layout { display: grid; gap: 1rem; max-width: 54rem; }.settings-card { padding: 1.1rem; border-radius: var(--radius-md); }.settings-head { display: flex; gap: .85rem; margin-bottom: 1.2rem; }.settings-head p { margin: .35rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }.settings-icon { display: grid; place-items: center; flex: 0 0 2.7rem; height: 2.7rem; border-radius: .9rem; color: var(--primary-deep); background: var(--primary-soft); }.settings-grid { display: grid; gap: .8rem; }.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; padding: 0; border: 0; }.theme-picker legend { margin-bottom: .45rem; font-size: .82rem; font-weight: 740; }.theme-option { position: relative; display: grid; gap: .5rem; min-width: 0; cursor: pointer; }.theme-option input { position: absolute; opacity: 0; }.theme-preview { display: block; height: 3.7rem; border: 2px solid transparent; border-radius: .85rem; background: oklch(.96 .005 250); box-shadow: inset 0 -1.3rem 0 oklch(.84 .01 250); }.theme-preview.dark { background: oklch(.19 .02 260); box-shadow: inset 0 -1.3rem 0 oklch(.31 .02 260); }.theme-preview.system { background: linear-gradient(90deg, oklch(.96 .005 250) 50%, oklch(.19 .02 260) 50%); box-shadow: none; }.theme-option input:checked + .theme-preview { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--paper); }.theme-option strong { font-size: .72rem; }.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.4rem; margin-top: .65rem; cursor: pointer; font-size: .85rem; font-weight: 650; }.toggle-row input { position: absolute; opacity: 0; }.toggle-row i { position: relative; flex: 0 0 3rem; height: 1.75rem; border-radius: 999px; background: var(--canvas-deep); transition: background-color 150ms ease-out; }.toggle-row i::after { content: ""; position: absolute; width: 1.35rem; height: 1.35rem; inset: .2rem auto auto .2rem; border-radius: 50%; background: white; box-shadow: 0 2px 5px oklch(0 0 0 / .2); transition: transform 150ms ease-out; }.toggle-row input:checked + i { background: var(--primary); }.toggle-row input:checked + i::after { transform: translateX(1.25rem); }.toggle-row input:focus-visible + i { outline: 2px solid var(--primary); outline-offset: 3px; }.settings-actions { display: grid; gap: .4rem; }

.field { display: grid; gap: .4rem; }.field label { font-size: .8rem; font-weight: 740; }.field label span { color: var(--muted); font-weight: 450; }.field input, .field textarea, .field select { width: 100%; min-height: 3.15rem; padding: .78rem .85rem; border: 1px solid transparent; border-radius: var(--radius-sm); outline: 0; color: var(--ink); background: var(--canvas); font-size: 1rem; line-height: 1.4; }.field textarea { resize: vertical; }.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }.field input[aria-invalid="true"] { border-color: var(--danger); }.field-error { min-height: 1em; margin: 0; color: var(--danger); font-size: .75rem; }.form-stack { display: grid; gap: 1rem; margin-top: 1.2rem; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.sheet { width: min(calc(100% - 1rem), 36rem); max-height: min(90vh, 48rem); max-height: min(90dvh, 48rem); margin: auto auto 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: var(--ink); background: var(--paper); overscroll-behavior: contain; box-shadow: 0 -20px 70px oklch(0 0 0 / .2); }.sheet::backdrop { background: oklch(0.12 0.02 260 / .5); backdrop-filter: blur(5px); }.sheet-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }.sheet-head .icon-button { font-size: 1.6rem; }.compact-sheet { text-align: center; }.compact-sheet .sheet-head { text-align: start; }.invite-illustration { display: flex; align-items: center; justify-content: center; margin: 1.6rem 0 1rem; }.invite-illustration span { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; color: white; background: var(--primary); font-weight: 800; box-shadow: 0 0 0 7px var(--paper); }.invite-illustration span:last-child { margin-inline-start: -.7rem; background: var(--coral); }.invite-illustration i { width: 1.8rem; height: 3px; background: var(--gold); }.dialog-copy { max-width: 30rem; margin: 0 auto 1.25rem; color: var(--muted); line-height: 1.55; }

.bottom-nav { position: fixed; z-index: 20; inset: auto 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.7rem, 1fr); overflow-x: auto; padding-block: .7rem calc(.6rem + var(--app-safe-bottom)); padding-inline: calc(.45rem + var(--app-safe-left)) calc(.45rem + var(--app-safe-right)); background: color-mix(in oklch, var(--paper) 94%, transparent); box-shadow: 0 -1px 0 oklch(0.2 0.02 260 / .08), 0 -18px 42px oklch(0.2 0.03 260 / .08); backdrop-filter: blur(20px); scrollbar-width: none; }.nav-button { display: grid; grid-template-rows: 2.75rem auto; place-items: center; gap: .42rem; min-height: 4.2rem; padding: 0 .2rem; border: 0; border-radius: 1rem; color: var(--muted); background: transparent; font-size: .6rem; font-weight: 680; transition-property: scale, color; transition-duration: 140ms; }.nav-button[aria-current="page"] { color: var(--primary-deep); }.nav-button svg { width: 2.75rem; height: 2.75rem; padding: .72rem; border-radius: .9rem; background: var(--canvas-deep); stroke-width: 1.85; transition-property: color, background-color, box-shadow; transition-duration: 140ms; }.nav-button[aria-current="page"] svg { color: var(--primary-deep); background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 22%, transparent); }
.toast { position: fixed; z-index: 80; inset: auto 1rem calc(5.8rem + env(safe-area-inset-bottom)); transform: translateY(1.5rem); max-width: 30rem; margin-inline: auto; padding: .9rem 1rem; border-radius: 1rem; color: var(--paper); background: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition-property: opacity, transform; transition-duration: 180ms; }.toast.is-visible { transform: translateY(0); opacity: 1; }
.onboarding-card { max-width: 38rem; margin: 8vh auto 0; padding: 1.35rem; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); text-align: center; }.onboarding-card .home-mark { position: relative; inset: auto; width: 7rem; height: 5rem; margin: 0 auto 1rem; transform: none; }.onboarding-card .home-mark span { width: 5rem; height: 5rem; }.onboarding-card .home-mark span:nth-child(3) { width: 2.5rem; height: 2.5rem; inset: 2.5rem auto auto 2.25rem; }.onboarding-card p { color: var(--muted); line-height: 1.5; }.onboarding-card form { display: grid; gap: .75rem; margin-top: 1rem; }
:root[data-density="compact"] .entry-card { min-height: 4.4rem; padding: .65rem; }:root[data-density="compact"] .view-stack { gap: 1rem; }:root[data-density="compact"] .plan-card, :root[data-density="compact"] .wish-card, :root[data-density="compact"] .note-card { padding: .8rem; }
:root[data-density="compact"] .topbar { min-height: 3.7rem; margin-bottom: .65rem; }:root[data-density="compact"] .overview-card { min-height: 5.8rem; padding: .75rem; }:root[data-density="compact"] .summary-card { min-height: 7.2rem; padding: .65rem; }:root[data-density="compact"] .calendar-card, :root[data-density="compact"] .settings-card { padding: .8rem; }:root[data-density="compact"] .day-chip { min-height: 3.8rem; padding-block: .42rem; }:root[data-density="compact"] .form-stack { gap: .7rem; }

@media (min-width: 42rem) {
  .auth-screen { grid-template-columns: minmax(19rem, 1fr) minmax(25rem, 38rem); }.auth-art { min-height: 100vh; }.auth-card { display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(2rem, 6vw, 5rem); border-radius: var(--radius-lg) 0 0 var(--radius-lg); }.app-column { padding-inline: calc(2rem + var(--app-safe-left)) calc(2rem + var(--app-safe-right)); }.hero-card { grid-template-columns: minmax(0, 1fr) minmax(17rem, .7fr); min-height: 19rem; padding: 2rem; }.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sheet { margin: auto; border-radius: var(--radius-lg); }.toast { inset-block-end: 2rem; }
}
@media (min-width: 64rem) {
  .app-shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); }.sidebar { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; height: 100vh; padding: 1.4rem 1rem; border-inline-end: 1px solid var(--canvas-deep); background: color-mix(in oklch, var(--paper) 80%, transparent); backdrop-filter: blur(20px); }.brand { display: flex; align-items: center; gap: .7rem; min-height: 2.8rem; padding: .6rem; border: 0; color: var(--ink); background: transparent; font-weight: 820; }.brand-mark { position: relative; width: 2rem; height: 1.5rem; }.brand-mark i { position: absolute; width: 1.5rem; height: 1.5rem; border-radius: 50%; }.brand-mark i:nth-child(1) { inset-inline-start: 0; background: var(--primary); }.brand-mark i:nth-child(2) { inset-inline-end: 0; background: var(--coral); }.brand-mark i:nth-child(3) { width: .75rem; inset-inline-start: .625rem; background: var(--gold); }.side-nav { display: grid; gap: .3rem; margin-top: 2rem; }.side-nav .nav-button { display: flex; justify-content: start; gap: .8rem; min-height: 3rem; padding: .75rem; font-size: .84rem; }.sidebar-family { margin-top: auto; }.member-card { padding: .9rem; border-radius: var(--radius-md); }.member-avatars { display: flex; margin-top: .75rem; }.member-avatars span { display: grid; place-items: center; width: 2rem; height: 2rem; margin-inline-end: -.3rem; border: 2px solid var(--paper); border-radius: 50%; color: white; background: var(--primary); font-size: .7rem; font-weight: 750; }.member-avatars span:nth-child(2n) { background: var(--coral); }.app-column { width: auto; padding: 2rem 2.5rem 4rem; }.bottom-nav { display: none; }.dashboard-grid { grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr); align-items: start; }.settings-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }.settings-card:first-child, .settings-actions { grid-column: 1 / -1; }
}
@media (max-width: 21.25rem) { .section-head { align-items: start; }.button-inline { width: 2.8rem; padding: 0; font-size: 0; }.button-inline svg { width: 1.2rem; height: 1.2rem; }.form-grid { grid-template-columns: 1fr; }.theme-picker { grid-template-columns: 1fr; }.theme-option { grid-template-columns: 4rem 1fr; align-items: center; }.theme-preview { height: 2.6rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } button:active { scale: 1; } }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; }.hero-card, .button-primary, .day-chip.today { forced-color-adjust: none; } }

/* Compact, consistent mobile interaction layer. */
.theme-picker-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet { width: min(calc(100% - .75rem), 36rem); max-height: min(calc(var(--app-height, 100dvh) * .76), 38rem); padding: .9rem .9rem calc(.75rem + env(safe-area-inset-bottom)); overflow: hidden; border-radius: 1.7rem 1.7rem 0 0; }
.sheet:not([open]) { display: none; }
.sheet-head h2 { font-size: 1.35rem; }.sheet-head .icon-button { font-size: 1.5rem; }
.create-form { max-height: calc(min(calc(var(--app-height, 100dvh) * .76), 38rem) - 5rem); margin-top: .7rem; padding: .1rem .1rem 0; overflow-y: auto; overscroll-behavior: contain; }
.entry-fields { display: grid; gap: .7rem; }.picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.picker-chip { position: relative; display: grid; gap: .12rem; min-width: 0; min-height: 3.3rem; padding: .6rem .75rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--canvas); }
.picker-chip span { color: var(--muted); font-size: .68rem; }.picker-chip strong { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.picker-chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .001; font-size: 16px; }
.details-disclosure { border: 0; }.details-disclosure summary { display: flex; align-items: center; min-height: 2.75rem; color: var(--primary-deep); cursor: pointer; font-size: .8rem; font-weight: 750; list-style: none; }.details-disclosure summary::-webkit-details-marker { display: none; }.details-disclosure summary::before { content: "+"; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-inline-end: .45rem; border-radius: 50%; background: var(--primary-soft); }.details-disclosure[open] summary::before { content: "−"; }.details-disclosure .field { margin-top: .3rem; }
.sheet-action { position: sticky; z-index: 2; bottom: 0; padding-top: .55rem; background: linear-gradient(transparent, var(--paper) .45rem); }
.bottom-nav { grid-auto-flow: initial; grid-auto-columns: initial; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; min-width: 0; overflow: hidden; overscroll-behavior-inline: contain; padding-inline: .35rem; scrollbar-width: none; }
.bottom-nav .nav-button { min-width: 0; padding-inline: .1rem; }.bottom-nav .nav-button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 42rem) { .overview-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sheet { border-radius: var(--radius-lg); } }
@media (max-width: 23rem) { .app-column { padding-inline: .7rem; }.overview-intro h2 { font-size: 1.4rem; }.overview-avatars span { width: 2.15rem; height: 2.15rem; }.summary-card { min-height: 8rem; padding: .65rem; }.entry-card { grid-template-columns: auto minmax(0, 1fr); }.entry-card .card-actions { grid-column: 1 / -1; justify-content: end; }.bottom-nav .nav-button { font-size: .55rem; } }

.telegram-login-button { max-width: 25rem; }.login-request { display: grid; gap: .75rem; max-width: 25rem; }.verification-code { display: grid; gap: .3rem; padding: 1rem; border: 1px solid color-mix(in oklch, var(--primary) 28%, transparent); border-radius: var(--radius-md); background: var(--primary-soft); text-align: center; }.verification-code span { color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.verification-code strong { color: var(--primary-deep); font-size: 1.85rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }.verification-code small { color: var(--muted); font-size: .72rem; line-height: 1.45; }.login-request > p { margin: 0; color: var(--muted); font-size: .76rem; text-align: center; }
@media (max-width: 41.99rem) { .auth-screen { grid-template-rows: 9rem minmax(0, 1fr); }.auth-art { min-height: 9rem; }.auth-card { align-self: stretch; padding: 1.25rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }.auth-card h1 { max-width: 15ch; font-size: clamp(2rem, 9vw, 2.65rem); }.auth-copy { margin: .7rem 0; font-size: .9rem; }.feature-row { display: none; }.telegram-login { margin-top: 1rem; }.verification-code { padding: .8rem; }.verification-code strong { font-size: 1.65rem; } }

.settings-card, .settings-grid, .field { min-width: 0; }
.field input, .field textarea, .field select { min-width: 0; max-width: 100%; }
.settings-time-field { display: grid; min-width: 0; gap: .4rem; color: var(--ink); font-size: .8rem; font-weight: 740; cursor: pointer; }
.settings-time-control { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; min-height: 3.15rem; padding: .78rem .85rem; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--canvas); }
.settings-time-control strong { overflow: hidden; font-size: 1rem; font-weight: 520; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.settings-time-control i { color: var(--muted); font-size: 1.15rem; font-style: normal; }
.settings-time-control input { position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; opacity: .001; font-size: 16px; cursor: pointer; }
.settings-time-field:focus-within .settings-time-control { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.bottom-nav { padding-inline: calc(.45rem + var(--app-safe-left)) calc(.45rem + var(--app-safe-right)); }
.calendar-toolbar { display: flex; align-items: end; justify-content: space-between; gap: .75rem; }
.calendar-toolbar h2 { font-size: 1.5rem; }
.month-calendar { padding: 0; border: 1px solid var(--canvas-deep); }
.month-calendar .calendar-head { margin: 0; padding: .9rem 1rem; border-bottom: 1px solid var(--canvas-deep); }
.month-calendar .calendar-head h2 { font-size: 1.1rem; text-transform: capitalize; }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-weekdays { padding: .7rem .55rem .25rem; color: var(--muted); font-size: .62rem; font-weight: 760; text-align: center; text-transform: uppercase; }
.month-grid { gap: .18rem; padding: .2rem .55rem .8rem; }
.month-day { position: relative; display: grid; place-items: center; align-content: center; gap: .22rem; min-width: 0; min-height: 3.3rem; padding: .25rem; border: 0; border-radius: .85rem; color: var(--muted); background: transparent; font-variant-numeric: tabular-nums; transition-property: scale, color, background-color; transition-duration: 140ms; }
.month-day strong { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; font-size: .82rem; }
.month-day span { width: .3rem; height: .3rem; border-radius: 50%; background: var(--coral); }
.month-day.outside { opacity: .35; }.month-day.today strong { color: white; background: var(--primary); }.month-day.selected { color: var(--primary-deep); background: var(--primary-soft); }.month-day.selected:not(.today) strong { color: var(--primary-deep); }
.selected-day-card { overflow: hidden; border: 1px solid var(--canvas-deep); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); }
.selected-day-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--canvas-deep); }.selected-day-head h2 { font-size: 1rem; }.selected-day-head > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--primary-deep); background: var(--primary-soft); font-size: .75rem; font-weight: 780; }
.selected-day-card .timeline { padding: .75rem; }.calendar-empty-day { padding: 1.35rem .5rem; color: var(--muted); text-align: center; }.calendar-empty-day p { margin: .35rem 0 0; font-size: .8rem; }.recurrence-badge { color: var(--primary-deep); font-weight: 720; }

.note-search { display: flex; align-items: center; gap: .65rem; min-height: 3.15rem; padding: .7rem .85rem; border: 1px solid var(--canvas-deep); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow); }.note-search > span { color: var(--muted); font-size: 1.25rem; }.note-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 1rem; }
.note-filters { display: flex; gap: .45rem; margin-top: .65rem; padding-bottom: .15rem; overflow-x: auto; scrollbar-width: none; }.note-filters button { min-height: 2.3rem; padding: .4rem .7rem; border: 0; border-radius: 999px; color: var(--muted); background: var(--canvas-deep); font-size: .72rem; font-weight: 700; white-space: nowrap; }.note-filters button[aria-pressed="true"] { color: var(--primary-deep); background: var(--primary-soft); }
.note-section .section-head { align-items: center; }.note-section .section-head h2 { font-size: 1rem; }.note-section .section-head > span { color: var(--muted); font-size: .75rem; }.note-card small { display: block; margin-top: 1rem; color: var(--muted); font-size: .66rem; }.note-form-options { display: grid; gap: .65rem; }
.note-card.category-important { background: var(--coral-soft); }.note-card.category-home { background: var(--teal-soft); }.note-card.category-shopping { background: color-mix(in oklch, var(--gold) 24%, var(--paper)); }.note-card.category-documents { background: var(--primary-soft); }
@media (max-width: 23rem) { .app-column { padding-inline: calc(.7rem + var(--app-safe-left)) calc(.7rem + var(--app-safe-right)); }.month-grid { gap: .08rem; padding-inline: .35rem; }.month-day { min-height: 2.9rem; }.month-day strong { width: 1.65rem; height: 1.65rem; } }
.notes-page > *, .note-section, .note-grid, .note-card { min-width: 0; max-width: 100%; }
@media (max-width: 26rem) { .section-head .button-inline { width: 2.8rem; min-width: 2.8rem; padding: 0; font-size: 0; }.section-head .button-inline svg { width: 1.2rem; height: 1.2rem; } }

/* Release 15: family UI organized with the proven CRM rhythm. */
:root {
  --radius-sm: .75rem;
  --radius-md: .95rem;
  --radius-lg: 1.15rem;
  --shadow: 0 1px 2px oklch(.2 .025 260 / .04), 0 8px 24px oklch(.2 .025 260 / .055);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-column { padding-inline: calc(.875rem + var(--app-safe-left)) calc(.875rem + var(--app-safe-right)); }
.topbar { min-height: 3.75rem; margin-bottom: 1.1rem; }
.topbar h1 { font-size: clamp(1.65rem, 7vw, 2.15rem); line-height: 1.1; letter-spacing: -.035em; }
.eyebrow { font-size: .66rem; line-height: 1.3; letter-spacing: .1em; }
.view-stack { gap: 1rem; }
.section-head { align-items: center; margin-bottom: .75rem; }
.section-head h2 { font-size: 1.18rem; line-height: 1.2; }
.button { min-height: 2.875rem; border-radius: .75rem; font-size: .82rem; box-shadow: none; }
.button-inline { min-height: 2.75rem; }
.field { gap: .42rem; }
.field label { font-size: .75rem; line-height: 1.35; }
.field input, .field textarea, .field select { min-height: 2.875rem; padding: .7rem .75rem; border-color: var(--canvas-deep); border-radius: .7rem; background: var(--paper); font-size: 1rem; }
.sheet { border-radius: 1.15rem 1.15rem 0 0; }
.sheet-head h2 { line-height: 1.15; }

.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: .48rem calc(.5rem + var(--app-safe-bottom)); border-top: 1px solid var(--canvas-deep); background: color-mix(in oklch, var(--paper) 97%, transparent); box-shadow: 0 -10px 30px oklch(.2 .02 260 / .055); }
.bottom-nav .nav-button { grid-template-rows: 2.3rem auto; gap: .22rem; min-height: 3.5rem; border-radius: .75rem; font-size: .57rem; font-weight: 690; }
.bottom-nav .nav-button svg { width: 2.3rem; height: 2.3rem; padding: .58rem; border-radius: .72rem; background: var(--canvas-deep); }
.bottom-nav .nav-button[aria-current="page"] svg { background: var(--primary-soft); }
.more-sheet { width: min(calc(100% - 1rem), 31rem); padding-bottom: calc(.9rem + var(--app-safe-bottom)); }
.more-nav { display: grid; gap: .55rem; margin-top: .9rem; }
.more-nav > button { display: grid; min-height: 3.9rem; grid-template-columns: 2.55rem minmax(0, 1fr) 1rem; align-items: center; gap: .7rem; padding: .55rem .65rem; border: 1px solid var(--canvas-deep); border-radius: .8rem; color: var(--ink); background: var(--canvas); text-align: start; }
.more-nav > button[aria-current="page"] { border-color: color-mix(in oklch, var(--primary) 35%, var(--canvas-deep)); background: var(--primary-soft); color: var(--primary-deep); }
.more-nav-icon { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: .72rem; color: var(--primary-deep); background: var(--paper); }
.more-nav-icon svg { width: 1.15rem; height: 1.15rem; }
.more-nav > button > span:nth-child(2) { display: grid; min-width: 0; gap: .14rem; }
.more-nav strong { font-size: .82rem; line-height: 1.25; }
.more-nav small { color: var(--muted); font-size: .67rem; line-height: 1.35; }
.more-nav i { color: var(--muted); font-size: 1.15rem; font-style: normal; }

.overview-page { gap: .85rem; }
.overview-hero { position: relative; display: grid; gap: 1rem; overflow: hidden; padding: 1.1rem; border-radius: 1rem; color: white; background: radial-gradient(circle at 92% 12%, oklch(.72 .14 29 / .72), transparent 36%), linear-gradient(135deg, oklch(.43 .18 282), oklch(.3 .13 258)); box-shadow: 0 12px 30px oklch(.35 .15 275 / .16); }
.overview-hero::after { position: absolute; right: -4rem; bottom: -6rem; width: 12rem; height: 12rem; border: 1px solid oklch(1 0 0 / .12); border-radius: 50%; content: ""; }
.overview-hero-copy { position: relative; z-index: 1; }
.overview-hero .eyebrow, .overview-hero p { color: oklch(.93 .02 280); }
.overview-hero h2 { max-width: 18ch; font-size: clamp(1.45rem, 6.5vw, 2rem); letter-spacing: -.035em; }
.overview-hero-copy > p:last-child { margin: .45rem 0 0; font-size: .75rem; line-height: 1.45; }
.overview-hero .overview-avatars { position: absolute; z-index: 2; top: 1rem; right: 1rem; }
.overview-hero .overview-avatars span { width: 2.15rem; height: 2.15rem; border-color: color-mix(in oklch, oklch(.38 .15 275) 60%, transparent); }
.overview-hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.overview-hero-stats span { min-width: 0; padding: .7rem .75rem; border: 1px solid oklch(1 0 0 / .14); border-radius: .75rem; background: oklch(1 0 0 / .1); color: oklch(.94 .015 280); font-size: .68rem; backdrop-filter: blur(10px); }
.overview-hero-stats strong { display: block; margin-bottom: .15rem; color: white; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.agenda-card { overflow: hidden; border: 1px solid var(--canvas-deep); border-radius: 1rem; background: var(--paper); box-shadow: var(--shadow); }
.overview-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem .95rem .65rem; }
.overview-section-head h3 { font-size: 1.05rem; }
.overview-section-head button { min-height: 2rem; padding: .25rem 0; border: 0; color: var(--primary-deep); background: transparent; font-size: .7rem; font-weight: 730; }
.agenda-list { display: grid; }
.agenda-row { display: grid; min-height: 3.85rem; grid-template-columns: 2.65rem 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .55rem .85rem; border: 0; border-top: 1px solid var(--canvas-deep); color: var(--ink); background: transparent; text-align: start; }
.agenda-time { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.agenda-kind { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; color: var(--primary-deep); background: var(--primary-soft); }
.agenda-kind.event { color: var(--teal); background: var(--teal-soft); }
.agenda-kind svg { width: 1.05rem; height: 1.05rem; }
.agenda-row > span:nth-child(3) { display: grid; min-width: 0; gap: .15rem; }
.agenda-row strong { overflow: hidden; font-size: .78rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.agenda-row small { color: var(--muted); font-size: .64rem; }
.agenda-row > i { color: var(--muted); font-size: 1rem; font-style: normal; }
.agenda-empty { display: grid; min-height: 4.5rem; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: .75rem .9rem; border-top: 1px solid var(--canvas-deep); }
.agenda-empty > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .75rem; color: var(--teal); background: var(--teal-soft); }
.agenda-empty strong { font-size: .8rem; }.agenda-empty p { margin: .2rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.task-pulse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.pulse-card { min-width: 0; min-height: 4.7rem; padding: .65rem; border: 1px solid var(--canvas-deep); border-radius: .8rem; color: var(--ink); background: var(--paper); text-align: start; }
.pulse-card strong { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }.pulse-card span { display: block; margin-top: .2rem; color: var(--muted); font-size: .62rem; line-height: 1.35; }.pulse-card.danger strong { color: var(--danger); }
.overview-summary-grid { gap: .55rem; }.summary-card { min-height: 7.3rem; padding: .7rem; border: 1px solid var(--canvas-deep); box-shadow: none; }.summary-card em { color: var(--muted); font-size: .6rem; font-style: normal; font-variant-numeric: tabular-nums; }

.segment-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; padding: .25rem; border-radius: .75rem; background: var(--canvas-deep); }
.segment-control button { min-height: 2.35rem; border: 0; border-radius: .58rem; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 720; }
.segment-control button[aria-pressed="true"] { color: var(--ink); background: var(--paper); box-shadow: 0 1px 4px oklch(.2 .02 260 / .08); }
.task-group { display: grid; gap: .55rem; }.task-group-head { display: flex; align-items: center; justify-content: space-between; padding: .1rem .15rem; }.task-group-head h3 { color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }.task-group-head span { display: grid; min-width: 1.6rem; height: 1.6rem; place-items: center; border-radius: .55rem; color: var(--muted); background: var(--canvas-deep); font-size: .64rem; font-variant-numeric: tabular-nums; }.task-group.is-overdue .task-group-head h3 { color: var(--danger); }
.entry-card { min-height: 4.65rem; padding: .72rem; border: 1px solid var(--canvas-deep); box-shadow: none; }.entry-main h3 { font-size: .85rem; line-height: 1.35; }.entry-meta { margin-top: .25rem; font-size: .64rem; }.kind-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; }.kind-icon svg { width: 1.1rem; height: 1.1rem; }

.calendar-page { gap: .7rem; }.calendar-toolbar { align-items: center; }.calendar-toolbar h2 { font-size: 1.25rem; }.month-calendar { border-radius: 1rem; box-shadow: none; }.month-calendar .calendar-head { padding: .55rem .7rem; }.month-calendar .calendar-head h2 { font-size: .9rem; }.month-calendar .week-controls .icon-button { width: 2.15rem; min-width: 2.15rem; height: 2.15rem; border-radius: .65rem; }.month-weekdays { padding: .42rem .4rem .1rem; font-size: .55rem; }.month-grid { gap: .04rem; padding: .12rem .38rem .42rem; }.month-day { gap: .08rem; min-height: 2.05rem; padding: .08rem; border-radius: .55rem; }.month-day strong { width: 1.45rem; height: 1.45rem; font-size: .7rem; }.month-day span { display: grid; width: .7rem; height: .7rem; place-items: center; color: white; background: var(--coral); font-size: .45rem; font-weight: 800; }.selected-day-card { border-radius: 1rem; box-shadow: none; }.selected-day-head { padding: .7rem .8rem; }.selected-day-head h2 { font-size: .88rem; }.selected-day-card .timeline { padding: .5rem; }.selected-day-card .entry-card { min-height: 4.1rem; }
.event-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

.wishes-hero { position: relative; display: flex; min-height: 7.8rem; align-items: flex-end; justify-content: space-between; gap: 1rem; overflow: hidden; padding: 1rem; border-radius: 1rem; color: oklch(.29 .07 25); background: radial-gradient(circle at 85% 10%, oklch(.97 .05 30), transparent 35%), linear-gradient(135deg, oklch(.94 .055 25), oklch(.9 .075 43)); }
:root[data-theme="dark"] .wishes-hero { color: oklch(.96 .01 25); background: linear-gradient(135deg, oklch(.31 .07 25), oklch(.26 .055 43)); }
.wishes-hero h2 { font-size: 1.35rem; }.wishes-hero p:last-child { margin: .45rem 0 0; font-size: .72rem; line-height: 1.45; }.wishes-hero-mark { display: grid; width: 3.1rem; height: 3.1rem; flex: 0 0 auto; place-items: center; border-radius: .9rem; color: var(--coral); background: oklch(1 0 0 / .66); }.wishes-hero-mark svg { width: 1.45rem; height: 1.45rem; }
.wish-grid { gap: .7rem; }.wish-card { display: grid; grid-template-columns: 1fr; gap: .75rem; min-height: 0; padding: .85rem; border-color: var(--canvas-deep); border-radius: 1rem; background: var(--paper); box-shadow: var(--shadow); }.wish-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }.wish-person { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .66rem; }.wish-person i { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; color: white; background: var(--primary); font-style: normal; font-weight: 800; }.wish-visual { display: flex; min-height: 5rem; align-items: flex-end; justify-content: space-between; gap: .75rem; padding: .8rem; border-radius: .85rem; color: oklch(.35 .09 25); background: radial-gradient(circle at 82% 5%, var(--coral-soft), transparent 40%), linear-gradient(145deg, color-mix(in oklch, var(--coral-soft) 72%, var(--paper)), color-mix(in oklch, var(--primary-soft) 42%, var(--paper))); }.wish-visual > span { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: .75rem; color: var(--coral); background: color-mix(in oklch, var(--paper) 72%, transparent); }.wish-visual svg { width: 1.2rem; height: 1.2rem; }.wish-visual strong { font-size: 1.12rem; font-variant-numeric: tabular-nums; }.wish-main h3 { margin: 0; font-size: 1rem; line-height: 1.3; }.wish-description { min-height: 0; margin-top: .35rem; font-size: .72rem; }.wish-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .55rem; padding-top: .65rem; border-top: 1px solid var(--canvas-deep); }.wish-link, .wish-no-link { min-width: 0; overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }.wish-link { display: flex; align-items: center; gap: .3rem; color: var(--primary-deep); text-decoration: none; }.wish-link span { overflow: hidden; text-overflow: ellipsis; }.wish-link i { font-style: normal; }.wish-done-button { display: inline-flex; min-height: 2.25rem; flex: 0 0 auto; align-items: center; gap: .35rem; padding: .4rem .65rem; border: 1px solid var(--canvas-deep); border-radius: .65rem; color: var(--muted); background: var(--canvas); font-size: .67rem; font-weight: 720; }.wish-done-button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }.wish-done-button svg { width: .9rem; height: .9rem; }
:root[data-theme="dark"] .wish-visual { color: var(--ink); }

.note-filter-row { display: flex; align-items: center; gap: .5rem; }.note-filter-row .note-filters { min-width: 0; flex: 1; }.category-settings-button { display: inline-flex; min-height: 2.3rem; flex: 0 0 auto; align-items: center; gap: .3rem; padding: .4rem .65rem; border: 1px solid var(--canvas-deep); border-radius: 999px; color: var(--primary-deep); background: var(--paper); font-size: .68rem; font-weight: 720; }.category-settings-button svg { width: .85rem; height: .85rem; }.note-card.category-color-coral { background: var(--coral-soft); }.note-card.category-color-teal { background: var(--teal-soft); }.note-card.category-color-gold { background: color-mix(in oklch, var(--gold) 22%, var(--paper)); }.note-card.category-color-violet { background: var(--primary-soft); }.note-card.category-color-blue { background: color-mix(in oklch, oklch(.68 .13 250) 20%, var(--paper)); }.note-card.category-color-slate { background: var(--canvas-deep); }
.category-sheet { width: min(calc(100% - .75rem), 42rem); }.category-manager { max-height: calc(min(var(--app-height, 100dvh) * .76, 42rem) - 4.5rem); overflow-y: auto; padding-top: .65rem; }.category-list { display: grid; gap: .55rem; }.category-row { display: grid; grid-template-columns: .85rem minmax(0, 1.25fr) minmax(7.5rem, .75fr) auto auto; align-items: center; gap: .45rem; padding: .5rem; border: 1px solid var(--canvas-deep); border-radius: .8rem; background: var(--canvas); }.category-row .field input, .category-row .field select { min-height: 2.5rem; padding: .55rem .65rem; background: var(--paper); font-size: .78rem; }.category-color-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--primary); }.category-color-dot.coral { background: var(--coral); }.category-color-dot.teal { background: var(--teal); }.category-color-dot.gold { background: var(--gold); }.category-color-dot.blue { background: oklch(.63 .16 250); }.category-color-dot.slate { background: var(--muted); }.category-row-action { min-height: 2.5rem; padding: .45rem .55rem; border: 0; border-radius: .6rem; font-size: .67rem; font-weight: 720; }.category-row-action.save { color: var(--primary-deep); background: var(--primary-soft); }.category-row-action.delete { color: var(--danger); background: color-mix(in oklch, var(--danger) 10%, var(--paper)); }.category-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, .65fr) auto; align-items: end; gap: .55rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--canvas-deep); }.category-add .button { width: auto; }

@media (max-width: 32rem) {
  .event-options { grid-template-columns: 1fr; }
  .category-row { grid-template-columns: .8rem minmax(0, 1fr) auto auto; }
  .category-color-select { grid-column: 2 / -1; grid-row: 2; }
  .category-row-action.save { grid-column: 3; grid-row: 1; }.category-row-action.delete { grid-column: 4; grid-row: 1; }
  .category-add { grid-template-columns: 1fr 1fr; }.category-add .button { width: 100%; grid-column: 1 / -1; }
}
@media (min-width: 42rem) {
  .overview-hero { grid-template-columns: minmax(0, 1fr) minmax(17rem, .7fr); align-items: end; padding: 1.35rem; }.overview-hero-stats { grid-column: 2; }.agenda-card { grid-column: 1 / -1; }.task-pulse-grid { max-width: 40rem; }.wish-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
}
@media (min-width: 64rem) { .bottom-nav { display: none; } }