/* Ember Vault. Ember Theme (see "Ember Theme.md"), tuned for a finance app:
   pure white / true black, hairline outlines, sharp corners, Geist, one red gradient for the main action,
   and a muted gold for money that's kept (savings, net worth). Calm motion only: fades, a slight rise, numbers rolling. */
:root{
  --bg:#FFFFFF; --card:#FFFFFF; --card-line:#EBEBEE; --inset:#F4F4F6; --fg:#111113; --muted:#6B6B70; --line:#E7E7EA; --track:#ECECEF;
  --btn-line:#D9D9DE; --add-line:#E2E2E6; --grad:linear-gradient(135deg,#E2381A,#8E110B); --accent:#BE1C0D; --link:#C4260E;
  --good:#2E7D32; --bad:#C4260E; --warn:#9A5B00; --gold:#8F6512; --gold-bar:#D9A441; --scrim:rgba(0,0,0,.4); --shadow:0 10px 30px rgba(0,0,0,.12);
  --c1:#8E110B; --c2:#DC2F13; --c3:#EA580C; --c4:#F59E0B; --c5:#C2410C;
  --tile-glow:#9A1A22; --tile:#7E0E16;
  --font:'Geist',-apple-system,system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --top-clear:calc(env(safe-area-inset-top,0px) + 22px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#000000; --card:#1C1C1E; --card-line:#333338; --inset:#2A2A2D; --fg:#F2F2F3; --muted:#A1A1A8; --line:#3C3C42; --track:#36363B;
  --btn-line:#3C3C42; --add-line:#3C3C42; --grad:linear-gradient(135deg,#C22E17,#760D08); --accent:#E8452A; --link:#F05A3C;
  --good:#6FCF73; --bad:#F05A3C; --warn:#FFC97A; --gold:#E3B865; --gold-bar:#E3B865; --scrim:rgba(0,0,0,.6); --shadow:0 10px 30px rgba(0,0,0,.6);
  --c1:#C0302A; --c2:#E8452A; --c3:#F2763A; --c4:#F7B03A; --c5:#E0603A; --tile-glow:#2A1A14; --tile:#121111; color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#000000; --card:#1C1C1E; --card-line:#333338; --inset:#2A2A2D; --fg:#F2F2F3; --muted:#A1A1A8; --line:#3C3C42; --track:#36363B;
  --btn-line:#3C3C42; --add-line:#3C3C42; --grad:linear-gradient(135deg,#C22E17,#760D08); --accent:#E8452A; --link:#F05A3C;
  --good:#6FCF73; --bad:#F05A3C; --warn:#FFC97A; --gold:#E3B865; --gold-bar:#E3B865; --scrim:rgba(0,0,0,.6); --shadow:0 10px 30px rgba(0,0,0,.6);
  --c1:#C0302A; --c2:#E8452A; --c3:#F2763A; --c4:#F7B03A; --c5:#E0603A; --tile-glow:#2A1A14; --tile:#121111; color-scheme:dark; }
.lg-glow{stop-color:var(--tile-glow)} .lg-tile{stop-color:var(--tile)}

*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
html{touch-action:manipulation}
body{background:var(--bg); color:var(--fg); font:400 15px/1.4 var(--font); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%}
body::before{content:""; position:fixed; inset:0 0 auto; height:var(--top-clear); background:var(--bg); z-index:30}
button,input,select{font:inherit; color:inherit}
input,select{font-size:max(16px,1em)}
button{cursor:pointer}
button:disabled{cursor:default; opacity:.45}
a{color:inherit}
:focus-visible{outline:2px solid var(--link); outline-offset:2px}
.boot{padding:120px 16px; text-align:center; color:var(--muted)}
.num,.money,.amt,.big{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); letter-spacing:.02em}
h1,h2{margin:0}

/* ---------- Opening screen: logo bars rise once, then everything fades in ---------- */
#splash{position:fixed; inset:0; z-index:100; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity .45s ease, visibility .45s}
#splash .b{transform-box:fill-box; transform-origin:50% 100%; animation:barUp .7s cubic-bezier(.2,.7,.2,1) both}
#splash .b2{animation-delay:.06s} #splash .b3{animation-delay:.12s} #splash .b4{animation-delay:.18s} #splash .b5{animation-delay:.24s}
#splash .axis{stroke-dasharray:70; stroke-dashoffset:70; animation:draw .6s .05s ease-out forwards}
.sp-word{font-size:20px; font-weight:650; letter-spacing:-.01em; opacity:0; animation:fadeUp .6s .35s ease-out forwards}
.ready #splash{opacity:0; visibility:hidden}
@keyframes barUp{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}

/* Privacy cover: shown while the app is in the background (app switcher shows nothing) */
#cover{position:fixed; inset:0; z-index:200; background:var(--bg); display:none}
.covered #cover{display:block}

/* ---------- Gate screens (setup, lock) ---------- */
.gate{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:calc(var(--top-clear) + 12px) 20px calc(24px + env(safe-area-inset-bottom,0px)); animation:fade .25s ease-out}
.gate-in{width:100%; max-width:400px; display:flex; flex-direction:column; gap:16px}
.brand{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:8px}
.brand h1{font-size:22px; font-weight:700; letter-spacing:-.02em}
.brand .sub{max-width:300px}
.gate-title{font-size:22px; font-weight:700; letter-spacing:-.02em}
.sub{font-size:13px; color:var(--muted); margin:0}
.sub.small,.small{font-size:12px}
.eg{color:var(--fg); font-weight:600}
.stack{display:flex; flex-direction:column; gap:12px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.row-in{display:flex; gap:8px; align-items:flex-end}
.grow{flex:1; min-width:0}
.center{text-align:center}
.links{display:flex; justify-content:center; gap:18px}
.field-l{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600}
.input{width:100%; height:44px; border:0; border-radius:8px; background:var(--card); box-shadow:inset 0 0 0 1px var(--btn-line); padding:0 12px; font-weight:400; outline:none}
.input:focus{box-shadow:inset 0 0 0 1.5px var(--link)}
.input.mono{font-family:var(--mono)}
select.input{appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 16px) 19px,calc(100% - 11px) 19px; background-size:5px 5px; background-repeat:no-repeat; padding-right:30px}
.sm-sel{width:auto; height:34px; font-size:14px !important}
.big-in{height:56px; font-size:24px !important; font-weight:650}
.amt-in{width:120px; height:36px; text-align:right}
.meter{height:4px; border-radius:2px; background:var(--track); overflow:hidden; margin-top:-4px}
.meter i{display:block; height:100%; transition:width .25s ease, background .25s}
.meter .s0{background:var(--bad)} .meter .s1{background:var(--c3)} .meter .s2,.meter .s3{background:var(--good)}
.hint{font-size:12px; color:var(--muted); margin:-6px 0 0}
.err{color:var(--bad); font-size:13px; margin:0}
.warn-line{color:var(--warn); font-size:12px; margin:6px 0 0}
.note{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); margin:0}
.note svg{flex:none; margin-top:1px}
.code-box{font-size:19px; font-weight:600; text-align:center; padding:18px 12px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--card-line); background:var(--inset); word-spacing:4px; user-select:all; -webkit-user-select:all}
.check-row{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500}
.check-row input{width:20px; height:20px; accent-color:var(--accent); margin:0}
.check-row .sub{margin-left:4px}

/* ---------- Buttons & controls ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 16px; border:0; border-radius:8px; background:var(--card); box-shadow:inset 0 0 0 1px var(--btn-line); font-size:15px; font-weight:650; text-decoration:none; transition:transform .12s ease, opacity .12s ease}
.btn:active:not(:disabled){transform:scale(.985); opacity:.88}
.btn.main{background:var(--grad); color:#fff; box-shadow:none; font-weight:600}
.btn.sm{min-height:34px; padding:0 12px; font-size:14px}
.btn.ghost{box-shadow:none; background:transparent; justify-content:flex-start}
.btn.danger{color:var(--bad)}
.btn.bio{min-height:52px}
.link{background:none; border:0; padding:4px 0; color:var(--link); font-weight:650; font-size:14px}
.link.sm{font-size:13px}
.link.back{display:inline-flex; align-items:center; gap:2px; align-self:flex-start; margin-bottom:-4px}
.icon-btn{width:36px; height:36px; border:0; border-radius:8px; background:var(--inset); display:flex; align-items:center; justify-content:center}
.toggle{width:46px; height:28px; border-radius:14px; border:0; background:var(--track); position:relative; flex:none; transition:background .2s ease}
.toggle::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s ease}
.toggle.on{background:var(--accent)} .toggle.on::after{left:21px}
.seg{display:flex; gap:2px; padding:3px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--btn-line)}
.seg button{flex:1; border:0; background:none; border-radius:6px; padding:7px 10px; font-size:13px; font-weight:500; white-space:nowrap}
.seg button.on{background:var(--grad); color:#fff; font-weight:650}
.seg.sm button{padding:5px 9px; font-size:12px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:0; border-radius:5px; padding:6px 10px; font-size:13px; font-weight:600; background:var(--card); box-shadow:inset 0 0 0 1px var(--btn-line)}
.chip.on{box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent)}
.badge{font-size:11px; font-weight:650; padding:2px 7px; border-radius:5px; box-shadow:inset 0 0 0 1px var(--btn-line); color:var(--muted)}
.add{display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; margin-top:8px; border:0; border-radius:8px; background:var(--card); box-shadow:inset 0 0 0 1px var(--add-line); color:var(--link); font-size:15px; font-weight:600}
.plain{border:0; background:none; padding:0; text-align:left}

/* ---------- PIN pad ---------- */
.pinpad{display:flex; flex-direction:column; align-items:center; gap:14px; padding:6px 0}
.pin-title{margin:0; font-size:14px; font-weight:600}
.dots{display:flex; gap:12px}
.dots i{width:12px; height:12px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--btn-line); transition:background .12s}
.dots i.on{background:var(--fg); box-shadow:none}
.keys{display:grid; grid-template-columns:repeat(3,72px); gap:10px}
.key{height:56px; border:0; border-radius:10px; background:var(--card); box-shadow:inset 0 0 0 1px var(--card-line); font-size:22px; font-weight:500}
.key:active:not(:disabled){background:var(--inset)}

/* ---------- Frame: phone = page + bottom tabs; Mac (900px+) = sidebar + page ---------- */
.frame{min-height:100dvh}
.rail{display:none}
.page{max-width:560px; margin:0 auto; padding:calc(var(--top-clear) + 14px) 16px calc(96px + env(safe-area-inset-bottom,0px)); animation:fade .18s ease-out}
.head{text-align:center; margin-bottom:10px}
.head h1{font-size:17px; font-weight:650; letter-spacing:-.01em; line-height:22px}
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); background:var(--bg); border-top:1px solid var(--line); padding:7px max(4px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))}
.tab{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:500; color:var(--muted); text-decoration:none; padding:2px 0}
.tab.on{color:var(--accent); font-weight:650}
.rise > *{animation:fadeUp .32s cubic-bezier(.2,.7,.2,1) both}
.rise > *:nth-child(2){animation-delay:.04s} .rise > *:nth-child(3){animation-delay:.08s} .rise > *:nth-child(4){animation-delay:.12s} .rise > *:nth-child(5){animation-delay:.16s}
@media (min-width:900px){
  .frame{display:flex}
  .rail{display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100dvh; width:232px; flex:none; padding:44px 12px 18px; border-right:1px solid var(--line); background:var(--bg)}
  .rail-brand{display:flex; align-items:center; gap:10px; padding:0 8px 18px; font-size:16px; font-weight:650; letter-spacing:-.01em}
  .rail-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; text-decoration:none; font-size:14px; font-weight:500}
  .rail-item:hover{background:var(--inset)}
  .rail-item.on{background:var(--inset); color:var(--accent); font-weight:650}
  .rail-item kbd,.rail-foot kbd{margin-left:auto; font:inherit; font-size:11px; color:var(--muted)}
  .rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px; padding:0 4px}
  .rail-foot .btn{width:100%}
  .page{flex:1; max-width:none; padding:28px 32px 40px}
  .page > .stackp,.page > .head{max-width:640px; margin-left:auto; margin-right:auto}
  .tabbar{display:none}
  .home-cards{max-width:980px; margin:0 auto; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); height:auto !important}
  .home-cards .hc{min-height:220px}
}
html.macapp .rail{padding-top:52px}
html.macapp .page{padding-top:40px}
html.macapp body::before{display:none}

/* ---------- Cards & lists ---------- */
.stackp{display:flex; flex-direction:column; gap:14px}
.card{background:var(--card); border-radius:10px; box-shadow:inset 0 0 0 1px var(--card-line); padding:14px}
.card.list{padding:4px 14px 6px}
.card.list .ch{padding-top:10px}
.cap{font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0}
.group-cap{padding:0 2px 6px}
.settings section{display:flex; flex-direction:column}
.ch{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px}
.li{display:flex; align-items:center; gap:12px; padding:10px 0; min-height:52px; width:100%; text-align:left; border:0; background:none; color:inherit; text-decoration:none}
.li + .li,.li + .add{border-top:1px solid var(--line)}
.li + .add{border-top:0}
.li.tight{min-height:44px; padding:6px 0}
.li.press:active{opacity:.7}
.list > .li:first-child{border-top:0}
.tile{width:36px; height:36px; border-radius:8px; background:var(--inset); display:flex; align-items:center; justify-content:center; flex:none; color:var(--fg)}
.tile.big{width:52px; height:52px; border-radius:10px}
.tile.gold{color:var(--gold)}
.tile.danger{color:var(--bad)}
.nm{font-size:15px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.danger-t{color:var(--bad)}
.val{font-size:14px; color:var(--muted); white-space:nowrap; max-width:46%; overflow:hidden; text-overflow:ellipsis}
.chev{display:flex; color:var(--muted); flex:none}
.amt{margin-left:auto; font-size:15px; font-weight:600; white-space:nowrap}
.amt.pos{color:var(--good)}
.okmark{width:26px; height:26px; border-radius:50%; background:var(--good); color:#fff; display:flex; align-items:center; justify-content:center; flex:none}
.empty{color:var(--muted); text-align:center; padding:28px 12px; font-size:14px}
.pad{padding:6px 0 4px}
.kv{display:flex; justify-content:space-between; font-size:13px; margin-top:6px}
.kv span:first-child{color:var(--muted)}
.big{font-size:26px; font-weight:720; letter-spacing:-.02em; line-height:30px}
.day .dh{padding-bottom:2px}
.steps{margin:0; padding-left:20px; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:6px}
.steps b{color:var(--fg)}
.sync-line{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.sync-line .dot{width:7px; height:7px; border-radius:50%; background:var(--muted)}
.sync-line.idle .dot{background:var(--good)} .sync-line.syncing .dot{background:var(--c4)} .sync-line.error .dot{background:var(--bad)}

/* Home: three cards that fill the screen between title and tab bar */
.home-cards{display:flex; flex-direction:column; gap:14px; height:calc(100dvh - var(--top-clear) - 14px - 32px - 96px - env(safe-area-inset-bottom,0px))}
.hc{display:flex; flex-direction:column; gap:12px; flex:1 1 0; min-height:150px; text-decoration:none}
.hh{display:flex; align-items:center; gap:8px}
.hh .note{margin-left:auto; font-size:13px; color:var(--muted)}
.hb{display:flex; align-items:center; gap:16px; flex:1}
.ring-wrap{position:relative; width:92px; height:92px; flex:none}
.ring-wrap svg{position:absolute; inset:0}
.ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring-c b{font-size:19px; font-weight:720; letter-spacing:-.02em}
.ring-c span{font-size:11px; color:var(--muted)}
.ring-v{animation:ringIn .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes ringIn{from{stroke-dasharray:0 252}}
.soon .soon-t{font-size:15px; font-weight:650; margin-bottom:4px}
.soon-card{display:flex; gap:12px; align-items:flex-start; color:var(--muted)}
.soon-card svg{flex:none; margin-top:2px}
.soon-card .nm{color:var(--fg)}
.soon-big{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:28px 20px}
.soon-big h2{font-size:18px; font-weight:700; letter-spacing:-.01em}
.soon-big .tile{color:var(--accent)}

/* ---------- Sheets ---------- */
.scrim{position:fixed; inset:0; z-index:50; background:var(--scrim); display:flex; align-items:flex-end; justify-content:center; padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px)); animation:fade .18s ease-out}
.sheet{width:100%; max-width:480px; max-height:calc(100dvh - var(--top-clear) - 24px); overflow:auto; background:var(--card); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow); animation:fadeUp .22s cubic-bezier(.2,.7,.2,1)}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sheet-head h2{font-size:17px; font-weight:700; letter-spacing:-.01em}
@media (min-width:700px){ .scrim{align-items:center} }
.overlay{position:fixed; inset:0; z-index:60; background:var(--bg); overflow:auto}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:70; background:var(--fg); color:var(--bg); border-radius:8px; padding:12px 16px; font-size:14px; font-weight:600; box-shadow:var(--shadow); animation:fadeUp .2s ease-out; max-width:calc(100% - 32px)}
@media (min-width:900px){ .toast{bottom:28px} }

/* Streamer mode: money and names are blurred, layout stays */
.streamer .money,.streamer .amt,.streamer .big,.streamer .nm{filter:blur(7px)}
.streamer .settings .nm,.streamer .tab,.streamer .rail .nm{filter:none}

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }