:root{--color-bg: #f5f6f8;--color-surface: #ffffff;--color-border: #dfe3e8;--color-text: #1a1d21;--color-muted: #5f6773;--color-primary: #b91c1c;--color-primary-dark: #8f1515;--color-danger: #b91c1c;--color-success: #1a7f37;--color-warning: #b45309;--radius: 10px;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--color-bg);color:var(--color-text);-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer}a{color:var(--color-primary)}.app-shell{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:10}.topbar-title{font-weight:700;font-size:1.05rem}.topbar-nav{display:flex;gap:.5rem;flex-wrap:wrap}.topbar-nav a,.topbar-nav button{text-decoration:none;font-size:.9rem;padding:.4rem .7rem;border-radius:var(--radius);color:var(--color-text);border:1px solid transparent;background:transparent}.topbar-nav a.active,.topbar-nav a:hover,.topbar-nav button:hover{background:var(--color-bg);border-color:var(--color-border)}main.page{flex:1;padding:1rem;max-width:960px;width:100%;margin:0 auto}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}.card h2,.card h3{margin-top:0}.stack{display:flex;flex-direction:column;gap:.75rem}.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.field{display:flex;flex-direction:column;gap:.3rem}.field label{font-size:.85rem;color:var(--color-muted)}input[type=text],input[type=password],input[type=search],select,textarea{padding:.55rem .65rem;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}.btn{padding:.6rem 1rem;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);font-weight:600}.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-outline{background:transparent}.btn-danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:.35rem .6rem;font-size:.85rem}.error-text{color:var(--color-danger);font-size:.9rem}.muted{color:var(--color-muted)}.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:999px;font-size:.8rem;font-weight:600}.badge-success{background:#e6f4ea;color:var(--color-success)}.badge-danger{background:#fbe9e9;color:var(--color-danger)}.badge-warning{background:#fdf1e0;color:var(--color-warning)}.badge-muted{background:#eceff2;color:var(--color-muted)}.offline-banner{background:var(--color-warning);color:#fff;text-align:center;padding:.5rem;font-size:.9rem;font-weight:600}.timer{font-variant-numeric:tabular-nums;font-size:2.4rem;font-weight:800;letter-spacing:.02em}.status-hero{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.status-hero.state-clear{color:var(--color-success)}.status-hero.state-active{color:var(--color-danger)}.roster-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.roster-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .75rem;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.roster-row .name{font-weight:600}.mark-buttons{display:flex;gap:.4rem}.mark-btn{padding:.4rem .7rem;border-radius:8px;border:1px solid var(--color-border);background:#fff;font-weight:700;font-size:.85rem}.mark-btn.active.here{background:var(--color-success);border-color:var(--color-success);color:#fff}.mark-btn.active.absent{background:var(--color-danger);border-color:var(--color-danger);color:#fff}.mark-btn.active.other{background:var(--color-warning);border-color:var(--color-warning);color:#fff}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--color-border);font-size:.9rem}.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--color-border);margin-bottom:1rem}.tabs button{background:none;border:none;padding:.6rem .9rem;font-weight:600;color:var(--color-muted);border-bottom:2px solid transparent}.tabs button.active{color:var(--color-primary);border-color:var(--color-primary)}.centered-form{max-width:380px;margin:3rem auto}.temp-password-box{background:#fff8e1;border:1px solid #f0c36d;border-radius:8px;padding:.75rem;font-family:ui-monospace,monospace}