/* Pocket Plan · midnight blue edition. An original UI informed by contemporary banking design. */
:root {
  color-scheme:dark;
  --bg:#080f1a; --white:#111d2b; --ink:#f2f7ff; --navy:#080f1a;
  --muted:#91a4bb; --muted-light:#bbcbda; --line:#273548;
  --green:#65c9ff; --mint:#152d49; --lime:#83d8ff;
  --rose:#ff8b9e; --pink:#321d31; --accent:#61c6ff;
  --shadow:0 12px 32px #00000022; --radius:21px;
  --surface:#111d2b; --surface2:#152337; --surface3:#1b2c42;
  --primary:#61c6ff; --blue:#449cff; --text:#f2f7ff;
}
*{box-sizing:border-box}
html{font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased;color-scheme:dark;background:var(--bg);scrollbar-color:#354861 #080f1a}
body{margin:0;background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums;}
button,input,select,textarea{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #73ccff;outline-offset:3px}
.app{max-width:650px;min-height:100dvh;margin:0 auto;padding-bottom:112px;background:radial-gradient(ellipse 380px 240px at 100% 0%,#142d4833,transparent 75%),var(--bg)}
.app-header{height:85px;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:transparent;color:var(--text)}
.wordmark{display:flex;gap:12px;align-items:center}.wordmark img{width:44px;height:44px;object-fit:contain;border-radius:50%}.wordmark strong{display:block;font-size:18px;font-weight:700;letter-spacing:-.55px}.wordmark small{display:block;color:#829ebc;font-size:11px;font-weight:500;margin-top:5px;letter-spacing:.08px}
.icon-button{height:43px;width:43px;border:1px solid #314158;background:#162538;color:#bcd6f4;border-radius:50%;display:grid;place-items:center}
.icon-button svg,.nav-item svg,.nav-add svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.main{padding:8px 20px 26px}
/* The balance is the hero: big type, little decoration. */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:26px 24px 23px;background:linear-gradient(140deg,#162b43 0%,#102237 57%,#101e30 100%);border:1px solid #29435c;box-shadow:0 15px 40px #0000001c;color:var(--text)}
.hero:before{content:"";position:absolute;width:235px;height:235px;border-radius:50%;border:1px solid #76beff0a;right:-152px;top:-151px;box-shadow:0 0 0 36px #3aa2ff08,0 0 0 80px #3aa2ff04;pointer-events:none}
.hero small{font-size:12px;color:#bdd0e4;font-weight:500}
.hero .large{font-size:clamp(40px,10vw,52px);font-weight:690;letter-spacing:-2.6px;line-height:1.11;margin:15px 0 11px;word-break:break-word}
.hero .subtle{font-size:11px;line-height:1.6;color:#a7bed2}
.hero-buttons{display:flex;gap:10px;margin-top:26px}.hero-buttons button{flex:1;min-height:49px;border:0;border-radius:100px;font-size:13px;font-weight:700;padding:12px 10px;transition:transform .15s ease,background .15s}
.hero-buttons button:first-child{background:#72ccff;color:#071728;box-shadow:0 5px 18px #1ba5ff22}
.hero-buttons button:last-child{background:#253b52;color:#e9f4ff;border:1px solid #35516a}
.hero-buttons button:active{transform:scale(.98)}
.quickstats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:19px;color:var(--text)}
.mini-stat{min-height:112px}.mini-stat .kicker{font-size:11px;color:var(--muted-light);line-height:1.4}.mini-stat .value{font-size:23px;font-weight:700;letter-spacing:-.9px;margin-top:12px;overflow-wrap:anywhere}.mini-stat .foot{font-size:11px;color:#839ab2;margin-top:7px}
.positive{color:#69d0fa}.negative{color:#ff97a4}
.section-head{margin:29px 2px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h2{font-size:17px;font-weight:700;letter-spacing:-.4px;margin:0}.section-head small{font-size:12px;color:var(--muted)}
.text-button{background:transparent;border:0;color:#7acaff;font-weight:660;font-size:12px;padding:6px 0}.entry-action{border:0;background:transparent;color:#77c8ff;font-size:12px;font-weight:660;padding:5px 1px}
.soft-button{border:1px solid #34516c;background:#203952;color:#9fdbff;padding:10px 14px;border-radius:13px;font-size:12px;font-weight:700}
.main-button{border:0;background:linear-gradient(115deg,#8cd7ff,#5eb9fa);color:#071727;border-radius:15px;padding:15px 18px;font-weight:750;box-shadow:none}
.outline-button{border:1px solid #39516a;background:#182a3d;color:#d5edff;border-radius:13px;padding:13px 14px;font-weight:660}
.danger-button{border:1px solid #874b59;background:#352431;color:#ffc4ce;border-radius:13px;padding:13px 14px;font-weight:680}
.button-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.button-row>*{flex:1}
.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.flex{display:flex;gap:10px;align-items:center}.between{display:flex;justify-content:space-between;gap:12px;align-items:center}.strong{font-weight:740}
.payday-head{display:flex;gap:13px;align-items:center}.round-icon{width:44px;height:44px;border-radius:15px;background:#233a56;display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.soft-box{border-radius:15px;background:#1b2b3f;border:1px solid #253c56;padding:13px 14px}
.breakdown{display:grid;gap:15px;margin-top:19px}.breakdown>div{display:flex;justify-content:space-between;align-items:center;gap:13px;font-size:12px}.breakdown span{color:#aabed1}.breakdown strong{font-size:14px;font-variant-numeric:tabular-nums}.divider{height:1px;background:var(--line);margin:17px 0}.safe{display:flex;align-items:center;justify-content:space-between;gap:10px}.safe strong{font-size:24px;font-weight:750;letter-spacing:-.65px}
.budget-bar{width:100%;height:8px;background:#243448;overflow:hidden;border-radius:99px;display:flex;margin-top:20px}.budget-bar span{height:100%;display:block}
.key-row{margin-top:11px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}.key-row span{font-size:10px;color:#98afc6}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px}
.list-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #27364a}.list-row:first-child{padding-top:0}.list-row:last-child{padding-bottom:0;border:0}
.list-icon{width:43px;height:43px;border-radius:16px;display:grid;place-items:center;font-size:20px;flex-shrink:0;box-shadow:inset 0 0 0 1px #ffffff0a}
.grow{flex:1;min-width:0}.row-title{font-size:13px;font-weight:670;overflow-wrap:anywhere;line-height:1.45}.row-sub{font-size:11px;color:#8fa5ba;margin-top:5px;line-height:1.5}.right-amount{text-align:right;white-space:nowrap;font-size:13px;font-weight:710;font-variant-numeric:tabular-nums}
.tag{border-radius:50px;padding:5px 9px;font-size:10px;font-weight:650;display:inline-block;background:#183c52;color:#8fdcff}.tag.due{background:#3c2c30;color:#ffd2a2}.tag.late{background:#422832;color:#ffc0c9}
.progress{height:8px;border-radius:20px;background:#29384b;overflow:hidden;margin-top:11px}.progress span{height:100%;display:block;border-radius:20px;background:linear-gradient(90deg,#448fff,#73d3ff)}
.big-number{font-size:28px;letter-spacing:-1px;font-weight:720}
.page-title{margin:6px 2px 23px}.page-title h1{font-size:29px;letter-spacing:-1px;margin:0 0 7px;font-weight:720}.page-title p{color:#8fa5bb;font-size:12px;margin:0;line-height:1.7}
.empty{text-align:center;color:#94a9bd;padding:28px 9px;line-height:1.65;font-size:12px}.empty .illustration{font-size:28px;display:block;margin-bottom:9px}
.pill-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:3px 0 6px}.pill-row::-webkit-scrollbar{display:none}.pill{background:#162539;border:1px solid #2b3e54;border-radius:99px;padding:10px 14px;color:#a6bad0;font-size:12px;font-weight:680;white-space:nowrap}.pill.active{background:#64c5ff;color:#061525;border-color:#64c5ff}
.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.category-card{padding:15px;min-height:157px}.category-card .round-icon{width:38px;height:38px;font-size:19px;border-radius:12px}.category-card strong{font-size:13px}.category-card .numbers{font-size:13px;font-weight:750;margin-top:12px}.category-card .numbers span{color:var(--muted);font-size:11px;font-weight:500}.category-card .progress{height:7px}.warn-text{color:#ff9fac}
.text-input,.field input,.field select,.field textarea{width:100%;border:1px solid #354b63;border-radius:13px;padding:13px 13px;background:#1b2b3e;color:#f2f7ff;font-size:15px;min-width:0;appearance:auto}.text-input::placeholder,.field input::placeholder{color:#7f96ad}.field label{font-size:12px;font-weight:650;color:#bdd0e3;display:block;margin-bottom:9px}.field{margin-bottom:17px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.form-grid .span2{grid-column:1/-1}
.note{font-size:11px;color:#8ca4ba;line-height:1.7}.inline-note{background:#192c41;color:#b4cfe8;border:1px solid #2b4661;padding:13px 14px;border-radius:13px;font-size:11px;line-height:1.65}.inline-alert{background:#352b2c;color:#f6c5a3;border:1px solid #64453e;padding:13px 14px;border-radius:13px;font-size:11px;line-height:1.65}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;margin:auto;max-width:650px;background:rgba(11,20,33,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid #27374a;display:flex;align-items:center;justify-content:space-around;padding:10px 8px max(9px,env(safe-area-inset-bottom));z-index:15;box-shadow:0 -15px 40px #00000022}
.nav-item{border:0;background:transparent;padding:5px 3px;color:#859cb4;font-size:10px;font-weight:600;display:flex;flex:1;align-items:center;flex-direction:column;gap:6px;min-width:0}.nav-item.active{color:#73ccff}.nav-item.active svg{stroke-width:2.25}.nav-add{border:0;background:#69c5ff;color:#071728;width:52px;height:52px;border-radius:50%;margin:0 7px 8px;display:grid;place-items:center;box-shadow:0 4px 19px #208df344}.nav-add svg{width:27px;height:27px;stroke-width:2.3}
.overlay[hidden]{display:none}.overlay{position:fixed;inset:0;background:#000a14cc;z-index:50;display:flex;justify-content:center;align-items:flex-end}.sheet{background:#142235;border:1px solid #34465b;width:100%;max-width:650px;max-height:94dvh;overflow-y:auto;border-radius:27px 27px 0 0;padding:0 20px max(25px,env(safe-area-inset-bottom));animation:rise .2s ease-out;box-shadow:0 -20px 70px #0007}@keyframes rise{from{transform:translateY(16px);opacity:.65}to{transform:translateY(0);opacity:1}}.sheet-grab{width:45px;height:5px;background:#40516a;border-radius:10px;margin:11px auto 16px}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.sheet-head h2{margin:0;font-size:21px;letter-spacing:-.5px;font-weight:700}.x-button{border:0;background:#293a50;border-radius:50%;width:35px;height:35px;color:#d8e8f8;font-size:23px;line-height:1}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:100px;z-index:70;background:#286497;color:#fff;border-radius:12px;padding:13px 17px;box-shadow:0 10px 30px #0005;font-size:12px;display:none;max-width:90vw}
.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.calendar-head button{border:1px solid #35506b;background:#1b3046;width:37px;height:37px;border-radius:50%;font-size:20px;color:#9fdbff}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.weekday{text-align:center;color:#829ab0;font-weight:650;font-size:10px;padding-bottom:12px}.date-btn{border:0;background:transparent;aspect-ratio:1/1.18;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text);font-size:12px;min-width:0}.date-btn small{font-size:9px;color:#ff97aa;letter-spacing:-.4px;white-space:nowrap}.date-btn.selected{color:#091523;background:#74c9ff;box-shadow:0 5px 14px #4daeff24;font-weight:750}.date-btn.selected small{color:#15324a}.date-btn.today:not(.selected){outline:1px solid #4779a2}.date-btn.other{color:#62778b}.date-btn .dot{margin:0;width:5px;height:5px}
.chart-donut{border-radius:50%;height:190px;width:190px;background:conic-gradient(#284158 0 100%);display:grid;place-items:center;margin:12px auto;position:relative}.chart-donut>div{background:var(--surface);height:139px;width:139px;border-radius:50%;display:grid;align-content:center;justify-items:center;line-height:1.5}.chart-donut strong{font-size:19px}.legend{display:grid;grid-template-columns:1fr 1fr;gap:13px;font-size:11px;color:#c0d1e1}.legend .dot{margin-right:6px;width:9px;height:9px}
.bars{height:182px;display:flex;align-items:stretch;gap:10px;border-bottom:1px solid var(--line);padding:8px 0 0}.barcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.barcol .bar{min-height:3px;border-radius:7px 7px 0 0;width:min(46px,90%);background:linear-gradient(180deg,#7bd7ff,#367ad6)}.barcol small{font-size:10px;color:var(--muted)}
.menu-item{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer}.menu-item:last-child{border:0}.menu-item .iconbox{background:#1e334d;border-radius:14px;width:43px;height:43px;display:grid;place-items:center;font-size:19px}.menu-item .arrow{font-size:20px;color:#8098af}
.report-number{font-size:30px;font-weight:720;letter-spacing:-1px}.month-choice{display:flex;align-items:center;gap:12px}.month-choice input{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface2);color:var(--text);max-width:150px}.balance-hidden .hero .large{filter:blur(9px)}.tabular{font-variant-numeric:tabular-nums}.toggle{display:flex;align-items:center;gap:10px;font-size:13px;color:#b5ccdf}.toggle input{accent-color:#53b7ff;width:18px;height:18px}.scroll-safe{padding-bottom:20px}
/* More deliberate home hierarchy */
.home-greeting{padding:4px 2px 19px}.home-greeting .eyebrow{color:#8aa6c2;font-size:12px;font-weight:600;letter-spacing:.03em}.home-greeting h1{font-size:30px;margin:7px 0 0;letter-spacing:-1.2px;font-weight:720}
.feature-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.feature-tile{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:16px 11px;display:flex;flex-direction:column;gap:9px;min-width:0}.feature-tile .tile-icon{font-size:19px}.feature-tile .tile-label{font-size:11px;color:#a9bed3}.feature-tile .tile-number{font-size:16px;font-weight:735;letter-spacing:-.7px;overflow-wrap:anywhere}.feature-tile .tile-helper{font-size:10px;color:#7f99b2}
.forecast-card{border-color:#31506e;background:linear-gradient(145deg,#15283f,#112135)}.forecast-top{display:flex;align-items:center;gap:12px}.forecast-top .forecast-text{flex:1}.forecast-top .round-icon{background:#244663}.forecast-top .date{font-weight:670;font-size:15px}.forecast-top .hint{color:#8eaac3;font-size:11px;margin-top:5px}.forecast-amount{font-size:18px;font-weight:730;color:#b4e7ff}
.stat-cards{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:11px}.stat-tile{padding:17px 15px;background:#111f31;border:1px solid #263b52;border-radius:19px}.stat-tile .stat-label{font-size:11px;color:#a8bdd0}.stat-tile .stat-value{margin-top:10px;font-size:19px;letter-spacing:-.7px;font-weight:710}.stat-tile .stat-helper{font-size:10px;color:#87a2bc;margin-top:6px}
.summary-split{display:flex;align-items:end;justify-content:space-between;gap:15px}.summary-number{font-size:29px;font-weight:730;letter-spacing:-1.2px}.summary-caption{font-size:11px;color:#a4bbce}
.hero .balance-eye{border:0;background:#26405760;color:#c2dced;padding:7px 11px;border-radius:50px;font-size:11px;margin-left:6px}
.welcome-pill{display:inline-block;padding:6px 10px;background:#162e47;border:1px solid #2a4561;border-radius:30px;color:#acd8ff;font-size:11px}
@media(min-width:700px){.main{padding:12px 27px 28px}.app-header{padding-left:27px;padding-right:27px}.overlay{align-items:center}.sheet{border-radius:22px;max-height:90vh}.sheet-grab{display:none}.sheet-head{padding-top:20px}}
@media(max-width:370px){.main{padding-left:13px;padding-right:13px}.panel{padding:15px}.category-card{padding:12px}.hero{padding:21px}.hero .large{font-size:38px}.feature-tile{padding:14px 8px}.feature-tile .tile-number{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}