/* Битва за баланс. Layout: one full-bleed screen of red and green liquid with a living surface; year board as a second screen; white tab bar at the bottom. Deliberate single look. */
:root{
  --red1:#9C1428;--red2:#5E0816;--redHi:#B8243A;--redD:#36040C;--redPill:#7A0D1E;
  --grn1:#1E9C55;--grn2:#0A6532;--grn3:#0D7E40;--grnD:#033A1A;--grnPill:#06502A;
  --ink:#141414;--paper:#FFFFFF;--paper2:#F4F3EE;--well:#EDEBE4;--mute:#8A8880;--line:#D6D4CB;
  --fd:"Unbounded","Arial Black",system-ui,sans-serif;
  --fb:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@font-face{font-family:"Manrope";font-weight:200 800;font-display:swap;src:url(/fonts/manrope-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-weight:200 800;font-display:swap;src:url(/fonts/manrope-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-weight:200 900;font-display:swap;src:url(/fonts/unbounded-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:linear-gradient(180deg,var(--red2) 50%,var(--paper) 50%);-webkit-text-size-adjust:100%}
html.on-year,html.on-auth{background:linear-gradient(180deg,var(--paper2) 50%,var(--paper) 50%)}
body{background:transparent;overflow:hidden;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);overscroll-behavior:none}
[hidden]{display:none!important}
.app{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;overflow:clip;font-family:var(--fb);color:var(--paper);user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}

.auth{height:100%;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-left,0px)) 24px max(16px,env(safe-area-inset-right,0px));background:var(--paper2);font-family:var(--fb);color:var(--ink)}
.authcard{width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px}
.authlogo{width:84px;height:84px;border-radius:22px;align-self:center;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.authcard h1{font-family:var(--fd);font-size:24px;font-weight:700;text-align:center;margin:10px 0 0;text-wrap:balance}
.authsub{font-size:14px;font-weight:600;color:#5F5E5A;text-align:center;margin:0 0 12px}
.authcard label{font-size:12px;font-weight:800;letter-spacing:.06em;color:#5F5E5A;margin-top:6px}
.authcard input{height:52px;border:none;border-radius:16px;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:17px;font-weight:600;padding:0 16px;box-shadow:inset 0 0 0 1.5px var(--line);outline:none;width:100%}
.authcard input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.authmain{height:56px;border:none;border-radius:18px;margin-top:6px;background:linear-gradient(180deg,var(--grn1),var(--grn2));color:var(--paper);font-family:var(--fb);font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--grnD),0 10px 18px rgba(10,101,50,.35)}
.authmain:active{transform:translateY(4px);box-shadow:0 1px 0 var(--grnD)}
.authmain[disabled]{opacity:.6}
.authswitch{border:none;background:transparent;color:#5F5E5A;font-family:var(--fb);font-size:14px;font-weight:700;padding:10px;cursor:pointer}
.acct{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px 0 8px;font-size:13px;font-weight:700;color:var(--mute)}
.acct button{border:none;border-radius:12px;background:transparent;color:var(--mute);font-family:inherit;font-size:13px;font-weight:800;padding:8px 14px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
button{font-family:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

.stage{position:relative;flex:1;min-height:0;overflow:hidden}
.month{position:absolute;inset:0;background:var(--grn2)}
#liquid{position:absolute;inset:0;width:100%;height:100%;display:block}
.mname{position:absolute;top:22px;left:0;right:0;text-align:center;font-size:20px;font-weight:800;letter-spacing:.02em;margin:0}
.lvl{position:absolute;left:0;right:0;top:0;height:0;will-change:transform}
.above,.below{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.above{bottom:44px}
.below{top:44px}
.k{font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.85}
.v{font-family:var(--fd);font-size:clamp(20px,5.5vw,26px);font-weight:500;text-shadow:0 2px 6px rgba(0,0,0,.2);font-variant-numeric:tabular-nums}
.hint{font-size:14px;font-weight:700;opacity:.9;margin:18px 0 0;text-align:center;max-width:240px}
.pill{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:9px 24px;border-radius:30px;border:3px solid var(--paper);font-family:var(--fd);font-size:clamp(22px,6vw,28px);font-weight:700;white-space:nowrap;color:var(--paper);text-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:0 4px 0 rgba(0,0,0,.2),0 10px 22px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.35);font-variant-numeric:tabular-nums;transition:background .4s}
.pill.plus{background:linear-gradient(180deg,var(--grn1),var(--grnPill))}
.pill.minus{background:linear-gradient(180deg,var(--redHi),var(--redPill))}
.pill.zero{background:linear-gradient(180deg,#8A8880,#5F5E5A)}

.stk{position:absolute;right:max(22px,6vw);top:66px;width:200px;height:140px;display:flex;align-items:center;justify-content:center;gap:6px;color:#5A2300;white-space:nowrap;transform:rotate(-8deg);animation:splat 5s ease-in-out infinite}
.stk svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35))}
.stk>*:not(svg){position:relative}
.stk b{font-family:var(--fd);font-size:28px;font-weight:700;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.stk span{font-size:11px;font-weight:800;line-height:1.15}
.stk i.flame{width:30px;height:42px;display:block}
.flame svg{display:block;width:100%;height:100%;overflow:visible}
.flame path,.flame circle{transform-box:fill-box;transform-origin:50% 100%}
.f1{fill:#FF2E00;animation:f1 .85s ease-in-out infinite alternate}
.f2{fill:#FF8A00;animation:f2 .55s ease-in-out infinite alternate}
.f3{fill:#FFF4A8;animation:f3 .4s ease-in-out infinite alternate}
.em{fill:#FFD23F;opacity:0;animation:em 1.4s ease-out infinite}
.e2{animation-delay:.5s;fill:#FF8A00}.e3{animation-delay:.95s}
@keyframes f1{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.94,1.1) skewX(-5deg)}70%{transform:scale(1.04,.95) skewX(4deg)}100%{transform:scale(.97,1.14) skewX(-2deg)}}
@keyframes f2{0%{transform:scale(1,1) skewX(3deg)}50%{transform:scale(.9,1.16) skewX(-6deg)}100%{transform:scale(1.06,.92) skewX(5deg)}}
@keyframes f3{0%{transform:scale(1,1) translateX(0)}50%{transform:scale(.85,1.22) translateX(-1px)}100%{transform:scale(1.1,.9) translateX(1px)}}
@keyframes em{0%{opacity:0;transform:translate(0,8px) scale(1)}20%{opacity:1}100%{opacity:0;transform:translate(-3px,-22px) scale(.3)}}
@keyframes splat{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-6deg) scale(1.04)}}

.fab{position:absolute;left:50%;bottom:22px;width:66px;height:66px;margin-left:-33px;border-radius:50%;border:none;cursor:pointer;z-index:4;color:var(--ink);font-size:34px;font-weight:500;line-height:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#FFFFFF 0%,#F1EFE8 55%,#D3D1C7 100%);box-shadow:0 5px 0 #B4B2A9,0 12px 24px rgba(0,0,0,.35),inset 0 2px 0 #FFFFFF;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .25s}
.fab::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,255,255,.9);animation:ring 2s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.fab:active{transform:translateY(4px)}
.open .fab{transform:rotate(135deg) scale(.3);opacity:0;pointer-events:none}

.tabs{flex:none;height:64px;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px max(16px,env(safe-area-inset-left,0px)) 8px max(16px,env(safe-area-inset-right,0px));background:var(--paper);box-shadow:0 -6px 18px rgba(0,0,0,.18);box-sizing:border-box;position:relative;z-index:3}
.tabs button{border:none;border-radius:16px;background:transparent;color:var(--mute);font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.tabs button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-pressed="true"]{color:var(--ink);background:var(--well)}

.scrim{position:absolute;inset:0;background:rgba(10,10,10,.5);opacity:0;pointer-events:none;transition:opacity .35s;z-index:5}
.sheet{position:absolute;left:10px;right:10px;bottom:10px;max-width:420px;margin:0 auto;background:linear-gradient(180deg,var(--paper),#F7F6F2);border-radius:28px;padding:12px 16px 18px;transform:translateY(130%) scale(.9);transition:transform .55s cubic-bezier(.2,1.35,.4,1);z-index:6;box-shadow:0 -10px 30px rgba(0,0,0,.3);color:var(--ink)}
.open .scrim{opacity:1;pointer-events:auto}
.open .sheet{transform:translateY(0) scale(1)}
.sheet>*{opacity:0;transform:translateY(16px);transition:opacity .3s,transform .45s cubic-bezier(.2,1.5,.4,1)}
.open .sheet>*{opacity:1;transform:none}
.open .sheet>*:nth-child(2){transition-delay:.08s}
.open .sheet>*:nth-child(3){transition-delay:.15s}
.open .sheet>*:nth-child(4){transition-delay:.22s}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 10px}
.ttl{font-size:14px;font-weight:800;color:#5F5E5A;text-align:center;margin:0 0 10px}
#amount{width:100%;box-sizing:border-box;height:68px;border:none;border-radius:20px;background:var(--well);color:var(--ink);font-family:var(--fd);font-size:30px;font-weight:500;text-align:center;outline:none;margin:0 0 14px;box-shadow:inset 0 3px 6px rgba(0,0,0,.12),inset 0 -1px 0 #FFFFFF;-webkit-user-select:text;user-select:text}
#amount::placeholder{color:#B4B2A9}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acts button{height:58px;border-radius:20px;border:none;font-size:16px;font-weight:800;color:var(--paper);cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .08s,box-shadow .08s}
.acts .out{background:linear-gradient(180deg,var(--redHi),var(--red2));box-shadow:0 5px 0 var(--redD),0 10px 18px rgba(94,8,22,.45),inset 0 2px 0 rgba(255,255,255,.35)}
.acts .in{background:linear-gradient(180deg,var(--grn1),var(--grn2));box-shadow:0 5px 0 var(--grnD),0 10px 18px rgba(10,101,50,.45),inset 0 2px 0 rgba(255,255,255,.35)}
.acts button:active{transform:translateY(5px)}
.acts .out:active{box-shadow:0 0 0 var(--redD),0 3px 8px rgba(94,8,22,.4),inset 0 2px 0 rgba(255,255,255,.35)}
.acts .in:active{box-shadow:0 0 0 var(--grnD),0 3px 8px rgba(10,101,50,.4),inset 0 2px 0 rgba(255,255,255,.35)}
.err{font-size:12px;font-weight:800;text-align:center;min-height:16px;margin:8px 0 0;color:var(--red2)}

.toast{position:absolute;left:50%;bottom:160px;transform:translate(-50%,24px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);border-radius:18px;padding:8px 8px 8px 16px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;white-space:nowrap;z-index:7;transition:transform .45s cubic-bezier(.2,1.4,.4,1),opacity .25s;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.toast.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast button{border:none;border-radius:12px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:800;padding:6px 12px;cursor:pointer}

.spk{position:absolute;border-radius:50%;pointer-events:none;z-index:8}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}

.year{position:absolute;inset:0;background:var(--paper2);color:var(--ink);overflow-y:auto;padding:22px 16px 24px;box-sizing:border-box}
.yin{max-width:440px;margin:0 auto}
.yhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}
.yhead h1{font-family:var(--fd);font-size:30px;font-weight:700;margin:0;font-variant-numeric:tabular-nums}
.ynav{display:flex;gap:8px}
.ynav button{width:40px;height:40px;border-radius:14px;border:none;background:var(--paper);color:var(--ink);font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.ynav button:active{transform:translateY(3px);box-shadow:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{border-radius:16px;overflow:hidden;aspect-ratio:1/1;max-width:100%;position:relative;background:var(--well);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.tile.now{outline:3px solid var(--ink);outline-offset:-3px}
.tile .tr,.tile .tg{position:absolute;left:0;right:0}
.tile .tr{top:0;background:linear-gradient(180deg,var(--red1),var(--red2))}
.tile .tg{bottom:0;background:linear-gradient(180deg,var(--grn2),var(--grn3))}
.tile .tl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:800;color:var(--paper)}
.tile.empty .tl{color:var(--mute)}
.tile em{font-style:normal;font-family:var(--fd);font-size:12px;font-weight:500;padding:3px 9px;border-radius:11px;border:2px solid var(--paper);box-shadow:0 2px 4px rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.tile em.plus,.ytot em.plus{background:linear-gradient(180deg,var(--grn1),var(--grnPill))}
.tile em.minus,.ytot em.minus{background:linear-gradient(180deg,var(--redHi),var(--redPill))}
.tile em.zero,.ytot em.zero{background:linear-gradient(180deg,#8A8880,#5F5E5A)}
.ytot{display:flex;justify-content:center;align-items:center;gap:10px;font-size:15px;font-weight:800;color:#444441;margin:20px 0 0}
.ytot em{font-style:normal;font-family:var(--fd);font-weight:500;color:var(--paper);padding:6px 16px;border-radius:18px;box-shadow:0 3px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.35);font-variant-numeric:tabular-nums}
.local{font-size:12px;font-weight:700;color:var(--mute);text-align:center;margin:16px 0 0}
.reset{display:flex;flex-direction:column;align-items:center;gap:10px;margin:28px 0 0}
.reset button{border:none;border-radius:12px;font-family:inherit;font-size:13px;font-weight:800;padding:8px 14px;cursor:pointer}
#resetBtn{background:transparent;color:var(--mute);box-shadow:inset 0 0 0 1.5px var(--line)}
.ask{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#444441;text-align:center}
.ask div{display:flex;gap:8px}
#resetYes{background:var(--red2);color:var(--paper);box-shadow:0 3px 0 var(--redD)}
#resetNo{background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--line)}

@media (min-width:700px){.mname{top:40px}}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}