/* Quiet plum surfaces, clear amounts, and a calendar-first layout. */
:root{--bg:#201c27;--panel:#2b2533;--line:#ffffff13;--muted:#bdb0c4;--nav:72px}
body{background:radial-gradient(ellipse at top,#3b2c41 0,transparent 65%) fixed,var(--bg);-webkit-font-smoothing:antialiased}
.content{max-width:680px;padding:calc(20px + env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom))}
.calendar-page{margin:0;padding:0;min-height:0;background:none}
.page-title,.calendar-page .page-title{min-height:66px;margin-bottom:18px}
.page-title h1{max-width:100%;font-size:23px;letter-spacing:.02em;margin:5px 0;font-weight:650}
.eyebrow{font-size:9px;letter-spacing:.2em;color:#bd9eaf}
.settings-icon{background:#ffffff08;border:1px solid var(--line);border-radius:14px;width:44px;height:44px}
.month-control{gap:8px;padding:4px 0}
.month-control strong{font-size:12px;font-weight:500;color:#d6c8db;font-variant-numeric:tabular-nums;text-align:center}
.month-control button{width:40px;min-width:40px;padding:4px;font-size:24px;border:0!important;background:transparent!important}
.month-summary{margin:14px 0 18px;border:1px solid #f4aecb22;border-radius:22px;padding:22px;background:linear-gradient(120deg,#53394e,#332c3f);box-shadow:none}
.month-summary>small{font-size:12px;color:#dbc6d7}.month-summary>strong{font-size:clamp(32px,9vw,42px);font-weight:600;letter-spacing:-.04em;margin:8px 0 19px}
.month-summary .split{padding-top:14px;border-top:1px solid #ffffff12;font-size:11px;flex-wrap:wrap}
.month-summary p{color:#c4afc2;font-size:10px}
.totals{justify-content:space-between;padding:0 5px;font-size:11px;margin:16px 0}
.calendar-page .calendar{gap:0;padding:6px;border-radius:20px;background:#2a2432;border:1px solid #ffffff0d;overflow:hidden}
.calendar-page .weekday{font-size:10px;padding:14px 0;color:#baadbf}
.calendar-page .weekday:nth-child(6){color:#a9b8d9}.calendar-page .weekday:nth-child(7){color:#d6a5bc}
.calendar-page .day{position:relative;min-height:80px;gap:6px;background:transparent;border:0;border-top:1px solid #ffffff08;border-radius:0;padding:11px 2px 6px}
.calendar-page .day b{font-size:12px;font-weight:500;line-height:20px;min-width:26px;border-radius:8px}
.calendar-page .day.today{background:#f4aecb08;border-color:#ffffff08}
.calendar-page .day.today b{color:#2b2330;background:var(--pink);font-weight:700}
.calendar-page .day:hover{background:#f4aecb0a}
.calendar-page .day.month-edge{border-top:1px solid #d0a5c04d}
.calendar-page .day.month-first{border-left:1px solid #d0a5c04d}
.calendar-page .day.month-first b{color:#f2c6db}
.calendar-page .day.month-first.today b{color:#2b2330}
.calendar-page .marks{font-size:8px;opacity:.7}.calendar-page>.note{font-size:9px;text-align:center;margin:13px 0 20px}
.calendar-actions{display:grid;gap:8px;padding-bottom:50px}.calendar-actions .primary{position:fixed;right:max(18px,calc((100vw - 644px)/2));bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 14px);z-index:14;min-height:50px;border-radius:17px;font-size:14px;padding:12px 20px;box-shadow:0 6px 24px #140d2355}
.period-reset{border:0;font-size:11px;color:var(--muted);background:none}
.card{border-radius:20px;border-color:#ffffff10;box-shadow:none;padding:22px}.card h2{font-weight:600}
nav{padding:8px 14px calc(8px + env(safe-area-inset-bottom));background:#241e2ef5;border-top:1px solid #ffffff14;gap:6px}
nav button{width:33.333%;max-width:200px;font-size:10px;letter-spacing:.03em;border-radius:14px;min-height:50px;color:#a99aae}
nav button.active{background:#f4aecb0e;color:#f4bdd5}nav span{font-size:22px;margin-bottom:4px}
dialog{background:#2a2433;border-radius:24px;border-color:#ffffff20}input,select{background:#211b29;border-color:#ffffff20;border-radius:12px}
@media(max-width:360px){.content{padding-left:10px;padding-right:10px}.calendar-page .day{min-height:76px}.month-control strong{font-size:11px}.month-summary{padding:19px}}