:root {
  color-scheme: dark;
  --bg:#0d1b2a; --page-gradient:
    radial-gradient(at 0% 0%,hsla(178,100%,58%,.42) 0,transparent 48%),
    radial-gradient(at 50% 0%,hsla(184,100%,68%,.34) 0,transparent 48%),
    radial-gradient(at 100% 0%,hsla(197,100%,55%,.30) 0,transparent 48%),
    radial-gradient(at 50% 100%,hsla(213,100%,47%,.38) 0,transparent 52%),
    radial-gradient(at 0% 100%,hsla(168,100%,58%,.22) 0,transparent 45%);
  --card:rgba(14,27,45,.54); --card-2:rgba(69,87,119,.28); --input:rgba(7,17,31,.38);
  --fg:#f5f7ff; --muted:rgba(231,239,255,.68); --line:rgba(224,235,255,.18);
  --accent:#a6edf0; --accent-strong:#00b6c4; --accent-2:#287fe5; --accent-glow:rgba(0,182,196,.27); --bad:#f87171;
  --budget-accent:#0e9f90; --budget-wash:rgba(18,160,145,.12); --budget-summary-bg:rgba(18,160,145,.14); --budget-summary-line:rgba(18,160,145,.38); --spending-color:#35c6b2; --spending-category-accent:#d98736;
  --task-accent:#a9eff0; --task-wash:rgba(0,182,196,.2); --goal-accent:#a9d9ff; --goal-wash:rgba(40,127,229,.22);
  --points-color:#69c8f3; --points-wash:rgba(40,127,229,.2); --points-summary-bg:rgba(40,127,229,.2); --points-summary-line:rgba(105,200,243,.36);
  --placeholder:#8294a0; --check-border:#9bb3bf; --check-mark:#062933;
  --nav-bg:rgba(19,34,54,.42); --nav-border:rgba(255,255,255,.24); --shadow:0 16px 38px rgba(0,0,0,.3);
  --nav-on-bg:linear-gradient(145deg,rgba(134,232,236,.42),rgba(53,139,226,.38)); --nav-on-fg:#fff;
  --nav-active-border:rgba(255,255,255,.30); --nav-active-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 5px 16px rgba(35,54,105,.16);
  --nav-sheen:linear-gradient(132deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 35%,transparent 58%,rgba(101,214,231,.12));
  --nav-filter:blur(32px) saturate(1.9) contrast(1.04);
  --nav-label-top:rgba(255,255,255,.92); --nav-label-bottom:rgba(223,233,255,.62);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#e8f1f4; --page-gradient:
    radial-gradient(at 0% 0%,rgba(255,255,255,.64) 0,transparent 46%),
    radial-gradient(at 92% 10%,rgba(119,202,245,.50) 0,transparent 48%),
    radial-gradient(at 10% 92%,rgba(86,211,194,.38) 0,transparent 48%),
    linear-gradient(130deg,#b9f0e8 0%,#9bd9f2 53%,#8ec5fc 100%);
  --card:rgba(255,255,255,.50); --card-2:rgba(255,255,255,.36); --input:rgba(255,255,255,.42);
  --fg:#20243a; --muted:rgba(35,44,70,.68); --line:rgba(70,85,125,.18);
  --accent:#087f9f; --accent-strong:#008aa5; --accent-2:#287ec3; --accent-glow:rgba(0,138,165,.22); --bad:#dc2626;
  --budget-accent:#087f73; --budget-wash:rgba(18,160,145,.1); --budget-summary-bg:rgba(18,160,145,.14); --budget-summary-line:rgba(18,160,145,.38); --spending-color:#159b8b; --spending-category-accent:#b36b20;
  --task-accent:#087f97; --task-wash:rgba(0,138,165,.12); --goal-accent:#287fbd; --goal-wash:rgba(40,143,205,.13);
  --points-color:#208cc8; --points-wash:rgba(32,140,200,.13); --points-summary-bg:rgba(32,140,200,.13); --points-summary-line:rgba(32,140,200,.3);
  --placeholder:#83939a; --check-border:#718891; --check-mark:#fff;
  --nav-bg:rgba(246,250,255,.24); --nav-border:rgba(255,255,255,.52); --shadow:0 12px 34px rgba(57,76,132,.11);
  --nav-on-bg:linear-gradient(145deg,rgba(255,255,255,.48),rgba(94,185,222,.30) 52%,rgba(92,157,224,.25)); --nav-on-fg:#075d7d;
  --nav-active-border:rgba(255,255,255,.62); --nav-active-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(102,122,190,.12),0 4px 14px rgba(63,82,146,.12);
  --nav-sheen:linear-gradient(132deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 36%,transparent 61%,rgba(95,181,220,.12));
  --nav-filter:blur(42px) saturate(1.9) contrast(1.06);
  --nav-label-top:rgba(39,47,75,.92); --nav-label-bottom:rgba(55,67,99,.60);
}
:root[data-palette="fall"] {
  --bg:#25160f; --page-gradient:
    radial-gradient(at 0% 0%,hsla(15,92%,56%,.36) 0,transparent 48%),
    radial-gradient(at 52% 0%,hsla(34,100%,61%,.30) 0,transparent 48%),
    radial-gradient(at 100% 8%,hsla(3,78%,54%,.25) 0,transparent 48%),
    radial-gradient(at 50% 100%,hsla(26,75%,42%,.38) 0,transparent 52%),
    radial-gradient(at 0% 100%,hsla(44,95%,60%,.19) 0,transparent 45%);
  --card:rgba(48,31,25,.56); --card-2:rgba(105,68,49,.30); --input:rgba(25,15,12,.44);
  --fg:#fff5e8; --muted:rgba(255,231,206,.70); --line:rgba(255,224,192,.20);
  --accent:#ffd28b; --accent-strong:#e98537; --accent-2:#cb4d35; --accent-glow:rgba(233,133,55,.28); --bad:#ff7961;
  --task-accent:#f4b16d; --task-wash:rgba(231,122,48,.20); --goal-accent:#f1a27d; --goal-wash:rgba(203,77,53,.22);
  --points-color:#ffda7b; --points-wash:rgba(226,148,49,.23); --points-summary-bg:rgba(226,148,49,.23); --points-summary-line:rgba(255,204,105,.40);
  --budget-accent:#d98238; --budget-wash:rgba(217,130,56,.18); --budget-summary-bg:rgba(217,130,56,.17); --budget-summary-line:rgba(242,169,99,.38); --spending-color:#f0b448; --spending-category-accent:#e18a3c;
  --placeholder:#b89a85; --check-border:#d7b69a; --check-mark:#422518;
  --nav-bg:rgba(53,34,26,.48); --nav-border:rgba(255,228,203,.27); --shadow:0 16px 38px rgba(22,9,4,.34);
  --nav-on-bg:linear-gradient(145deg,rgba(244,178,100,.46),rgba(198,75,49,.40)); --nav-on-fg:#fff7ec;
  --nav-active-border:rgba(255,228,203,.38); --nav-active-shadow:inset 0 1px 0 rgba(255,239,220,.45),0 5px 16px rgba(65,25,12,.25);
  --nav-sheen:linear-gradient(132deg,rgba(255,245,225,.22),rgba(255,235,210,.04) 35%,transparent 58%,rgba(232,132,55,.14));
  --nav-label-top:rgba(255,248,237,.96); --nav-label-bottom:rgba(255,221,188,.68);
}
:root[data-theme="light"][data-palette="fall"] {
  color-scheme:light;
  --bg:#f6ead8; --page-gradient:
    radial-gradient(at 0% 0%,rgba(255,255,255,.72) 0,transparent 46%),
    radial-gradient(at 92% 10%,rgba(244,174,101,.46) 0,transparent 48%),
    radial-gradient(at 10% 92%,rgba(211,105,68,.25) 0,transparent 48%),
    linear-gradient(130deg,#f8edcf 0%,#f5d1ac 53%,#eeb58d 100%);
  --card:rgba(255,250,241,.62); --card-2:rgba(246,220,190,.43); --input:rgba(255,255,255,.62);
  --fg:#3b281e; --muted:rgba(76,52,37,.72); --line:rgba(123,77,48,.20);
  --accent:#9d4c2b; --accent-strong:#bd542b; --accent-2:#d88d30; --accent-glow:rgba(189,84,43,.20); --bad:#b9342b;
  --task-accent:#a9502e; --task-wash:rgba(199,100,53,.14); --goal-accent:#a94f3b; --goal-wash:rgba(199,87,54,.14);
  --points-color:#a95b22; --points-wash:rgba(208,139,43,.16); --points-summary-bg:rgba(208,139,43,.16); --points-summary-line:rgba(170,100,35,.30);
  --budget-accent:#a94b27; --budget-wash:rgba(189,84,43,.12); --budget-summary-bg:rgba(189,84,43,.13); --budget-summary-line:rgba(169,75,39,.30); --spending-color:#bd642d; --spending-category-accent:#a94b27;
  --placeholder:#8d7361; --check-border:#987a63; --check-mark:#fffaf2;
  --nav-bg:rgba(255,248,236,.36); --nav-border:rgba(255,255,255,.68); --shadow:0 12px 34px rgba(117,70,40,.14);
  --nav-on-bg:linear-gradient(145deg,rgba(255,248,227,.68),rgba(238,168,113,.38) 52%,rgba(209,109,75,.27)); --nav-on-fg:#773b25;
  --nav-active-border:rgba(255,255,255,.78); --nav-active-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(158,92,55,.12),0 4px 14px rgba(140,77,39,.13);
  --nav-sheen:linear-gradient(132deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 36%,transparent 61%,rgba(225,139,80,.15));
  --nav-label-top:rgba(74,47,33,.94); --nav-label-bottom:rgba(104,66,43,.68);
}

/* Custom modules */
textarea { font:inherit; color:inherit; padding:.65rem .8rem; border:1px solid var(--line); border-radius:.8rem; background:var(--input); width:100%; resize:vertical; min-height:3.2rem; }
textarea::placeholder { color:var(--placeholder); }
textarea:focus { outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-glow); }
.list li.cm-item { flex-wrap:wrap; align-items:flex-start; }
.list li.cm-item .body { flex:1 1 0; min-width:0; align-self:center; }
.cm-detail { flex:1 1 100%; padding-left:2.2rem; }
.cm-actions { display:flex; align-items:center; gap:.3rem; }
.cm-check-label { display:flex; align-items:center; gap:.5rem; flex:1 1 100%; color:var(--muted); font-size:.9rem; }
.cm-add-item { margin-top:.6rem; }

/* Tab switch slide */
@keyframes slide-in-right { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:none; } }
@keyframes slide-in-left { from { opacity:0; transform:translateX(-26px); } to { opacity:1; transform:none; } }
#content.slide-right { animation:slide-in-right .17s cubic-bezier(.2,.8,.2,1); }
#content.slide-left { animation:slide-in-left .17s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { #content.slide-right, #content.slide-left { animation:none; } }
.cm-note-text { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:.15rem; }
.custom-data-card h3 { margin:1rem 0 .4rem; font-size:.95rem; }
.row-form label.cm-check-label input[type=checkbox] { flex:none; width:1.5rem; }
.custom-module-settings h2 { margin:0; }
@media (min-width:560px) { .day-modules.even-count .module-card:last-child { grid-column:auto; } }

/* Minimal palette: flat solid background, no gradients or glass, neutral gray accents. */
:root[data-palette="minimal"] {
  --bg:#121212; --page-gradient:none;
  --card:#1a1a1a; --card-2:#222222; --input:#151515;
  --fg:#ededed; --muted:rgba(237,237,237,.60); --line:rgba(255,255,255,.12);
  --accent:#d6d6d6; --accent-strong:#5a6270; --accent-2:#4d5461; --accent-glow:rgba(160,170,190,.22); --bad:#f87171;
  --budget-accent:#a3adb8; --budget-wash:rgba(255,255,255,.05); --budget-summary-bg:rgba(255,255,255,.06); --budget-summary-line:rgba(255,255,255,.14); --spending-color:#a3adb8; --spending-category-accent:#bdbdbd;
  --task-accent:#d0d0d0; --task-wash:rgba(255,255,255,.05); --goal-accent:#bcbcbc; --goal-wash:rgba(255,255,255,.05);
  --points-color:#d0d0d0; --points-wash:rgba(255,255,255,.06); --points-summary-bg:rgba(255,255,255,.06); --points-summary-line:rgba(255,255,255,.14);
  --placeholder:#777777; --check-border:#8a8a8a; --check-mark:#ffffff;
  --nav-bg:#1a1a1a; --nav-border:rgba(255,255,255,.12); --shadow:0 8px 24px rgba(0,0,0,.35);
  --nav-on-bg:rgba(255,255,255,.10); --nav-on-fg:#ffffff;
  --nav-active-border:rgba(255,255,255,.14); --nav-active-shadow:none;
  --nav-sheen:none; --nav-filter:none;
  --nav-label-top:#ededed; --nav-label-bottom:rgba(237,237,237,.62);
}
:root[data-theme="light"][data-palette="minimal"] {
  color-scheme:light;
  --bg:#f7f7f5; --page-gradient:none;
  --card:#ffffff; --card-2:#f0f0ee; --input:#ffffff;
  --fg:#1c1c1c; --muted:rgba(28,28,28,.60); --line:rgba(0,0,0,.11);
  --accent:#3a3f47; --accent-strong:#3b424c; --accent-2:#2d333b; --accent-glow:rgba(60,70,90,.15); --bad:#dc2626;
  --budget-accent:#4b5563; --budget-wash:rgba(0,0,0,.035); --budget-summary-bg:rgba(0,0,0,.045); --budget-summary-line:rgba(0,0,0,.14); --spending-color:#6b7280; --spending-category-accent:#4b5563;
  --task-accent:#3a3f47; --task-wash:rgba(0,0,0,.035); --goal-accent:#4b5563; --goal-wash:rgba(0,0,0,.035);
  --points-color:#3a3f47; --points-wash:rgba(0,0,0,.04); --points-summary-bg:rgba(0,0,0,.045); --points-summary-line:rgba(0,0,0,.14);
  --placeholder:#9a9a9a; --check-border:#8a8a8a; --check-mark:#ffffff;
  --nav-bg:#ffffff; --nav-border:rgba(0,0,0,.11); --shadow:0 6px 20px rgba(0,0,0,.08);
  --nav-on-bg:rgba(0,0,0,.07); --nav-on-fg:#1c1c1c;
  --nav-active-border:rgba(0,0,0,.10); --nav-active-shadow:none;
  --nav-sheen:none; --nav-filter:none;
  --nav-label-top:#1c1c1c; --nav-label-bottom:rgba(28,28,28,.62);
}

* { box-sizing: border-box; }
body {
  touch-action: pan-y; /* Allows vertical scrolling while blocking pinch-zoom and double-tap zoom */
}

html { overscroll-behavior:none; touch-action:manipulation; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
body { overflow-x:hidden; overscroll-behavior:none; -webkit-user-select:none; user-select:none; }
input, textarea, select { -webkit-user-select:text; user-select:text; }
input, textarea, select {
  font-size: 16px;
}

button { touch-action:manipulation; transition:transform .08s ease; }
button:active:not(:disabled) { transform:scale(.97); }
.body:active { opacity:.6; }

html { -webkit-text-size-adjust:100%; background-color:var(--bg); background-image:var(--page-gradient); background-attachment:fixed; }
body { margin:0; min-height:100vh; background-color:var(--bg); background-image:var(--page-gradient); background-attachment:fixed; color:var(--fg); font:17px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
main { max-width:36rem; margin:0 auto; padding:1rem 1rem calc(7rem + env(safe-area-inset-bottom)); }
h1 { font-size:1.7rem; margin:.5rem 0 1rem; letter-spacing:-.01em; }
h2 { font-size:1.05rem; margin:0 0 .7rem; }
h3 { font-size:.8rem; margin:1rem 0 .2rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
a { color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:1.35rem; padding:1rem; margin:0 0 1rem; -webkit-backdrop-filter:blur(22px) saturate(1.45); backdrop-filter:blur(22px) saturate(1.45); box-shadow:0 12px 35px rgba(15,28,55,.09),inset 0 1px 0 rgba(255,255,255,.17); }

input, select, button { font:inherit; color:inherit; padding:.65rem .8rem; border:1px solid var(--line);
  border-radius:1rem; background:var(--input); min-width:0; }
input::placeholder { color:var(--placeholder); }
input:focus, select:focus { outline:none; border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-glow); }
button { cursor:pointer; min-height:2.75rem; -webkit-tap-highlight-color:transparent; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
button.primary { background:linear-gradient(135deg,var(--accent-strong),var(--accent-2)); border-color:transparent; color:#fff; font-weight:600; }
button.primary:active { filter:brightness(.9); }
button.big { width:100%; padding:.9rem; }
button.link { border:none; background:none; color:var(--accent); padding:.3rem .5rem; }
button.icon { border:1px solid var(--line); background:var(--card-2); width:2.75rem; height:2.75rem; border-radius:50%;
  font-size:1.4rem; padding:0; line-height:1; color:var(--fg); }
button.del { border:none; background:none; color:var(--muted); font-size:1.4rem; padding:.2rem .6rem; }
button.plus { width:100%; border:1px dashed var(--check-border); background:none; color:var(--accent); margin-top:.6rem; }

.seg { display:flex; gap:.2rem; padding:.2rem; background:var(--input); border:1px solid var(--line); border-radius:.9rem; }
.seg button { flex:1; border:none; background:none; color:var(--muted); border-radius:.7rem; padding:.55rem 0; }
.seg button.on { background:linear-gradient(135deg,var(--accent-strong),var(--accent-2)); color:#fff; font-weight:600; }

.datenav { display:flex; align-items:center; gap:.4rem; margin-bottom:.6rem; }
.datenav strong { flex:1; text-align:center; font-size:1.15rem; }
.summary { font-weight:600; margin:.2rem 0; }
.muted, .meta { color:var(--muted); font-size:.9rem; margin:.2rem 0; }
.bad { color:var(--bad); font-size:.9rem; margin:.2rem 0; }

.list { list-style:none; margin:.5rem 0 0; padding:0; }
.list li { display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-top:1px solid var(--line); }
.list li:first-child { border-top:none; }
.task-row { border-radius:.8rem; transition:background-color .15s ease,opacity .15s ease; }
.task-row.dragging { opacity:.58; background:var(--card-2); }
.task-section-heading { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.65rem; }
.task-section-heading h2 { margin:0; }
.task-reorder-setting { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.82rem; font-weight:600; }
.ios-switch { position:relative; flex:none; width:2.8rem; height:1.65rem; min-height:1.65rem; padding:.12rem; border:1px solid var(--line); border-radius:999px;
  background:var(--card-2); box-shadow:inset 0 1px 2px rgba(0,0,0,.12); cursor:pointer; }
.ios-switch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ios-switch[aria-checked="true"] { background:linear-gradient(110deg,var(--accent-strong),var(--accent-2)); border-color:transparent; }
.ios-switch-knob { display:block; width:1.3rem; height:1.3rem; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transform:translateX(0); transition:transform .18s ease; }
.ios-switch[aria-checked="true"] .ios-switch-knob { transform:translateX(1.12rem); }
.task-drag-handle { display:grid; place-items:center; flex:none; width:2.35rem; height:2.5rem; min-height:2.5rem; padding:0; margin:0 -.2rem 0 -.25rem;
  border:0; border-radius:.75rem; background:transparent; box-shadow:none; color:var(--muted); font-size:1.55rem; line-height:1; cursor:grab;
  touch-action:none; -webkit-user-select:none; user-select:none; }
.task-drag-handle:active { cursor:grabbing; background:var(--card-2); }
.task-drag-handle:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.body { flex:1; min-width:0; overflow-wrap:anywhere; }
li.done .title { text-decoration:line-through; color:var(--muted); }

input[type=checkbox] { -webkit-appearance:none; appearance:none; width:1.5rem; height:1.5rem; padding:0; flex:none;
  border:2px solid var(--check-border); border-radius:50%; background:rgba(255,255,255,.035); display:grid; place-content:center; }
input[type=checkbox]:checked { background:var(--accent-strong); border-color:var(--accent-strong); }
input[type=checkbox]:checked::after { content:''; width:.35rem; height:.7rem; border:solid var(--check-mark); border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-1px,-1px); }

.row-form { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; min-width:0; }
li > .row-form { flex:1; min-width:0; }
.row-form input:not(.pts-in):not(.amt-in), .row-form select { flex:1 1 8rem; }
.row-form.edit input:not(.pts-in) { flex-basis:100%; }
.pts-in { width:4.8rem; }
.amt-in { width:6rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 .2rem; }
.chip { padding:.3rem .75rem; border-radius:2rem; font-size:.9rem; background:var(--card-2); color:var(--muted); }
.chip.sel { background:linear-gradient(135deg,var(--accent-strong),var(--accent-2)); border-color:transparent; color:#fff; }
.chip.match:not(.sel) { border-color:var(--accent); color:var(--accent); }
.chip.new { border-style:dashed; background:none; }

label.field { display:block; margin:.6rem 0; font-size:.9rem; color:var(--muted); }
label.field input, label.field select { display:block; width:100%; margin-top:.25rem; color:var(--fg); }
.progress-block { margin:.9rem 0 0; }
progress { -webkit-appearance:none; appearance:none; width:100%; height:.6rem; border:none; border-radius:1rem;
  background:var(--line); overflow:hidden; }
progress::-webkit-progress-bar { background:var(--line); border-radius:1rem; }
progress::-webkit-progress-value { background:linear-gradient(90deg,var(--accent-strong),var(--accent-2)); border-radius:1rem; }
progress::-moz-progress-bar { background:linear-gradient(90deg,var(--accent-strong),var(--accent-2)); border-radius:1rem; }
.week-progress { display:grid; gap:.8rem; margin:0 0 1.1rem; padding:.95rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:1.25rem;
  -webkit-backdrop-filter:blur(22px) saturate(1.45); backdrop-filter:blur(22px) saturate(1.45); box-shadow:0 12px 35px rgba(15,28,55,.08),inset 0 1px 0 rgba(255,255,255,.17); }
.week-progress-item { min-width:0; }
.week-progress-label { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.2rem .75rem; margin-bottom:.25rem; font-size:.86rem; }
.week-progress-label strong { font-size:.92rem; }
.week-progress-label span { color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; }
.week-progress-spending progress::-webkit-progress-value { background:linear-gradient(90deg,var(--budget-accent),var(--spending-color)); }
.week-progress-spending progress::-moz-progress-bar { background:linear-gradient(90deg,var(--budget-accent),var(--spending-color)); }

nav { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(.75rem + env(safe-area-inset-bottom));
  width:calc(100% - 2rem); max-width:32rem; display:flex; gap:.25rem; padding:.35rem; z-index:10;
  isolation:isolate; overflow:hidden; background:var(--nav-bg); -webkit-backdrop-filter:var(--nav-filter); backdrop-filter:var(--nav-filter);
  border:1px solid var(--nav-border); border-radius:2rem; box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.06); }
nav::before { content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:var(--nav-sheen); }
nav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.5rem 0 .45rem;
  position:relative; z-index:1; border:1px solid transparent; border-radius:2rem; background:none; color:var(--muted); font-size:.68rem; font-weight:600; transition:.18s; }
nav button:not(.active) { background:transparent; border-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
nav button:not(.active)::before { content:none; display:none; }
nav button::before { content:''; position:absolute; width:2.9rem; height:2.9rem; left:50%; top:0; transform:translateX(-50%) scale(.92); border-radius:50%; opacity:0; visibility:hidden; background:var(--nav-on-bg); border:1px solid rgba(255,255,255,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 4px 16px rgba(35,54,105,.18); transition:transform .18s ease,opacity .18s ease; }
nav svg, nav button span { position:relative; z-index:1; }
nav svg { width:22px; height:22px; }
nav button span { background:linear-gradient(180deg,var(--nav-label-top),var(--nav-label-bottom)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
nav button.active { color:var(--nav-on-fg); background:var(--nav-on-bg); border-color:var(--nav-active-border); box-shadow:var(--nav-active-shadow); }
nav button.active span { background:linear-gradient(180deg,var(--nav-label-top),var(--nav-label-bottom)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav-brand { display:none; }

#toast { position:fixed; left:50%; bottom:calc(6rem + env(safe-area-inset-bottom)); transform:translate(-50%,1rem);
  background:var(--card-2); border:1px solid var(--line); color:var(--fg); padding:.6rem 1rem; border-radius:.9rem;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s; max-width:90%; z-index:30; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.msg { color:var(--bad); min-height:1.4em; }
[hidden] { display:none !important; }
label.field input[type=checkbox] { display:inline-grid; width:1.5rem; margin-right:.35rem; vertical-align:middle; }

/* Prominent Day/Week views and tap-to-open planner modules */
.view-heading { display:grid; gap:.75rem; margin:0 0 1.1rem; }
.view-heading h1 { font-size:clamp(1.8rem,7vw,2.35rem); line-height:1.05; margin:.1rem 0 .25rem; letter-spacing:-.035em; }
.view-heading h1, #login > h1, .module-screen-header h1 { color:transparent; background:linear-gradient(180deg,var(--fg) 0%,var(--muted) 100%); -webkit-background-clip:text; background-clip:text; }
.eyebrow { margin:0; color:var(--accent); font-size:.72rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.datenav { background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:.35rem; margin:0; }
.datenav, .module-detail-card, .data-chart-card, .data-period-card { -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); box-shadow:0 12px 32px rgba(13,30,59,.08),inset 0 1px 0 rgba(255,255,255,.16); }
.datenav strong { font-size:1rem; }
.day-switch { width:max-content; gap:.45rem; padding:.2rem; margin:-.55rem 0 1rem; border:0; background:transparent; box-shadow:none; }
.day-switch button { background:var(--card); }
.current-data-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.65rem; margin:-.55rem 0 1rem; }
.current-data-controls .day-switch { margin:0; }
.current-data-alternate { min-height:2.55rem; padding:.5rem .9rem; border:1px solid var(--nav-border); border-radius:999px; background:var(--nav-bg); color:var(--fg); font-weight:650; -webkit-backdrop-filter:var(--nav-filter); backdrop-filter:var(--nav-filter); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.settings-display-layout { display:grid; gap:.1rem; }
.day-summary, .week-overview-stats { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem; }
.summary-chip { display:inline-flex; align-items:center; min-height:2.25rem; padding:.45rem .8rem; border-radius:2rem; background:var(--card-2); color:var(--fg); font-size:.88rem; font-weight:650; }
.pace-note { flex-basis:100%; padding-left:.25rem; color:var(--muted); font-size:.76rem; }
.module-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:.75rem; }
.module-card { display:flex; flex-direction:column; align-items:stretch; gap:.55rem; min-height:8.75rem; width:100%; padding:1rem 1.05rem; text-align:left; border:1px solid var(--line); border-radius:1.15rem; background:linear-gradient(145deg,var(--card),var(--card-2)); box-shadow:0 5px 18px rgba(0,0,0,.12); }
.module-card:hover { border-color:var(--accent); }
.module-card:focus-visible, .module-back:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.module-card-top { display:flex; align-items:center; justify-content:space-between; gap:.7rem; font-size:1.05rem; }
.module-arrow { color:var(--accent); font-size:1.8rem; font-weight:400; line-height:1; }
.module-card-summary { color:var(--fg); font-size:1.1rem; font-weight:700; line-height:1.25; }
.module-card-description { color:var(--muted); font-size:.88rem; }
.module-detail-card { background:var(--card); border:1px solid var(--line); border-radius:1.1rem; padding:1rem; margin:0 0 1rem; }
.module-detail-card h2 { font-size:1.15rem; }
.module-screen { position:fixed; inset:0; z-index:50; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background-color:var(--bg); background-image:var(--page-gradient); background-attachment:fixed; color:var(--fg); border:0; border-radius:0; margin:0; padding:calc(1rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); }
.module-screen > * { width:100%; max-width:40rem; margin-left:auto; margin-right:auto; }
.module-screen-header { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.module-screen-header h1 { margin:.15rem 0 0; font-size:1.8rem; line-height:1.1; }
.module-back { display:inline-flex; flex:none; align-items:center; gap:.25rem; padding:.5rem .7rem; border-color:var(--line); background:var(--card); font-weight:650; }
.module-back:first-letter { font-size:1.4rem; }
.module-screen .datenav { margin-bottom:1rem; }
.module-open { overflow:hidden; }
.category-totals strong { font-variant-numeric:tabular-nums; }
#toast { z-index:60; }

@media (min-width: 560px) {
  .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .day-modules .module-card:last-child { grid-column:1 / -1; }
  .view-heading { grid-template-columns:1fr; gap:.9rem; }
}

/* Color cues distinguish the planner modules without changing the navigation. */
.module-card { border-inline-start:4px solid var(--module-accent); background-color:var(--card); background-image:linear-gradient(135deg,var(--module-wash),transparent 72%); }
.module-card-top strong { color:var(--module-accent); }
.module-arrow { color:var(--module-accent); }
.module-day-tasks, .module-week-budget { --module-accent:var(--task-accent); --module-wash:var(--task-wash); }
.module-day-budget, .module-settings-spending { --module-accent:var(--budget-accent); --module-wash:var(--budget-wash); }
.module-day-goals, .module-week-goals { --module-accent:var(--goal-accent); --module-wash:var(--goal-wash); }
.module-planning-points, .module-settings-rules { --module-accent:var(--points-color); --module-wash:var(--points-wash); }
.module-settings-goals { --module-accent:var(--goal-accent); --module-wash:var(--goal-wash); }
.module-settings-account { --module-accent:#f2c083; --module-wash:rgba(217,135,54,.16); }
.module-settings-day { --module-accent:var(--task-accent); --module-wash:var(--task-wash); }
.module-week-points { --module-accent:var(--points-color); --module-wash:var(--points-wash); }
.module-day-summary .summary-chip:first-child, .day-summary .summary-chip:first-child { border:1px solid var(--points-summary-line); background:var(--points-summary-bg); }
.day-summary .summary-chip:last-child, .week-overview-stats .summary-chip:last-child { border:1px solid var(--budget-summary-line); background:var(--budget-summary-bg); }
.module-screen { border-top:4px solid var(--module-accent,var(--accent-strong)); }
.module-screen-day-tasks, .module-screen-week-budget { --module-accent:var(--task-accent); }
.module-screen-day-budget { --module-accent:var(--budget-accent); }
.module-screen-day-goals, .module-screen-week-goals { --module-accent:var(--goal-accent); }
.module-screen-planning-points, .module-screen-settings-rules { --module-accent:var(--points-color); }
.module-screen-settings-spending { --module-accent:var(--budget-accent); }
.module-screen-settings-goals { --module-accent:var(--goal-accent); }
.module-screen-settings-account { --module-accent:#d98736; }
.module-screen-settings-day { --module-accent:var(--task-accent); }
.module-screen-settings-display { --module-accent:var(--accent-strong); }
.module-screen-week-points { --module-accent:var(--points-color); }
.module-detail-card.budget-detail { border-top:3px solid var(--budget-accent); }
.module-detail-card.budget-detail h2 { color:var(--budget-accent); }
.module-detail-card.goals-detail { border-top:3px solid var(--goal-accent); }
.module-detail-card.goals-detail h2 { color:var(--goal-accent); }
.category-totals li { border-inline-start:3px solid var(--spending-category-accent); padding-inline-start:.75rem; }
.category-totals li:nth-child(2n) { border-inline-start-color:var(--goal-accent); }
:root[data-theme="light"] .module-day-budget { --module-accent:var(--budget-accent); --module-wash:var(--budget-wash); }
.heading-subtitle { color:var(--muted); margin:.2rem 0; }
.planning-layout { display:grid; gap:1rem; }
.points-detail { border-top:3px solid var(--points-color); }
.points-detail h2 { color:var(--points-color); }
.settings-modules .module-card { min-height:7.5rem; }
.goal-plan-form { display:flex; flex-direction:column; align-items:stretch; gap:.55rem; margin-top:.85rem; }
.data-chart-card { min-width:0; margin:0 0 1rem; padding:1rem; background:var(--card); border:1px solid var(--line); border-radius:1.1rem; }
.data-chart-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; margin-bottom:.7rem; }
.data-chart-header h2 { margin-bottom:.2rem; }
.data-period-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.45rem .8rem; margin:0 0 1rem; padding:.4rem .7rem; background:var(--card); border:1px solid var(--line); border-radius:1rem; }
.data-period-card strong { font-size:.85rem; }
.chart-period { flex:none; }
.chart-period button { min-width:3.4rem; height:2rem; padding:.3rem .55rem; font-size:.82rem; line-height:1.1; }
.api-enable-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.8rem 0; }
.api-key-actions { margin:.75rem 0; }
.api-key-panel { display:grid; gap:.5rem; margin:.8rem 0; padding:.8rem; border:1px solid var(--line); border-radius:1rem; background:var(--card-2); }
.api-key-value, .api-endpoint code { overflow-wrap:anywhere; word-break:break-word; }
.api-key-value { display:block; padding:.65rem; border:1px solid var(--line); border-radius:.7rem; background:var(--input); color:var(--fg); user-select:text; }
.api-example { max-width:100%; overflow:auto; padding:.8rem; border:1px solid var(--line); border-radius:.8rem; background:var(--input); color:var(--fg); font-size:.78rem; user-select:text; }
.points-chart-scroll { width:100%; overflow-x:visible; }
.points-chart { display:block; width:100%; min-width:0; height:auto; }
.chart-gridline { stroke:var(--line); stroke-width:1; }
.chart-axis-label, .chart-x-label, .chart-axis-title { fill:var(--muted); font-family:system-ui,-apple-system,sans-serif; }
.chart-axis-label { font-size:12px; }
.chart-x-label { font-size:11px; }
.chart-axis-title { font-size:12px; font-weight:600; }
.chart-line { stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.chart-line-points { stroke:var(--points-color); }
.chart-line-spending { stroke:var(--spending-color); }
.chart-line-goal { stroke:#e3a941; stroke-width:2.5; stroke-dasharray:5 4; }
.chart-point { stroke:var(--card); stroke-width:2.5; }
.chart-point-points { fill:var(--points-color); }
.chart-point-spending { fill:var(--spending-color); }
.chart-point-goal { fill:#e3a941; stroke-width:2; }
.chart-legend { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin:.1rem 0 .65rem; color:var(--muted); font-size:.78rem; }
.chart-legend-item { display:inline-flex; align-items:center; gap:.4rem; }
.chart-legend-swatch { display:inline-block; width:1.1rem; height:0; border-top:3px solid var(--points-color); }
.chart-legend-swatch.goal-swatch { border-top:2px dashed #e3a941; }
.goal-progress-list { display:grid; gap:.85rem; margin-top:.85rem; }
.goal-progress-card { border-top:3px solid var(--goal-accent); }
.goal-progress-card h2 { color:var(--goal-accent); }
.goal-progress-label { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.25rem; }
.goal-progress-label strong { min-width:0; overflow-wrap:anywhere; }
.goal-progress-label span, .pie-legend-value { color:var(--muted); font-size:.86rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.goal-progress-row progress { height:.75rem; }
.goal-progress-row progress::-webkit-progress-value { background:linear-gradient(90deg,var(--goal-accent),var(--accent-strong)); }
.goal-progress-row progress::-moz-progress-bar { background:linear-gradient(90deg,var(--goal-accent),var(--accent-strong)); }
.spending-category-card { border-top:3px solid var(--spending-category-accent); }
.spending-category-card h2 { color:var(--spending-category-accent); }
.refund-hint { margin:.15rem 0 .4rem; }
.refund-categories { margin:.1rem 0 0; padding:0; list-style:none; }
.refund-categories li { display:flex; justify-content:space-between; gap:.8rem; padding:.45rem .55rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.refund-categories strong { color:var(--muted); white-space:nowrap; }
.spending-pie-layout { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:1.2rem; margin-top:.8rem; }
.spending-pie { display:block; width:min(100%,18rem); height:auto; margin:0 auto; }
.pie-legend { display:grid; gap:.15rem; margin:0; padding:0; list-style:none; }
.pie-legend li { display:flex; align-items:center; justify-content:space-between; gap:.7rem; min-width:0; padding:.48rem 0; border-bottom:1px solid var(--line); }
.pie-legend-label { display:flex; align-items:center; gap:.5rem; min-width:0; overflow-wrap:anywhere; }
.pie-legend-mark { width:.75rem; height:.75rem; flex:none; }
.pie-legend-value { text-align:right; }
.chart-data-details { border-top:1px solid var(--line); padding-top:.6rem; }
.chart-data-details summary { color:var(--accent); cursor:pointer; }
.chart-data-details table { width:100%; border-collapse:collapse; margin-top:.5rem; font-size:.9rem; }
.chart-data-details caption { text-align:left; color:var(--muted); padding:.35rem 0; }
.chart-data-details th, .chart-data-details td { text-align:left; border-bottom:1px solid var(--line); padding:.35rem .5rem; }
.chart-data-details td { text-align:right; font-variant-numeric:tabular-nums; }
.points-data-card { border-top:3px solid var(--points-color); }
.points-data-card h2 { color:var(--points-color); }
.spending-data-card { border-top:3px solid var(--spending-color); }
.spending-data-card h2 { color:var(--spending-color); }
.spending-data-detail { border-top:3px solid var(--spending-category-accent); }
.spending-data-detail h2 { color:var(--spending-category-accent); }
@media (min-width:34rem) {
  .planning-layout, .settings-modules { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spending-pie-layout { grid-template-columns:minmax(11rem,.8fr) minmax(0,1.2fr); }
}

.danger-zone { margin-top:1.25rem; padding:1rem; border:1px solid color-mix(in srgb,var(--bad) 45%,var(--line)); border-radius:1rem; background:color-mix(in srgb,var(--bad) 6%,var(--card)); }
.danger-zone summary { color:var(--bad); font-weight:700; cursor:pointer; }
.danger-zone > p { color:var(--muted); font-size:.9rem; }
.danger-zone .field { color:var(--fg); }
.danger-zone .field input { display:block; width:100%; margin-top:.3rem; }
.delete-form { display:grid; gap:.35rem; }
.danger-button { color:#fff; background:#b42332; border-color:#b42332; font-weight:700; }
.danger-button:hover { background:#921b27; }

/* Desktop browser (mouse/trackpad) narrower than 900px: keep a sidebar, collapsed to an icon rail,
   instead of switching to the phone-style bottom bar. Touch phones keep the bottom bar. */
@media (max-width: 899.98px) and (hover: hover) and (pointer: fine) {
  .app-active main { max-width:none; margin:0; padding:1rem 1rem 3rem 5.75rem; }
  .app-active #content { max-width:36rem; margin:0 auto; }
  .app-active nav { left:.75rem; right:auto; top:.75rem; bottom:.75rem; transform:none; width:4.4rem; max-width:none; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.35rem; padding:.45rem; border-radius:1.25rem; }
  .app-active nav .nav-brand { display:flex; justify-content:center; padding:.5rem 0 .75rem; font-size:0; }
  .app-active .nav-brand img { width:1.9rem; height:1.9rem; }
  .app-active nav button { flex:none; min-height:3.6rem; flex-direction:column; justify-content:center; align-items:center; gap:.2rem; padding:.5rem 0; border-radius:.95rem; font-size:.62rem; }
  .app-active nav button::before { display:none; }
  .app-active nav button.active { background:var(--nav-on-bg); border-color:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 3px 10px rgba(30,35,70,.12); }
  .app-active nav svg { width:21px; height:21px; flex:none; }
  .app-active #toast { bottom:1.5rem; }
}

/* Wider desktop workspace with persistent navigation; the compact glass tab bar remains on mobile. */
@media (min-width: 900px) {
  .app-active main { width:100%; max-width:none; margin:0; padding:2rem 3rem 3rem 16.5rem; }
  .app-active #content { width:100%; max-width:64rem; margin:0 auto; }
  .app-active #content > .view-heading { grid-template-columns:minmax(0,1fr) minmax(22rem, auto); align-items:end; margin-bottom:1.4rem; }
  .app-active .view-heading h1 { font-size:2.55rem; }
  .app-active nav { left:1rem; top:1rem; bottom:1rem; transform:none; width:13.5rem; max-width:none; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.5rem; padding:.65rem; border-radius:1.35rem; }
  .app-active nav .nav-brand { display:flex; align-items:center; gap:.7rem; padding:.9rem .8rem 1.1rem; color:var(--fg); font-size:1.25rem; font-weight:800; letter-spacing:-.03em; }
  .app-active .nav-brand img { width:2rem; height:2rem; }
  .app-active nav button { flex:none; min-height:3.25rem; flex-direction:row; justify-content:flex-start; gap:.9rem; padding:.7rem .9rem; border-radius:.95rem; font-size:.92rem; }
  .app-active nav button::before { display:none; }
  .app-active nav button.active { background:var(--nav-on-bg); border-color:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 3px 10px rgba(30,35,70,.12); }
  .app-active nav svg { width:21px; height:21px; flex:none; }
  .app-active .module-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
  .app-active .day-modules .module-card:last-child { grid-column:auto; }
  .app-active .module-card { min-height:10.5rem; padding:1.25rem; }
  .app-active .settings-modules { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .app-active .data-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:1rem; max-width:60rem; margin-inline:auto; }
  .app-active .data-charts > * { min-width:0; }
  .app-active .module-screen { padding:2.25rem 2rem; }
  .app-active .module-screen > * { max-width:60rem; }
}