:root{--color-primary:#075E54;--color-onPrimary:#FFFFFF;--color-secondary:#B45309;--color-accent:#E85D04;--color-background:#F7F8F4;--color-surface:#FFFFFF;--color-surfaceAlt:#E9F1EC;--color-text:#17211D;--color-textMuted:#58645D;--color-border:#C9D3CC;--color-success:#16794C;--color-warning:#9A6700;--color-danger:#B42318;
--font-heading:'Barlow Condensed',-apple-system,'SF Pro Text',Roboto,sans-serif;--font-body:'Inter',-apple-system,'SF Pro Text',Roboto,sans-serif;
--fs-display:34px;--fs-h1:30px;--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;
--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-pill:999px;
--shadow-sm:0 1px 3px rgba(23,33,29,.12);--shadow-md:0 6px 16px rgba(23,33,29,.14);--shadow-lg:0 16px 32px rgba(23,33,29,.18);
--motion-duration:220ms;--motion-easing:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-body);font-size:var(--fs-body);color:var(--color-text);background:var(--color-background);line-height:1.5}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;user-select:none;-webkit-user-select:none}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
#app{height:100%;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.appbar{padding-top:max(env(safe-area-inset-top),var(--arxis-safe-top,0px));background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;min-height:calc(56px + max(env(safe-area-inset-top),var(--arxis-safe-top,0px)));padding-left:var(--space-2);padding-right:var(--space-2)}
.appbar[hidden],.tabbar[hidden],[hidden]{display:none!important}
.appbar h1{flex:1;font-family:var(--font-heading);font-size:var(--fs-h2);font-weight:700;text-align:center;line-height:1.15}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-pill);font-size:22px;position:relative;display:grid;place-items:center;transition:transform var(--motion-duration) var(--motion-easing)}
.icon-btn:active,.btn:active,.cell:active,.card:active,.tab:active{transform:scale(.97);opacity:.8}
.dot{position:absolute;top:9px;right:9px;width:10px;height:10px;border-radius:50%;background:var(--color-accent);border:2px solid var(--color-surface)}
.content{flex:1;overflow-y:auto;overscroll-behavior:contain;position:relative}
.screen{display:none;padding:var(--space-4);padding-bottom:var(--space-7);animation:in var(--motion-duration) var(--motion-easing)}
.screen.active{display:block}
@keyframes in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.display{font-family:var(--font-heading);font-size:var(--fs-display);line-height:1.15}
.h1{font-family:var(--font-heading);font-size:var(--fs-h1);line-height:1.15;margin-bottom:var(--space-3)}
.h2{font-family:var(--font-heading);font-size:var(--fs-h2);line-height:1.15}
.sec{font-family:var(--font-heading);font-size:var(--fs-h3);margin:var(--space-5) 0 var(--space-2)}
.muted{color:var(--color-textMuted);font-size:var(--fs-small)}
.login{padding-top:var(--space-7);display:flex;flex-direction:column;gap:var(--space-3);text-align:center}
.login form{display:flex;flex-direction:column;gap:var(--space-3);text-align:left;margin-top:var(--space-4)}
.logo{width:72px;height:72px;margin:0 auto;border-radius:var(--radius-lg);background:var(--color-primary);color:var(--color-onPrimary);font:700 44px var(--font-heading);display:grid;place-items:center}
.field label{display:block;font-size:var(--fs-small);font-weight:500;margin-bottom:var(--space-1)}
.field input{width:100%;height:56px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.field input.bad{border-color:var(--color-danger)}
.err{color:var(--color-danger);font-size:var(--fs-small);display:block;min-height:0}
.btn{min-height:48px;padding:0 var(--space-4);border-radius:var(--radius-md);font-family:var(--font-heading);font-size:18px;font-weight:700;transition:transform var(--motion-duration) var(--motion-easing)}
.btn.primary{background:var(--color-primary);color:var(--color-onPrimary)}
.btn.outline{border:1px solid var(--color-primary);color:var(--color-primary);background:var(--color-surface)}
.btn.ghost{color:var(--color-primary)}
.btn.danger{border:1px solid var(--color-danger);color:var(--color-danger);background:var(--color-surface)}
.btn.full{width:100%;margin-top:var(--space-2)}
.btn:disabled{opacity:.5}
.link{color:var(--color-primary);font-weight:500;min-height:44px;padding:0 var(--space-2);align-self:flex-start;font-size:var(--fs-small)}
.member-card{background:var(--color-primary);color:var(--color-onPrimary);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-md);margin-bottom:var(--space-3)}
.member-card .plan{font-family:var(--font-heading);font-size:var(--fs-h2)}
.member-card .days{font-family:var(--font-heading);font-size:var(--fs-display);line-height:1}
.member-card small{opacity:.85;display:block;font-size:var(--fs-small)}
.card{display:flex;gap:var(--space-3);align-items:center;width:100%;text-align:left;background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-3);box-shadow:var(--shadow-sm);margin-bottom:var(--space-2);min-height:72px;transition:transform var(--motion-duration) var(--motion-easing)}
.card img{width:72px;height:54px;border-radius:var(--radius-sm);object-fit:cover;flex:none;background:var(--color-surfaceAlt)}
.card .grow{flex:1;min-width:0}
.card b{display:block;font-weight:700}
.time{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:700;color:var(--color-primary);min-width:56px}
.badge{font-size:var(--fs-caption);font-weight:700;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);background:var(--color-surfaceAlt);color:var(--color-primary);white-space:nowrap}
.badge.warn{background:#FFF1D6;color:var(--color-warning)}
.badge.full{background:#FDE4E1;color:var(--color-danger)}
.badge.ok{background:#DDF3E8;color:var(--color-success)}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-4)}
.row-head{display:flex;justify-content:space-between;align-items:flex-end}
.search input{width:100%;height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--color-border);background:var(--color-surface);margin-bottom:var(--space-3)}
.seg{display:flex;background:var(--color-surfaceAlt);border-radius:var(--radius-md);padding:2px;margin-bottom:var(--space-3)}
.seg button{flex:1;height:40px;border-radius:var(--radius-sm);font-weight:500;font-size:var(--fs-small)}
.seg button.on{background:var(--color-surface);box-shadow:var(--shadow-sm);color:var(--color-primary);font-weight:700}
.strip,.chips{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);margin-bottom:var(--space-2)}
.day{flex:none;width:56px;height:68px;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)}
.day b{font:700 22px var(--font-heading)}
.day.on{background:var(--color-primary);color:var(--color-onPrimary);border-color:var(--color-primary)}
.chip{flex:none;min-height:44px;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)}
.wk{display:block;background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:var(--space-3);width:100%;text-align:left}
.wk img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.wk .in{padding:var(--space-3)}
.bar{height:6px;border-radius:var(--radius-pill);background:var(--color-surfaceAlt);margin-top:var(--space-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--color-accent)}
.empty{text-align:center;padding:var(--space-7) var(--space-4);color:var(--color-textMuted)}
.empty .ill{font-size:48px}
.empty p{margin:var(--space-2) 0 var(--space-3)}
.profile-head{display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-4)}
.profile-head img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.group{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.cell{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;padding:0 var(--space-4);border-bottom:1px solid var(--color-surfaceAlt);text-align:left}
.cell:last-child{border:0}
.cell i{color:var(--color-textMuted);font-style:normal;font-size:22px}
.cell.danger{color:var(--color-danger)}
.sw{width:51px;height:31px;border-radius:var(--radius-pill);background:var(--color-border);position:relative;flex:none;transition:background var(--motion-duration)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:var(--color-surface);box-shadow:var(--shadow-sm);transition:transform var(--motion-duration) var(--motion-easing)}
.sw[aria-checked=true]{background:var(--color-primary)}
.sw[aria-checked=true]::after{transform:translateX(20px)}
.tabbar{display:flex;background:var(--color-surface);border-top:1px solid var(--color-border);padding-bottom:max(env(safe-area-inset-bottom),var(--arxis-safe-bottom,0px))}
.tab{flex:1;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--color-textMuted);font-size:11px;position:relative;transition:transform var(--motion-duration)}
.tab span{font-size:22px;line-height:1}
.tab.on{color:var(--color-primary);font-weight:700}
.tab em{position:absolute;top:6px;left:54%;min-width:18px;height:18px;border-radius:9px;background:var(--color-accent);color:#fff;font-size:11px;font-style:normal;display:grid;place-items:center;padding:0 4px}
.scrim{position:absolute;inset:0;background:rgba(23,33,29,.45);opacity:0;pointer-events:none;transition:opacity var(--motion-duration)}
.scrim.on{opacity:1;pointer-events:auto}
.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) calc(var(--space-5) + max(env(safe-area-inset-bottom),var(--arxis-safe-bottom,0px)));transform:translateY(105%);transition:transform var(--motion-duration) var(--motion-easing);box-shadow:var(--shadow-lg);max-height:85%;overflow-y:auto}
.sheet.on{transform:none}
.grab{width:40px;height:4px;border-radius:2px;background:var(--color-border);margin:0 auto var(--space-4)}
.sheet h3{font-family:var(--font-heading);font-size:var(--fs-h2);margin-bottom:var(--space-2)}
.sheet p{margin-bottom:var(--space-2)}
.sheet .btn{width:100%;margin-top:var(--space-2)}
.sheet img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-md);margin-bottom:var(--space-3)}
.toast{position:absolute;left:var(--space-4);right:var(--space-4);bottom:calc(88px + max(env(safe-area-inset-bottom),var(--arxis-safe-bottom,0px)));background:var(--color-text);color:var(--color-surface);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--fs-small);opacity:0;transform:translateY(12px);pointer-events:none;transition:all var(--motion-duration) var(--motion-easing);text-align:center}
.toast.on{opacity:1;transform:none}
.skel{height:72px;border-radius:var(--radius-md);background:linear-gradient(90deg,var(--color-surfaceAlt),var(--color-surface),var(--color-surfaceAlt));background-size:200%;animation:sh 1.2s infinite;margin-bottom:var(--space-2)}
@keyframes sh{to{background-position:-200%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}