/* NOVA Life OS 6.1 — compatible with every V6 route and selector.
   01 Tokens / 02 Foundation / 03 Shell / 04 Components / 05 Pages
   06 Depth / 07 Motion / 08 Responsive and accessibility */

/* 01 — All literal colors are centralized here. */
:root {
  color-scheme: dark;
  --bg: #080b09; --surface: #111612; --surface-2: #192019; --surface-3: #242e24;
  --text: #f2f5ed; --muted: #b4bdb1; --dim: #98a493;
  --accent: #a8ff60; --accent-2: #d4f6b7; --ink: #101b08;
  --expense: #ffb08c; --danger: #ff9eaa; --warning: #efd697; --info: #9edfd2;
  --chart-mint: #68dfb4; --chart-cyan: #85d7e5; --chart-blue: #86aff5; --chart-slate: #c1ccbc;
  --line: #344130; --line-soft: #ffffff0f; --line-accent: #a8ff6052;
  --glow: #a8ff6014; --glow-strong: #a8ff6030; --glass: #111612f5;
  --white-soft: #ffffff09; --shade: #00000066; --shade-heavy: #000000b3;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --space: clamp(18px, 2vw, 28px);
  --radius-sm: 10px; --radius: 22px; --radius-lg: 32px; --radius-pill: 999px;
  --shadow: 0 16px 40px var(--shade); --elevation-2: 0 28px 80px var(--shade-heavy);
  --sidebar: 248px;
  --z-shell: 30; --z-nav: 50; --z-drawer: 90; --z-toast: 120;
  --duration-fast: 160ms; --duration-base: 300ms; --duration-reveal: 650ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.2, 1.4, .45, 1);
  --motion-intensity: 1;
  --studio-bg: #050706; --studio-panel: #0a0e0b; --studio-grid: #1b241d;
  --font-body: 'DM Sans', system-ui, sans-serif; --font-heading: Manrope, system-ui, sans-serif;
}

/* 02 — Foundation; all content is visible without JavaScript. */
* { box-sizing: border-box; }
html { scroll-padding-top: 100px; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font: 14px/1.65 var(--font-body); font-variant-numeric: tabular-nums; overflow-wrap: break-word; isolation: isolate; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
img { max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, .brand { font-family: var(--font-heading); line-height: 1.18; letter-spacing: -.045em; margin: 0 0 16px; }
h1 { font-size: clamp(30px, 3vw, 42px); font-weight: 600; }
h2 { font-size: clamp(21px, 2vw, 28px); font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 16px; color: var(--muted); }
small { display: block; color: var(--dim); font-size: 12px; line-height: 1.6; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.muted { color: var(--dim); font-size: 12px; }
.skip { position: fixed; top: -100px; left: 20px; z-index: 150; background: var(--accent); color: var(--ink); padding: 12px 18px; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nova-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* 03 — Workspace shell. */
.brand { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 24px; font-weight: 800; letter-spacing: .14em; flex-shrink: 0; }
.brand img { border-radius: 50%; object-fit: contain; }
.brand small { font: 500 12px/1.3 var(--font-body); letter-spacing: .14em; margin-top: 4px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); padding: 30px 18px 20px; background: var(--bg); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; z-index: var(--z-nav); }
.sidebar > .brand { padding: 0 9px 28px; }
.sidebar nav { flex: 1; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; position: relative; }
.nav-group { margin: 26px 14px 10px; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--dim); }
.nav-group:first-child { margin-top: 0; }
.nav-item { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--muted); margin: 3px 0; position: relative; }
.nav-item > span { width: 20px; display: inline-flex; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { color: var(--accent); background: var(--glow); box-shadow: inset 2px 0 var(--accent); }
.nav-indicator { position: absolute; pointer-events: none; background: var(--glow); border: 1px solid var(--line-accent); border-radius: 12px; top: 0; left: 0; transform-origin: top left; }
.sidebar-foot { border-top: 1px solid var(--line-soft); padding: 18px 8px 0; margin-top: 16px; font-size: 12px; }
.sidebar-foot > a { display: block; margin-bottom: 14px; color: var(--muted); }
.sidebar-foot > a span { display: block; color: var(--accent); }
.app { margin-left: var(--sidebar); min-height: 100dvh; }
.topbar { height: 80px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: var(--z-shell); background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.breadcrumb { font-size: 13px; color: var(--dim); }
.breadcrumb span { padding: 0 12px; }
.breadcrumb b { color: var(--text); font-weight: 500; }
.top-actions, .actions, .form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-actions { flex-wrap: nowrap; }
.search { min-width: 195px; justify-content: space-between !important; color: var(--dim) !important; }
kbd { font: 12px var(--font-body); border: 1px solid var(--line); border-radius: 5px; padding: 2px 5px; }
.avatar { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); display: block; flex-shrink: 0; }
.avatar.large { width: 64px; height: 64px; margin: auto auto 20px; }
.avatar.portrait { width: 104px; height: 104px; margin-bottom: 24px; }
.page { max-width: 1560px; padding: 32px 36px 56px; margin: auto; min-width: 0; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 0 28px; }
.page-heading h1 { margin: 0; }
.page-heading .eyebrow { margin-bottom: 8px; color: var(--dim); }
.mobile-bottom-nav, .icon.mobile-toggle, .icon.drawer-close, .drawer-overlay { display: none; }

/* 04 — Shared components. */
.card { padding: var(--space); margin-bottom: 24px; min-width: 0; position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius); background: linear-gradient(145deg, var(--white-soft), transparent 65%), var(--surface); box-shadow: 0 4px 18px var(--shade); }
.card h2 { margin-bottom: 14px; }
.two-col, .three-col, .metrics, .form-grid, .grid, .clip-fields { display: grid; gap: 20px; align-items: start; min-width: 0; }
.two-col, .form-grid, .grid, .clip-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.metrics:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { min-height: 170px; margin: 0; }
.metric > span { color: var(--muted); font-size: 13px; }
.metric strong { display: block; font: 600 clamp(24px, 2.35vw, 36px)/1.2 var(--font-heading); letter-spacing: -.045em; margin: 24px 0 10px; overflow-wrap: anywhere; }
.metric:first-child { border-color: var(--line-accent); background: radial-gradient(ellipse at top right, var(--glow-strong), transparent 85%), var(--surface); }
.metric:first-child strong { color: var(--accent); }
.quick-actions { margin-bottom: 28px; }
.button, .icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; padding: 11px 17px; position: relative; }
.button:hover, .icon:hover { background: var(--surface-3); border-color: var(--line-accent); }
.button.primary { background: var(--accent); color: var(--ink); border-color: var(--accent); box-shadow: 0 4px 0 var(--shade), inset 0 1px var(--white-soft); }
.button.primary:hover { background: var(--accent-2); }
.button.small { padding: 8px 12px; font-size: 12px; }
.icon { width: 44px; height: 44px; flex-shrink: 0; padding: 0; }
.button.disabled, .button[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.row, .list-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-width: 0; }
.row { margin-bottom: 18px; flex-wrap: wrap; }
.row h2 { margin: 0; }
.list-row { border-bottom: 1px solid var(--line-soft); padding: 20px 0; }
.list-row:last-child { border-bottom: 0; }
.list-row > div, .entry { min-width: 0; }
.list-row .entry { flex: 1; }
.list-row h3 { margin-bottom: 8px; overflow-wrap: anywhere; }
.list-row p { font-size: 13px; margin-bottom: 6px; }
.list-row .actions { max-width: 48%; justify-content: flex-end; }
.entry { margin-bottom: 12px; }
.journal-body { line-height: 1.9; max-width: 75ch; }
.empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 14px; display: grid; justify-items: center; gap: 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.empty .nova-icon { width: 40px; height: 40px; color: var(--accent); }
.empty .button { margin-top: 4px; }
.full { grid-column: 1 / -1; }
.inline { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.form-error { color: var(--danger); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
input, textarea, select { width: 100%; min-width: 0; min-height: 48px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 11px 13px; font-size: 16px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: 2px solid var(--glow-strong); outline-offset: 2px; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
label:has(> input[type="checkbox"]) { min-height: 44px; flex-direction: row; align-items: center; }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
textarea { resize: vertical; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 24px; }
.filters label { flex: 1; min-width: 120px; }
.table-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 14px; scrollbar-width: thin; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 16px; border-bottom: 1px solid var(--line-soft); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-2); }
td { font-size: 13px; min-width: 100px; overflow-wrap: anywhere; }
td small { max-width: 280px; margin-top: 4px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--white-soft); }
progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); border: 0; border-radius: var(--radius-pill); overflow: hidden; transform-origin: left; }
progress::-webkit-progress-bar { background: var(--surface-3); }
progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.chip { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.5; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); }
.chip.upcoming, .chip.invited, .chip.paid { color: var(--info); }
.chip.pending, .chip.high { color: var(--warning); }
.chip.approved, .chip.income, .chip.done, .chip.active { color: var(--accent); border-color: var(--line-accent); background: var(--glow); }
.chip.rejected, .chip.expense, .chip.disabled { color: var(--danger); }
.status-key { font-size: 12px; margin-bottom: 15px; line-height: 3; }
.alert { padding: 16px 20px; background: var(--surface-2); border: 1px solid var(--danger); border-radius: 12px; color: var(--text); font-size: 14px; }
details { font-size: 13px; color: var(--muted); }
summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
details p { margin: 8px 0; }
dialog { border: 1px solid var(--line-accent); background: var(--surface); color: var(--text); border-radius: var(--radius); width: min(560px, calc(100% - 32px)); padding: 26px; box-shadow: var(--elevation-2); }
dialog::backdrop { background: var(--shade-heavy); }
.command-links { display: grid; grid-template-columns: 1fr 1fr; max-height: 350px; overflow: auto; margin-top: 15px; }
.command-links a { padding: 12px; border-radius: 10px; }
.command-links a:hover { background: var(--surface-2); color: var(--accent); }
#toast { display: none; position: fixed; right: 20px; bottom: 24px; max-width: calc(100% - 40px); z-index: var(--z-toast); padding: 16px 22px; background: var(--accent); color: var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
#toast.show { display: block; }

/* Currency picker. */
.currency-picker { position: relative; flex-shrink: 0; }
.currency-button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--surface); }
.currency-button-symbol { display: grid; place-items: center; width: 26px; height: 26px; background: var(--glow); border-radius: 8px; color: var(--accent); }
.currency-button-code, .currency-chevron { font-size: 12px; }
.currency-menu { position: absolute; top: 54px; right: 0; width: min(360px, calc(100vw - 24px)); padding: 18px; background: var(--glass); border: 1px solid var(--line-accent); border-radius: 18px; z-index: 70; box-shadow: var(--elevation-2); }
.currency-menu-head { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.currency-popular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.currency-pill { display: grid; place-items: center; gap: 2px; padding: 8px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); border-radius: 10px; }
.currency-pill.active { color: var(--accent); background: var(--glow); border-color: var(--line-accent); }
.currency-custom > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.currency-custom input { text-transform: uppercase; }
.currency-rate-note { margin-top: 12px; }

/* 05 — Charts, habits, calendar, profiles and chat. */
.chart-stack { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(310px, 1fr); gap: 20px; margin-bottom: 24px; }
.chart-stack > .card { margin-bottom: 0; }
.chart-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.chart-card-head h2 { margin: 0 0 6px; }
.chart-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-accent); border-radius: var(--radius-pill); background: var(--glow); color: var(--accent); font-size: 12px; padding: 6px 10px; flex-shrink: 0; }
.chart-badge::before, .habit-status-dot { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chart { height: 300px; position: relative; min-width: 0; margin: 22px 0 12px; }
.chart-large { height: 350px; } .chart-category { height: 255px; }
.chart canvas { max-width: 100%; }
.chart-skeleton { position: absolute; inset: 12px; display: flex; align-items: flex-end; gap: 10%; pointer-events: none; }
.chart-skeleton i { flex: 1; border-radius: 10px 10px 0 0; background: linear-gradient(var(--glow-strong), var(--surface-3)); }
.chart-range { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; }
.chart-range-button { display: grid; place-items: center; min-width: 42px; min-height: 40px; padding: 0 8px; font-size: 12px; color: var(--muted); border-radius: 8px; }
.chart-range-button.active { color: var(--accent); background: var(--glow); }
.cashflow-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; }
.cashflow-summary > div { padding: 12px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 12px; }
.cashflow-summary span { display: block; color: var(--dim); font-size: 12px; }
.cashflow-summary b { font: 600 18px/1.5 var(--font-heading); overflow-wrap: anywhere; }
.positive b { color: var(--accent); } .negative b { color: var(--expense); }
.chart-live-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--glow); pointer-events: none; }
.chart-data { margin-top: 14px; }
/* Financial chart studio — high-priority visual report, real source values. */
body[data-page="analytics"] .page { padding-top: 24px; }
body[data-page="analytics"] .page-heading { margin-bottom: 20px; }
body[data-page="analytics"] .page-heading .eyebrow { display: none; }
.cashflow-studio { background: radial-gradient(ellipse at 25% 0, var(--glow), transparent 65%), var(--surface); }
.cashflow-studio .cashflow-summary { margin-top: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.cashflow-studio .cashflow-summary > div { padding: 0 12px; background: transparent; border: 0; border-radius: 0; }
.cashflow-studio .cashflow-summary > div:last-child { order: -1; padding-left: 0; }
.cashflow-studio .cashflow-summary b { font-size: clamp(19px, 2vw, 28px); font-weight: 500; letter-spacing: -.04em; }
.cashflow-studio .cashflow-summary b span { font: inherit; color: inherit; white-space: nowrap; }
.cashflow-studio .cashflow-summary b .amount-compact { display: none; }
.cashflow-studio .cashflow-summary > div + div { border-left: 1px solid var(--line-soft); }
.cashflow-studio .cashflow-summary > div:last-child { border-left: 0; }
.cashflow-studio .chart-large { margin-top: 4px; margin-bottom: 0; }
.graph-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 10px 0 0; }
.graph-legend { display: flex; align-items: center; gap: 16px; }
.graph-series { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.graph-series i { width: 8px; height: 8px; border-radius: 50%; background: var(--series-color); box-shadow: 0 0 0 4px var(--white-soft); }
.graph-series[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }
.graph-mode { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.graph-mode button { min-height: 36px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; }
.graph-mode button.active { background: var(--surface-3); color: var(--text); }
.graph-footnote { display: flex; justify-content: space-between; align-items: start; gap: 14px; margin-top: 4px; }
.graph-caption { color: var(--dim); font-size: 12px; margin: 0; max-width: 42ch; }
.graph-period { font-size: 12px; color: var(--dim); flex-shrink: 0; }
.graph-tooltip { position: absolute; pointer-events: none; min-width: 195px; max-width: calc(100% - 16px); padding: 14px 16px; border-radius: 13px; border: 1px solid var(--line-accent); background: var(--glass); box-shadow: var(--shadow); z-index: 5; }
.graph-tooltip > b { display: block; margin-bottom: 12px; color: var(--muted); font-size: 12px; font-weight: 500; }
.tooltip-row { display: flex; justify-content: space-between; gap: 18px; margin-top: 7px; font-size: 12px; }
.tooltip-row.income strong { color: var(--accent); } .tooltip-row.expense strong { color: var(--expense); }
.tooltip-row.net { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }
.spending-mix .chart-category { max-width: 300px; margin: 22px auto 18px; }
.donut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; gap: 2px; }
.donut-center strong { font: 600 clamp(20px, 2vw, 28px)/1.5 var(--font-heading); letter-spacing: -.05em; max-width: 70%; overflow-wrap: anywhere; text-align: center; }
.donut-center span { font-size: 12px; color: var(--dim); }
.is-empty-donut::before { content: ''; position: absolute; width: 220px; height: 220px; left: calc(50% - 110px); top: calc(50% - 110px); border: 18px solid var(--surface-3); border-radius: 50%; }
.category-breakdown { display: grid; gap: 18px; }
.category-row-heading { display: flex; justify-content: space-between; align-items: start; gap: 12px; font-size: 13px; }
.category-row-heading b { white-space: nowrap; font-weight: 600; }
.category-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.category-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--category-color); }
.category-track { height: 4px; border-radius: 99px; background: var(--surface-3); margin: 8px 0 4px; overflow: hidden; }
.category-track i { display: block; width: 100%; height: 100%; background: var(--category-color); transform-origin: left; border-radius: inherit; }
.category-percent { text-align: right; font-size: 12px; }
.spending-mix .chart-data { margin-top: 20px; }
.habit-days { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.habit-days legend { padding: 0 8px; font-size: 13px; color: var(--muted); }
.habit-days > small { margin-top: 10px; } .habit-days.is-disabled { opacity: .55; }
.habit-day-options { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.habit-day-option { position: relative; display: block !important; cursor: pointer; }
.habit-day-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.habit-day-option span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 12px; }
.habit-day-option input:checked + span { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.habit-day-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.habit-date-nav, .habit-date-actions { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.habit-date-nav h2 { margin-bottom: 4px; } .habit-date-form { margin: 0; }
.habit-date-form input { max-width: 180px; }
.habit-week-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.habit-date-chip { text-align: center; min-width: 0; padding: 10px 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.habit-date-chip span, .habit-date-chip small { font-size: 12px; color: var(--dim); }
.habit-date-chip b { display: block; font: 600 20px/1.4 var(--font-heading); }
.habit-date-chip.active { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.habit-date-chip.active span, .habit-date-chip.active small { color: var(--ink); }
.habit-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.habit-card { margin: 0; } .habit-card.is-locked { border-color: var(--line-accent); } .habit-card.is-paused { opacity: .75; }
.habit-card-top { display: flex; justify-content: space-between; gap: 14px; }
.habit-card-top h2 { margin: 5px 0; font-size: 22px; } .habit-card-top p { margin: 0; font-size: 13px; }
.habit-score { --habit-pct: 0; width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, var(--surface) 60%, transparent 62%), conic-gradient(var(--accent) calc(var(--habit-pct) * 1%), var(--surface-3) 0); }
.habit-score strong { font: 700 18px var(--font-heading); } .habit-score span { font-size: 12px; color: var(--dim); }
.habit-notes { font-size: 13px; margin: 16px 0 0; }
.habit-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0; }
.habit-stats > div { border-radius: 12px; border: 1px solid var(--line-soft); background: var(--bg); padding: 12px; }
.habit-stats b { display: block; font: 600 24px var(--font-heading); margin-bottom: 4px; } .habit-stats span { font-size: 12px; color: var(--dim); }
.habit-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 18px 0; }
.habit-day { display: grid; place-items: center; gap: 6px; }
.habit-day i { width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); }
.habit-day.done i { background: var(--accent); } .habit-day.missed i { background: var(--danger); }
.habit-lock-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid var(--line-accent); border-radius: 14px; background: var(--glow); margin: 18px 0; }
.habit-lock-zone b { display: block; font-size: 14px; } .habit-locked-copy b { color: var(--accent); }
.habit-heatmap { display: grid; grid-template-columns: repeat(35, 1fr); gap: 4px; margin: 22px 0; }
.habit-heatmap i { height: 12px; border-radius: 3px; background: var(--surface-3); }
.habit-heatmap i.done { background: var(--accent); } .habit-heatmap i.missed { background: var(--expense); opacity: .5; }
.habit-card-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.habit-trend-chart { height: 265px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-day { min-height: 110px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.calendar-day b { color: var(--muted); font-size: 13px; }
.calendar-day a { display: block; font-size: 12px; color: var(--accent); background: var(--glow); padding: 6px; border-radius: 5px; margin-top: 8px; overflow-wrap: anywhere; }
.calendar-day.current { border-color: var(--accent); background: var(--glow); }
.person { text-align: center; padding: 28px 20px; border: 1px solid var(--line); border-radius: 18px; min-width: 0; }
.person p { overflow-wrap: anywhere; } .profile-card { max-width: 800px; }
.profile-card .avatar { box-shadow: 0 0 0 8px var(--glow); }
.support { text-align: center; padding: 64px 28px; background: radial-gradient(ellipse at top, var(--glow), transparent 65%), var(--surface); }
.support h2 { font-size: clamp(30px, 4vw, 52px); } .support p { max-width: 550px; margin: 0 auto 28px; }
.podium { background: var(--glow); border-radius: 12px; padding-inline: 16px; margin-bottom: 8px; }
.rank { color: var(--accent); font: 600 26px var(--font-heading); }
.chat-intro { text-align: center; padding: 36px 24px; } .chat-intro > img { margin-bottom: 16px; }
.chat-intro h2 { font-size: clamp(28px, 3vw, 42px); } .chat-intro .actions { justify-content: center; margin: 24px 0; }
#chat-history { max-height: 500px; overflow: auto; margin-bottom: 24px; }
.bubble { max-width: 85%; padding: 18px 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; margin-bottom: 16px; overflow-wrap: anywhere; }
.bubble b { font-size: 12px; color: var(--accent); } .bubble p { margin: 6px 0 0; font-size: 14px; }
.bubble.user { margin-left: auto; background: var(--bg); border-radius: 18px 18px 4px 18px; }
#chat-form { display: grid; gap: 14px; position: sticky; bottom: 12px; padding: 16px; border: 1px solid var(--line-accent); background: var(--surface); border-radius: 16px; z-index: 2; }
#chat-form > .button { justify-self: end; }
.typing { display: flex; gap: 6px; padding: 16px; } .typing i { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.motion-settings { margin-top: 24px; } .motion-options { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.motion-options button[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* Public, auth, installer and phone preview. */
.home-nav, .home-footer { max-width: 1320px; margin: auto; padding: 26px 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.home-nav { border-bottom: 1px solid var(--line-soft); } .home-nav nav { display: flex; gap: 32px; font-size: 13px; color: var(--muted); }
.home-hero { max-width: 1320px; margin: auto; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 20px; padding: 86px 36px 72px; }
.home-hero h1 { font-size: clamp(46px, 5.6vw, 82px); font-weight: 500; line-height: 1.04; margin: 24px 0; letter-spacing: -.065em; }
.home-hero em, .orbit-banner em { font-style: normal; color: var(--accent); }
.home-hero p { max-width: 450px; font-size: 17px; line-height: 1.85; } .home-hero .actions { margin: 30px 0 20px; }
.home-strip { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; border-block: 1px solid var(--line-soft); padding: 22px; color: var(--dim); font-size: 12px; letter-spacing: .15em; }
.home-section { max-width: 1250px; margin: auto; padding: 72px 28px; }
.home-section > h2 { font-size: clamp(32px, 3.6vw, 50px); font-weight: 500; margin: 20px 0 36px; }
.home-section .card h3 { font-size: 24px; margin: 22px 0 16px; }
.feature-number { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-accent); border-radius: 12px; color: var(--accent); font-size: 12px; }
.demo { margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.demo > div { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.demo > div:last-child { border: 0; }
.steps article { border-top: 1px solid var(--line); padding-top: 24px; }
.steps article > span { color: var(--accent); font-size: 12px; letter-spacing: .08em; } .steps h3 { margin: 22px 0 16px; font-size: 23px; }
.home-footer { border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 13px; padding-bottom: 40px; }
.auth-page, .offline-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background: radial-gradient(ellipse at 70% 10%, var(--glow-strong), transparent 65%), var(--bg); }
.auth-page > .brand { margin-bottom: 32px; } .auth-card { width: 100%; max-width: 480px; padding: 32px; }
.auth-card form { display: grid; gap: 18px; margin: 24px 0; }
.auth-card p a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } .auth-card h1 { font-size: 32px; }
.wrap { width: min(940px, calc(100% - 32px)); margin: 40px auto; } .wrap > .brand { margin-bottom: 28px; }
.wrap > .brand img { width: 50px; height: 50px; flex-shrink: 0; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check { padding: 12px; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; }
.ok, .success { color: var(--accent); } .bad { color: var(--danger); }
.note { border-left: 2px solid var(--accent); padding-left: 14px; margin-top: 24px; }
.wrap form > .button { background: var(--accent); color: var(--ink); }
.offline-card { max-width: 450px; text-align: center; } .offline-card img { width: 80px; height: 80px; margin-bottom: 20px; }
.android-download-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 42px; border: 1px solid var(--line-accent); border-radius: var(--radius-lg); background: radial-gradient(ellipse at right, var(--glow), transparent 70%), var(--surface); overflow: hidden; }
.android-download-card h2 { font-size: clamp(30px, 3vw, 44px); } .android-download-card small { margin-top: 20px; }
.phone-preview { min-height: 440px; display: grid; place-items: center; perspective: 900px; position: relative; }
.phone-glow { position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, var(--glow-strong), transparent 70%); border-radius: 50%; }
.phone-shell { position: relative; width: 220px; height: 420px; padding: 9px; border-radius: 36px; border: 1px solid var(--line-accent); background: linear-gradient(145deg, var(--surface-3), var(--bg)); box-shadow: var(--elevation-2); transform: rotateY(-14deg) rotateX(7deg) rotateZ(5deg); transform-style: preserve-3d; }
.phone-screen { display: flex; flex-direction: column; align-items: center; padding: 55px 16px 16px; height: 100%; border-radius: 28px; background: radial-gradient(circle at top, var(--glow-strong), transparent 60%), var(--bg); }
.phone-screen img { width: 66px; height: 66px; } .phone-screen > span { font: 700 24px var(--font-heading); letter-spacing: .14em; margin-top: 12px; }
.phone-screen > b { font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.phone-screen > i { display: block; width: 100%; height: 44px; border-radius: 10px; border: 1px solid var(--line-accent); background: var(--glow); margin-top: 14px; transform: translateZ(12px); }
.mini-nav { margin-top: auto; display: flex; justify-content: space-around; width: 100%; color: var(--accent); padding: 10px 0; }
.phone-island { position: absolute; width: 72px; height: 18px; border-radius: var(--radius-pill); background: var(--bg); left: calc(50% - 36px); top: 18px; }

/* 06 — CSS 3D; the same composition is the static fallback. */
.orbit-banner { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; min-height: 310px; padding: 32px 36px; border: 1px solid var(--line-accent); border-radius: var(--radius-lg); margin-bottom: 28px; background: radial-gradient(ellipse at 80% 50%, var(--glow-strong), transparent 60%), var(--surface); overflow: hidden; position: relative; }
.orbit-banner h2 { font-size: clamp(30px, 3.3vw, 46px); font-weight: 500; } .orbit-banner p { max-width: 400px; font-size: 14px; }
.orbit-banner > div:first-child { position: relative; z-index: 2; }
.orbit-scene { position: relative; height: 280px; min-width: 0; perspective: 900px; pointer-events: none; }
.home-hero .orbit-scene { height: 480px; } .orbit-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.orbit-object { position: absolute; width: 170px; height: 170px; left: calc(50% - 85px); top: calc(50% - 85px); border-radius: 50%; background: radial-gradient(circle at 30% 24%, var(--surface-3), var(--bg) 68%); border: 1px solid var(--line-accent); box-shadow: inset 7px 5px 18px var(--glow-strong), inset -14px -10px 24px var(--shade-heavy), 0 0 60px var(--glow-strong); transform: translateZ(12px); }
.orbit-object::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; background: url('../brand/nova-logo.png') center / contain no-repeat; }
.orbit-ring { position: absolute; width: 285px; height: 285px; top: calc(50% - 142.5px); left: calc(50% - 142.5px); border: 2px solid var(--accent); border-radius: 50%; transform: rotateX(68deg) rotateY(-14deg) rotateZ(-24deg); box-shadow: 0 0 20px var(--glow-strong), inset 0 0 12px var(--glow); transform-style: preserve-3d; }
.orbit-ring::after { content: ''; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; position: absolute; top: 37px; left: 35px; box-shadow: 0 0 18px var(--accent); }
.orbit-ring.thin { width: 345px; height: 345px; top: calc(50% - 172.5px); left: calc(50% - 172.5px); border-width: 1px; border-color: var(--line-accent); transform: rotateX(55deg) rotateY(32deg) rotateZ(35deg); }
.orbit-ring.third { width: 235px; height: 235px; top: calc(50% - 117.5px); left: calc(50% - 117.5px); border-width: 1px; border-color: var(--line-accent); transform: rotateX(15deg) rotateY(68deg) rotateZ(-20deg); }
.orbit-label { position: absolute; top: 14%; left: 0; padding: 12px 16px; border: 1px solid var(--line-accent); border-radius: 12px; background: var(--glass); color: var(--dim); font-size: 12px; box-shadow: var(--shadow); transform: translateZ(55px); }
.orbit-label b { display: block; color: var(--text); font-weight: 500; }
.orbit-label.second { left: auto; right: 0; top: auto; bottom: 12%; transform: translateZ(75px); }
.home-hero .orbit-object { width: 210px; height: 210px; left: calc(50% - 105px); top: calc(50% - 105px); }
.nova-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.nova-ambient::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 15%, var(--glow), transparent 45%); }
.nova-grid { position: absolute; inset: 50% -20% -40%; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(600px) rotateX(65deg); opacity: .5; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-tilt { transform-style: preserve-3d; }
.fx-glare { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fx-glare::after { content: ''; position: absolute; inset: -60%; background: linear-gradient(115deg, transparent 40%, var(--white-soft) 50%, transparent 60%); transform: translate(var(--glare-x, 0px), var(--glare-y, 0px)); opacity: var(--glare-opacity, 0); }
.metric strong, .metric > span, .metric > .nova-icon { position: relative; transform: translateZ(16px); } .metric small { transform: translateZ(8px); }
.fx-burst { position: fixed; z-index: var(--z-toast); width: 7px; height: 7px; border-radius: 2px; background: var(--accent); pointer-events: none; }
.fx-ripple { position: absolute; width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; left: calc(50% - 12px); top: calc(50% - 12px); pointer-events: none; }

/* 07 — Only transform/opacity animate. JS owns one shared frame clock. */
html[data-motion="full"] .button, html[data-motion="full"] .icon { transition: transform var(--duration-fast) var(--ease-out); }
html[data-motion="full"] .button:hover { transform: translateY(-2px); }
html[data-motion="full"] .button:active, html[data-motion="full"] .icon:active { transform: translateY(2px) scale(.98); }
html[data-motion="full"] .nav-item { transition: transform var(--duration-fast) var(--ease-out); }
html[data-motion="full"] .nav-item:hover { transform: translateX(2px); }
html[data-motion="full"] { scroll-behavior: smooth; }
html[data-motion="lite"], html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-paused="true"] *, html[data-paused="true"] *::before, html[data-paused="true"] *::after { animation-play-state: paused !important; }
.is-offline .topbar::after { content: 'Offline'; position: absolute; bottom: -12px; left: 50%; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--expense); color: var(--ink); font-size: 12px; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
html:not([data-motion="full"])::view-transition-old(root), html:not([data-motion="full"])::view-transition-new(root) { animation: none; }

/* 08 — Responsive and accessibility. */
@media (min-width: 1440px) { .page { padding-top: 36px; } }
@media (max-width: 1100px) {
  :root { --sidebar: 218px; }
  .page { padding: 26px 24px 48px; } .topbar { padding-inline: 24px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-stack, .habit-board, .two-col { grid-template-columns: 1fr; } .chart-category { height: 285px; }
  .graph-toolbar { gap: 8px; }
  .orbit-banner { padding: 26px; grid-template-columns: 1.2fr 1fr; }
  .orbit-label { display: none; } .home-hero .orbit-label { display: block; } .search { min-width: 150px; }
}
@media (max-width: 767px) {
  .app { margin-left: 0; padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .page { padding: 22px 16px 32px; }
  .sidebar { transform: translateX(-100%); visibility: hidden; width: min(88vw, 330px); padding-top: calc(26px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); z-index: var(--z-drawer); }
  .sidebar.open { transform: none; visibility: visible; }
  .sidebar > .brand { padding-right: 32px; font-size: 21px; } .sidebar > .brand img { width: 36px; height: 36px; }
  .icon.drawer-close { display: flex; position: absolute; top: 24px; right: 12px; }
  .drawer-overlay.open { display: block; position: fixed; inset: 0; background: var(--shade-heavy); z-index: 89; }
  .topbar { height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; gap: 8px; }
  .breadcrumb { font-size: 0; } .breadcrumb > span { display: none; } .breadcrumb > b { font-size: 13px; }
  .top-actions { gap: 6px; } .top-actions .icon, .search { display: none; }
  .currency-button-symbol { display: none; }
  .currency-menu { position: fixed; top: calc(74px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; max-height: 70dvh; overflow: auto; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 22px; }
  .page-heading .eyebrow { font-size: 12px; } .page-heading > .muted { display: none; }
  .metrics, .metrics:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
  .metrics:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; }
  .metric { padding: 16px 13px; min-height: 140px; } .metric > span { font-size: 12px; }
  .metric strong { font-size: 25px; margin: 18px 0 10px; }
  .card { border-radius: 18px; margin-bottom: 18px; } .metrics .card, .habit-board .card { margin-bottom: 0; }
  .form-grid, .grid, .clip-fields, .three-col { grid-template-columns: 1fr; }
  .form-actions { align-items: stretch; flex-direction: column; } .form-actions .button, .filters .button { width: 100%; }
  .list-row { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .list-row .actions { max-width: 100%; width: 100%; justify-content: flex-start; }
  .list-row .actions form, .list-row .actions .button { flex: 1; } .list-row .actions form .button { width: 100%; }
  .chart-card-head { flex-direction: column; } .chart-range { width: 100%; } .chart-range-button { flex: 1; }
  .cashflow-summary { gap: 6px; } .cashflow-summary > div { padding: 9px 7px; } .cashflow-summary b { font-size: 15px; }
  .chart, .chart-large { height: 245px; } .chart-category { height: 280px; } .chart-stack { gap: 18px; }
  .cashflow-studio .cashflow-summary { padding-bottom: 14px; margin-top: 16px; }
  .cashflow-studio .cashflow-summary > div { padding-inline: 8px; }
  .cashflow-studio .cashflow-summary b { font-size: 17px; }
  .cashflow-studio .cashflow-summary b .amount-full { display: none; }
  .cashflow-studio .cashflow-summary b .amount-compact { display: block; }
  .cashflow-studio .chart-card-head .eyebrow { margin-bottom: 8px; }
  .cashflow-studio .chart-card-head { gap: 10px; }
  .cashflow-studio .chart-card-head h2 { margin-bottom: 3px; }
  .graph-toolbar { flex-wrap: wrap; margin-top: 10px; gap: 2px; }
  .graph-legend { width: 100%; justify-content: space-between; }
  .graph-mode { width: 100%; }
  .graph-mode button { flex: 1; min-height: 40px; }
  .cashflow-studio .chart-large { height: 270px; }
  .graph-footnote { flex-direction: column; gap: 6px; }
  .spending-mix .chart-category { height: 255px; }
  .habit-day-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .habit-date-nav { align-items: flex-start; flex-direction: column; } .habit-date-actions { width: 100%; justify-content: flex-start; }
  .habit-date-form { flex: 1; } .habit-date-form input { max-width: none; }
  .habit-week-picker { gap: 4px; } .habit-date-chip { padding: 9px 2px; border-radius: 9px; } .habit-date-chip b { font-size: 18px; }
  .habit-lock-zone { align-items: stretch; flex-direction: column; } .habit-lock-form, .habit-unlock, .habit-lock-zone .button { width: 100%; }
  .habit-stats { gap: 6px; } .habit-stats > div { padding: 9px; } .habit-stats b { font-size: 22px; }
  .habit-score { width: 66px; height: 66px; } .habit-heatmap { grid-template-columns: repeat(18, 1fr); } .habit-heatmap i { height: 14px; }
  .calendar-grid { gap: 3px; } .calendar-day { min-height: 72px; padding: 5px 2px; border-radius: 6px; } .calendar-day a { padding: 4px 1px; font-size: 12px; }
  .bubble { max-width: 95%; padding: 16px; } #chat-form { bottom: calc(84px + env(safe-area-inset-bottom)); padding: 12px; }
  .mobile-bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; bottom: max(8px, env(safe-area-inset-bottom)); left: 10px; right: 10px; z-index: var(--z-nav); min-height: 68px; padding: 6px; border: 1px solid var(--line-accent); border-radius: 22px; background: var(--glass); box-shadow: var(--shadow); }
  .mobile-nav-item { border: 0; background: transparent; color: var(--dim); display: grid; align-content: center; justify-items: center; gap: 3px; min-width: 0; padding: 5px 1px; border-radius: 14px; position: relative; }
  .mobile-nav-item b { font-size: 12px; font-weight: 600; } .mobile-nav-item > span { display: grid; place-items: center; height: 22px; }
  .mobile-nav-item.active { color: var(--accent); background: var(--glow); }
  .mobile-nav-main > span { width: 38px; height: 34px; margin-top: -15px; background: var(--accent); color: var(--ink); border-radius: 12px; box-shadow: 0 6px 0 var(--bg), 0 8px 20px var(--glow-strong); }
  #toast { bottom: calc(92px + env(safe-area-inset-bottom)); right: 16px; }
  .orbit-banner { grid-template-columns: 1fr; min-height: 0; padding: 22px; border-radius: 22px; }
  .orbit-banner h2 { font-size: 28px; max-width: 265px; }
  .orbit-banner p { display: none; }
  .orbit-banner .orbit-scene { position: absolute; right: -48px; top: -45px; width: 180px; height: 180px; opacity: .35; }
  .orbit-banner .orbit-stage { transform: scale(.48); }
  .orbit-banner .actions .button { flex: 1; padding: 10px 12px; }
  .home-nav, .home-footer { padding: 20px 18px; } .home-nav nav { display: none; }
  .home-nav .brand { font-size: 20px; gap: 8px; } .home-nav .brand img { width: 34px; height: 34px; }
  .brand small { font-size: 12px; letter-spacing: .05em; } .home-nav .button { padding-inline: 12px; }
  .home-hero { grid-template-columns: 1fr; padding: 48px 22px 32px; gap: 12px; } .home-hero h1 { font-size: 52px; } .home-hero p { font-size: 16px; }
  .home-hero .actions { align-items: stretch; flex-direction: column; }
  .home-hero .orbit-scene { height: 330px; overflow: hidden; }
  .home-hero .orbit-label { top: 5%; left: 0; padding: 9px; } .home-hero .orbit-label.second { top: auto; bottom: 5%; right: 0; left: auto; }
  .home-strip { gap: 16px; padding: 20px; text-align: center; } .home-section { padding: 48px 18px; }
  .home-footer { flex-direction: column; align-items: flex-start; gap: 24px; }
  .android-download-card { grid-template-columns: 1fr; padding: 26px 20px; gap: 20px; } .android-download-card .actions { flex-direction: column; align-items: stretch; }
  .phone-preview { min-height: 400px; } .phone-shell { width: 200px; height: 380px; }
  .auth-card { padding: 26px 22px; } .auth-card h1 { font-size: 30px; } .checks { grid-template-columns: 1fr; } .wrap { margin-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* 22. Administrator workspace */
.admin-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.admin-grid{align-items:start}.admin-grid .form-grid{grid-template-columns:1fr}
.admin-grid .card>form,.admin-person form{display:grid;gap:16px}
.admin-check{display:flex;align-items:center;gap:12px;margin:0;min-height:44px}
.admin-check input{width:20px;height:20px;min-height:20px;flex:none;accent-color:var(--accent)}
.admin-person{padding:24px 0;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:24px;min-width:0}
.admin-person p,.admin-grid p{overflow-wrap:anywhere}.admin-person .actions{margin:12px 0}
.admin-person details{align-self:start}.admin-person summary{cursor:pointer;min-height:44px;padding:10px 0}
.admin-person form{padding:16px 0}.admin-person small{display:block;margin-top:12px}
.admin-users{margin:16px 0}.admin-tabs .button{min-width:0}
@media(max-width:760px){.admin-person{grid-template-columns:1fr}.admin-tabs{display:grid;grid-template-columns:1fr 1fr}.admin-tabs .button{font-size:12px;padding:12px 8px}.admin-grid{grid-template-columns:1fr}.admin-person .form-grid{grid-template-columns:1fr}}

/* 23. Discipline studio — monthly grid and weekly task board. */
.habit-studio,.task-studio{background:var(--studio-bg);border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px;margin-bottom:24px;min-width:0;box-shadow:var(--shadow)}
.studio-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.studio-head h2{font-size:clamp(24px,2.4vw,34px);margin-bottom:8px}.studio-head p{margin:0}.studio-head .eyebrow{font-size:12px}
.studio-head .actions{flex-shrink:0}.studio-head .actions strong{font-size:14px}.studio-overview{display:grid;grid-template-columns:240px 1fr;gap:28px;padding-bottom:28px;border-bottom:1px solid var(--line-soft)}
.studio-progress{text-align:center;border-right:1px solid var(--line-soft);padding-right:28px}.studio-progress p{margin:0;font-size:13px}.studio-progress .eyebrow{text-align:left}.studio-progress b{color:var(--text)}
.studio-ring{position:relative;width:180px;aspect-ratio:1;margin:12px auto 16px;display:grid;place-items:center}.studio-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.studio-ring circle{fill:none;stroke-width:7}.ring-track{stroke:var(--studio-grid)}.ring-value{stroke:var(--accent);stroke-linecap:round;filter:drop-shadow(0 0 5px var(--glow-strong))}.studio-ring>div{text-align:center}.studio-ring strong{font-size:48px;line-height:1;letter-spacing:-.07em;font-family:var(--font-heading);color:var(--text)}.studio-ring strong small{display:inline;font-size:24px;color:var(--accent)}.studio-ring div>span{font-size:12px;letter-spacing:.13em;color:var(--muted);display:block;margin-top:10px}
.studio-pulse{min-width:0;padding-top:0}.studio-pulse h3{margin:0}.studio-streak{white-space:nowrap;font-size:12px;color:var(--muted)}.studio-streak b{font-size:30px;color:var(--accent);margin-right:4px}.studio-chart{height:210px;margin:18px 0 0}.studio-key{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim)}.studio-key i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px}
.studio-matrix{padding-top:28px;min-width:0}.studio-matrix .row{margin-bottom:16px}.studio-matrix h3{margin:0}.studio-grid-scroll{overflow:auto;overscroll-behavior-inline:contain;scrollbar-color:var(--line) var(--studio-bg);scrollbar-width:thin;max-width:100%;border:1px solid var(--line-soft);border-radius:12px}
.studio-table{table-layout:fixed;border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;margin:0}.studio-table th,.studio-table td{padding:0;text-align:center;min-width:28px;height:52px;border-bottom:1px solid var(--line-soft);font-size:12px;white-space:nowrap}.studio-table thead th{height:40px;color:var(--dim);font-weight:500}.studio-table th:first-child{position:sticky;left:0;z-index:2;min-width:160px;width:160px;max-width:160px;background:var(--studio-bg);text-align:left;padding:0 12px;border-right:1px solid var(--line-soft)}.studio-table td:last-child,.studio-table td:nth-last-child(2),.studio-table th:last-child,.studio-table th:nth-last-child(2){min-width:64px}.studio-table tbody th a{display:flex;gap:8px;align-items:center;white-space:normal;line-height:1.4;font-size:12px;color:var(--text)}
.studio-habit-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}.studio-table tr:nth-child(4n+2) .studio-habit-dot{background:var(--chart-mint)}.studio-table tr:nth-child(4n+3) .studio-habit-dot{background:var(--warning)}.studio-table tr:nth-child(4n+4) .studio-habit-dot{background:var(--expense)}
.studio-check{display:grid;place-items:center;min-height:44px;width:28px;padding:0;border:0;background:transparent;color:var(--dim);border-radius:6px}.studio-check span{display:grid;place-items:center;border:1px solid var(--line);width:21px;height:21px;border-radius:50%;font-size:13px;line-height:1;font-weight:800}.studio-check.is-done span{background:var(--accent);border-color:var(--accent);color:var(--ink);box-shadow:0 0 10px var(--glow-strong)}.studio-check:disabled{cursor:default;opacity:.35}.studio-check:not(:disabled):hover span{border-color:var(--accent);transform:scale(1.08)}.studio-percent{color:var(--accent)}.studio-table small{font-size:12px}
.studio-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:24px}.studio-day{text-align:center;background:var(--studio-panel);padding:18px 4px;border:1px solid var(--line-soft);border-radius:14px}.studio-day>span{font-weight:700;font-size:13px}.studio-day.is-current,.task-week-day.is-current{border-color:var(--line-accent);background:var(--glow)}.studio-ring.mini{width:68px;margin:14px auto}.studio-ring.mini b{font-size:16px}.studio-ring.mini circle{stroke-width:6}
.habit-editor-panel{margin-bottom:24px;border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px;background:var(--surface)}.habit-editor-panel summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--accent);font-weight:600}.habit-editor-panel .habit-editor{margin:16px 0 0;box-shadow:none}.habit-editor-panel:not([open]){padding:8px 22px}
.task-week-summary{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:20px 0 8px;color:var(--muted);font-size:13px}.task-week-summary b{font-size:32px;color:var(--accent);margin-right:8px}.task-week-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:24px 0}.task-week-day{min-width:0;padding:18px 12px;border:1px solid var(--line-soft);background:var(--studio-panel);border-radius:14px;text-align:center}.task-week-day h3{font-size:14px;margin-bottom:6px}.week-task-list{margin:20px 0;min-height:80px}.week-task{margin-bottom:12px}.week-task button{display:flex;width:100%;min-height:44px;border:0;background:transparent;color:var(--text);padding:4px 0;text-align:left;align-items:flex-start;gap:7px}.week-task button b{font-size:12px;line-height:1.6;font-weight:500;overflow-wrap:anywhere}.week-task button span{color:var(--accent);font-size:18px;line-height:1.1}.week-task.is-done b{text-decoration:line-through;color:var(--dim)}.week-empty{color:var(--dim);padding:20px 0}
@media(max-width:1100px){.studio-head{align-items:flex-start;flex-direction:column}.task-week-board{grid-template-columns:repeat(4,minmax(0,1fr))}.studio-overview{grid-template-columns:200px 1fr}.studio-progress{padding-right:20px}.studio-ring{width:155px}.studio-week{gap:6px}.studio-ring.mini{width:58px}}
@media(max-width:760px){.habit-studio,.task-studio{padding:18px 14px}.studio-overview{grid-template-columns:1fr;gap:24px}.studio-progress{border-right:0;border-bottom:1px solid var(--line-soft);padding:0 0 20px}.studio-progress .eyebrow{text-align:center}.studio-ring{width:150px}.studio-chart{height:190px}.studio-week{grid-template-columns:repeat(4,minmax(0,1fr))}.studio-day{padding:12px 3px}.studio-head .actions{flex-wrap:wrap}.studio-head .button.primary{width:100%;margin-top:8px}.studio-matrix .row{align-items:flex-start;gap:12px}.studio-matrix .row>small{max-width:145px}.studio-table th:first-child{min-width:120px;width:120px;max-width:120px;padding:0 8px}.studio-check{width:44px}.studio-table th,.studio-table td{min-width:44px}.studio-check span{width:26px;height:26px}.studio-streak b{font-size:24px}.studio-pulse .row{align-items:flex-start}.studio-pulse h3{font-size:17px}.task-week-board{grid-template-columns:repeat(2,minmax(0,1fr))}.task-week-summary{align-items:flex-start;flex-direction:column;gap:0}}
@media(prefers-reduced-motion:reduce){.studio-check:hover span{transform:none}}