/* ---------- Colour themes (data-theme attribute on ) ---------- */ body[data-theme="ungu"] { --bg-outer: #F1EAF7; --paper: #FAF6FD; --panel: #E5D7F0; --ink: #362A42; --muted: #93839F; --border: #DCC9EA; --accent: #9B72C4; --accent-text: #FAF6FD; --coral: #B08FD4; --coral-text: #2E2140; --spend: #C97462; --spend-text: #7A3326; --shadow-d-rgb: 140,120,168; --shadow-l-rgb: 255,255,255; } body[data-theme="ungu"].dark { --bg-outer: #1E1826; --paper: #271F30; --panel: #322639; --ink: #EDE3F5; --muted: #B7A3C4; --border: #453551; --accent: #B491DB; --accent-text: #211530; --coral: #C4A6E0; --coral-text: #211530; --spend: #E0958A; --spend-text: #F6C0B5; --shadow-d-rgb: 8,6,12; --shadow-l-rgb: 78,62,90; } body[data-theme="biru"] { --bg-outer: #E9EFF7; --paper: #F5F8FC; --panel: #D9E3F2; --ink: #24344A; --muted: #7C8CA3; --border: #C7D6EA; --accent: #5E85C7; --accent-text: #F5F8FC; --coral: #7FA0D6; --coral-text: #1E2E48; --spend: #C97462; --spend-text: #7A3326; --shadow-d-rgb: 110,132,164; --shadow-l-rgb: 255,255,255; } body[data-theme="biru"].dark { --bg-outer: #151C28; --paper: #1C2432; --panel: #24304390; --ink: #E4EBF6; --muted: #9FB0C7; --border: #34445C; --accent: #7DA0DE; --accent-text: #16202E; --coral: #96B4E3; --coral-text: #16202E; --spend: #E0958A; --spend-text: #F6C0B5; --shadow-d-rgb: 5,7,12; --shadow-l-rgb: 58,72,92; } body[data-theme="hijau"] { --bg-outer: #EAF2EA; --paper: #F5FAF5; --panel: #DBEBDC; --ink: #263A2A; --muted: #7E9483; --border: #C8E0CA; --accent: #5F9E6E; --accent-text: #F5FAF5; --coral: #7FBB8B; --coral-text: #1F3524; --spend: #C97462; --spend-text: #7A3326; --shadow-d-rgb: 110,150,120; --shadow-l-rgb: 255,255,255; } body[data-theme="hijau"].dark { --bg-outer: #151F17; --paper: #1C271E; --panel: #253328; --ink: #E2EFE3; --muted: #9FBBA4; --border: #354A38; --accent: #7EC58E; --accent-text: #142016; --coral: #9BD1A6; --coral-text: #142016; --spend: #E0958A; --spend-text: #F6C0B5; --shadow-d-rgb: 5,10,6; --shadow-l-rgb: 60,80,64; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; } body { font-family: 'Inter', sans-serif; background: var(--bg-outer); color: var(--ink); height: 100dvh; overflow: hidden; } .page { display: flex; justify-content: center; align-items: stretch; height: 100dvh; padding: 0; } .shell { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; background: var(--paper); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; margin: 0 auto; } .app-header { display: flex; align-items: center; gap: 10px; padding: calc(16px + env(safe-area-inset-top)) 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .logo-mark { width: 34px; height: 34px; border-radius: 9px; background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent-text); overflow: hidden; box-shadow: 3px 3px 7px rgba(var(--shadow-d-rgb),0.3), -3px -3px 7px rgba(var(--shadow-l-rgb),0.5); } .logo-image { width: 100%; height: 100%; display: block; object-fit: cover; } .app-name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; line-height: 1.1; } .app-tagline { font-size: 11.5px; color: var(--muted); margin-top: 1px; } .header-right { display: flex; align-items: center; gap: 6px; } .streak-badge { display: flex; align-items: center; gap: 5px; background: var(--panel); border-radius: 20px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; color: var(--coral-text); border: none; cursor: pointer; font-family: 'Inter', sans-serif; box-shadow: 3px 3px 7px rgba(var(--shadow-d-rgb),0.25), -3px -3px 7px rgba(var(--shadow-l-rgb),0.7); } .streak-badge:active { transform: scale(0.96); }