:root{--c-bg: #f8fafc;--c-surface: #ffffff;--c-border: #e2e8f0;--c-text: #0f172a;--c-muted: #64748b;--c-present: #16a34a;--c-present-bg: #dcfce7;--c-late: #d97706;--c-late-bg: #fef3c7;--c-leave: #2563eb;--c-leave-bg: #dbeafe;--c-absent: #dc2626;--c-absent-bg: #fee2e2;--c-primary: #2563eb;--c-primary-text: #ffffff;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-6: 1.5rem;--radius: .75rem;--tap: 2.75rem}*{box-sizing:border-box}body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:system-ui,-apple-system,Noto Sans TC,sans-serif;font-size:1rem;line-height:1.5;-webkit-text-size-adjust:100%}.page{max-width:48rem;margin:0 auto;padding:calc(var(--sp-4) + env(safe-area-inset-top)) calc(var(--sp-4) + env(safe-area-inset-right)) calc(var(--sp-6) + env(safe-area-inset-bottom)) calc(var(--sp-4) + env(safe-area-inset-left))}.topbar{position:sticky;top:0;z-index:10;background:var(--c-bg);padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--c-border);margin-bottom:var(--sp-4)}.topbar__line{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) 0}.title{font-size:1.25rem;margin:0}.progress{font-variant-numeric:tabular-nums;font-weight:600}.badges{display:flex;gap:var(--sp-2);flex-wrap:wrap}.badge{padding:var(--sp-1) var(--sp-3);border-radius:999px;font-size:.875rem;background:#f1f5f9;color:var(--c-muted)}.badge--online{background:var(--c-present-bg);color:var(--c-present)}.badge--offline{background:var(--c-absent-bg);color:var(--c-absent)}.badge--pending{background:var(--c-late-bg);color:var(--c-late)}.field{display:block;margin-bottom:var(--sp-3)}.field__row{display:flex;gap:var(--sp-2);align-items:stretch}.field__row .btn{flex:0 0 auto}.field__label{display:block;font-size:.875rem;color:var(--c-muted);margin-bottom:var(--sp-1)}.select,.input{width:100%;min-height:var(--tap);font-size:1rem;font-family:inherit;padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);color:inherit}.select:focus-visible,.input:focus-visible{outline:2px solid var(--c-primary);outline-offset:1px}.btn{min-height:var(--tap);min-width:var(--tap);font-size:1rem;font-family:inherit;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius);border:1px solid var(--c-border);background:var(--c-surface);color:inherit;cursor:pointer;transition:transform 80ms ease,background-color 80ms ease}.btn:active{transform:scale(.97)}.btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:default}.btn--primary{width:100%;background:var(--c-primary);border-color:var(--c-primary);color:var(--c-primary-text);font-weight:600}.btn--state[data-state=present]{background:var(--c-present-bg);color:var(--c-present);border-color:var(--c-present-bg)}.btn--state[data-state=late]{background:var(--c-late-bg);color:var(--c-late);border-color:var(--c-late-bg)}.btn--state[data-state=leave]{background:var(--c-leave-bg);color:var(--c-leave);border-color:var(--c-leave-bg)}.btn--state[data-state=absent]{background:var(--c-absent-bg);color:var(--c-absent);border-color:var(--c-absent-bg)}.btn--state[aria-pressed=true]{outline:2px solid currentColor;outline-offset:-2px;font-weight:600}.roster{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-2)}.row{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}.row__toggle{width:100%;min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3);background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}.row__toggle:active{background:#f1f5f9}.row__toggle:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}.row__name{font-size:1.0625rem}.chip{padding:var(--sp-1) var(--sp-3);border-radius:999px;font-size:.9375rem;font-style:normal;white-space:nowrap;background:#f1f5f9;color:var(--c-muted)}.chip[data-state=present]{background:var(--c-present-bg);color:var(--c-present)}.chip[data-state=late]{background:var(--c-late-bg);color:var(--c-late)}.chip[data-state=leave]{background:var(--c-leave-bg);color:var(--c-leave)}.chip[data-state=absent]{background:var(--c-absent-bg);color:var(--c-absent)}.row__actions{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2);padding:0 var(--sp-3) var(--sp-3)}.notice{padding:var(--sp-4);text-align:center;color:var(--c-muted)}.notice--warn{margin-bottom:var(--sp-3);padding:var(--sp-3);text-align:left;border:1px solid var(--c-late);border-radius:var(--radius);background:var(--c-late-bg);color:#78350f;line-height:1.5}.error{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);border:1px solid var(--c-absent);border-radius:var(--radius);background:var(--c-absent-bg);color:#7f1d1d}.hint{color:var(--c-muted);line-height:1.6}.panel{margin-top:var(--sp-6);border-top:1px solid var(--c-border);padding-top:var(--sp-3)}.panel__toggle{min-height:var(--tap);background:none;border:0;padding:0;font:inherit;color:var(--c-muted);cursor:pointer}.panel__toggle:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}.events{list-style:none;padding:0;margin:var(--sp-2) 0 0;font-size:.875rem;color:var(--c-muted)}.events li{padding:var(--sp-1) 0;border-bottom:1px dashed var(--c-border)}