:root{color-scheme:dark;--bg:#0b111b;--card:#151e2c;--card2:#192433;--border:#293345;--text:#f4f7f9;--muted:#8d9bac;--subtle:#657488;--accent:#b4f4ba;--accent-dark:#153a2c;--violet:#c9bdfb;--radius:23px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent)}.shell{max-width:590px;margin:auto;padding:0 21px 125px}.header{display:flex;align-items:center;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top)) 1px 31px}.brand{display:flex;align-items:center;gap:12px}.brand-symbol{height:43px;width:43px;display:grid;place-items:center;background:var(--accent);border-radius:14px;color:#0a1e1b;font-size:27px;font-weight:800}.brand strong{display:block;font-size:21px;letter-spacing:-.9px;line-height:1.1}.brand strong .dot{color:var(--accent)}.brand span:not(.dot){display:block;color:var(--muted);font-size:11px;margin-top:3px}.icon-btn{background:var(--card);color:var(--muted);border:1px solid var(--border);border-radius:14px;display:grid;place-items:center;width:44px;height:44px}.icon-btn svg{height:21px;width:21px}.page{display:none;animation:appear .2s ease}.page.active{display:block}@keyframes appear{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.section-heading{margin-bottom:22px}.eyebrow{margin:0 0 10px;color:var(--accent);font-weight:700;letter-spacing:1.7px;font-size:10px}.section-heading h1{margin:0;font-size:clamp(34px,8.6vw,46px);line-height:1.11;letter-spacing:-1.8px;font-weight:780}.section-heading h1 span{color:var(--accent)}.balance-card{position:relative;overflow:hidden;border-radius:27px;background:linear-gradient(128deg,#c2f9bc 0%,#a8e6d2 56%,#b4c4f7 100%);padding:25px 25px 21px;color:#10232a;box-shadow:0 9px 55px #64cbab0d}.balance-card:after{content:"";position:absolute;width:200px;height:200px;border:1px solid #ffffff6a;border-radius:100%;top:-101px;right:-76px;box-shadow:0 0 0 30px #ffffff17,0 0 0 60px #ffffff17}.card-overline{font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.sparkle{font-size:21px}.balance-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:11px;position:relative;z-index:1;margin:18px 0 10px}.balance-line>span:first-child{font-size:clamp(41px,9vw,61px);letter-spacing:-2.2px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}.balance-line>span:last-child{font-size:18px;font-weight:700}.stat-change{font-size:13px;font-weight:650;position:relative;z-index:1}.tiny-caption{font-size:10px;margin-top:17px;opacity:.7;position:relative;z-index:1}.two-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:13px 0 18px}.small-stat{border:1px solid var(--border);border-radius:20px;background:#121b29;padding:18px 17px}.small-stat div{font-size:12px;color:var(--muted)}.small-stat strong{display:block;letter-spacing:-.5px;font-size:23px;margin:9px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.small-stat small{color:var(--subtle);font-size:11px}.panel{background:var(--card);border:1px solid #283448;border-radius:var(--radius);padding:22px 19px;margin:0 0 16px}.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:19px}.panel-top .eyebrow{margin-bottom:8px}.panel h2{font-size:19px;letter-spacing:-.5px;line-height:1.25;margin:0;font-weight:750}.bubble-icon{border-radius:13px;background:var(--accent-dark);color:var(--accent);font-size:27px;height:35px;width:35px;display:grid;place-items:center;line-height:1}.fields-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;margin-bottom:12px}.fields-row.secondary{grid-template-columns:1fr 1fr}.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field>span{font-size:11px;font-weight:620;color:#a6b2c2}.field input,.field select{height:49px;width:100%;background:#0f1723;border:1px solid #344055;color:var(--text);border-radius:13px;padding:0 12px;outline:0;min-width:0;-webkit-appearance:none;appearance:none;font-size:14px}.field input::placeholder{color:#637286}.field select{padding-right:21px;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23a9b6c3" stroke-width="2"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E');background-size:15px;background-position:right 8px center;background-repeat:no-repeat}.amount-field input{font-size:18px;font-weight:700}.primary-button{width:100%;height:51px;background:var(--accent);color:#102521;border:0;border-radius:13px;font-size:14px;font-weight:800;display:flex;justify-content:space-between;align-items:center;padding:0 17px;margin-top:8px}.primary-button span{font-size:21px;font-weight:500}.primary-button:active{transform:scale(.99)}.form-caption{font-size:11px;color:var(--muted);text-align:center;margin:13px 0 0;min-height:13px}.form-caption.error{color:#ffadac}.pill{padding:7px 11px;font-size:11px;font-weight:700;background:#243544;border:1px solid #344653;border-radius:30px;color:#b7d1da;white-space:nowrap}.week-chart{height:148px;display:flex;align-items:stretch;gap:10px;padding:7px 1px 0}.chart-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.bar-area{height:111px;width:100%;display:flex;align-items:flex-end;justify-content:center}.bar{width:min(100%,36px);background:#324454;min-height:4px;border-radius:8px 8px 4px 4px;position:relative;transition:height .2s}.bar.active{background:var(--accent)}.bar.has-value:not(.active){background:#789aa7}.chart-col span{font-size:11px;color:var(--muted)}.chart-col span.active{color:var(--accent);font-weight:800}.quiet{font-size:12px;line-height:1.55;color:var(--muted);margin:13px 0 0}.budget-text{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}.budget-text strong{font-size:23px;letter-spacing:-.6px}.budget-text span{font-size:11px;color:var(--muted)}.progress{height:9px;background:#2a3645;border-radius:20px;margin:17px 0;overflow:hidden}.progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--violet));border-radius:20px;transition:width .25s}.inline-link{background:transparent;color:var(--accent);border:0;padding:5px 0;font-size:12px;font-weight:750;text-align:left;white-space:nowrap}.entry-list{display:flex;flex-direction:column;gap:0}.entry-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #2b3747}.entry-coin{flex:0 0 39px;height:39px;border-radius:13px;background:#243647;display:grid;place-items:center;font-size:15px;color:var(--accent);font-weight:800}.entry-meta{min-width:0;flex:1}.entry-meta strong{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-meta span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.entry-value{text-align:right}.entry-value strong{display:block;font-size:14px;font-variant-numeric:tabular-nums}.entry-value small{font-size:10px;color:var(--muted);margin-top:5px;display:block}.trash-btn{background:transparent;border:0;color:#8190a0;font-size:22px;padding:5px}.empty-state{background:#111b29;border:1px dashed #2f4354;border-radius:15px;padding:25px 14px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;background:#101824ed;border-top:1px solid #293546;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:10px 0 calc(12px + env(safe-area-inset-bottom));z-index:10}.bottom-nav-inner{display:grid;grid-template-columns:repeat(3,1fr);max-width:590px;margin:auto;padding:0 19px}.nav-tab{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#8896a7;border:0;background:none;font-size:10px;font-weight:650;height:49px}.nav-tab svg{width:21px;height:21px}.nav-tab.active{color:var(--accent)}.history-summary{border-radius:22px;padding:24px;background:linear-gradient(130deg,#1b3040,#1c2536);border:1px solid #2b4652}.history-summary span,.history-summary small{display:block;color:var(--muted);font-size:12px}.history-summary strong{display:block;font-size:32px;letter-spacing:-1px;padding:10px 0 6px}.filter-row{margin:18px 0;display:flex;gap:11px;align-items:flex-end}.filter-row .field{flex:1}.secondary-button{border:1px solid #3b5160;background:#243545;color:#def3ee;border-radius:13px;padding:13px 16px;font-size:12px;font-weight:750;min-height:48px}.secondary-button.wide{width:100%;margin-top:8px}.full-list{margin-bottom:35px}.settings-panel{padding:22px 20px}.settings-panel h2{margin-bottom:17px}.settings-panel .panel-top h2{margin:0}.settings-field{margin:14px 0}.settings-field input,.settings-field select{background:#101925}.rates-table{margin-top:16px;padding:10px 12px;background:#101925;border-radius:13px;border:1px solid #27384b}.rate-row{display:flex;justify-content:space-between;padding:9px 4px;border-bottom:1px solid #243444;gap:10px;font-size:12px}.rate-row:last-child{border-bottom:none}.rate-row span{color:var(--muted)}.rate-row b{font-variant-numeric:tabular-nums}.setting-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.danger-link{background:transparent;border:0;color:#ffa8a1;font-size:12px;padding:9px 0}.reminder-box{display:flex;gap:14px;padding:15px 12px 26px}.reminder-icon{color:var(--violet);font-size:24px}.reminder-box b{font-size:13px}.reminder-box p{color:var(--muted);font-size:12px;line-height:1.5;margin:5px 0}.attribution{font-size:10px}.toast{position:fixed;bottom:calc(92px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);max-width:90vw;width:max-content;background:#c2f8cc;color:#10301e;padding:12px 19px;border-radius:14px;font-size:12px;font-weight:700;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 10px 30px #0005}.toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:750px){.shell{max-width:790px}.bottom-nav-inner{max-width:790px}.header{padding-top:35px}.section-heading h1{font-size:51px}.panel{padding:26px}.balance-card{padding:31px}.small-stat{padding:23px}.bottom-nav{padding-bottom:15px}}@media(max-width:360px){.shell{padding-left:14px;padding-right:14px}.panel{padding:18px 14px}.fields-row{gap:8px}.field input,.field select{padding-left:9px;font-size:12px}.balance-card{padding:22px 18px}.section-heading h1{font-size:32px}}
/* Version 2: monthly headline and quick currency switch. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.monthly-overline{display:flex;flex-direction:column;gap:5px}
.month-context{font-size:11px;font-weight:650;opacity:.72;text-transform:none}
.hero-currency-label{position:relative;z-index:2}
.hero-currency-label select{font:inherit;letter-spacing:.1px;font-weight:800;font-size:12px;min-width:79px;border-radius:24px;border:1px solid #29443b5a;background:#ffffffa3;color:#122d29;padding:10px 24px 10px 12px;appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23122d29" stroke-width="2.5"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E');background-repeat:no-repeat;background-position:right 8px center;background-size:13px}
.hero-currency-label select:focus-visible{outline:2px solid #143c32;outline-offset:2px}
.balance-line>span:first-child{overflow-wrap:anywhere;font-size:clamp(34px,9vw,61px)}

/* Backup, safety controls and mobile refinements */
.backup-steps{background:#101925;border:1px solid #29394c;border-radius:14px;padding:16px;margin:18px 0}
.backup-steps strong{font-size:13px}
.backup-steps p{font-size:12px;line-height:1.85;color:var(--muted);margin:9px 0 0}
.backup-steps b{color:var(--text)}
.danger-area{border-top:1px solid #344054;margin-top:18px;padding-top:17px}
.danger-link{border:1px solid #805054;background:#3b222a;padding:12px 15px;border-radius:12px;font-size:13px;font-weight:700;color:#ffbdb9}
.danger-area .quiet{margin-top:9px}
.month-context{text-transform:capitalize}
@media(max-width:380px){.setting-actions{grid-template-columns:1fr}}
.primary-button .button-label {font-size:14px;font-weight:800;letter-spacing:0}

/* Cashnote v3: stable full-height PWA layout. Only the main content scrolls,
   so the bottom nav does not jump when switching to or scrolling History. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.shell{height:100%;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.header{flex:0 0 auto;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:23px}
#app-main{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:12px}
#app-main::-webkit-scrollbar{display:none}
.bottom-nav{position:relative;inset:auto;flex:0 0 auto;width:calc(100% + 42px);margin:0 -21px;padding:10px 0 calc(12px + env(safe-area-inset-bottom));transform:none}
.bottom-nav-inner{max-width:590px;padding:0 19px}
.page{animation:none}
.brand-symbol{height:44px;width:48px;border-radius:13px}
.brand-symbol svg.logo-note{display:block;width:41px;height:33px;flex-shrink:0}
.brand strong{font-size:23px}
.week-chart{gap:6px;touch-action:manipulation}
button.chart-col{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:9px;padding:2px 3px 4px;color:var(--muted);font-weight:500;cursor:pointer;min-width:0;touch-action:manipulation}
.chart-col .bar-area{width:100%}
.chart-col .bar{transition:height .2s,background .18s,outline .15s}
.chart-col.selected .bar{background:var(--accent);outline:2px solid #c9f5e6;outline-offset:2px}
.chart-col.selected span{color:var(--accent);font-weight:800}
.chart-col:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chart-detail{margin:14px 0 4px;padding:13px 15px;background:#0e1b26;border:1px solid #304956;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px}
.chart-detail span{font-size:12px;color:#adbece}
.chart-detail strong{font-size:16px;letter-spacing:-.2px;font-variant-numeric:tabular-nums;white-space:nowrap}
#page-settings .settings-field{margin:16px 0}
@media(min-width:750px){.shell{max-width:790px}.bottom-nav-inner{max-width:790px}.header{padding-top:calc(25px + env(safe-area-inset-top))}}
@media(max-width:360px){.bottom-nav{width:calc(100% + 28px);margin:0 -14px}.chart-detail strong{font-size:14px}}

/* Cashnote v6: iOS standalone PWAs may report 100dvh shorter than the
   actual Home Screen canvas. The early script supplies the device-screen
   height ONLY when that mismatch is detected. Keep the navigation as the
   last, non-scrolling flex child so it is flush with the real screen edge. */
html, body {
  height: var(--cashnote-app-height, 100%);
  min-height: var(--cashnote-app-height, 100%);
  overflow: hidden;
}
body {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
}
.shell {
  height: var(--cashnote-app-height, 100dvh);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bottom-nav {
  position: relative;
  flex: 0 0 auto;
  top: auto; right: auto; bottom: auto; left: auto;
  width: calc(100% + 42px);
  margin: 0 -21px;
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  transform: none;
  z-index: 30;
}
@media (min-width: 750px) {
  .bottom-nav {padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));}
}
@media (max-width: 360px) {
  .bottom-nav {width: calc(100% + 28px); margin: 0 -14px;}
}

/* Cashnote v7: use the same modern note logo inside the app and on the Home Screen. */
.brand-symbol { width:44px; height:44px; padding:0; background:transparent; border-radius:13px; overflow:hidden; flex:0 0 44px; }
.brand-symbol .brand-app-icon { display:block; width:100%; height:100%; object-fit:cover; border-radius:13px; }