/* Daybook — playful, professional, with a Pinoy touch (time-of-day scenes: Mayon, Rizal Park, BGC; banderitas; banig weave).
   Mobile-first; a centered phone-width column on larger screens. */

:root {
  --bg: #f5edde; --bg-outer: #e9dfcb; --surface: #fffdf8; --surface-2: #f8f2e6; --surface-3: #f1e9d9;
  --ink: #1f2220; --ink-2: #4b4f49; --muted: #8b8577; --line: #ece3d2;
  --blue: #2f6cf0; --blue-ink: #2457cf; --red: #e2483d; --yellow: #f7c42b; --in: #1d8a4e; --out: #d4483b; --warn: #c97a12;
  --radius: 22px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(60, 45, 20, .05), 0 6px 18px rgba(60, 45, 20, .06);
  --spring: cubic-bezier(.32, .72, 0, 1);
  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
  /* Banig: a soft diagonal weave laid over colored cards */
  /* Banknote details (Pinoy Peso cards): a rosette with an embossed peso sign, and a guilloche band along the bottom */
  --rosette: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22 viewBox=%220 0 200 200%22%3E%3Cg opacity=%22.16%22%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(0 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(10 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(20 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(30 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(40 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(50 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(60 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(70 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(80 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(90 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(100 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(110 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(120 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(130 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(140 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(150 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(160 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(170 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(180 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(190 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(200 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(210 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(220 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(230 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(240 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(250 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(260 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(270 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(280 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(290 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(300 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(310 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(320 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(330 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(340 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2286%22 ry=%2234%22 transform=%22rotate(350 100 100)%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.6%22/%3E%3Ccircle cx=%22100%22 cy=%22100%22 r=%2290%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%22100%22 cy=%22100%22 r=%2262%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.8%22/%3E%3Ccircle cx=%22100%22 cy=%22100%22 r=%2244%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.8%22/%3E%3C/g%3E%3Ctext x=%22100%22 y=%22124%22 text-anchor=%22middle%22 font-family=%22Georgia,serif%22 font-size=%2270%22 font-weight=%22700%22 fill=%22white%22 fill-opacity=%22.14%22 stroke=%22white%22 stroke-opacity=%22.22%22 stroke-width=%221.2%22%3E%E2%82%B1%3C/text%3E%3C/svg%3E");
  --guilloche: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22360%22 height=%2290%22 viewBox=%220 0 360 90%22 opacity=%22.2%22%3E%3Cpolyline points=%220,20.0 6,22.9 12,25.4 18,27.3 24,28.4 30,28.7 36,28.1 42,26.8 48,25.1 54,23.4 60,21.7 66,20.5 72,19.7 78,19.5 84,19.6 90,20.0 96,20.4 102,20.5 108,20.3 114,19.5 120,18.3 126,16.6 132,14.9 138,13.2 144,11.9 150,11.3 156,11.6 162,12.7 168,14.6 174,17.1 180,20.0 186,22.9 192,25.4 198,27.3 204,28.4 210,28.7 216,28.1 222,26.8 228,25.1 234,23.4 240,21.7 246,20.5 252,19.7 258,19.5 264,19.6 270,20.0 276,20.4 282,20.5 288,20.3 294,19.5 300,18.3 306,16.6 312,14.9 318,13.2 324,11.9 330,11.3 336,11.6 342,12.7 348,14.6 354,17.1 360,20.0%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,28.0 6,30.7 12,33.4 18,35.7 24,37.3 30,37.9 36,37.5 42,35.9 48,33.5 54,30.5 60,27.3 66,24.2 72,21.7 78,19.9 84,19.0 90,19.0 96,19.7 102,20.9 108,22.2 114,23.4 120,24.2 126,24.6 132,24.4 138,23.9 144,23.2 150,22.6 156,22.3 162,22.7 168,23.8 174,25.6 180,28.0 186,30.7 192,33.4 198,35.7 204,37.3 210,37.9 216,37.5 222,35.9 228,33.5 234,30.5 240,27.3 246,24.2 252,21.7 258,19.9 264,19.0 270,19.0 276,19.7 282,20.9 288,22.2 294,23.4 300,24.2 306,24.6 312,24.4 318,23.9 324,23.2 330,22.6 336,22.3 342,22.7 348,23.8 354,25.6 360,28.0%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,35.6 6,36.5 12,37.9 18,39.4 24,40.7 30,41.4 36,41.4 42,40.4 48,38.4 54,35.6 60,32.1 66,28.4 72,25.0 78,22.3 84,20.5 90,20.0 96,20.7 102,22.5 108,25.1 114,28.2 120,31.3 126,34.0 132,36.1 138,37.4 144,37.8 150,37.6 156,36.9 162,36.1 168,35.4 174,35.2 180,35.6 186,36.5 192,37.9 198,39.4 204,40.7 210,41.4 216,41.4 222,40.4 228,38.4 234,35.6 240,32.1 246,28.4 252,25.0 258,22.3 264,20.5 270,20.0 276,20.7 282,22.5 288,25.1 294,28.2 300,31.3 306,34.0 312,36.1 318,37.4 324,37.8 330,37.6 336,36.9 342,36.1 348,35.4 354,35.2 360,35.6%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,42.1 6,40.2 12,39.0 18,38.6 24,38.9 30,39.4 36,40.0 42,40.2 48,39.9 54,38.8 60,36.9 66,34.5 72,31.9 78,29.5 84,27.6 90,26.7 96,27.1 102,28.7 108,31.5 114,35.3 120,39.5 126,43.8 132,47.5 138,50.4 144,52.0 150,52.4 156,51.5 162,49.6 168,47.1 174,44.5 180,42.1 186,40.2 192,39.0 198,38.6 204,38.9 210,39.4 216,40.0 222,40.2 228,39.9 234,38.8 240,36.9 246,34.5 252,31.9 258,29.5 264,27.6 270,26.7 276,27.1 282,28.7 288,31.5 294,35.3 300,39.5 306,43.8 312,47.5 318,50.4 324,52.0 330,52.4 336,51.5 342,49.6 348,47.1 354,44.5 360,42.1%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,47.1 6,42.8 12,39.2 18,36.7 24,35.4 30,35.4 36,36.3 42,38.0 48,39.9 54,41.6 60,42.8 66,43.3 72,43.1 78,42.3 84,41.4 90,40.5 96,40.2 102,40.7 108,42.2 114,44.8 120,48.1 126,51.9 132,55.7 138,59.0 144,61.2 150,62.1 156,61.5 162,59.3 168,55.9 174,51.7 180,47.1 186,42.8 192,39.2 198,36.7 204,35.4 210,35.4 216,36.3 222,38.0 228,39.9 234,41.6 240,42.8 246,43.3 252,43.1 258,42.3 264,41.4 270,40.5 276,40.2 282,40.7 288,42.2 294,44.8 300,48.1 306,51.9 312,55.7 318,59.0 324,61.2 330,62.1 336,61.5 342,59.3 348,55.9 354,51.7 360,47.1%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,51.2 6,46.3 12,41.6 18,37.9 24,35.5 30,34.7 36,35.7 42,38.2 48,41.8 54,46.0 60,50.2 66,54.0 72,56.8 78,58.5 84,59.2 90,58.8 96,57.9 102,56.8 108,55.9 114,55.6 120,56.1 126,57.3 132,59.1 138,61.1 144,62.9 150,63.9 156,63.9 162,62.6 168,59.9 174,55.9 180,51.2 186,46.3 192,41.6 198,37.9 204,35.5 210,34.7 216,35.7 222,38.2 228,41.8 234,46.0 240,50.2 246,54.0 252,56.8 258,58.5 264,59.2 270,58.8 276,57.9 282,56.8 288,55.9 294,55.6 300,56.1 306,57.3 312,59.1 318,61.1 324,62.9 330,63.9 336,63.9 342,62.6 348,59.9 354,55.9 360,51.2%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,55.6 6,52.5 12,49.0 18,45.8 24,43.3 30,42.1 36,42.6 42,44.7 48,48.5 54,53.4 60,59.0 66,64.7 72,69.7 78,73.4 84,75.6 90,76.1 96,74.9 102,72.4 108,69.1 114,65.6 120,62.4 126,59.9 132,58.3 138,57.8 144,58.0 150,58.8 156,59.5 162,59.9 168,59.4 174,58.0 180,55.6 186,52.5 192,49.0 198,45.8 204,43.3 210,42.1 216,42.6 222,44.7 228,48.5 234,53.4 240,59.0 246,64.7 252,69.7 258,73.4 264,75.6 270,76.1 276,74.9 282,72.4 288,69.1 294,65.6 300,62.4 306,59.9 312,58.3 318,57.8 324,58.0 330,58.8 336,59.5 342,59.9 348,59.4 354,58.0 360,55.6%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,61.3 6,62.0 12,61.8 18,60.9 24,59.6 30,58.5 36,58.1 42,58.7 48,60.7 54,63.9 60,68.3 66,73.2 72,78.1 78,82.3 84,85.2 90,86.3 96,85.5 102,82.7 108,78.3 114,72.8 120,66.9 126,61.3 132,56.6 138,53.4 144,51.7 150,51.7 156,52.9 162,55.1 168,57.5 174,59.8 180,61.3 186,62.0 192,61.8 198,60.9 204,59.6 210,58.5 216,58.1 222,58.7 228,60.7 234,63.9 240,68.3 246,73.2 252,78.1 258,82.3 264,85.2 270,86.3 276,85.5 282,82.7 288,78.3 294,72.8 300,66.9 306,61.3 312,56.6 318,53.4 324,51.7 330,51.7 336,52.9 342,55.1 348,57.5 354,59.8 360,61.3%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3Cpolyline points=%220,69.1 6,73.9 12,77.5 18,79.8 24,80.5 30,80.1 36,78.9 42,77.5 48,76.4 54,75.9 60,76.5 66,78.0 72,80.3 78,82.8 84,85.0 90,86.4 96,86.4 102,84.7 108,81.3 114,76.3 120,70.4 126,64.1 132,58.2 138,53.4 144,50.4 150,49.5 156,50.7 162,53.8 168,58.4 174,63.7 180,69.1 186,73.9 192,77.5 198,79.8 204,80.5 210,80.1 216,78.9 222,77.5 228,76.4 234,75.9 240,76.5 246,78.0 252,80.3 258,82.8 264,85.0 270,86.4 276,86.4 282,84.7 288,81.3 294,76.3 300,70.4 306,64.1 312,58.2 318,53.4 324,50.4 330,49.5 336,50.7 342,53.8 348,58.4 354,63.7 360,69.1%22 fill=%22none%22 stroke=%22white%22 stroke-width=%22.7%22/%3E%3C/svg%3E");
  --banig: var(--rosette) no-repeat right -34px center / 170px 170px, var(--guilloche) repeat-x left bottom -6px / 360px 90px;
  --scroll: 0;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg-outer); }
body { margin: 0; min-height: 100dvh; font: 500 15px/1.4 var(--font); color: var(--ink); background: var(--bg-outer); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2.5px solid #7aa2ff; outline-offset: 2px; border-radius: 10px; }
.icon { flex: none; display: block; }

.app { position: relative; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--bg); overflow-x: clip; transition: transform .5s var(--spring), border-radius .5s var(--spring), filter .5s var(--spring); }
@media (min-width: 560px) { .app { box-shadow: 0 0 0 1px rgba(80, 60, 30, .06), 0 30px 80px rgba(80, 60, 30, .14); } }
.page { min-height: 100dvh; padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
.page-body { padding: 0 16px; display: grid; gap: 14px; }
.page-body > * { min-width: 0; }
.page.entering .page-body > * { animation: rise .5s var(--spring) both; }
.page.entering .page-body > *:nth-child(2) { animation-delay: .03s; } .page.entering .page-body > *:nth-child(3) { animation-delay: .06s; }
.page.entering .page-body > *:nth-child(4) { animation-delay: .09s; } .page.entering .page-body > *:nth-child(5) { animation-delay: .12s; }
.page.entering .page-body > *:nth-child(n+6) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Time-of-day header (tab roots) ---------- */
.sky { container-type: inline-size; --sky: linear-gradient(180deg, #86c8f0 0%, #b6dff6 52%, #dcefe9 100%); --title: #172a3d; --sub: #3f5a70; position: relative; height: 256px; padding: calc(env(safe-area-inset-top) + 34px) 16px 0; overflow: hidden; margin-bottom: 14px; border-radius: 0 0 30px 30px; background: var(--sky); box-shadow: 0 10px 24px -18px rgba(30, 50, 80, .5); }
.sky.tone-dawn { --sky: linear-gradient(180deg, #7fb2e6 0%, #c9d8ee 45%, #fbd2b0 82%, #fde3c8 100%); }
.sky.tone-noon { --sky: linear-gradient(180deg, #4fa8ee 0%, #8fcdf5 50%, #d4eef8 100%); }
.sky.tone-afternoon { --sky: linear-gradient(180deg, #6aaee6 0%, #a9d2ef 45%, #f7d9a8 100%); }
.sky.tone-dusk { --sky: linear-gradient(180deg, #2f3f7c 0%, #6d5a96 42%, #e8865f 82%, #f6b07a 100%); --title: #fff; --sub: rgba(255, 255, 255, .86); }
.sky.tone-night { --sky: linear-gradient(180deg, #0c1530 0%, #18264f 55%, #2a3a6e 100%); --title: #fff; --sub: rgba(220, 230, 255, .86); }
.sky-scene { position: absolute; inset: 0; pointer-events: none; transform: translateY(calc(var(--scroll) * .3px)); opacity: calc(1 - var(--scroll) / 280); }

/* Sun & moon ride an arc that follows the clock */
.sun-beams { position: absolute; left: var(--cx); top: var(--cy); width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; border-radius: 50%; opacity: .3;
  background: repeating-conic-gradient(from 0deg, rgba(255, 250, 220, .55) 0deg 3deg, transparent 3deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 10%, rgba(0, 0, 0, .35) 26%, transparent 52%); mask: radial-gradient(circle, #000 0 10%, rgba(0, 0, 0, .35) 26%, transparent 52%);
  animation: spin 90s linear infinite, beams-breathe 6s ease-in-out infinite; transition: left 2s var(--spring), top 2s var(--spring); }
.sun-beams::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 244, 190, .5), transparent 70%); }
@keyframes beams-breathe { 0%, 100% { opacity: .22; } 50% { opacity: .38; } }
.celestial { position: absolute; left: var(--cx); top: var(--cy); width: 74px; height: 74px; margin: -37px 0 0 -37px; transition: left 2s var(--spring), top 2s var(--spring); }
.celestial svg { width: 100%; height: 100%; overflow: visible; }
.celestial.is-sun::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 80, .5) 0 30%, rgba(255, 210, 80, 0) 68%); }
.ph-sun .ph-rays { fill: #fcd34d; transform-origin: 50px 50px; animation: spin 50s linear infinite; }
.ph-sun circle { fill: #fbbf24; stroke: #fde68a; stroke-width: 3; }
.tone-dawn .ph-sun circle, .tone-afternoon .ph-sun circle { fill: #f9a826; }
.celestial.is-moon { width: 50px; height: 50px; margin: -25px 0 0 -25px; filter: drop-shadow(0 0 18px rgba(253, 243, 196, .55)); }
.sky.cheer .celestial svg { animation: cheer-bounce .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cheer-bounce { 35% { transform: scale(1.28) rotate(12deg); } 70% { transform: scale(.94); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Clouds drift all the way across */
.cloud { position: absolute; left: 0; background: #fff; border-radius: 40px; opacity: .95; animation: cloud-drift linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud.c1 { width: 84px; height: 24px; top: 70px; animation-duration: 90s; animation-delay: -8s; } .cloud.c1::before { width: 36px; height: 36px; top: -18px; left: 12px; } .cloud.c1::after { width: 28px; height: 28px; top: -12px; left: 40px; }
.cloud.c2 { width: 64px; height: 18px; top: 112px; animation-duration: 116s; animation-delay: -34s; } .cloud.c2::before { width: 28px; height: 28px; top: -14px; left: 12px; } .cloud.c2::after { width: 20px; height: 20px; top: -9px; left: 34px; }
.cloud.c3 { width: 46px; height: 14px; top: 52px; opacity: .7; animation-duration: 140s; animation-delay: -52s; } .cloud.c3::before { width: 20px; height: 20px; top: -10px; left: 9px; }
.cloud.c4 { width: 56px; height: 16px; top: 140px; opacity: .8; animation-duration: 104s; animation-delay: -20s; } .cloud.c4::before { width: 24px; height: 24px; top: -12px; left: 10px; } .cloud.c4::after { width: 18px; height: 18px; top: -8px; left: 30px; }
.tone-dusk .cloud { opacity: .5; filter: none; } .tone-night .cloud { opacity: .14; filter: none; }
@keyframes cloud-drift { from { transform: translateX(-150px); } to { transform: translateX(104cqw); } }

/* Coconut trees and rice share one breeze: an 18s rhythm with two gusts, 9s apart */
.palm { position: absolute; overflow: visible; }
.palm .palm-tree { transform-origin: 30px 90px; animation: lean-wind 18s ease-in-out infinite; animation-delay: calc(2s + var(--delay, 0s) * .15); }
.palm .fronds { transform-origin: 33px 26px; animation: sway 3.4s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.palm.far .palm-tree { animation-name: lean-far; }
.palm.far .fronds { animation-duration: 4.2s; }
@keyframes lean-wind { 0%, 100% { transform: rotate(-1.5deg); } 7% { transform: rotate(6deg); } 14% { transform: rotate(2deg); } 21% { transform: rotate(5deg); } 32% { transform: rotate(-1.5deg); } 50% { transform: rotate(-2deg); } 57% { transform: rotate(6deg); } 64% { transform: rotate(2deg); } 71% { transform: rotate(5deg); } 82% { transform: rotate(-1.5deg); } }
@keyframes lean-far { 0%, 100% { transform: rotate(-1deg); } 9% { transform: rotate(3deg); } 30% { transform: rotate(-1deg); } 59% { transform: rotate(3deg); } 80% { transform: rotate(-1deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
@keyframes lean { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(2.5deg); } }

/* Morning: Mayon Volcano */
.mayon { position: absolute; right: -14px; bottom: 54px; width: 250px; height: 96px; overflow: visible; }
.mayon-smoke circle { fill: #fff; opacity: .7; animation: smoke 6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.mayon-smoke circle:nth-child(2) { animation-delay: 1.2s; } .mayon-smoke circle:nth-child(3) { animation-delay: 2.4s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 6px) scale(.5); } 30% { opacity: .75; } 100% { opacity: 0; transform: translate(10px, -16px) scale(1.4); } }
.meadow, .lawn { position: absolute; left: -10%; right: -10%; bottom: 0; height: 52px; border-radius: 50% 50% 0 0 / 22px 22px 0 0; background: linear-gradient(180deg, #a6d68a, #7fbd65); }
.palayan { position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; overflow: visible; }
.rice { fill: none; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: rice-wind 18s ease-in-out infinite, rice-sway 3.4s ease-in-out infinite; animation-delay: calc(2s + var(--i) * .28s), calc(var(--i) * -.8s); }
.paddy-water { stroke: #d9f0f6; stroke-width: 1.4; stroke-linecap: round; opacity: .75; animation: shimmer 4s ease-in-out infinite; }
@keyframes rice-wind { 0%, 100% { transform: skewX(2deg); } 7% { transform: skewX(-18deg); } 14% { transform: skewX(-6deg); } 21% { transform: skewX(-13deg); } 32% { transform: skewX(2deg); } 50% { transform: skewX(2.5deg); } 57% { transform: skewX(-18deg); } 64% { transform: skewX(-6deg); } 71% { transform: skewX(-13deg); } 82% { transform: skewX(2deg); } }
@keyframes rice-sway { 0%, 100% { translate: 0 0; } 50% { translate: 1px 0; } }
@keyframes shimmer { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.kubo { position: absolute; left: 118px; bottom: 22px; width: 44px; height: 37px; overflow: visible; }

/* Midday: Rizal Park (Luneta) */
.monument-shadow { transform-box: view-box; transform-origin: 280px 166px; transform: skewX(var(--shadow-skew, 0deg)); transition: transform 2s var(--spring); }
.tone-afternoon .monument-shadow path { opacity: .26; }
.rizal-plaza { position: absolute; left: 0; bottom: 0; width: 100%; height: 190px; overflow: visible; }
.sway-tree { transform-box: fill-box; transform-origin: 50% 100%; animation: lean 7s ease-in-out infinite; }
.sway-palm { transform-box: fill-box; transform-origin: 50% 100%; animation: lean-wind 18s ease-in-out infinite 2s; }
.sway-fronds { transform-box: fill-box; transform-origin: 50% 70%; animation: sway 3.6s ease-in-out infinite; }
.ph-flag { transform-box: fill-box; transform-origin: 0 50%; animation: flag-wave 1.8s ease-in-out infinite alternate; }
@keyframes flag-wave { from { transform: skewY(-4deg) scaleX(.94); } to { transform: skewY(3deg) scaleX(1.02); } }
/* A few birds gliding over, slowly */
.birds { position: absolute; left: 0; top: 70px; width: 54px; height: 18px; animation: birds-fly 60s linear infinite; animation-delay: -10s; }
.birds svg { width: 100%; height: 100%; overflow: visible; }
.wing { fill: none; stroke: #4a5a74; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: flap .7s ease-in-out infinite alternate; }
.wing.w2 { animation-delay: -.25s; } .wing.w3 { animation-delay: -.5s; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes birds-fly { 0% { transform: translate(-70px, 30px); } 60% { transform: translate(470px, -4px); } 100% { transform: translate(470px, -4px); } }

/* Night: BGC skyline */
.night-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 16, 40, .78) 0%, rgba(10, 16, 40, .5) 38%, rgba(10, 16, 40, 0) 62%); }
.bgc { position: absolute; left: 0; bottom: 0; width: 100%; height: 214px; overflow: visible; }
.lights { animation: lights 5s ease-in-out infinite; }
.lights.l1 { animation-delay: -1.6s; } .lights.l2 { animation-delay: -3.2s; }
@keyframes lights { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 60% { opacity: .95; } }
.beacon { animation: beacon 1.8s steps(1) infinite; }
@keyframes beacon { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.glint { animation: glint 9s ease-in-out infinite; }
@keyframes glint { 0%, 100% { opacity: .03; } 50% { opacity: .1; } }
.lattice { animation: lattice 4s ease-in-out infinite; }
@keyframes lattice { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.crown-band, .gold-edge { animation: frame-glow 3.6s ease-in-out infinite; }
@keyframes frame-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.crane { transform-box: fill-box; transform-origin: 30% 100%; animation: crane 14s ease-in-out infinite; }
@keyframes crane { 0%, 100% { transform: none; } 50% { transform: rotate(-3deg); } }
.traffic { position: absolute; left: 0; right: 0; bottom: 2px; height: 10px; overflow: hidden; }
.car { position: absolute; left: 0; top: 1px; width: 18px; height: 2.6px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff3c4); animation: car-go linear infinite; }
.car.c1 { animation-duration: 3.4s; } .car.c2 { animation-duration: 4.6s; animation-delay: -2s; } .car.c3 { animation-duration: 5.4s; animation-delay: -4s; }
.car.back { top: 6px; background: linear-gradient(90deg, #ff5a4f, transparent); animation-name: car-back; }
.car.c4 { animation-duration: 4s; animation-delay: -1s; } .car.c5 { animation-duration: 5.8s; animation-delay: -3.5s; }
@keyframes car-go { from { transform: translateX(-30px); } to { transform: translateX(520px); } }
@keyframes car-back { from { transform: translateX(520px); } to { transform: translateX(-30px); } }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: twinkle 2.6s ease-in-out infinite; }
.tone-dusk .stars i { opacity: .5; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.3); } }

.sky-top { position: relative; z-index: 3; display: flex; justify-content: flex-end; gap: 8px; min-height: 38px; }
.glass-btn, .mast-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .5); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); color: #2b5aa8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px rgba(40, 90, 150, .12); transition: transform .2s var(--spring); }
.tone-dusk .mast-btn, .tone-night .mast-btn, .tone-dusk .glass-btn, .tone-night .glass-btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }
.glass-btn:active, .mast-btn:active { transform: scale(.9); }
.sky-title { position: relative; z-index: 3; margin-top: 2px; max-width: 64%; }
.sky-title h1 { font-size: 31px; font-weight: 900; letter-spacing: -.8px; line-height: 1.05; color: var(--title); }
.sky-title h1.greeting { font-size: 22px; font-weight: 800; letter-spacing: -.3px; color: var(--sub); }
.sky-title h1.greeting span { display: block; margin-top: 2px; font-size: 32px; font-weight: 900; letter-spacing: -1px; color: var(--title); }
.sky-sub { font-size: 13px; font-weight: 800; color: var(--sub); margin-top: 4px; }
.place-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--sub); white-space: nowrap; background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tone-dusk .place-chip, .tone-night .place-chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); }
.compact-bar { position: fixed; z-index: 30; top: 0; left: 50%; width: min(100%, 480px); translate: -50% 0; padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; text-align: center; font-weight: 900; font-size: 16px; background: rgba(245, 237, 222, .86); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); border-bottom: 1px solid rgba(120, 100, 60, .1); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s, transform .3s var(--spring); }
.compact-bar.visible { opacity: 1; transform: none; }

/* ---------- Sub-page top bar ---------- */
.top-bar { position: sticky; top: 0; z-index: 25; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; margin-bottom: 6px; background: rgba(245, 237, 222, .88); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); }
.top-bar h1 { font-size: 17px; font-weight: 900; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; gap: 6px; min-width: 44px; justify-content: flex-end; }
.round-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--surface); color: var(--blue-ink); box-shadow: var(--shadow); transition: transform .2s var(--spring), opacity .2s; }
.round-btn:active { transform: scale(.9); }
.round-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Type helpers ---------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 6px 2px 8px; }
.section-head h2 { font-size: 18px; font-weight: 900; letter-spacing: -.3px; }
.section-head h2 b { font-weight: 800; font-size: 15px; color: var(--ink-2); margin-left: 4px; }
.section-head p { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.card .section-head { margin-top: 0; }
.link { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 4px 0; color: var(--blue-ink); font-weight: 800; font-size: 13px; white-space: nowrap; }
.center-link { display: flex; margin: 8px auto 0; }
.block { display: grid; gap: 8px; }
.label { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .8px; color: var(--muted); text-transform: uppercase; }
.label.light { color: rgba(255, 255, 255, .82); }
.display { display: block; font-size: 30px; font-weight: 900; letter-spacing: -1px; margin: 2px 0 4px; }
.big { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.4px; }
.strong { font-weight: 800; font-size: 14px; }
.in { color: var(--in); } .out { color: var(--out); } .muted { color: var(--muted); } .warn { color: var(--warn); }
.green-text { color: var(--in); } .blue-text { color: var(--blue-ink); } .orange-text { color: var(--warn); } .red-text { color: var(--out); }
.note { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.45; margin-top: 8px; }
.hint { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.45; padding: 0 4px; }
.hint .icon { margin-top: 2px; }
.hint.center { justify-content: center; }
.center { text-align: center; justify-items: center; }
.empty { display: grid; justify-items: center; gap: 10px; padding: 22px 16px; color: var(--muted); font-weight: 700; font-size: 13px; text-align: center; background: var(--surface); border-radius: var(--radius); border: 1.5px dashed var(--line); }
.list .empty, .card .empty { border: 0; background: none; }
.split-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 4px 0; }
.split-row > span { display: grid; gap: 2px; min-width: 0; }
.split-row .right { text-align: right; justify-items: end; }
.split-row small { font-size: 12px; color: var(--muted); font-weight: 700; }
.split-row.light small { color: rgba(255, 255, 255, .8); }
.summary-line { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }

/* ---------- Cards & surfaces ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.center { display: grid; gap: 4px; justify-items: center; text-align: center; }
.pad { padding: 16px; }
.card.list { padding: 4px 0; overflow: hidden; }
.card.list.flat { box-shadow: none; background: var(--surface-2); margin: 10px 0; }
.bar { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; margin: 10px 0 6px; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 8px; background: var(--blue); animation: grow .9s var(--spring) both; transform-origin: left; }
.bar.green i { background: #2fae63; } .bar.orange i { background: #f08a24; } .bar.red i { background: #e2483d; } .bar.coral i { background: #f0705a; } .bar.blue i { background: linear-gradient(90deg, #3f78f2, #6f9bf6); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Colored hero cards with a banig weave */
.hero-card { position: relative; display: grid; gap: 6px; padding: 16px; border-radius: 24px; color: #fff; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 26px -10px var(--glow, rgba(45, 95, 224, .55)); background: var(--grad, linear-gradient(160deg, #5189f8 0%, #2e62e2 58%, #2652cc 100%)); }
.hero-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .2), transparent 55%), var(--banig); }
.hero-card.indigo { --grad: linear-gradient(160deg, #5b72f2, #3a4fd6); --glow: rgba(70, 85, 220, .5); }
.hero-card.teal { --grad: linear-gradient(160deg, #1ca596, #0e6f65); --glow: rgba(20, 130, 115, .5); }
.hero-card.green { --grad: linear-gradient(160deg, #3dbb69, #1f8b4a); --glow: rgba(40, 150, 80, .5); }
.hero-card.purple { --grad: linear-gradient(160deg, #7c6cf0, #5446c9); --glow: rgba(90, 75, 210, .5); }
.hero-card.orange { --grad: linear-gradient(160deg, #ff9a3c, #f06a1d); --glow: rgba(240, 120, 40, .5); }
.hero-card.night { --grad: linear-gradient(160deg, #3c4673, #232946); --glow: rgba(35, 40, 80, .5); }
.hero-card.sky-card { --grad: linear-gradient(160deg, #3fa6f5, #1f7fd8); --glow: rgba(40, 130, 220, .5); }
.hero-card.center { justify-items: center; text-align: center; }
.link-card { transition: transform .25s var(--spring); }
.link-card:active, .tile:active, .wallet-card.grid:active, .row-link:active { transform: scale(.97); }
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hero-row > span:not(.hero-nav):not(.hero-label) { display: grid; gap: 1px; }
.hero-label { font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, .92); }
.hero-nav { display: flex; gap: 6px; }
.mini-btn { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .2); color: #fff; font-weight: 900; line-height: 1; }
.mini-btn:disabled { opacity: .35; }
.hero-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-main .sparkline { opacity: .9; }
.hero-amount { display: block; font-size: 34px; font-weight: 900; letter-spacing: -1.2px; line-height: 1.1; white-space: nowrap; }
.hero-amount small { font-size: 13px; font-weight: 800; letter-spacing: 0; opacity: .85; }
.hero-amount.small { font-size: 26px; }
.hero-note { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .82); }
.hero-card h3 { font-size: 20px; font-weight: 900; letter-spacing: -.4px; line-height: 1.2; max-width: 92%; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.glass-pill { flex: 1; min-width: 0; text-align: center; padding: 7px 10px; border-radius: 12px; font-weight: 800; font-size: 13px; background: rgba(255, 255, 255, .92); color: var(--in); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glass-pill.out { color: var(--out); }
.hero-card.blue .pill-row .glass-pill:not(.out):not(:first-child) { color: var(--blue-ink); }
.pill { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--surface-3); }
.pill.out { color: var(--out); background: #fdeae6; } .pill.in { color: var(--in); background: #e5f5ea; }
.hero-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .2); }
.hero-split small { display: block; font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, .9); }
.hero-split span { font-size: 11px; color: rgba(255, 255, 255, .75); font-weight: 700; }
.hero-split > strong { font-size: 20px; font-weight: 900; }
.hero-split.two { width: 100%; }
.hero-split.two span { display: grid; gap: 2px; font-size: 16px; color: #fff; } .hero-split.two span:last-child { text-align: right; }
.hero-split.two strong { font-size: 17px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); }
.hero-stats span { display: grid; gap: 1px; min-width: 0; }
.hero-stats small { font-size: 9.5px; font-weight: 900; letter-spacing: .7px; color: rgba(255, 255, 255, .78); }
.hero-stats strong { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-stats em { font-style: normal; font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, .72); }
.pace-bars { display: grid; gap: 6px; margin: 4px 0; }
.pace-bars > div { display: grid; grid-template-columns: 118px 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 800; }
.pace-bars span { color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pace-bars span::first-letter { text-transform: uppercase; }
.pace-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.pace-track i { display: block; height: 100%; width: var(--w); background: #fff; border-radius: 8px; animation: grow 1s var(--spring) both; transform-origin: left; }
.pace-track.ghost i { background: rgba(255, 255, 255, .55); }
.flow-bar { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .25); overflow: hidden; margin: 8px 0 4px; }
.flow-bar i { display: block; height: 100%; width: var(--w); background: #fff; border-radius: 8px; animation: grow 1s var(--spring) both; transform-origin: left; }
.year-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin: 8px 0 2px; }
.year-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, .9); animation: rise-bar .8s var(--spring) both; transform-origin: bottom; }
.year-bars i.forecast { background: rgba(255, 255, 255, .3); }
.year-bars i.neg { background: #ff9d8e; }
@keyframes rise-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Banner, due soon */
.banner { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.banner-art { font-size: 26px; }
.banner strong { display: block; font-size: 13.5px; font-weight: 900; }
.banner small { font-size: 12px; color: var(--muted); font-weight: 600; }
.due-list { display: grid; }
.due-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.due-item:first-child { border-top: 0; }
.due-icon { font-size: 15px; }
.due-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.due-when { font-size: 12px; font-weight: 800; color: var(--muted); }
.due-when.urgent { color: var(--out); }
.due-item strong { font-weight: 900; }

/* Colorful summary tiles */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { position: relative; display: grid; gap: 6px; padding: 13px; border-radius: 22px; color: #fff; min-height: 116px; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 20px -10px var(--glow); background: var(--grad); transition: transform .25s var(--spring); }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .25), transparent 60%), var(--banig); }
.tile.blue { --grad: linear-gradient(160deg, #4f86f7, #2b5ddd); --glow: rgba(45, 95, 224, .6); }
.tile.orange { --grad: linear-gradient(160deg, #ffa043, #f26a1c); --glow: rgba(240, 120, 40, .6); }
.tile.green { --grad: linear-gradient(160deg, #46c46f, #23974f); --glow: rgba(40, 160, 80, .6); }
.tile.skyblue { --grad: linear-gradient(160deg, #3caaf6, #1d7fdc); --glow: rgba(40, 130, 220, .6); }
.tile-head { display: flex; gap: 8px; align-items: center; }
.tile-head strong { display: block; font-size: 14px; font-weight: 900; line-height: 1.1; }
.tile-head small { font-size: 11px; font-weight: 700; opacity: .85; }
.tile-value { font-size: 19px; font-weight: 900; letter-spacing: -.5px; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-foot { font-size: 11px; font-weight: 700; opacity: .85; margin-top: -6px; }
.ring { flex: none; }
.ring-value { animation: ring-in 1.1s var(--spring) both; }
@keyframes ring-in { from { stroke-dasharray: 0 var(--ring-c); } }

/* ---------- Wallet cards ---------- */
.wallet-card { position: relative; display: grid; grid-template-rows: auto 1fr auto; text-align: left; border: 0; padding: 14px; border-radius: 22px; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(150deg, var(--card-from), var(--card-to)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 12px 24px -12px rgba(30, 30, 30, .55); }
.wallet-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 80% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), var(--banig); }
.card-watermark { position: absolute; right: -8px; bottom: -22px; z-index: -1; font-size: 96px; font-weight: 900; letter-spacing: -6px; color: rgba(255, 255, 255, .1); line-height: 1; }
.card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bank-badge { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: var(--card-to); background: rgba(255, 255, 255, .92); }
.card-name { min-width: 0; }
.card-name strong { display: block; font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-name small { display: block; font-size: 11.5px; font-weight: 700; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-count { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .2); white-space: nowrap; }
.card-more { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); font-weight: 900; letter-spacing: 1px; font-size: 13px; }
.card-chip { width: 34px; height: 26px; border-radius: 6px; margin-top: 14px; background: linear-gradient(135deg, #f5d98c, #c9a24a); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.card-foot { display: grid; align-self: end; margin-top: 18px; }
.card-foot small { font-size: 10px; font-weight: 900; letter-spacing: .9px; opacity: .8; }
.card-foot strong { font-size: 24px; font-weight: 900; letter-spacing: -.8px; white-space: nowrap; }
.card-foot em { font-style: normal; font-size: 11.5px; font-weight: 700; opacity: .85; }
.card-actions { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.card-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .2); color: #fff; backdrop-filter: blur(6px); transition: transform .2s var(--spring); }
.card-btn:active { transform: scale(.88); }
.wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wallet-card.grid { min-height: 132px; padding: 12px; transition: transform .25s var(--spring); }
.wallet-card.grid .card-foot strong { font-size: 18px; }
.wallet-card.grid .card-foot { margin-top: 10px; }
.wallet-card.grid .card-name strong { font-size: 13.5px; }
.wallet-card.grid .bank-badge { width: 28px; height: 28px; font-size: 10px; }
.wallet-card.add { --card-from: transparent; --card-to: transparent; background: transparent; color: var(--blue-ink); border: 2px dashed #cfc3ab; box-shadow: none; place-items: center; text-align: center; grid-template-rows: none; gap: 2px; align-content: center; }
.wallet-card.add::before { display: none; }
.wallet-card.add small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.hero-wallet { padding: 0 2px; }
.wallet-card.hero { width: 100%; min-height: 196px; padding: 18px; }
.wallet-card.hero .card-foot strong { font-size: 32px; }

/* Fanned, swipeable stack */
.card-stack { display: grid; gap: 12px; isolation: isolate; } /* keep the stack's z-index inside, below the tab bar */
.stack-cards { position: relative; height: 196px; margin-right: 34px; touch-action: pan-y; }
.stack-card { position: absolute; inset: 0; cursor: pointer; transform-origin: 50% 100%; transition: transform .42s cubic-bezier(.3, 1.25, .45, 1), opacity .3s; will-change: transform; user-select: none; -webkit-user-select: none; }
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 16px; margin: 0 -16px; scroll-padding: 16px; }
.chip-scroll::-webkit-scrollbar { display: none; }
.stack-chip { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; color: #fff; font-size: 11px; font-weight: 900; background: linear-gradient(150deg, var(--card-from), var(--card-to)); box-shadow: 0 0 0 3px var(--bg); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.stack-chip.active { transform: scale(1.12); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5.5px var(--card-from); }

/* ---------- Transactions ---------- */
.day-group { display: grid; gap: 6px; }
.day-head { display: flex; justify-content: space-between; padding: 6px 6px 0; font-size: 11.5px; font-weight: 900; letter-spacing: .5px; color: var(--muted); }
.swipe-row { position: relative; overflow: hidden; border-top: 1px solid var(--line); transition: height .26s var(--spring), opacity .2s; }
.swipe-row:first-child { border-top: 0; }
.swipe-row.collapsing { opacity: 0; }
.swipe-delete { position: absolute; inset: 0 0 0 auto; width: 88px; border: 0; display: grid; place-items: center; align-content: center; gap: 2px; background: #e5483b; color: #fff; font-size: 11px; font-weight: 800; }
.swipe-content { position: relative; width: 100%; background: var(--surface); transition: transform .35s var(--spring); touch-action: pan-y; }
.list.flat .swipe-content { background: var(--surface-2); }
.tx-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; padding: 10px 14px; border: 0; text-align: left; color: var(--ink); }
.tx-row > .icon { color: #c1b8a6; }
.tx-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-size: 18px; }
.tx-text { min-width: 0; display: grid; }
.tx-text strong { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-text small { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amount { font-weight: 900; font-size: 14.5px; white-space: nowrap; }
.tx-amount.in { color: var(--in); }
.tx-amount.muted { color: var(--muted); }
.search-field { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); color: var(--muted); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-weight: 700; color: var(--ink); }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- Buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--surface); color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: var(--shadow); transition: transform .2s var(--spring), background .2s; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; }
.btn.primary { background: linear-gradient(180deg, #4b82f6, #2c60e4); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(45, 95, 224, .8); }
.btn.small { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 12px; }
.btn.tiny { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 10px; box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--blue-ink); }
.btn.wide { width: 100%; }
.btn.grow { flex: 1; }
.btn.soft { background: #e8efff; color: var(--blue-ink); box-shadow: none; }
.btn.soft.blue { background: #dfe8ff; }
.btn.green { background: #e1f4e7; color: var(--in); }
.btn.danger { background: #fdecea; color: var(--out); box-shadow: none; }
.icon-btn { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 0; display: grid; place-items: center; background: #e8efff; color: var(--blue-ink); }
.icon-btn.danger { background: #fdecea; color: var(--out); }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.action-row.two { grid-template-columns: 1fr 1fr; }
.action-btn { display: grid; justify-items: center; gap: 3px; padding: 11px 6px; border: 0; border-radius: 16px; color: #fff; font-weight: 800; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 16px -10px rgba(0, 0, 0, .5); transition: transform .2s var(--spring); }
.action-btn:active { transform: scale(.95); }
.action-btn.coral { background: linear-gradient(170deg, #f47e6b, #e2523f); }
.action-btn.green { background: linear-gradient(170deg, #45c271, #22964d); }
.action-btn.blue { background: linear-gradient(170deg, #4d84f7, #2b5fe2); }
.input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font-weight: 700; outline: 0; transition: border-color .2s, box-shadow .2s; }
.input:focus, .input:focus-within { border-color: #8eacf6; box-shadow: 0 0 0 4px rgba(70, 120, 240, .12); }
.input.small { height: 40px; font-size: 13.5px; border-radius: 12px; }
textarea.input { height: auto; padding: 10px 14px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238b8577' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.pill-select { width: auto; justify-self: start; border-radius: 999px; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--surface); color: var(--ink-2); font-weight: 800; font-size: 13px; box-shadow: var(--shadow); transition: background .25s, color .25s, transform .2s var(--spring); }
.chip b { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--surface-3); }
.chip.active { background: var(--blue); color: #fff; }
.chip.active b { background: rgba(255, 255, 255, .25); }
.chip:active { transform: scale(.95); }

/* Segmented controls */
.segmented { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; padding: 4px; border-radius: 14px; background: var(--surface-3); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; text-align: center; padding: 8px 6px; border-radius: 10px; font-weight: 800; font-size: 13px; color: var(--ink-2); transition: background .25s var(--spring), color .2s, box-shadow .25s; white-space: nowrap; }
.segmented input:checked + span { background: var(--blue); color: #fff; box-shadow: 0 4px 10px -4px rgba(45, 95, 224, .7); }
.segmented input:focus-visible + span { outline: 2.5px solid #7aa2ff; }
.segmented.big { background: var(--surface); box-shadow: var(--shadow); padding: 5px; border-radius: 16px; }
.segmented.big span { padding: 10px; font-size: 14px; }
.segmented.small span { padding: 6px; font-size: 12.5px; }
.segmented.tiny { padding: 3px; border-radius: 12px; }
.segmented.tiny span { padding: 4px 9px; font-size: 11.5px; }
.segmented.glass { background: rgba(255, 255, 255, .2); justify-self: start; }
.segmented.glass span { color: rgba(255, 255, 255, .9); padding: 5px 14px; }
.segmented.glass input:checked + span { background: #fff; color: var(--blue-ink); }

/* ---------- Lists, stats ---------- */
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-card { position: relative; display: grid; gap: 2px; padding: 13px; border-radius: 20px; color: #fff; min-height: 92px; align-content: start; overflow: hidden; isolation: isolate; }
.mini-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--banig); }
.mini-card small { font-size: 10px; font-weight: 900; letter-spacing: .8px; opacity: .85; }
.mini-card strong { font-size: 20px; font-weight: 900; letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card em { font-style: normal; font-size: 11.5px; font-weight: 700; opacity: .85; }
.mini-card .sparkline { width: 100%; margin-top: 4px; }
.mini-card.coral { background: linear-gradient(160deg, #f47b6c, #e05543); }
.mini-card.mint { background: linear-gradient(160deg, #45c271, #22964d); }
.mini-card.teal { background: linear-gradient(160deg, #22b4a3, #10857a); }
.mini-card.plain { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); min-height: 0; }
.mini-card.plain::after { display: none; }
.mini-card.plain small { color: var(--muted); opacity: 1; }
.mini-card.plain strong { font-size: 17px; }
.row-link { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; transition: transform .25s var(--spring); }
.row-link strong { display: block; font-weight: 900; }
.row-link small { font-size: 12px; color: var(--muted); font-weight: 700; }
.row-link > .icon { color: var(--muted); }
.row-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-2); font-size: 19px; flex: none; }
.list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 11px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.list-row:first-child { border-top: 0; }
.list-row:not(div):active { background: var(--surface-2); }
.list-row .row-text:first-child { grid-column: 1 / 3; }
.row-text { min-width: 0; display: grid; }
.row-text strong { font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-text small { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-value { display: grid; justify-items: end; text-align: right; }
.row-value strong { font-weight: 900; white-space: nowrap; }
.row-value small { font-size: 11.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.group-head { display: flex; justify-content: space-between; padding: 8px 6px 2px; font-size: 11.5px; font-weight: 900; letter-spacing: .5px; color: var(--muted); }
.group-head strong { color: var(--ink-2); }
.avatar-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(150deg, #6f9df7, #3d6be6); }
.pill-due { padding: 1px 7px; border-radius: 999px; background: #fdeae6; color: var(--out) !important; }
.tag { font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .5px; padding: 2px 6px; border-radius: 6px; background: #fdeee1; color: #d0702a; vertical-align: 2px; margin-left: 4px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-grid.three { grid-template-columns: repeat(3, 1fr); }
.stat { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.stat small { font-size: 10.5px; font-weight: 900; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; }
.stat strong { font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-grid.three .stat { text-align: center; }
.card.gain { background: linear-gradient(180deg, #e9f7ee, var(--surface)); }
.card.loss { background: linear-gradient(180deg, #fdecea, var(--surface)); }

/* ---------- Charts ---------- */
.donut-wrap { position: relative; display: grid; place-items: center; margin: 14px 0 6px; }
.donut { overflow: visible; }
.donut-arc { animation: donut-in 1s var(--spring) both; transition: stroke-width .2s; }
.donut-arc:hover { stroke-width: 32; }
@keyframes donut-in { from { stroke-dasharray: 0 999; } }
.donut-center { position: absolute; display: grid; justify-items: center; }
.donut-center small { font-size: 11px; color: var(--muted); font-weight: 800; }
.donut-center strong { font-size: 18px; font-weight: 900; }
.legend-list { display: grid; gap: 2px; margin-top: 6px; }
.legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; gap: 8px; align-items: center; padding: 5px 0; font-size: 13.5px; font-weight: 700; }
.legend-row i { width: 10px; height: 10px; border-radius: 3px; }
.legend-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-row small { text-align: right; color: var(--muted); font-weight: 800; }
.chart { position: relative; width: 100%; margin-top: 8px; }
.chart svg { display: block; overflow: visible; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.axis-label { fill: var(--muted); font: 700 10px var(--font); }
.col-bar { fill: #b9cdfa; transition: fill .2s; }
.col.current .col-bar { fill: var(--blue); }
.col { cursor: pointer; }
.col:hover .col-bar { fill: #7ea2f6; }
.avg-line { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .55; }
.chart-tooltip { position: absolute; top: 0; transform: translateX(-50%); display: grid; gap: 3px; min-width: 150px; padding: 9px 11px; border-radius: 12px; background: var(--surface); box-shadow: 0 10px 28px rgba(60, 45, 20, .16); font-size: 12px; font-weight: 700; pointer-events: none; z-index: 2; }
.chart-tooltip span { display: flex; justify-content: space-between; gap: 12px; }
.chart-table { margin-top: 10px; font-size: 13px; }
.chart-table summary { cursor: pointer; color: var(--blue-ink); font-weight: 800; }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.chart-table th, .chart-table td { padding: 7px 4px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; font-weight: 700; }
.chart-table th { font-size: 10.5px; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; border-top: 0; }
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.stack-bar { display: flex; gap: 2px; height: 22px; border-radius: 8px; overflow: hidden; margin: 10px 0 2px; }
.stack-bar i { min-width: 3px; animation: grow .9s var(--spring) both; transform-origin: left; }
.where-row { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 8px 0; }
.where-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; }
.where-main { display: grid; gap: 4px; min-width: 0; }
.where-top, .where-sub { display: flex; justify-content: space-between; gap: 10px; }
.where-top strong { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.where-top strong:last-child { font-weight: 900; flex: none; }
.where-sub small { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.where-sub small.in { color: var(--in); } .where-sub small.out { color: var(--out); }
.where-bar { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.where-bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; animation: grow .9s var(--spring) both; transform-origin: left; }
.notice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.notice { position: relative; display: grid; gap: 3px; align-content: start; padding: 13px; border-radius: 20px; color: #fff; min-height: 136px; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.notice::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--banig); }
.notice.coral { background: linear-gradient(160deg, #f8866f, #e85c48); } .notice.green { background: linear-gradient(160deg, #46c46f, #23974f); } .notice.orange { background: linear-gradient(160deg, #ffa043, #f26a1c); }
.notice.teal { background: linear-gradient(160deg, #26b8a6, #10857a); } .notice.purple { background: linear-gradient(160deg, #8a7cf3, #5c4fd3); }
.notice-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 18px; }
.notice-top strong { font-size: 20px; font-weight: 900; letter-spacing: -.4px; }
.notice > strong { font-size: 14px; font-weight: 900; }
.notice small { font-size: 11.5px; font-weight: 700; opacity: .9; line-height: 1.35; }
.sparkline { display: block; overflow: visible; }

/* Heatmap calendar */
.heatmap { margin-top: 8px; }
.heat-week, .heat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.heat-week span { text-align: center; font-size: 11px; font-weight: 900; color: var(--muted); padding-bottom: 4px; }
.heat-cell { aspect-ratio: 1 / 1.05; border: 0; border-radius: 9px; padding: 4px 2px; display: grid; align-content: space-between; justify-items: center; background: var(--surface-2); color: var(--ink); transition: transform .2s var(--spring), box-shadow .2s; }
button.heat-cell:active { transform: scale(.92); }
.heat-cell b { font-size: 11px; font-weight: 900; }
.heat-cell small { font-size: 9.5px; font-weight: 800; }
.heat-cell.pad { background: none; }
.heat-cell.future { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.heat-cell.zero { background: var(--surface-2); }
.heat-cell.spend.l1 { background: #fde3d6; } .heat-cell.spend.l2 { background: #f9c1a6; } .heat-cell.spend.l3 { background: #f39a74; }
.heat-cell.spend.l4 { background: #eb6834; color: #fff; } .heat-cell.spend.l5 { background: #c84d1c; color: #fff; }
.heat-cell.out.l1 { background: #fbe0dc; } .heat-cell.out.l2 { background: #f5b5ad; } .heat-cell.out.l3 { background: #ec8579; } .heat-cell.out.l4 { background: #e34948; color: #fff; } .heat-cell.out.l5 { background: #b8302f; color: #fff; }
.heat-cell.in.l1 { background: #dbe8fb; } .heat-cell.in.l2 { background: #aecbf4; } .heat-cell.in.l3 { background: #6da7ec; } .heat-cell.in.l4 { background: #2a78d6; color: #fff; } .heat-cell.in.l5 { background: #1c5cab; color: #fff; }
.heat-cell.selected { box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 5px var(--blue); transform: scale(1.04); }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; font-weight: 800; color: var(--ink-2); }
.heat-legend span { display: inline-flex; align-items: center; gap: 4px; }
.heat-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.heat-legend i.spend.l1 { background: #fde3d6; } .heat-legend i.spend.l3 { background: #f39a74; } .heat-legend i.spend.l5 { background: #c84d1c; }
.heat-legend i.out { background: #e34948; } .heat-legend i.in { background: #2a78d6; }
.heat-legend .muted { margin-left: auto; color: var(--muted); }
.heatmap.compact .heat-grid { gap: 2px; }
.heatmap.compact .heat-cell { aspect-ratio: 1; border-radius: 3px; padding: 0; }
.heatmap.compact .heat-cell.future { border-width: 1px; }
.month-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.month-tile { display: grid; gap: 6px; padding: 10px; border: 0; border-radius: 16px; background: var(--surface-2); text-align: left; transition: transform .2s var(--spring); }
.month-tile:active { transform: scale(.96); }
.month-tile > span { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.month-tile strong { font-weight: 900; }
.month-tile small { font-weight: 800; color: var(--muted); }
.range-nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 8px; text-align: center; }
.range-nav strong { display: block; font-weight: 900; font-size: 16px; }
.range-nav small { font-size: 12px; font-weight: 700; color: var(--muted); }
.range-nav .round-btn { box-shadow: none; background: var(--surface-2); }
.day-detail { animation: rise .4s var(--spring); }

/* ---------- Finance cards ---------- */
.stack-list { display: grid; gap: 10px; }
.budget-card { display: grid; width: 100%; border: 0; text-align: left; transition: transform .25s var(--spring); }
.budget-card:active, .goal-top:active { transform: scale(.98); }
.budget-top, .goal-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.goal-top { grid-template-columns: 40px minmax(0, 1fr) auto 14px; width: 100%; border: 0; background: none; padding: 0; text-align: left; transition: transform .25s var(--spring); }
.goal-top > .icon { color: var(--muted); }
.budget-pct, .goal-pct { display: grid; justify-items: end; font-size: 18px; font-weight: 900; line-height: 1; }
.budget-pct small, .goal-pct small { font-size: 10.5px; color: var(--muted); font-weight: 800; }
.goal-pct { color: var(--blue-ink); }
.budget-pct.green { color: var(--in); } .budget-pct.orange { color: var(--warn); } .budget-pct.red { color: var(--out); }
.budget-foot { font-size: 12px; font-weight: 800; color: var(--in); }
.budget-foot.out { color: var(--out); }
.goal-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.goal-meta span { display: inline-flex; align-items: center; gap: 4px; }
.goal-actions { display: flex; gap: 8px; margin-top: 12px; }
.goal-actions .btn { height: 40px; }
.debt-card .split-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.debt-card .split-row strong { font-weight: 900; }
.schedule { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; }
.schedule div { display: flex; justify-content: space-between; }
.schedule div span:first-child { color: var(--warn); }
.bill-row { border-top: 1px solid var(--line); padding: 10px 14px; }
.bill-row:first-child { border-top: 0; }
.bill-main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 0; text-align: left; }
.bill-actions { display: flex; gap: 8px; margin: 8px 0 0 50px; }

/* ---------- Settings ---------- */
.inline-input { display: flex; gap: 8px; }
.inline-input .btn { height: 46px; }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sync-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.sync-state i { width: 8px; height: 8px; border-radius: 50%; background: #c3bba9; }
.sync-state.connected i { background: #2fae63; } .sync-state.pending i { background: #f0a12a; } .sync-state.error i { background: #e2483d; }

/* ---------- Floating tab bar with a raised center + ---------- */
.tab-bar { position: fixed; z-index: 40; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); translate: -50% 0; width: min(calc(100% - 24px), 456px); height: 64px; display: grid; grid-template-columns: 1fr 1fr 72px 1fr 1fr; align-items: center; padding: 6px; border-radius: 32px; background: rgba(255, 253, 248, .92); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 14px 34px rgba(60, 45, 20, .16); view-transition-name: tabbar; transition: transform .5s var(--spring), opacity .3s; }
.tab-pill { position: absolute; top: 6px; left: 0; height: 52px; border-radius: 26px; background: rgba(47, 108, 240, .11); pointer-events: none; transition: transform .46s cubic-bezier(.3, 1.3, .5, 1), width .46s var(--spring), opacity .2s; }
.tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 1px; height: 52px; color: #7a7466; font-size: 11px; font-weight: 800; border-radius: 26px; transition: color .25s, transform .2s var(--spring); }
.tab:active { transform: scale(.9); }
.tab.active { color: var(--blue-ink); }
.tab.active .icon { animation: tab-pop .45s cubic-bezier(.3, 1.6, .5, 1); stroke-width: 2.2; }
@keyframes tab-pop { 40% { transform: scale(1.2) translateY(-2px); } }
.fab { position: relative; justify-self: center; width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #4f86f7, #2a5ee3); box-shadow: 0 0 0 5px #fffdf8, inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 22px -8px rgba(45, 95, 224, .85); view-transition-name: fab; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.fab::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(247, 196, 43, .9); animation: spin 18s linear infinite; pointer-events: none; }
.fab:active { transform: scale(.88) rotate(90deg); }

/* ---------- Bottom sheet ---------- */
.sheet-root { position: fixed; inset: 0; z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(25, 22, 15, .38); opacity: 0; transition: opacity .4s var(--spring); }
.sheet { position: absolute; left: 50%; bottom: 0; width: min(100%, 480px); max-height: calc(100dvh - 44px); display: grid; grid-template-rows: auto auto 1fr; translate: -50% 0; transform: translateY(105%); border-radius: 28px 28px 0 0; background: #f7f3ec; box-shadow: 0 -10px 40px rgba(20, 15, 5, .2); transition: transform .5s var(--spring); }
.sheet.tall { height: calc(100dvh - 44px); }
.sheet-root.open .sheet-backdrop { opacity: 1; }
.sheet-root.open .sheet { transform: none; }
body.sheet-open .app { transform: scale(.94) translateY(8px); border-radius: 26px; filter: brightness(.94); overflow: hidden; }
body.sheet-open .tab-bar { transform: translateY(140%); opacity: 0; }
body.sheet-open { overflow: hidden; }
.sheet-grabber { display: grid; place-items: center; padding: 8px 0 2px; cursor: grab; touch-action: none; }
.sheet-grabber span { width: 38px; height: 5px; border-radius: 3px; background: #d6cfc2; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 4px 14px 10px; touch-action: none; }
.sheet-head h2 { font-size: 17px; font-weight: 900; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.sheet-pill { justify-self: start; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--blue-ink); font-weight: 800; box-shadow: var(--shadow); }
.sheet-pill.primary { justify-self: end; background: var(--blue); color: #fff; }
.sheet-spacer { justify-self: end; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(18px + env(safe-area-inset-bottom)); }
.sheet-form { display: grid; gap: 4px; }
.sheet-intro { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.45; margin: 0 2px 10px; }
.fields { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.field { flex: 1 1 100%; min-width: 0; }
.field.half { flex: 1 1 calc(50% - 5px); }
.field-label { display: block; margin: 0 2px 6px; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }
.field-hint { font-size: 11.5px; color: var(--muted); font-weight: 600; margin: 5px 2px 0; line-height: 1.4; }
.money-input { display: flex; align-items: center; gap: 4px; }
.money-input span { color: var(--muted); font-weight: 800; }
.money-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-weight: 800; }
.amount-hero { display: flex; justify-content: center; align-items: baseline; gap: 4px; padding: 18px 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); color: var(--muted); cursor: text; }
.amount-hero span { font-size: 26px; font-weight: 900; }
.amount-hero input { width: 4ch; min-width: 2ch; field-sizing: content; max-width: 260px; border: 0; outline: 0; background: none; text-align: center; font-size: 40px; font-weight: 900; letter-spacing: -1.5px; color: var(--ink); }
.amount-hero input::placeholder { color: #cbc4b6; }
.amount-hero input::-webkit-inner-spin-button, .money-input input::-webkit-inner-spin-button { -webkit-appearance: none; }
.chip-picker, .icon-picker { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
.chip-picker { flex-wrap: wrap; }
.chip-picker label, .icon-picker label, .color-picker label { position: relative; flex: none; }
.chip-picker input, .icon-picker input, .color-picker input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-picker span { display: block; padding: 7px 12px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 13px; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .2s, color .2s, box-shadow .2s, transform .2s var(--spring); }
.chip-picker input:checked + span { background: var(--blue); color: #fff; box-shadow: none; transform: scale(1.03); }
.icon-picker { flex-wrap: wrap; }
.icon-picker span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff; font-size: 20px; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, transform .2s var(--spring); }
.icon-picker input:checked + span { box-shadow: inset 0 0 0 2.5px var(--blue); transform: scale(1.08); background: #eef3ff; }
.color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.color-picker span { display: block; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; transition: box-shadow .2s, transform .2s var(--spring); }
.color-picker input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--blue); transform: scale(1.06); }
.chip-picker input:focus-visible + span, .icon-picker input:focus-visible + span, .color-picker input:focus-visible + span { outline: 2.5px solid #7aa2ff; outline-offset: 2px; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; font-weight: 800; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 15px; background: #ddd6c8; position: relative; cursor: pointer; transition: background .25s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.switch:checked { background: #34c55f; }
.switch:checked::after { transform: translateX(20px); }
.form-error { min-height: 18px; margin: 8px 2px 0; font-size: 12.5px; font-weight: 800; color: var(--out); }
.form-error:empty { min-height: 0; margin: 0; }
.fee-preview { font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin: 8px 2px 0; }
.fee-preview:empty { display: none; }
.sheet-actions { position: sticky; bottom: 0; display: flex; gap: 8px; padding-top: 14px; background: linear-gradient(180deg, transparent, #f7f3ec 30%); }
.sheet-actions .btn { height: 50px; font-size: 15px; border-radius: 16px; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 6px; }
.quick-item { display: grid; justify-items: center; gap: 3px; padding: 14px 6px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; transition: transform .2s var(--spring); animation: rise .4s var(--spring) both; }
.quick-item:nth-child(3n+2) { animation-delay: .03s; } .quick-item:nth-child(3n) { animation-delay: .06s; }
.quick-item:active { transform: scale(.94); }
.quick-item span { font-size: 22px; }
.quick-item strong { font-size: 13.5px; font-weight: 900; }
.quick-item small { font-size: 10.5px; color: var(--muted); font-weight: 700; line-height: 1.3; }
.choice-list { display: grid; gap: 8px; }
.choice { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; text-align: left; }
.choice.preferred { border-color: #9fb7f5; background: #f4f7ff; }
.choice strong { display: block; font-weight: 900; }
.choice small { font-size: 12px; color: var(--muted); font-weight: 700; }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 11px 12px 11px 16px; border-radius: 16px; background: rgba(30, 32, 30, .92); color: #fff; font-weight: 700; font-size: 13.5px; backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; transition: opacity .25s, transform .4s cubic-bezier(.3, 1.3, .5, 1); }
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast button { border: 0; border-radius: 10px; padding: 6px 12px; background: rgba(255, 255, 255, .16); color: #ffd75e; font-weight: 900; }

/* ---------- Rolling digits ---------- */
.roll-digit { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: top; }
.roll-strip { display: flex; flex-direction: column; will-change: transform; }
.roll-strip span { height: 1.1em; line-height: 1.1em; }
.roll-char { display: inline-block; height: 1.1em; vertical-align: top; }

/* ---------- Page transitions (View Transitions API) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .44s; animation-timing-function: var(--spring); mix-blend-mode: normal; }
html[data-nav="push"]::view-transition-old(root) { animation-name: vt-push-out; }
html[data-nav="push"]::view-transition-new(root) { animation-name: vt-push-in; }
html[data-nav="pop"]::view-transition-old(root) { animation-name: vt-pop-out; z-index: 2; }
html[data-nav="pop"]::view-transition-new(root) { animation-name: vt-pop-in; }
html[data-nav="tab"]::view-transition-old(root) { animation: vt-fade-out .2s ease-out both; }
html[data-nav="tab"]::view-transition-new(root) { animation: vt-tab-in .38s var(--spring) both; }
html[data-nav="swap"]::view-transition-old(root) { animation: vt-fade-out .18s ease-out both; }
html[data-nav="swap"]::view-transition-new(root) { animation: vt-fade-in .26s ease-out both; }
::view-transition-group(wallet-card) { animation-duration: .52s; animation-timing-function: cubic-bezier(.3, 1.15, .45, 1); z-index: 5; }
::view-transition-old(wallet-card), ::view-transition-new(wallet-card) { animation-duration: .52s; height: 100%; object-fit: cover; }
::view-transition-group(tabbar), ::view-transition-group(fab) { animation: none; z-index: 10; }
@keyframes vt-push-out { to { transform: translateX(-28%); filter: brightness(.88); } }
@keyframes vt-push-in { from { transform: translateX(100%); box-shadow: -20px 0 40px rgba(0, 0, 0, .12); } }
@keyframes vt-pop-out { to { transform: translateX(100%); box-shadow: -20px 0 40px rgba(0, 0, 0, .12); } }
@keyframes vt-pop-in { from { transform: translateX(-28%); filter: brightness(.88); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-tab-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

@media (max-width: 360px) {
  .page-body { padding: 0 12px; }
  .hero-amount { font-size: 29px; }
  .sky-title h1.greeting span { font-size: 27px; }
  .tile-value { font-size: 16px; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .kubo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .sky-scene { transform: none; }
  .cloud { animation: none; }
  .cloud.c1 { transform: translateX(170px); } .cloud.c2 { transform: translateX(290px); } .cloud.c3 { transform: translateX(40px); } .cloud.c4 { transform: translateX(230px); }
}

/* ---------- Sidebar pieces & desktop-only scenery (hidden on phones) ---------- */
.side-brand, .side-foot, .fab-label, .rizal-ext, .bgc-ext { display: none; }

/* ---------- Desktop & tablet landscape: sidebar + wide dashboard ---------- */
@media (min-width: 960px) {
  body { background: var(--bg); }
  .app { max-width: none; background: var(--bg); box-shadow: none; }

  /* The tab bar becomes a sidebar */
  .tab-bar { left: 0; top: 0; bottom: 0; translate: none; width: 248px; height: 100dvh; border-radius: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 22px 16px; background: var(--surface); border: 0; border-right: 1px solid var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tab-pill { display: none; }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-size: 21px; font-weight: 900; letter-spacing: -.5px; color: var(--ink); }
  .side-brand img { border-radius: 10px; box-shadow: 0 4px 10px -4px rgba(45, 95, 224, .6); }
  .tab { display: flex; justify-content: flex-start; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-radius: 14px; font-size: 14.5px; color: var(--ink-2); }
  .tab:hover { background: var(--surface-2); }
  .tab.active { background: rgba(47, 108, 240, .1); color: var(--blue-ink); }
  .tab:active { transform: scale(.98); }
  .fab { order: -1; justify-self: auto; width: 100%; height: 46px; margin: 0 0 14px; border-radius: 14px; display: flex; justify-content: center; gap: 8px; font-size: 15px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(45, 95, 224, .8); }
  .side-brand { order: -2; }
  .fab::after { display: none; }
  .fab:active { transform: scale(.97); }
  .fab-label { display: inline; }
  .side-foot { display: grid; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
  .side-settings, .side-install { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; border: 0; background: none; font-size: 14px; font-weight: 800; color: var(--ink-2); text-align: left; }
  .side-settings:hover, .side-install:hover { background: var(--surface-2); }
  .side-install { color: var(--blue-ink); background: #e8efff; }
  body.sheet-open .tab-bar { transform: none; opacity: 1; }

  /* Wide hero header: greeting alone on the left, the scene laid along the bottom, clouds drifting on the right */
  .page { margin-left: 248px; max-width: none; padding: 24px 40px calc(56px + env(safe-area-inset-bottom)); }
  .page > .sky, .page > .page-body, .page > .top-bar { max-width: 1360px; margin-left: auto; margin-right: auto; }
  .sky { height: 340px; border-radius: 30px; margin-bottom: 22px; padding: 40px 44px 0; }
  .sky-title { max-width: 40%; margin-top: 10px; }
  .sky-title h1 { font-size: 40px; }
  .sky-title h1.greeting { font-size: 26px; }
  .sky-title h1.greeting span { font-size: 48px; }
  .sky-sub { font-size: 15px; }
  .sky .cloud { animation-name: cloud-drift-right; }
  @keyframes cloud-drift-right { 0% { transform: translateX(42cqw); opacity: 0; } 8%, 90% { opacity: .95; } 100% { transform: translateX(100cqw); opacity: 0; } }
  .tone-night .cloud, .tone-dusk .cloud { animation-name: cloud-drift-right-dim; }
  @keyframes cloud-drift-right-dim { 0% { transform: translateX(42cqw); opacity: 0; } 8%, 90% { opacity: .2; } 100% { transform: translateX(100cqw); opacity: 0; } }
  .birds { left: 44%; animation-name: birds-fly-wide; }
  @keyframes birds-fly-wide { 0% { transform: translate(0, 30px); opacity: 0; } 4% { opacity: 1; } 56% { transform: translate(640px, -4px); opacity: 1; } 60%, 100% { transform: translate(640px, -4px); opacity: 0; } }
  .scene-morning .mayon { width: 560px; height: 205px; right: 40px; bottom: 50px; }
  .scene-morning .palm.near { scale: 1.35; transform-origin: bottom; }
  .rizal-plaza { left: auto; right: 0; width: 600px; height: 300px; -webkit-mask: none; mask: none; }
  .lamp-globe { animation: lamp-globe 5s ease-in-out infinite; }
  @keyframes lamp-globe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
  .rizal-ext, .bgc-ext { display: block; position: absolute; bottom: 0; width: 600px; height: 300px; overflow: visible; }
  .rizal-ext.ext-1 { right: 599px; } .rizal-ext.ext-2 { right: 1198px; }
  .bgc { left: auto; right: 70px; width: 560px; height: 262px; -webkit-mask: none; mask: none; }
  .bgc-ext { width: 560px; height: 262px; } .bgc-ext.ext-1 { right: 629px; } .bgc-ext.ext-2 { right: 1188px; } .bgc-ext.ext-0 { right: -490px; }
  .night-scrim { background: linear-gradient(90deg, rgba(10, 16, 40, .45), rgba(10, 16, 40, 0) 50%); }
  .compact-bar { display: none; }
  .top-bar { margin: 0 auto 18px; padding: 8px 0 14px; border-radius: 0; grid-template-columns: 44px 1fr auto; }
  .top-bar h1 { font-size: 22px; text-align: left; }

  /* Dashboard grid: cards pair up side by side; lists and controls stay full width */
  .page-body { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 18px; align-items: start; }
  .page-body > * { grid-column: 1 / -1; }
  .page-body > .hero-card, .page-body > .card, .page-body > .block, .page-body > .mini-grid, .page-body > .stat-grid { grid-column: span 1; }
  .page-body > .block:has(.wallet-grid), .page-body > .card.list, .page-body > .day-group, .page-body > .hero-wallet { grid-column: 1 / -1; }
  .tile-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .wallet-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .stack-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .block .stack-list { grid-template-columns: 1fr; }
  .notice-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-wallet { max-width: 460px; }
  #home-recent .day-group:nth-child(n+4) { display: none; }
  .page-body > .block:has(.card-stack) .stack-cards { height: 214px; }
  .day-group { max-width: none; }

  /* Hover affordances for mouse users */
  .tile:hover, .wallet-card.grid:hover, .link-card:hover { transform: translateY(-3px); }
  .card:has(> button.list-row):hover, .budget-card:hover, .row-link:hover { box-shadow: 0 2px 4px rgba(60, 45, 20, .06), 0 12px 26px rgba(60, 45, 20, .1); }
  .tx-row:hover, .list-row:not(div):hover, .bill-main:hover { background: var(--surface-2); }
  .tile, .wallet-card.grid, .link-card, .budget-card, .row-link { transition: transform .25s var(--spring), box-shadow .25s; }

  /* Sheets become centered dialogs */
  .sheet { top: 50%; bottom: auto; width: min(560px, calc(100vw - 64px)); max-height: 86vh; translate: -50% -50%; transform: translateY(26px) scale(.97); opacity: 0; border-radius: 26px; transition: transform .42s var(--spring), opacity .25s; }
  .sheet-root.open .sheet { transform: none; opacity: 1; }
  .sheet-grabber { display: none; }
  .sheet-head { padding-top: 16px; }
  .sheet-body { padding-bottom: 20px; }
  body.sheet-open .app { transform: none; border-radius: 0; filter: none; }
  .toast { bottom: 28px; left: calc(50% + 124px); }
}


/* ---------- Pinoy Peso cards: inner frame with microprint, like a banknote ---------- */
.hero-card::after, .tile::before, .wallet-card::after, .notice::before, .mini-card:not(.plain)::before { content: ''; position: absolute; inset: 6px; z-index: 0; border: 1px solid rgba(255, 255, 255, .24); border-radius: calc(var(--frame-r, 22px) - 6px); pointer-events: none; }
.hero-card::after, .tile::before, .notice::before, .mini-card:not(.plain)::before, .wallet-card::after { content: 'DAYBOOK ✦ PISO ✦ DAYBOOK ✦ PISO ✦ DAYBOOK ✦ PISO ✦ DAYBOOK ✦ PISO ✦ DAYBOOK ✦ PISO ✦ DAYBOOK ✦ PISO'; padding: 2px 12px 0; font: 800 5.5px/1 var(--font); letter-spacing: 1.6px; color: rgba(255, 255, 255, .34); white-space: nowrap; overflow: hidden; }
.hero-card { --frame-r: 24px; } .tile, .notice, .mini-card, .wallet-card { --frame-r: 21px; }
.hero-card > * { position: relative; z-index: 1; }
.wallet-card .card-watermark { font-size: 64px; bottom: -14px; opacity: .7; }
.wallet-card.add::after { display: none; }
.wallet-card { background-image: linear-gradient(150deg, var(--card-from), var(--card-to)); }
/* Smaller notes get a quieter rosette and guilloche so the numbers stay the hero */
.tile::after, .notice::after, .mini-card::after { background: var(--rosette) no-repeat right -28px center / 120px 120px, var(--guilloche) repeat-x left bottom -30px / 300px 75px !important; opacity: .7; }

/* ---------- Performance: pause the scene when it is off screen or the tab is hidden ---------- */
.sky.paused *, .sky.paused *::before, .sky.paused *::after, html.tab-hidden * { animation-play-state: paused !important; }
.cloud, .celestial svg, .sun-beams, .palm .palm-tree { will-change: transform; }

/* ---------- Hanggang Sweldo ---------- */
.sweldo { display: grid; gap: 8px; border: 2px solid transparent; }
.sweldo.over, .sweldo.out { border-color: #f6c9c2; background: linear-gradient(180deg, #fff6f4, var(--surface)); }
.sweldo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sweldo-head > span { display: grid; gap: 1px; }
.sweldo-head strong { font-size: 17px; font-weight: 900; }
.sweldo-head small.muted { font-size: 12px; font-weight: 700; }
.round-btn.small { width: 34px; height: 34px; box-shadow: none; background: var(--surface-2); }
.sweldo-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sweldo-main > span { display: grid; }
.sweldo-main small { font-size: 10px; font-weight: 900; letter-spacing: .8px; color: var(--muted); }
.sweldo-amount { font-size: 32px; font-weight: 900; letter-spacing: -1px; color: var(--in); }
.sweldo.warn .sweldo-amount { color: var(--warn); } .sweldo.over .sweldo-amount, .sweldo.out .sweldo-amount { color: var(--out); }
.sweldo-ring text { fill: var(--ink) !important; }
.sweldo-line { font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.sweldo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.sweldo-stats span { display: grid; gap: 1px; min-width: 0; }
.sweldo-stats small { font-size: 11px; font-weight: 700; color: var(--muted); }
.sweldo-stats b { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Taglish quick entry ---------- */
.quick-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; }
.quick-icon { font-size: 18px; }
.quick-bar input { min-width: 0; height: 40px; border: 0; outline: 0; background: none; font-weight: 800; font-size: 15px; }
.quick-preview { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; padding: 0 2px 4px; min-height: 22px; }
.qp-chip { padding: 3px 9px; border-radius: 999px; background: var(--surface-3); font-weight: 800; }
.qp-chip.expense { background: #fdeae6; color: var(--out); } .qp-chip.income { background: #e5f5ea; color: var(--in); }
.qp-name { color: var(--muted); font-style: italic; }

/* ---------- Plan hub tools ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tool { display: grid; gap: 2px; padding: 14px; border: 0; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); text-align: left; transition: transform .2s var(--spring); }
.tool:active { transform: scale(.97); }
.tool span { font-size: 22px; }
.tool strong { font-size: 14px; font-weight: 900; }
.tool small { font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* ---------- Paluwagan ---------- */
.paluwagan-card { display: grid; gap: 10px; }
.paluwagan-card .split-row small { font-size: 12px; }
.pal-callout { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-weight: 800; font-size: 13px; }
.pal-callout.mine { background: #e5f5ea; color: var(--in); }
.pal-rounds { display: grid; }
.pal-round { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.pal-round:first-child { border-top: 0; }
.pal-round.future { opacity: .6; }
.pal-round.current .pal-turn { background: var(--blue); color: #fff; }
.pal-turn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: var(--surface-3); }
.pal-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Padala ---------- */
.padala-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 70px; margin-top: 8px; }
.padala-bars span { display: grid; gap: 3px; height: 100%; align-content: end; text-align: center; }
.padala-bars i { display: block; height: var(--h); min-height: 3px; border-radius: 5px 5px 0 0; background: rgba(255, 255, 255, .85); animation: rise-bar .8s var(--spring) both; transform-origin: bottom; }
.padala-bars small { font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, .85); }

/* ---------- Gov't contributions ---------- */
.gov-card { display: grid; gap: 10px; }
.gov-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.gov-month { display: grid; place-items: center; gap: 1px; padding: 5px 0; border-radius: 8px; background: var(--surface-2); font-size: 11px; font-weight: 900; color: var(--muted); }
.gov-month b { font-size: 10px; }
.gov-month.paid { background: #e5f5ea; color: var(--in); }
.gov-month.missing { background: #fdeae6; color: var(--out); }
.toggle-row.compact { padding: 4px 8px; gap: 8px; font-size: 12px; background: var(--surface-2); }
.toggle-row.compact .switch { width: 40px; height: 24px; } .toggle-row.compact .switch::after { width: 18px; height: 18px; } .toggle-row.compact .switch:checked::after { transform: translateX(16px); }

/* ---------- Ipon challenges ---------- */
.challenge { display: grid; gap: 10px; }
.challenge .split-row small { font-size: 12px; }
.week-grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.week { aspect-ratio: 1; border: 0; border-radius: 8px; background: var(--surface-2); font-size: 11px; font-weight: 900; color: var(--muted); padding: 0; transition: transform .2s var(--spring), background .2s; }
.week:active { transform: scale(.9); }
.week.done { background: #2fae63; color: #fff; }
.week.now { box-shadow: inset 0 0 0 2px var(--blue); color: var(--blue-ink); }
.week.done.now { color: #fff; }
.week.future { opacity: .55; }
.coin-jar { display: flex; align-items: center; gap: 10px; }
.coin-big { min-width: 70px; text-align: center; font-size: 30px; font-weight: 900; color: var(--warn); }

/* ---------- Bonus planner, singil ---------- */
.bonus-split { display: grid; gap: 8px; margin-top: 8px; }
.bonus-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 700; }
.bonus-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bonus-legend i { width: 9px; height: 9px; border-radius: 3px; }
.singil-text { margin-top: 12px; font-weight: 700; line-height: 1.5; }

/* ---------- Joint account ---------- */
.joint-intro { gap: 10px; padding: 24px 18px; }
.joint-intro .button-grid { width: 100%; }
.joint-art { position: relative; width: 84px; height: 70px; margin: 0 auto 4px; font-size: 46px; display: grid; place-items: center; }
.joint-art i { position: absolute; font-style: normal; font-size: 20px; animation: float-heart 3s ease-in-out infinite; }
.joint-art i:nth-of-type(1) { left: 0; top: 4px; } .joint-art i:nth-of-type(2) { right: 0; top: 0; animation-delay: -1.5s; }
@keyframes float-heart { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.joint-hero .action-row { margin-top: 8px; }
.joint-avatars { display: flex; }
.joint-avatars .avatar-dot { width: 30px; height: 30px; font-size: 11px; border: 2px solid rgba(255, 255, 255, .8); margin-left: -8px; }
.invite-code { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.invite-code span { flex: 1; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font: 900 22px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 4px; text-align: center; }
.tiny-link { font-size: 11.5px; padding: 0; }

@media (min-width: 960px) {
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
  .page-body > .sweldo, .page-body > .quick-bar { grid-column: span 1; }
  .page-body > .tool-grid { grid-column: 1 / -1; }
}

.sweldo.empty .sweldo-amount { color: var(--muted); }

/* ---------- Welcome gate (sign in / sign up / forgot password / demo) ---------- */
.gate { display: none; }
body.booting .app, body.booting .tab-bar, body.gated .app, body.gated .tab-bar { display: none !important; }
body.gated .gate { display: block; position: relative; z-index: 50; min-height: 100dvh; background: var(--bg); }
body.booting::after { content: ''; position: fixed; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px; border-radius: 50%; border: 4px solid var(--surface-3); border-top-color: var(--blue); animation: spin .8s linear infinite; }
.gate-shell { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.gate-hero .sky { margin-bottom: 0; border-radius: 0 0 30px 30px; }
.gate-hero .compact-bar, .gate-hero .sky-top { display: none; }
.gate-hero .sky-title { margin-top: 18px; }
.gate-perks { display: none; }
.gate-panel { flex: 1; padding: 0 16px 28px; margin-top: -26px; position: relative; z-index: 2; }
.gate-card { display: grid; gap: 12px; padding: 20px 18px; border-radius: 26px; background: var(--surface); box-shadow: 0 18px 40px -18px rgba(60, 45, 20, .35); animation: rise .5s var(--spring) both; }
.gate-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -.5px; }
.gate-brand img { border-radius: 11px; box-shadow: 0 6px 12px -6px rgba(45, 95, 224, .7); }
.gate-tabs { margin-top: 2px; }
.gate-form { display: grid; gap: 12px; }
.gate-field { display: grid; gap: 6px; }
.gate-field > span:first-child { font-size: 12.5px; font-weight: 800; color: var(--ink-2); padding-left: 2px; }
.gate-input { display: flex; align-items: center; height: 50px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.gate-input:focus-within { border-color: #8eacf6; box-shadow: 0 0 0 4px rgba(70, 120, 240, .12); }
.gate-input input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; background: none; font-weight: 700; font-size: 15.5px; }
.gate-eye { width: 46px; height: 100%; border: 0; background: none; font-size: 16px; opacity: .6; }
.gate-eye:hover { opacity: 1; }
.gate-forgot { justify-self: end; margin-top: -4px; font-size: 13px; }
.gate-error { min-height: 0; font-size: 13px; font-weight: 800; color: var(--out); line-height: 1.4; }
.gate-error:empty { display: none; }
.gate-ok { color: var(--in); }
.gate-submit { height: 52px; font-size: 16px; border-radius: 16px; }
.gate-fine { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.45; }
.gate-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
.gate-divider::before, .gate-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.gate-peek { height: 50px; font-size: 15px; border-radius: 16px; background: #fff7e0; color: #8a5a00; box-shadow: inset 0 0 0 1.5px #f3dfa6; }
.gate-title { font-size: 22px; font-weight: 900; letter-spacing: -.4px; }
.gate-sub { font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.gate-back { justify-self: start; font-size: 13px; }
.gate-sent { display: grid; gap: 12px; justify-items: center; text-align: center; }
.gate-sent .btn { width: 100%; }
.gate-sent-icon { font-size: 46px; animation: rise .6s var(--spring) both; }

@media (min-width: 960px) {
  .gate-shell { max-width: none; flex-direction: row; align-items: stretch; }
  .gate-hero { flex: 1.25; display: flex; flex-direction: column; padding: 28px 0 28px 28px; }
  .gate-hero .sky { flex: 1; height: auto; min-height: 560px; border-radius: 32px; padding: 64px 56px 0; }
  .gate-hero .sky-title { max-width: 70%; }
  .gate-hero .sky-title h1.greeting { font-size: 30px; }
  .gate-hero .sky-title h1.greeting span { font-size: 56px; }
  .gate-hero .sky-sub { font-size: 17px; }
  .gate-perks { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
  .gate-perks li { padding: 12px 16px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  .gate-panel { flex: 1; display: grid; place-items: center; margin: 0; padding: 28px; }
  .gate-card { width: min(440px, 100%); padding: 30px 28px; }
}

/* Social sign-in */
.gate-social { display: grid; gap: 8px; }
.gate-oauth { height: 50px; gap: 10px; border-radius: 16px; font-size: 15px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.gate-oauth:hover { box-shadow: inset 0 0 0 1.5px #c9c0ae; }
.gate-oauth svg { flex: none; }