/* «Живі гроші» — design system v2
   Idea: money is a river («гроші люблять рух»). The brand wave is the force line of every screen.
   Rules (7): 1 deep-green field · 2 banknote engraving as the only texture · 3 Cormorant for numbers & titles, Manrope for UI ·
   4 gold only for what is kept (savings, capital, CTA) · 5 hairlines, not boxes · 6 show-strips & yellow chip for «перебивки» ·
   7 one flowing line per screen. */
@font-face{font-family:Cormorant;src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url(fonts/manrope.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:Montserrat;src:url(fonts/montserrat.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:Oswald;src:url(fonts/oswald.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root,[data-theme="dark"]{
  --bg:#0f251c; --bg-rgb:15,37,28; --deep:#0a1b14;
  --cream:#F2DFB6; --hi:#FBF3E2; --gold:#E2B861; --gold2:#F3D392; --gold-rgb:226,184,97; --yellow:#E1AF4C;
  --paper:#F4EFE4; --paper-dim:rgba(244,239,228,.42); --ink:#141611;
  --muted:rgba(242,223,182,.58); --faint:rgba(242,223,182,.32); --body:rgba(242,223,182,.86);
  --line:rgba(242,223,182,.12); --line2:rgba(242,223,182,.22); --line3:rgba(242,223,182,.42);
  --fill:rgba(242,223,182,.05); --fill2:rgba(242,223,182,.09);
  --sheet:#132f23; --tick:#08170f; --neg:#E58A68; --scheme:dark;
  --engrave:rgba(242,223,182,.075); --img-o:.9; --img-f:saturate(.9) brightness(.62); --tint:#0c3a27; --tint-o:.55;
  --dot:255,232,178; --dot2:236,196,118; --dot-k:1;
}
[data-theme="light"]{
  --bg:#F3EDE1; --bg-rgb:243,237,225; --deep:#E9E0CE;
  --cream:#1D3D30; --hi:#10261c; --gold:#A47318; --gold2:#C08A2A; --gold-rgb:164,115,24; --yellow:#E1AF4C;
  --paper:#1D3D30; --paper-dim:rgba(29,61,48,.5); --ink:#F7F1E5;
  --muted:rgba(29,61,48,.62); --faint:rgba(29,61,48,.38); --body:rgba(29,61,48,.86);
  --line:rgba(29,61,48,.13); --line2:rgba(29,61,48,.22); --line3:rgba(29,61,48,.4);
  --fill:rgba(29,61,48,.045); --fill2:rgba(29,61,48,.08);
  --sheet:#FBF7EE; --tick:#1D3D30; --neg:#B4502F; --scheme:light;
  --engrave:rgba(29,61,48,.07); --img-o:.16; --img-f:sepia(.5) saturate(.6) brightness(1.4); --tint:#F3EDE1; --tint-o:0;
  --dot:200,146,52; --dot2:190,136,44; --dot-k:.45;
}
:root{--pad:20px;--serif:Cormorant,"Cormorant Garamond",Georgia,serif;--sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:Oswald,Impact,sans-serif;--ease:cubic-bezier(.22,1,.36,1);--expo:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --safe-b:env(safe-area-inset-bottom,0px)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;transition:background-color .5s var(--ease)}
body{min-height:100vh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;text-align:inherit}
[hidden]{display:none!important}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.money{font-family:var(--serif);font-weight:500;font-feature-settings:"lnum" 1,"tnum" 1;letter-spacing:-.01em;white-space:nowrap}
.money .c,.big .c,.pair .v .c,.row .a .c{font-family:var(--sans);font-weight:500}
.money .c{opacity:.55;margin-left:.16em;font-size:.6em}
.neg{color:var(--neg)!important}.goldt{color:var(--gold)}

/* ── field: the intro frame only at the top, fading into the green ── */
.bgx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgx-img{position:absolute;left:-10%;right:-10%;top:-8%;height:62vh;background:url(img/intro-bg-tall.webp) center 30%/cover;
  filter:var(--img-f);opacity:var(--img-o);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);mask-image:linear-gradient(180deg,#000 10%,transparent 92%);
  animation:kb 40s ease-in-out infinite alternate;transition:opacity .6s}
.bgx-tint{position:absolute;left:0;right:0;top:0;height:62vh;background:var(--tint);mix-blend-mode:color;opacity:var(--tint-o);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);mask-image:linear-gradient(180deg,#000 10%,transparent 92%)}
.bgx-beam{position:absolute;left:-40%;top:-30%;width:130%;height:70vh;background:linear-gradient(118deg,transparent 32%,rgba(255,236,190,.12) 47%,transparent 62%);
  filter:blur(22px);mix-blend-mode:screen;animation:beam 10s ease-in-out infinite}
[data-theme="light"] .bgx-beam{display:none}
.bgx-shade{display:none}
.bgx canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-2%,1%,0)}}
@keyframes beam{0%,100%{opacity:.5}50%{opacity:1}}

.app{position:relative;z-index:1;min-height:100vh;padding-bottom:calc(150px + var(--safe-b))}
.page{padding:0 var(--pad) 10px;max-width:620px;margin:0 auto}
.rise>*{animation:rise .7s var(--expo) 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}.rise>*:nth-child(6){animation-delay:.2s}.rise>*:nth-child(n+7){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes viewin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── brand mark ── */
.mark{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.mark svg{display:block;overflow:visible}
.mark .w1{font-family:Montserrat,var(--sans);font-weight:500;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap}
.mark .w2{font-family:Montserrat,var(--sans);font-weight:400;letter-spacing:.62em;margin-right:-.62em;white-space:nowrap;opacity:.85}
.wave-path{fill:none;stroke:var(--cream);stroke-linecap:round;stroke-linejoin:round}

/* ── splash (stays the dark-green show intro in both themes) ── */
.splash{--bg:#0f251c;--cream:#F2DFB6;--muted:rgba(242,223,182,.6);--img-o:1;--img-f:saturate(.95) brightness(.85);--tint:#0c3a27;--tint-o:.5;
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--bg);color:var(--cream);transition:opacity .7s var(--ease)}
.splash .bgx{position:absolute}
.splash .bgx-img,.splash .bgx-tint{height:auto;bottom:-8%;-webkit-mask-image:none;mask-image:none}
.splash .bgx-beam{display:block}
.splash-in{position:relative;text-align:center;padding:0 24px}
.splash .mark svg{width:min(78vw,380px)}
.splash .w1{font-size:clamp(34px,10.5vw,52px);margin-top:10px}
.splash .w2{font-size:clamp(13px,3.6vw,17px);margin-top:12px}
.splash .wave-path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.25s .15s var(--ease) forwards;filter:drop-shadow(0 0 10px rgba(255,226,170,.35))}
.splash .w1 span{display:inline-block;opacity:0;transform:translateY(.45em);animation:up .7s var(--ease) forwards}
.splash .w2{opacity:0;letter-spacing:.2em;animation:track 1.4s .95s var(--ease) forwards}
.splash-by{margin-top:34px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);opacity:0;animation:fade .8s 1.5s forwards}
.splash.out{opacity:0;pointer-events:none}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes up{to{opacity:1;transform:none}}
@keyframes track{to{opacity:.85;letter-spacing:.62em}}
@keyframes fade{to{opacity:1}}
.kinetic{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none}
.kinetic b{font-family:var(--cond);font-weight:700;color:var(--hi);line-height:.9;display:flex;text-shadow:0 10px 40px rgba(0,0,0,.3)}
.kinetic b i{font-style:normal;display:inline-block;opacity:0;transform:translateY(40%) scale(1.25);animation:slam .55s var(--spring) forwards}
.kinetic.out b{transition:opacity .35s,transform .45s var(--ease);opacity:0;transform:scale(.92)}
@keyframes slam{to{opacity:1;transform:none}}

/* ── show labels ── */
.chip-y{display:inline-block;background:var(--yellow);color:#141611;font-family:var(--sans);font-weight:800;font-size:11.5px;letter-spacing:.02em;padding:4px 8px 3px;line-height:1.2}
.strip{display:inline;background:var(--paper);color:var(--ink);font-weight:700;line-height:1.75;padding:.18em .42em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.strips{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.strips .strip{display:inline-block;line-height:1.3;padding:6px 9px}
.strips .strip.dim{background:var(--paper-dim)}

/* ── top bar ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px var(--pad) 12px;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.94),rgba(var(--bg-rgb),.75) 65%,rgba(var(--bg-rgb),0));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .mark,.onb-top .mark{align-items:flex-start;width:104px}
.top .mark svg,.onb-top .mark svg{width:100%;height:auto}
.top .w1,.onb-top .w1{font-size:13.5px;margin-top:5px}
.top .w2,.onb-top .w2{font-size:6.2px;margin-top:4px;letter-spacing:.66em}
.top-r{display:flex;align-items:center;gap:8px}
.icbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--cream);transition:transform .25s var(--spring)}
.icbtn:active{transform:scale(.92)}
.icbtn .i{width:18px;height:18px}
.ava{width:38px;height:38px;border-radius:50%;background:url(img/avatar.webp) center 20%/cover;box-shadow:0 0 0 1px var(--line3),0 0 0 4px var(--fill)}

/* ── editorial building blocks ── */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.title{font-family:var(--serif);font-weight:500;font-size:46px;line-height:.95;letter-spacing:-.015em;color:var(--hi);margin:8px 0 0}
.title em{font-style:italic;font-weight:400;color:var(--gold)}
.lead{font-size:15px;color:var(--body);margin:12px 0 0;max-width:34ch}
.sec{margin-top:46px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sec-h h2{margin:0;font-family:var(--serif);font-weight:500;font-size:27px;line-height:1;color:var(--hi);letter-spacing:-.01em}
.sec-h h2 em{font-style:italic;font-weight:400}
.sec-h .eyebrow{white-space:nowrap}
.lnk{font-size:13px;font-weight:700;color:var(--gold);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lnk .i{width:14px;height:14px}
.sub{color:var(--muted);font-size:13.5px}

/* hero numbers */
.hero{padding:8px 0 4px;position:relative}
.rosette{position:absolute;right:-90px;top:-30px;width:300px;height:300px;pointer-events:none;color:var(--engrave);z-index:-1}
.big{font-family:var(--serif);font-weight:500;font-size:70px;line-height:.9;letter-spacing:-.025em;color:var(--hi);font-feature-settings:"lnum" 1,"tnum" 1;white-space:nowrap;margin-top:12px}
.big .c{font-size:.36em;opacity:.6;margin-left:.16em;letter-spacing:0;vertical-align:.12em}
.big.gold{color:var(--gold)}
.pair{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;border-top:1px solid var(--line)}
.pair>div{padding:14px 0 0}
.pair>div+div{padding-left:18px;border-left:1px solid var(--line)}
.pair .k{font-size:12px;color:var(--muted)}
.pair .v{font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.1;color:var(--hi);font-feature-settings:"lnum" 1,"tnum" 1;white-space:nowrap;margin-top:2px}
.pair .v .c{font-size:.6em;opacity:.55;margin-left:.1em}

/* savings-rate scale (Dmytro's norms: 10 / 20 / 30%) */
.scale{margin-top:24px}
.scale-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;color:var(--body)}
.scale-t b{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--gold);font-feature-settings:"lnum" 1;white-space:nowrap}
.scale-bar{position:relative;height:30px;margin-top:4px}
.scale-bar .tr{position:absolute;left:0;right:0;top:13px;height:2px;background:var(--line2);border-radius:2px}
.scale-bar .fl{position:absolute;left:0;top:13px;height:2px;background:linear-gradient(90deg,rgba(var(--gold-rgb),.35),var(--gold));border-radius:2px;transform-origin:left;animation:grow 1.1s var(--expo) both}
.scale-bar .mk{position:absolute;top:6px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(var(--gold-rgb),.18),0 0 18px rgba(var(--gold-rgb),.5);animation:pop .7s .5s var(--spring) both}
.scale-bar .tk{position:absolute;top:8px;width:1px;height:12px;background:var(--line3)}
.scale-l{position:relative;height:16px;font-size:10.5px;color:var(--faint);letter-spacing:.04em}
.scale-l span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.scale-l span:first-child{transform:none}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes pop{from{transform:scale(0)}}

/* the river */
.river{margin:28px calc(-1*var(--pad)) 0;position:relative}
.river svg{display:block;width:100%;height:auto;overflow:visible}
.river .flow{fill:none;stroke-linecap:round}
.river .lab{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--muted)}
.river .labv{font-family:var(--serif);font-size:16px;font-weight:600;fill:var(--hi);font-feature-settings:"lnum" 1}
.river .labg{font-family:var(--serif);font-size:20px;font-weight:600;fill:var(--gold);font-feature-settings:"lnum" 1}
.river .draw{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:drawl 1.6s var(--expo) forwards}
.river .fade{opacity:0;animation:fade .6s forwards}
@keyframes drawl{to{stroke-dashoffset:0}}

/* rows */
.row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);width:100%;text-align:left;transition:background .2s}
.row:active{background:var(--fill)}
.row .n{font-family:var(--serif);font-size:16px;color:var(--gold);width:24px;font-feature-settings:"lnum" 1;font-weight:600}
.row .em{width:22px;height:22px;color:var(--gold);flex:none}
.row .m{flex:1;min-width:0}
.row .m b{display:block;font-weight:700;font-size:15px;color:var(--hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .m small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .a{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--hi);white-space:nowrap;font-feature-settings:"lnum" 1,"tnum" 1}
.row .a .c{font-size:.7em;opacity:.55;margin-left:.08em}
.row .a.in{color:var(--gold)}
.row .go{color:var(--faint);display:flex}
.row .go .i{width:16px;height:16px}
.cat{padding:13px 0;border-bottom:1px solid var(--line)}
.cat .l{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cat .l span{font-size:14.5px;color:var(--hi);font-weight:700}
.cat .l .money{font-size:19px;color:var(--hi)}
.cat .l small{font-size:12px;color:var(--muted);margin-left:8px;font-family:var(--sans);font-weight:700}
.cat .t{height:2px;margin-top:9px;background:var(--line);border-radius:2px;overflow:hidden}
.cat .t i{display:block;height:100%;background:var(--gold);transform-origin:left;animation:grow 1.1s var(--expo) both}
.day{margin:24px 0 0;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* month strip */
.months{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--pad)) 6px;padding:2px var(--pad) 6px}
.months::-webkit-scrollbar{display:none}
.months button{flex:none;padding:7px 12px 8px;border-radius:99px;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:5px;min-width:58px;transition:all .3s var(--ease)}
.months button i{display:block;width:20px;height:2px;border-radius:2px;background:var(--line2)}
.months button i.g{background:var(--gold)}
.months button.on{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.months button.on i{background:var(--bg);opacity:.5}

.chart{width:100%;height:auto;display:block;overflow:visible;margin-top:14px}
.chart text{fill:var(--faint);font-size:10px;font-family:var(--sans);font-weight:700}

/* ticker (black strip with yellow caps from the show) */
.ticker{margin:16px calc(-1*var(--pad)) 0;background:var(--tick);overflow:hidden;white-space:nowrap;height:32px;display:flex;align-items:center}
.ticker-in{display:inline-flex;animation:tick 40s linear infinite;padding-left:100%}
.ticker span{font-family:var(--cond);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#f5d27e;padding:0 14px}
.ticker span b{color:#fff;font-weight:500;margin-left:6px}
.ticker span i{font-style:normal;margin-left:6px;font-size:11px;color:rgba(245,210,126,.7)}
.ticker .dot{color:rgba(245,210,126,.45);padding:0}
@keyframes tick{to{transform:translateX(-100%)}}

/* money ribbon on home (the compact river) */
.ribbon{display:flex;height:8px;border-radius:8px;overflow:hidden;margin-top:20px;gap:2px}
.ribbon i{display:block;height:100%;background:var(--line2);transform-origin:left;animation:grow 1s var(--expo) both}
.ribbon i.k{background:var(--gold)}
.ribbon-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:8px}
.ribbon-l b{color:var(--gold)}

/* lifehack — an editorial quote */
.quote{position:relative;padding:20px 0 0}
.quote .q{position:absolute;right:-4px;top:-26px;font-family:var(--serif);font-size:160px;line-height:1;color:var(--engrave);font-style:italic;pointer-events:none}
.quote h3{font-family:var(--serif);font-weight:500;font-size:31px;line-height:1.02;color:var(--hi);margin:14px 0 0;letter-spacing:-.01em;max-width:16ch}
.quote p{font-size:15px;color:var(--body);margin:12px 0 0}
.quote .meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.quote .meta span{font-size:11px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase;font-weight:700}

/* myths */
.myth{display:block;width:100%;text-align:left;padding:13px 0;border-bottom:1px solid var(--line)}
.myth .strip{font-size:14px}
.myth .truth{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--expo)}
.myth .truth>div{overflow:hidden;color:var(--body);font-size:14px}
.myth.open .truth{grid-template-rows:1fr}
.myth.open .truth>div{padding-top:10px}
.myth.open .strip{background:var(--yellow);color:#141611}
.myth .x{font-style:normal;margin-left:6px;opacity:.6}

/* studio */
.studio{position:relative;margin:0 calc(-1*var(--pad));min-height:420px;display:flex;align-items:flex-end;background:#13261d url(img/studio.webp) center 22%/cover;overflow:hidden}
.studio::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,20,0) 38%,rgba(10,27,20,.95))}
.studio-in{position:relative;z-index:1;padding:20px var(--pad) 24px;width:100%}
.lower{display:inline-flex;flex-direction:column;gap:4px}
.lower b{font-family:var(--serif);font-size:30px;font-weight:600;color:#fff;line-height:1}
.lower span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#E8CF9C;font-weight:700}
.studio .bio{color:rgba(242,223,182,.86);font-size:13.5px;margin:10px 0 0;max-width:36ch}
.row-btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:99px;font-weight:800;font-size:14.5px;
  background:var(--cream);color:var(--bg);transition:transform .25s var(--spring),opacity .2s}
.btn:active{transform:scale(.97)}
.btn.gold{background:linear-gradient(180deg,#F3D392,#D9A54A);color:#1b1608;box-shadow:0 10px 28px -12px rgba(226,184,97,.8)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line2)}
.btn.photo{background:rgba(255,248,232,.12);color:#F2DFB6;border:1px solid rgba(242,223,182,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn.sm{height:38px;padding:0 15px;font-size:13px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.danger{background:transparent;color:var(--neg);border:1px solid rgba(229,138,104,.4)}

/* record pill (instead of a FAB) */
.rec{position:fixed;left:50%;bottom:calc(80px + var(--safe-b));transform:translateX(-50%);z-index:25;height:52px;padding:0 26px 0 20px;border-radius:99px;
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;color:#1b1608;background:linear-gradient(180deg,#F5D99A,#D9A54A);
  box-shadow:0 16px 34px -14px rgba(226,184,97,.9),0 0 0 6px rgba(var(--bg-rgb),.55);animation:recin .6s .25s var(--spring) both;white-space:nowrap}
.rec .i{width:20px;height:20px;stroke-width:2.4}
@keyframes recin{from{opacity:0;transform:translate(-50%,24px)}}

/* bottom nav: a quiet band */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;padding:9px 6px calc(8px + var(--safe-b));
  background:rgba(var(--bg-rgb),.92);border-top:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.nav button{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0 2px;color:var(--faint);font-size:10.5px;font-weight:800;letter-spacing:.02em;
  position:relative;transition:color .3s}
.nav .i{width:22px;height:22px;stroke-width:1.5}
.nav button.on{color:var(--cream)}
.nav button.on::after{content:"";position:absolute;top:-10px;width:22px;height:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 12px var(--gold)}

/* capital */
.ins{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border-top:1px solid var(--line)}
.ins>div{padding:14px 10px 0 0}
.ins>div+div{padding-left:12px;border-left:1px solid var(--line)}
.ins .k{font-size:11px;color:var(--muted);line-height:1.3;min-height:28px;font-weight:600}
.ins .v{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;color:var(--hi);margin-top:6px;font-feature-settings:"lnum" 1;white-space:nowrap}
.ins .v small{font-size:.5em;color:var(--muted);font-weight:400}
.ins .h{font-size:11px;color:var(--faint);margin-top:5px;line-height:1.3}
.stack{display:flex;height:8px;border-radius:8px;overflow:hidden;gap:2px;margin:18px 0 12px}
.stack i{display:block;height:100%;transform-origin:left;animation:grow 1s var(--expo) both}
.keys{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.keys span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--c)}
.delta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;margin-top:12px;color:var(--gold)}

/* rates */
.conv{margin-top:20px}
.cline{display:flex;align-items:flex-end;gap:12px;padding:10px 0 12px;border-bottom:1px solid var(--line2)}
.cline input,.cline .res{flex:1;min-width:0;background:none;border:0;outline:0;font-family:var(--serif);font-weight:500;font-size:48px;line-height:1;color:var(--hi);
  padding:0;font-feature-settings:"lnum" 1,"tnum" 1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cline .res{color:var(--gold)}
.cursel{height:38px;border-radius:99px;padding:0 14px;background:transparent;border:1px solid var(--line2);font-weight:800;font-size:13.5px;color:var(--cream);
  appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center;min-width:76px;flex:none;margin-bottom:4px}
.cursel option{background:var(--sheet);color:var(--hi)}
.swaprow{display:flex;align-items:center;gap:12px;margin:12px 0 2px;color:var(--muted);font-size:12.5px;font-weight:700}
.swaprow button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--gold);transition:transform .5s var(--spring)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.quick button,.pill{height:32px;padding:0 13px;border-radius:99px;font-size:12.5px;font-weight:700;border:1px solid var(--line);color:var(--body);display:inline-flex;align-items:center;gap:6px}
.pill .i{width:15px;height:15px}
.rrow{display:grid;grid-template-columns:44px 1fr 70px 84px;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.rrow .cc{font-weight:800;font-size:12.5px;letter-spacing:.06em;color:var(--hi)}
.rrow .nm{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow svg{width:70px;height:24px;overflow:visible}
.rrow .rv{text-align:right}
.rrow .rv b{display:block;font-family:var(--serif);font-weight:600;font-size:19px;color:var(--hi);font-feature-settings:"lnum" 1,"tnum" 1;line-height:1.1}
.rrow .rv small{font-size:11px;font-weight:800;color:var(--muted)}
.rrow .rv small.up{color:var(--gold)}

/* sheets */
.sheet-bg{position:fixed;inset:0;z-index:70;background:rgba(5,12,9,.55);opacity:0;transition:opacity .35s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sheet-bg.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:94vh;overflow:auto;background:var(--sheet);border-radius:28px 28px 0 0;
  padding:10px var(--pad) calc(22px + var(--safe-b));transform:translateY(100%);transition:transform .55s var(--expo);max-width:620px;margin:0 auto;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.5)}
.sheet.on{transform:none}
.sheet .grab{width:40px;height:4px;border-radius:9px;background:var(--line2);margin:0 auto 18px}
.sheet h2{font-family:var(--serif);font-weight:500;font-size:31px;line-height:1;color:var(--hi);margin:0 0 16px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line)}
.tabs button{padding:8px 0 12px;font-weight:800;font-size:15px;color:var(--faint);position:relative;transition:color .3s}
.tabs button.on{color:var(--hi)}
.tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.amt{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px 0 8px}
.amt input{flex:1;min-width:0;text-align:center;background:none;border:0;outline:0;font-family:var(--serif);font-weight:500;font-size:66px;line-height:1;color:var(--hi);
  font-feature-settings:"lnum" 1,"tnum" 1;padding:0}
.amt input::placeholder{color:var(--faint)}
.amt-c{display:flex;justify-content:center;margin-bottom:6px}
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 4px;margin-top:6px}
.catgrid button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 2px;font-size:11px;font-weight:700;color:var(--muted);line-height:1.2;text-align:center}
.catgrid button span.ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--cream);transition:all .3s var(--spring)}
.catgrid button.on{color:var(--hi)}
.catgrid button.on span.ic{background:var(--gold);border-color:var(--gold);color:#1b1608;transform:scale(1.07);box-shadow:0 8px 22px -8px rgba(var(--gold-rgb),.9)}
.field{margin-top:18px}
.field label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.inp{width:100%;height:50px;border-radius:14px;background:var(--fill);border:1px solid var(--line);padding:0 15px;outline:0;font-size:16px;color:var(--hi);color-scheme:var(--scheme)}
.inp:focus{border-color:var(--line3)}
textarea.inp{height:90px;padding:12px 15px;resize:none;line-height:1.45}
select.inp{appearance:none;-webkit-appearance:none}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{height:38px;padding:0 15px;border-radius:99px;border:1px solid var(--line2);font-size:13.5px;font-weight:700;color:var(--body);display:inline-flex;align-items:center;gap:7px;
  transition:background .25s,color .25s,transform .25s var(--spring)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.chip .i{width:16px;height:16px}
.sheet-acts{display:flex;gap:8px;margin-top:24px}
.sheet-acts .btn{flex:1}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{height:38px;padding:0 15px;border-radius:99px;border:1px solid var(--line2);font-size:13px;font-weight:700;color:var(--muted);transition:all .3s}
.seg button.on{background:var(--cream);color:var(--bg);border-color:var(--cream)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.toggle b{font-size:15px;font-weight:700;color:var(--hi);display:block}
.toggle small{font-size:12.5px;color:var(--muted)}
.sw{width:50px;height:30px;border-radius:99px;background:var(--fill2);border:1px solid var(--line);position:relative;flex:none;transition:background .3s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform .35s var(--spring),background .3s}
.sw.on{background:var(--gold);border-color:var(--gold)}
.sw.on::after{transform:translateX(20px);background:#fff}

/* calendar (Ukrainian, our own — the native picker spoke English) */
.cal-h{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px}
.cal-h b{font-family:var(--serif);font-weight:500;font-size:28px;color:var(--hi)}
.cal-h b em{font-style:italic;color:var(--muted);font-weight:400;font-size:.72em;margin-left:6px}
.cal-h button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);color:var(--cream)}
.cal-h button[disabled]{opacity:.25}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-g .dw{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--faint);padding:6px 0}
.cal-g button{height:42px;border-radius:50%;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--hi);font-feature-settings:"lnum" 1;transition:all .2s;text-align:center}
.cal-g button.out{opacity:.22;pointer-events:none}
.cal-g button.today{box-shadow:inset 0 0 0 1px var(--line3)}
.cal-g button.on{background:var(--gold);color:#1b1608}

/* onboarding */
.onb{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;padding:16px var(--pad) calc(18px + var(--safe-b));max-width:620px;margin:0 auto}
.onb-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.prog{height:2px;background:var(--line);margin-bottom:28px;border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--gold);transition:width .7s var(--expo)}
.onb-step{flex:1;animation:viewin .55s var(--expo)}
.onb-q{margin:14px 0 8px}
.onb-q .strip{font-size:22px;line-height:1.6}
.onb-h{color:var(--muted);font-size:14px;margin:12px 0 20px}
.onb .chips .chip{height:44px;font-size:14px}
.onb-foot{display:flex;gap:8px;margin-top:24px}
.onb-foot .btn{flex:1;height:54px}
.onb-hero{position:relative;margin:-16px calc(-1*var(--pad)) 20px;height:46vh;min-height:300px;background:url(img/studio.webp) center 20%/cover}
.onb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,27,20,.05),rgba(10,27,20,.35) 55%,var(--bg))}
.onb-hero .lower{position:absolute;left:var(--pad);bottom:22px;z-index:1}
.privacy{display:flex;gap:10px;font-size:12.5px;color:var(--muted);margin-top:16px;align-items:flex-start}
.privacy .i{width:18px;height:18px;color:var(--gold)}

/* admin */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:18px}
.agrid>div{padding:14px 8px 14px 0;border-bottom:1px solid var(--line)}
.agrid>div:not(:nth-child(3n+1)){padding-left:12px;border-left:1px solid var(--line)}
.agrid .v{font-family:var(--serif);font-size:32px;font-weight:600;color:var(--hi);line-height:1;font-feature-settings:"lnum" 1}
.agrid .k{font-size:11.5px;color:var(--muted);margin-top:4px}
.urow{padding:14px 0;border-bottom:1px solid var(--line)}
.urow .n{display:flex;justify-content:space-between;gap:8px}
.urow .n b{color:var(--hi);font-weight:700}
.urow .n small{color:var(--muted);white-space:nowrap}
.urow .d{font-size:12.5px;color:var(--muted);margin-top:3px}
.urow .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tag{font-size:11px;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--body)}
.urow .qq{margin-top:8px;font-family:var(--serif);font-style:italic;font-size:17px;color:var(--hi);border-left:2px solid var(--yellow);padding:2px 0 2px 10px}
.linkbox{display:flex;gap:6px;align-items:center;margin-top:10px}
.linkbox code{flex:1;min-width:0;font-size:12px;padding:11px 12px;border-radius:12px;background:var(--fill2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars .bar{padding:9px 0}
.bars .bar .l{display:flex;justify-content:space-between;font-size:13.5px;color:var(--body)}
.bars .bar .l span:last-child{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--hi)}
.bars .bar .t{height:2px;margin-top:6px;background:var(--line)}
.bars .bar .t i{display:block;height:100%;background:var(--gold);transform-origin:left;animation:grow 1s var(--expo) both}

.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translate(-50%,-160%);z-index:90;background:var(--paper);color:var(--ink);
  font-weight:700;font-size:14px;padding:11px 18px;border-radius:99px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5);transition:transform .5s var(--spring);max-width:90vw;text-align:center}
.toast.on{transform:translate(-50%,0)}
.skel{height:220px;margin-top:20px;border-radius:20px;background:linear-gradient(90deg,var(--fill),var(--fill2),var(--fill));background-size:200% 100%;animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}
.foot-note{text-align:center;font-size:11.5px;color:var(--faint);margin:34px 0 6px}
.empty{padding:26px 0 6px}
.empty h3{font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.05;color:var(--hi);margin:0}
.empty p{color:var(--muted);margin:10px 0 0;font-size:14px}
.empty code,.tip code{font-family:var(--sans);font-weight:800;color:var(--hi);border-bottom:1px dashed var(--line3)}
.tip{display:flex;gap:10px;font-size:13.5px;color:var(--muted);margin-top:18px;align-items:flex-start}
.tip .i{color:var(--gold);width:18px;height:18px;margin-top:1px}
.coin-fly{position:fixed;z-index:80;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1C4,#E2B861 55%,#9C7228);
  box-shadow:0 0 12px rgba(255,214,130,.8);pointer-events:none}
.pro h3{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1;color:var(--hi);margin:14px 0 0}
.pro ol{margin:16px 0 18px;padding:0;list-style:none;counter-reset:p}
.pro li{counter-increment:p;display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--body)}
.pro li::before{content:"0" counter(p);font-family:var(--serif);color:var(--gold);font-size:17px;font-weight:600;font-feature-settings:"lnum" 1}
.closebox{margin-top:26px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.closebox p{margin:0 0 14px;font-size:14px;color:var(--body)}
.closebox p b{color:var(--gold);font-family:var(--serif);font-size:18px;font-feature-settings:"lnum" 1}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}