:root{
  --bg:#f2f2f7; --bg-elev:#ffffff; --sep:rgba(60,60,67,.18);
  --label:#000; --label2:#3c3c43; --label3:#8e8e93; --muted:#8a8a8e;
  --blue:#007aff; --nav-bg:rgba(249,249,249,.82); --field:#fff; --field2:#efeff4;
  --danger:#ff3b30; --shadow:0 1px 3px rgba(0,0,0,.08);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#000; --bg-elev:#1c1c1e; --sep:rgba(84,84,88,.5);
    --label:#fff; --label2:#ebebf5; --label3:#8d8d93; --muted:#98989e;
    --blue:#0a84ff; --nav-bg:rgba(22,22,23,.8); --field:#1c1c1e; --field2:#2c2c2e;
    --danger:#ff453a; --shadow:none;
  }
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg); color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.35; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
#app{min-height:100%; padding-bottom:env(safe-area-inset-bottom)}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:var(--blue); font-size:17px}
input,select,textarea{font-family:inherit; font-size:17px; color:var(--label)}
::selection{background:rgba(0,122,255,.25)}

/* Nav bar */
.nav{
  position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top);
  background:var(--nav-bg); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
}
.nav-title{font-size:34px; font-weight:700; letter-spacing:-.02em; padding:4px 16px 10px}
.nav.compact .nav-title{font-size:17px; font-weight:600; text-align:center; padding:12px 56px; height:44px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav-back{
  position:absolute; left:8px; bottom:7px; display:flex; align-items:center; gap:1px; padding:2px 6px;
  color:var(--blue); font-size:17px; z-index:2;
}
.nav-back span{margin-left:-2px}

/* Screen + transitions */
#screen{padding:0 0 40px}
.screen-in{animation:slideIn .34s cubic-bezier(.32,.72,0,1)}
.screen-back{animation:slideBack .3s cubic-bezier(.32,.72,0,1)}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes slideBack{from{transform:translateX(-24%);opacity:.6}to{transform:translateX(0);opacity:1}}

/* Home grid */
.home{padding:8px 8px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:2px 4px}
@media (max-width:340px){.home{grid-template-columns:repeat(3,1fr)}}
.tile{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 2px; border-radius:16px; color:var(--label); text-decoration:none; position:relative}
.tile:active{background:rgba(120,120,128,.14)}
.tile .ic{width:60px; height:60px; border-radius:15px; display:grid; place-items:center; color:#fff; box-shadow:var(--shadow)}
.tile .ic svg{width:32px; height:32px}
.tile .lb{font-size:12px; line-height:1.2; text-align:center; color:var(--label2); max-width:74px}
.tile.soon .ic{opacity:.96}
.tile .badge{position:absolute; top:6px; right:10px; background:var(--muted); color:#fff; font-size:9px; font-weight:600; padding:1px 5px; border-radius:8px; letter-spacing:.02em}
.g-blue{background:linear-gradient(160deg,#2a9bff,#0062ff)}
.g-orange{background:linear-gradient(160deg,#ffb340,#ff8a00)}
.g-yellow{background:linear-gradient(160deg,#ffd426,#ffab00)}
.g-sky{background:linear-gradient(160deg,#5bc8ff,#0a97e6)}
.g-green{background:linear-gradient(160deg,#4cd964,#22a447)}
.g-navy{background:linear-gradient(160deg,#3a6ea5,#123a63)}
.g-purple{background:linear-gradient(160deg,#bf5af2,#8a2be2)}
.g-teal{background:linear-gradient(160deg,#40c8b6,#0f9e88)}

/* Content blocks (grouped-list style) */
.wrap{padding:14px 16px 0; max-width:640px; margin:0 auto}
.section-title{font-size:13px; color:var(--label3); text-transform:uppercase; letter-spacing:.04em; margin:22px 4px 7px; font-weight:500}
.card{background:var(--bg-elev); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.row{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:.5px solid var(--sep); min-height:48px}
.row:last-child{border-bottom:none}
.row .lab{color:var(--label); flex:1}
.row .val{color:var(--label3)}
.row.tap:active{background:var(--field2)}

/* Segmented control */
.seg{display:flex; background:var(--field2); border-radius:9px; padding:2px; margin:2px 0 4px; gap:2px}
.seg button{flex:1; padding:7px 4px; font-size:13px; font-weight:500; color:var(--label); border-radius:7px}
.seg button.on{background:var(--bg-elev); box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Chips (horizontal scroll) */
.chips{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; padding:7px 15px; border-radius:20px; background:var(--field2); color:var(--label); font-size:15px; font-weight:500}
.chip.on{background:var(--blue); color:#fff}

/* Fields */
.field{width:100%; background:var(--field); border:none; padding:13px 16px; font-size:17px; color:var(--label); outline:none}
.big-input{width:100%; background:var(--bg-elev); border-radius:12px; padding:16px; font-size:30px; font-weight:600; letter-spacing:-.01em; text-align:right; outline:none; color:var(--label); box-shadow:var(--shadow)}
select.field{-webkit-appearance:none; appearance:none; background-image:none}
.inline{display:flex; gap:10px; align-items:stretch}
.inline > *{flex:1}
input[type=date],input[type=number],input[type=text]{background:var(--bg-elev)}

.btn{display:block; width:100%; background:var(--blue); color:#fff; font-weight:600; padding:14px; border-radius:12px; text-align:center; margin-top:14px}
.btn:active{opacity:.85}
.btn.plain{background:var(--bg-elev); color:var(--blue); box-shadow:var(--shadow)}
.btn.danger{background:var(--bg-elev); color:var(--danger); box-shadow:var(--shadow)}

.result{background:var(--bg-elev); border-radius:12px; padding:18px 16px; box-shadow:var(--shadow); text-align:center; margin-top:6px}
.result .big{font-size:40px; font-weight:700; letter-spacing:-.02em}
.result .sub{color:var(--label3); font-size:15px; margin-top:2px}

.hint{color:var(--label3); font-size:13px; padding:10px 6px 0; text-align:center}
.empty{text-align:center; color:var(--label3); padding:60px 20px; font-size:15px}

/* Notes */
.note-item{display:block; text-decoration:none; color:var(--label)}
.note-item .t{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.note-item .p{color:var(--label3); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.note-edit{width:100%; min-height:60vh; background:transparent; border:none; outline:none; font-size:17px; line-height:1.5; color:var(--label); padding:14px 16px; resize:none}
.fab{position:fixed; right:18px; bottom:calc(22px + env(safe-area-inset-bottom)); width:56px; height:56px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.28); z-index:30}
.fab svg{width:28px;height:28px}
.nav-act{position:absolute; right:12px; bottom:8px; font-size:17px; color:var(--blue); font-weight:400}
.soon-note{margin:30px 16px; text-align:center; color:var(--label3)}
.soon-note .ic{width:76px;height:76px;border-radius:19px;display:grid;place-items:center;margin:0 auto 16px;color:#fff}
.soon-note .ic svg{width:40px;height:40px}

/* Passcode lock */
body.locked{overflow:hidden}
.lock{position:fixed; inset:0; z-index:1000; background:var(--bg); display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 12px) 20px calc(env(safe-area-inset-bottom) + 16px); transition:opacity .38s ease}
.lock.unlocked{opacity:0; pointer-events:none}
.lock-box{width:100%; max-width:300px; display:flex; flex-direction:column; align-items:center; text-align:center}
.lock-badge{width:58px; height:58px; border-radius:15px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg,#2a9bff,#0062ff); box-shadow:var(--shadow); margin-bottom:14px}
.lock-badge svg{width:30px; height:30px}
.lock-app{font-size:22px; font-weight:700; letter-spacing:-.01em}
.lock-sub{font-size:15px; color:var(--label3); margin-top:2px}
.dots{display:flex; gap:22px; margin:26px 0 4px}
.dots i{width:13px; height:13px; border-radius:50%; border:1.5px solid var(--label2); opacity:.5; transition:.15s}
.dots i.on{background:var(--label); border-color:var(--label); opacity:1}
.dots.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}
.lock-msg{height:20px; font-size:14px; color:var(--danger); margin-bottom:14px}
.keypad{display:grid; grid-template-columns:repeat(3,74px); gap:16px; justify-content:center}
.keypad button{width:74px; height:74px; border-radius:50%; background:rgba(120,120,128,.16); color:var(--label);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; transition:background .08s}
.keypad button:active{background:rgba(120,120,128,.4)}
.keypad .n{font-size:31px; font-weight:400}
.keypad .a{font-size:10px; font-weight:600; letter-spacing:.13em; color:var(--label2); margin-top:3px; height:11px}
.keypad button.del{background:none}
.keypad button.del:active{background:rgba(120,120,128,.16)}
.keypad button.del svg{width:30px; height:30px; color:var(--label)}
.keypad span{width:74px; height:74px}

/* Expenses */
.exp-del{color:var(--danger); background:none; padding:4px 0 4px 12px; display:flex; align-items:center}
.exp-del svg{width:19px; height:19px}