:root{--bg:#070a12;--panel:#101521;--panel2:#151b29;--text:#f4f5f8;--muted:#8d94a5;--line:rgba(255,255,255,.085);--accent:#b59cff;--accent2:#79d9ff;--safe:#7ce6b5;--danger:#ff858e;--shadow:0 18px 60px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;background:radial-gradient(circle at 80% -10%,rgba(100,84,190,.18),transparent 34%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.app-shell{width:min(100%,560px);min-height:100dvh;margin:0 auto;padding:0 17px 110px}.topbar{position:sticky;top:0;z-index:18;display:flex;align-items:center;justify-content:space-between;padding:calc(15px + env(safe-area-inset-top)) 2px 14px;background:linear-gradient(var(--bg) 62%,rgba(7,10,18,0));backdrop-filter:blur(10px)}.eyebrow{margin:0 0 2px;color:var(--muted);font-size:12px}.topbar h1{margin:0;font-size:27px;letter-spacing:-.7px}.icon-btn{width:44px;height:44px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:27px;line-height:1}.screen{display:none}.screen.active{display:block}.label{font-size:11px;color:#bac0ce;text-transform:uppercase;letter-spacing:.7px}.muted{color:var(--muted)}.hero-card{position:relative;min-height:205px;overflow:hidden;border:1px solid var(--line);border-radius:28px;padding:24px;background:linear-gradient(145deg,rgba(33,40,65,.96),rgba(14,18,29,.96));box-shadow:var(--shadow)}.orbit{position:absolute;border:1px solid rgba(181,156,255,.23);border-radius:50%;transform:rotate(-18deg)}.orbit-a{width:260px;height:92px;right:-65px;top:30px}.orbit-b{width:310px;height:128px;right:-78px;top:60px;border-color:rgba(121,217,255,.2)}.orbit-c{width:225px;height:180px;right:-60px;top:4px;border-color:rgba(124,230,181,.13)}.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding-top:36px}.hero-total{font-size:36px;letter-spacing:-1.3px}.hero-badge{position:absolute;right:20px;bottom:18px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:rgba(181,156,255,.14);border:1px solid rgba(181,156,255,.25)}.hero-badge span{font-size:19px;font-weight:750;line-height:1}.hero-badge small{font-size:8px;color:#c8bedf;margin-top:-11px}.budget-card,.settings-card,.stats-card,.stats-hero{margin-top:15px;padding:17px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}.budget-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.budget-head>div{display:grid;gap:5px}.budget-head strong{font-size:18px}.link-btn{border:0;background:none;color:#d2c7ff;padding:3px;font-weight:650}.progress-track{height:9px;margin:15px 0 9px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}.progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .25s ease}.progress-fill.over{background:linear-gradient(90deg,#ffb07a,var(--danger))}.budget-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.quick-card{display:grid;gap:5px;padding:15px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.035)}.quick-card span,.quick-card small{color:var(--muted);font-size:10px}.quick-card strong{font-size:18px}.section-head{display:flex;justify-content:space-between;align-items:end;padding:26px 2px 12px}.section-head h2{margin:0;font-size:17px}.section-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.inline-head{padding:0 0 14px}.stack{display:grid;gap:10px}.sub-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border-radius:19px;border:1px solid var(--line);background:rgba(255,255,255,.04)}.logo-dot{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(181,156,255,.2),rgba(121,217,255,.12));border:1px solid rgba(255,255,255,.08);font-weight:800;font-size:19px;overflow:hidden}.logo-dot.emoji{font-size:24px}.sub-main{min-width:0}.sub-name{display:flex;align-items:center;gap:7px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--safe);flex:0 0 auto}.status-dot.paused{background:#f0c77c}.status-dot.cancelled{background:#6c7382}.sub-meta{margin-top:4px;color:var(--muted);font-size:10px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sub-side{text-align:right}.sub-price{font-weight:720;font-size:13px}.sub-date{margin-top:5px;color:var(--muted);font-size:10px}.card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.mini-btn{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.04);padding:6px 8px;font-size:10px}.mini-btn.primary{color:#dcd3ff}.empty{padding:30px 20px;text-align:center;border:1px dashed var(--line);border-radius:20px;color:var(--muted);font-size:12px}.empty strong{display:block;color:var(--text);font-size:15px;margin-bottom:6px}.search-wrap{display:grid;grid-template-columns:24px 1fr;align-items:center;margin:3px 0 11px;padding:0 12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.045)}.search-wrap span{color:var(--muted);font-size:20px}.search-wrap input{width:100%;border:0;background:transparent;padding:12px 4px;outline:none}.filter-row{display:flex;gap:7px;overflow:auto;padding:2px 0 10px;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);padding:8px 11px;color:var(--muted);font-size:11px}.chip.active{background:rgba(181,156,255,.16);color:#e9e2ff;border-color:rgba(181,156,255,.3)}.filter-selects{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:7px;margin-bottom:11px}.filter-selects select{min-width:0;padding:9px 8px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:10px}.settings-card h2,.stats-card h2{margin:0 0 8px;font-size:17px}.settings-card>p{font-size:12px;line-height:1.55}.field{display:grid;gap:6px;margin-top:13px}.field>span{font-size:11px;color:#c1c5d0}.field em{font-style:normal;color:var(--muted)}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.045);padding:12px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:rgba(181,156,255,.45)}textarea{resize:vertical}.field-row,.icon-name-row{display:flex;gap:10px}.grow{flex:1}.currency-field{width:105px}.icon-field{width:82px}.field-hint{margin:6px 0 0;color:var(--muted);font-size:10px}.callout{display:grid;gap:7px;margin-top:14px;padding:13px;border-radius:15px;background:rgba(121,217,255,.06);border:1px solid rgba(121,217,255,.12);font-size:11px}.callout code{color:#cbd3df;white-space:normal;word-break:break-all}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.secondary-btn,.danger-btn{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(255,255,255,.045);text-align:center}.file-btn{display:grid;place-items:center}.danger-btn{width:100%;color:var(--danger);background:rgba(255,90,100,.055);border-color:rgba(255,120,130,.15)}.danger-zone{margin-top:18px}.privacy-note{text-align:center;color:var(--muted);font-size:11px;line-height:1.7;margin:20px 0}.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,560px);display:grid;grid-template-columns:repeat(5,1fr);padding:8px 7px calc(8px + env(safe-area-inset-bottom));background:rgba(8,10,17,.9);backdrop-filter:blur(24px);border-top:1px solid var(--line);z-index:20}.tab{border:0;background:none;color:#7e8493;display:grid;place-items:center;gap:3px;padding:5px 2px}.tab span{font-size:18px}.tab small{font-size:9px}.tab.active{color:var(--text)}
.sheet{width:min(calc(100% - 12px),550px);max-height:94dvh;margin:auto auto 0;padding:0;border:1px solid var(--line);border-radius:28px 28px 0 0;color:var(--text);background:#10131d;box-shadow:var(--shadow)}.sheet::backdrop{background:rgba(0,0,0,.58);backdrop-filter:blur(5px)}.sheet form{padding:10px 20px calc(28px + env(safe-area-inset-bottom));overflow:auto;max-height:94dvh}.sheet-handle{width:38px;height:5px;border-radius:99px;margin:3px auto 12px;background:rgba(255,255,255,.17)}.sheet-head{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;gap:8px;margin-bottom:14px}.sheet-head h2{text-align:center;font-size:17px}.text-btn{border:0;background:none;color:var(--muted);padding:8px 0;font-size:13px}.text-btn.accent{color:#d3c6ff;font-weight:700}.history-box,.spent-box{margin-top:16px;padding:13px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}.history-head{display:grid;gap:3px}.history-head small{color:var(--muted);font-size:9px}.history-item{display:flex;justify-content:space-between;gap:10px;padding-top:9px;margin-top:9px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.history-item strong{color:var(--text)}.spent-box{display:flex;justify-content:space-between;align-items:center;gap:10px}.spent-box span{font-size:10px;color:var(--muted)}.spent-box strong{font-size:15px}.hidden{display:none!important}.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,15px);z-index:50;background:#f3f3f7;color:#11131a;border-radius:999px;padding:10px 15px;font-size:12px;font-weight:650;opacity:0;pointer-events:none;transition:.22s ease;white-space:nowrap;max-width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translate(-50%,0)}
.calendar-toolbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;margin:2px 0 18px;padding:14px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}.calendar-title-wrap{min-width:0;text-align:center}.calendar-title-wrap h2{margin:0}.calendar-title-wrap p{margin:4px 0 0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-nav-btn{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:28px;line-height:1}.weekday-row,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.weekday-row{margin:0 2px 8px}.weekday-row span{text-align:center;color:var(--muted);font-size:11px;font-weight:650}.calendar-grid{margin-bottom:18px}.calendar-day{position:relative;min-height:59px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035);padding:8px 5px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px}.calendar-day.outside{opacity:.28}.calendar-day.today{border-color:rgba(121,217,255,.55);box-shadow:inset 0 0 0 1px rgba(121,217,255,.12)}.calendar-day.selected{background:rgba(181,156,255,.14);border-color:rgba(181,156,255,.52)}.calendar-day.has-payment{background:rgba(255,255,255,.055)}.day-number{font-size:13px;font-weight:650;line-height:1}.payment-dots{min-height:12px;display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%}.payment-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px rgba(181,156,255,.45)}.payment-dot:nth-child(2){background:var(--accent2)}.payment-dot:nth-child(3){background:var(--safe)}.more-dot{font-size:8px;color:var(--muted);line-height:1}.day-total{max-width:100%;font-size:8px;color:#d8dae4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-payment-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:13px;background:var(--panel)}.calendar-payment-actions{margin-left:auto}.compact-head{padding-top:16px}
.stats-hero{text-align:center;padding:23px}.stats-hero strong{display:block;font-size:40px;margin:8px 0 3px}.stats-hero p{margin:0;font-size:11px}.bar-list{display:grid;gap:13px}.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center}.bar-row .bar-label{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-row .bar-value{font-size:11px;font-weight:700}.bar-track{grid-column:1/-1;height:7px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}.bar-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent2),var(--accent))}.rank-list{display:grid}.rank-item{display:grid;grid-template-columns:24px 38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--line)}.rank-item:first-child{border-top:0}.rank-number{color:var(--muted);font-size:10px}.rank-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05)}.rank-name{font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-value{font-size:11px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-grid article{display:grid;gap:6px;padding:4px}.stat-grid span{font-size:10px;color:var(--muted)}.stat-grid strong{font-size:17px}
@media(min-width:700px){.sheet{border-radius:28px;margin:auto}}@media(max-width:390px){.weekday-row,.calendar-grid{gap:4px}.calendar-day{min-height:55px;border-radius:13px;padding-left:3px;padding-right:3px}.day-total{font-size:7px}.filter-selects{grid-template-columns:1fr 1fr}.filter-selects select:last-child{grid-column:1/-1}.tab small{font-size:8px}.hero-total{font-size:32px}}

/* v4.1 refinements */
.topbar{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:16px}
.eyebrow{text-transform:none;line-height:1.25}
.calendar-title-wrap h2{text-transform:none}
.tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab svg .fill-dot{fill:currentColor;stroke:none}
.quick-icons{display:flex;gap:7px;overflow:auto;padding:8px 0 1px;scrollbar-width:none}
.quick-icons::-webkit-scrollbar{display:none}.quick-icons button{flex:0 0 38px;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:19px;padding:0}
.date-preview{min-height:14px;color:var(--muted);font-size:10px;padding-left:2px}
.advanced-details{margin-top:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);overflow:hidden}
.advanced-details summary{list-style:none;cursor:pointer;padding:14px 15px;font-weight:700;font-size:13px;color:#ddd7f7;display:flex;align-items:center;justify-content:space-between}
.advanced-details summary::-webkit-details-marker{display:none}.advanced-details summary::after{content:'＋';font-size:19px;font-weight:400;color:var(--muted)}.advanced-details[open] summary::after{content:'−'}
.advanced-content{padding:0 15px 16px;border-top:1px solid var(--line)}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:16px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.switch-row>span{display:grid;gap:4px}.switch-row strong{font-size:12px}.switch-row small{font-size:10px;color:var(--muted);line-height:1.35}.switch-row input{appearance:none;-webkit-appearance:none;width:46px;height:28px;flex:0 0 auto;border:0;border-radius:999px;background:rgba(255,255,255,.12);padding:0;position:relative;transition:.2s}
.switch-row input::after{content:'';position:absolute;width:24px;height:24px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.3)}.switch-row input:checked{background:var(--accent)}.switch-row input:checked::after{transform:translateX(18px)}
.trial-fields{display:grid}
.settings-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.settings-title-row>div{min-width:0}.settings-title-row p{margin:0;font-size:11px;line-height:1.5}.compact-btn{width:auto;padding:9px 11px;flex:0 0 auto;font-size:11px}.fx-status{display:flex;justify-content:space-between;gap:12px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.fx-status small{text-align:right;color:#c8cdda}
.converted-price{margin-top:3px;color:#b7bdd0;font-size:9px;font-weight:500}
@media(max-width:390px){.topbar{padding-top:calc(21px + env(safe-area-inset-top))}.settings-title-row{align-items:center}}