:root{
--color-primary:#D7F24A;--color-onPrimary:#15200A;--color-secondary:#FF6B35;--color-accent:#47D7AC;
--color-background:#10130F;--color-surface:#1A1F19;--color-surfaceAlt:#252C24;--color-text:#F7FAF2;--color-textMuted:#B6BDB1;--color-border:#3C4639;
--color-success:#65D88A;--color-warning:#FFD166;--color-danger:#FF7373;
--font-heading:'Barlow Condensed',sans-serif;--font-body:'Inter',system-ui,sans-serif;
--fs-display:40px;--fs-h1:32px;--fs-h2:24px;--fs-h3:20px;--fs-body:16px;--fs-small:14px;--fs-caption:12px;
--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 20px rgba(0,0,0,.28);--shadow-lg:0 16px 36px rgba(0,0,0,.36);
--motion-duration:220ms;--motion-easing:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--color-background);color:var(--color-text);font:400 var(--fs-body)/1.5 var(--font-body);-webkit-tap-highlight-color:transparent}
body{overflow:hidden}
#app{width:100%;height:100dvh;display:flex;flex-direction:column;position:relative}
h1,h2,h3,.display{font-family:var(--font-heading);line-height:1.1;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3);margin:var(--space-6) 0 var(--space-3)}
.display{font-size:var(--fs-display)}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;min-height:44px}
[hidden]{display:none!important}
.muted{color:var(--color-textMuted)}
.cap{font-size:var(--fs-caption);color:var(--color-textMuted);text-transform:uppercase;letter-spacing:.08em}
.screen{padding:var(--space-5) var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);animation:in var(--motion-duration) var(--motion-easing)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.auth{height:100dvh;overflow:auto;padding-top:calc(var(--space-8) + env(safe-area-inset-top));padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom))}
.auth-hero{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-3)}
.logo{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-onPrimary);display:grid;place-items:center;font:700 28px var(--font-heading)}
#shell{display:flex;flex-direction:column;flex:1;min-height:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--space-2) + env(safe-area-inset-top)) var(--space-4) var(--space-2);background:var(--color-background);border-bottom:1px solid var(--color-border)}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-pill);display:grid;place-items:center;position:relative;background:var(--color-surface)}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dot{position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;background:var(--color-secondary)}
#main{flex:1;overflow-y:auto;overscroll-behavior:contain}
.tabbar{display:flex;background:var(--color-surface);border-top:1px solid var(--color-border);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.tabbar button{flex:1;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--color-textMuted);font-size:var(--fs-caption);position:relative;transition:color var(--motion-duration)}
.tabbar button[aria-current=page]{color:var(--color-primary)}
.tabbar button[aria-current=page] svg{fill:color-mix(in srgb,var(--color-primary) 25%,transparent)}
.tb{position:absolute;top:6px;left:55%;background:var(--color-secondary);color:var(--color-onPrimary);font:700 11px var(--font-body);border-radius:var(--radius-pill);min-width:18px;height:18px;display:grid;place-items:center;font-style:normal;padding:0 5px}
.btn{min-height:48px;padding:0 var(--space-5);border-radius:var(--radius-pill);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;transition:transform var(--motion-duration) var(--motion-easing),opacity var(--motion-duration)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--color-primary);color:var(--color-onPrimary)}
.btn.secondary{background:var(--color-secondary);color:var(--color-onPrimary)}
.btn.ghost{border:1px solid var(--color-border);background:var(--color-surface)}
.btn.destructive{background:transparent;border:1px solid var(--color-danger);color:var(--color-danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.loading::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.sm{min-height:44px;width:auto;font-size:var(--fs-small)}
.link{color:var(--color-primary);font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:0 var(--space-2)}
.link.center{align-self:center}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3)}
.field label{font-size:var(--fs-small);font-weight:500}
.field input,.field select,.field textarea{height:52px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);padding:0 var(--space-4);font:inherit;width:100%}
.field textarea{height:84px;padding:var(--space-3) var(--space-4);resize:none}
.field.bad input,.field.bad select{border-color:var(--color-danger)}
.help{color:var(--color-textMuted);font-size:var(--fs-caption)}
.err{color:var(--color-danger);font-size:var(--fs-caption);min-height:0}
.pw{position:relative}.pw .link{position:absolute;right:4px;top:4px;height:44px}
.check{display:flex;gap:var(--space-3);font-size:var(--fs-small);align-items:flex-start;margin-bottom:var(--space-3)}
.check input{width:22px;height:22px;accent-color:var(--color-primary);flex:none}
.check a{color:var(--color-primary)}
.seg{display:flex;background:var(--color-surface);border-radius:var(--radius-pill);padding:4px;margin-bottom:var(--space-3)}
.seg button{flex:1;border-radius:var(--radius-pill);font-weight:500;color:var(--color-textMuted)}
.seg button[aria-selected=true]{background:var(--color-primary);color:var(--color-onPrimary)}
.card{background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);text-align:left;width:100%;display:block}
.card.hl{background:var(--color-primary);color:var(--color-onPrimary);border:0}
.card.hl .cap{color:var(--color-onPrimary);opacity:.7}
.card.tap{margin-top:var(--space-3)}
.row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.stats{display:flex;gap:var(--space-6);margin-top:var(--space-2)}
.stats b{font:700 36px var(--font-heading);display:block;line-height:1}.stats span{font-size:var(--fs-small)}
.list{display:flex;flex-direction:column;gap:var(--space-3)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.chips,.days{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-1) 0;scrollbar-width:none}
.chip{flex:none;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--fs-small)}
.chip.on{background:var(--color-primary);color:var(--color-onPrimary);border-color:var(--color-primary);font-weight:700}
.day{flex:none;width:56px;height:72px;border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-caption);color:var(--color-textMuted);position:relative}
.day b{font:700 22px var(--font-heading);color:var(--color-text)}
.day.on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-onPrimary)}.day.on b{color:var(--color-onPrimary)}
.day.has::after{content:"";position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--color-accent)}
.day.on.has::after{background:var(--color-onPrimary)}
.class{display:flex;flex-direction:column;overflow:hidden;padding:0}
.class img{width:100%;height:120px;object-fit:cover;background:var(--color-surfaceAlt)}
.class .in{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.class h4{font:700 22px var(--font-heading);text-transform:uppercase}
.meta{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--fs-small);color:var(--color-textMuted)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-caption);font-weight:700;padding:2px 10px;border-radius:var(--radius-pill);border:1px solid currentColor;white-space:nowrap}
.badge::before{content:"●";font-size:8px}
.badge.ok{color:var(--color-success)}.badge.warn{color:var(--color-warning)}.badge.bad{color:var(--color-danger)}.badge.info{color:var(--color-accent)}
.bar{height:10px;background:var(--color-surfaceAlt);border-radius:var(--radius-pill);overflow:hidden;margin-top:var(--space-3)}
.bar i{display:block;height:100%;background:var(--color-primary);border-radius:inherit;transition:width .5s var(--motion-easing)}
.bar.warning i{background:var(--color-warning)}
.wrow{display:flex;align-items:center;gap:var(--space-3);min-height:64px;text-align:left;width:100%}
.wrow .ic{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-surfaceAlt);display:grid;place-items:center;color:var(--color-primary);flex:none}
.wrow .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.wrow .tx small{color:var(--color-textMuted)}
.ann.unread{border-color:var(--color-primary)}
.ann img{width:100%;height:140px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--space-3)}
.perks{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.perks li::before{content:"✓ ";color:var(--color-accent);font-weight:700}
.empty{text-align:center;color:var(--color-textMuted);padding:var(--space-7) var(--space-4);border:1px dashed var(--color-border);border-radius:var(--radius-md)}
.skel{height:90px;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}}
#scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;animation:fade var(--motion-duration)}
@keyframes fade{from{opacity:0}}
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-3) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));max-height:88dvh;overflow:auto;box-shadow:var(--shadow-lg);animation:up var(--motion-duration) var(--motion-easing)}
@keyframes up{from{transform:translateY(100%)}}
.grab{width:40px;height:4px;background:var(--color-border);border-radius:4px;margin:0 auto var(--space-4)}
#sheet h2{margin-bottom:var(--space-3)}
#sheet .btn{margin-top:var(--space-2)}
#sheet p{margin-bottom:var(--space-3)}
.plans{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}
.plan{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);display:flex;justify-content:space-between;text-align:left;width:100%}
.plan[aria-pressed=true]{border-color:var(--color-primary);background:var(--color-surfaceAlt)}
#toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--color-text);color:var(--color-background);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);font-size:var(--fs-small);font-weight:500;opacity:0;pointer-events:none;transition:all var(--motion-duration) var(--motion-easing);z-index:50;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}