:root{--color-primary:#C8F24A;--color-onPrimary:#14200A;--color-secondary:#FF7A45;--color-accent:#55D6BE;--color-background:#101411;--color-surface:#1A211C;--color-surfaceAlt:#253027;--color-text:#F6F8F2;--color-textMuted:#B8C1B5;--color-border:#3B493D;--color-success:#7EE787;--color-warning:#FFD166;--color-danger:#FF7B72;
--font-heading:'Barlow Condensed',sans-serif;--font-body:'Manrope',sans-serif;
--fs-display:48px;--fs-h1:32px;--fs-h2:24px;--fs-h3:20px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;
--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;
--shadow-sm:0 2px 8px rgba(0,0,0,.2);--shadow-md:0 8px 24px rgba(0,0,0,.28);--shadow-lg:0 16px 40px rgba(0,0,0,.36);
--motion-duration:220ms;--motion-easing:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0}
body{background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;min-height:100vh;display:flex;justify-content:center}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.shell{width:100%;max-width:430px;height:100vh;height:100dvh;background:var(--color-background);position:relative;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:500px){body{align-items:center;background:#000}.shell{height:min(900px,100vh);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5) var(--space-2)}
h1{font-family:var(--font-heading);font-size:var(--fs-h1);line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
h2,h3{font-family:var(--font-heading);line-height:1.1}
h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);margin-bottom:var(--space-2)}
.hello{margin:var(--space-1) 0 var(--space-4)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:var(--color-onPrimary);font-weight:700;display:grid;place-items:center}
.avatar.big{width:56px;height:56px;flex:none}
main{flex:1;overflow-y:auto;padding:var(--space-2) var(--space-5) 150px}
section[data-screen]{display:flex;flex-direction:column;gap:var(--space-4);animation:in var(--motion-duration) var(--motion-easing)}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.muted{color:var(--color-textMuted)}.small{font-size:var(--fs-small)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}
.tap{color:inherit;transition:transform var(--motion-duration) var(--motion-easing)}.tap:active{transform:scale(.98)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.metric{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}
.metric b{display:block;font-family:var(--font-heading);font-size:var(--fs-h1);line-height:1;color:var(--color-primary)}
.metric span{font-size:var(--fs-caption);color:var(--color-textMuted)}
.badge-d{display:inline-block;font-size:var(--fs-caption);padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--color-surfaceAlt)}
.up{color:var(--color-success)}.down{color:var(--color-danger)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.link{color:var(--color-primary);min-height:44px;padding:0 var(--space-2);font-weight:600}
.list{display:flex;flex-direction:column;gap:var(--space-2)}
.act{display:flex;gap:var(--space-3);align-items:center;width:100%;text-align:left;min-height:88px;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:inherit}
.ico{width:44px;height:44px;flex:none;border-radius:var(--radius-sm);background:var(--color-surfaceAlt);display:grid;place-items:center;color:var(--color-primary)}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.act .t{font-weight:700}.act .m{font-size:var(--fs-small);color:var(--color-textMuted)}
.bars{display:flex;align-items:flex-end;gap:var(--space-2);height:180px;padding-top:var(--space-3)}
.bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--space-1);min-width:0}
.bar i{display:block;width:100%;background:var(--color-surfaceAlt);border-radius:var(--radius-sm) var(--radius-sm) 0 0;min-height:4px;transition:height var(--motion-duration) var(--motion-easing)}
.bar.on i,.bar:hover i{background:var(--color-primary)}
.bar span{font-size:var(--fs-caption);color:var(--color-textMuted)}
.progress{height:8px;background:var(--color-surfaceAlt);border-radius:var(--radius-pill);overflow:hidden;margin:var(--space-2) 0}
.progress i{display:block;height:100%;background:var(--color-primary);border-radius:var(--radius-pill)}
.progress.done i{background:var(--color-success)}
.btn{min-height:48px;padding:0 var(--space-4);border-radius:var(--radius-md);font-weight:700}
.btn.primary{background:var(--color-primary);color:var(--color-onPrimary)}
.btn.primary:disabled{opacity:.5}
.btn.ghost{border:1px solid var(--color-border);background:var(--color-surface)}
.btn.full{width:100%}
.label{font-size:var(--fs-small);color:var(--color-textMuted);font-weight:600;display:block;margin-bottom:var(--space-2)}
.field{display:flex;flex-direction:column;gap:var(--space-1);flex:1;margin-bottom:var(--space-3)}
.field label{font-size:var(--fs-small);color:var(--color-textMuted);font-weight:600}
input,select,textarea{min-height:52px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);width:100%}
input.bad,textarea.bad{border-color:var(--color-danger)}
.search{flex:1}
.two{display:flex;gap:var(--space-2)}
.err{color:var(--color-danger);font-size:var(--fs-caption);min-height:0}
#wform{display:flex;flex-direction:column;gap:var(--space-2)}
.types{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2)}
.type{min-height:64px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-caption);color:var(--color-textMuted)}
.type svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.type[aria-checked=true]{border-color:var(--color-primary);background:rgba(200,242,74,.12);color:var(--color-primary)}
.chips{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-1)}
.chip{min-height:44px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-pill);white-space:nowrap;background:var(--color-surface)}
.chip.on{background:var(--color-primary);color:var(--color-onPrimary);border-color:var(--color-primary)}
.seg{display:flex;background:var(--color-surface);border-radius:var(--radius-md);padding:3px;border:1px solid var(--color-border)}
.seg button{flex:1;min-height:40px;border-radius:var(--radius-sm);color:var(--color-textMuted);font-weight:600}
.seg button.on{background:var(--color-surfaceAlt);color:var(--color-text)}
.dgroup{font-size:var(--fs-small);color:var(--color-textMuted);margin:var(--space-3) 0 var(--space-2);font-weight:600}
.empty{text-align:center;padding:var(--space-8) var(--space-4);color:var(--color-textMuted)}
.skel{height:88px;border-radius:var(--radius-md);background:linear-gradient(90deg,var(--color-surface),var(--color-surfaceAlt),var(--color-surface));background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{to{background-position:-200% 0}}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.bdg{text-align:center;padding:var(--space-3) var(--space-2);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--fs-caption)}
.bdg.lock{opacity:.45}.bdg .ico{margin:0 auto var(--space-2);border-radius:50%}
.prof{display:flex;gap:var(--space-4);align-items:center}
.switch{width:52px;height:44px;display:grid;align-items:center}
.switch span{display:block;width:52px;height:30px;border-radius:var(--radius-pill);background:var(--color-surfaceAlt);position:relative;transition:background var(--motion-duration)}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--color-text);transition:transform var(--motion-duration) var(--motion-easing)}
.switch[aria-checked=true] span{background:var(--color-primary)}
.switch[aria-checked=true] span::after{transform:translateX(22px);background:var(--color-onPrimary)}
input[type=range]{min-height:44px;padding:0;accent-color:var(--color-primary);border:0;background:none}
.fab{position:absolute;right:var(--space-5);bottom:88px;width:56px;height:56px;border-radius:50%;background:var(--color-primary);color:var(--color-onPrimary);display:grid;place-items:center;box-shadow:var(--shadow-md);z-index:5}
.tabbar{position:absolute;left:0;right:0;bottom:0;min-height:64px;padding-bottom:env(safe-area-inset-bottom);background:var(--color-surface);border-top:1px solid var(--color-border);display:grid;grid-template-columns:repeat(5,1fr);z-index:4}
.tab{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-caption);color:var(--color-textMuted)}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current=page]{color:var(--color-primary);font-weight:700}
.tab[aria-current=page] svg{fill:currentColor;fill-opacity:.25}
.toast{position:absolute;left:var(--space-5);right:var(--space-5);bottom:150px;background:var(--color-text);color:var(--color-background);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-weight:600;opacity:0;pointer-events:none;transform:translateY(8px);transition:all var(--motion-duration) var(--motion-easing);z-index:20}
.toast.show{opacity:1;transform:none}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:10}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-3) var(--space-5) var(--space-6);z-index:11;animation:up var(--motion-duration) var(--motion-easing);border-top:1px solid var(--color-border)}
@keyframes up{from{transform:translateY(100%)}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--color-border);margin:0 auto var(--space-3)}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);margin:var(--space-3) 0}.sheet dt{color:var(--color-textMuted)}.sheet dd{text-align:right;font-weight:600}
.sheet .btns{display:flex;gap:var(--space-2)}.sheet .btns .btn{flex:1}
.btn.danger{border:1px solid var(--color-danger);color:var(--color-danger)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}