:root{--bg:#f5f7fa;--panel:#fff;--text:#18212b;--muted:#6d7885;--line:#dfe5ea;--green:#2ea66f;--red:#df5a5a;--amber:#e6a93f;--blue:#4f7fd7;--soft:#eef2f5}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif}
.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.brand{font-weight:800}nav{display:flex;gap:18px;align-items:center}nav a,.linkbtn{color:var(--text);text-decoration:none;background:none;border:0;font:inherit}
.container{max-width:900px;margin:28px auto;padding:0 18px}.hero-card,.panel,.login-card,.stats-grid article{background:#fff;border:1px solid var(--line);border-radius:16px}
.hero-card{text-align:center;padding:28px}.eyebrow{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.12em}h1{font-size:32px;margin:8px 0 18px}
.status-dot{width:58px;height:58px;border-radius:50%;margin:16px auto}.present{background:var(--green)}.away{background:var(--red)}.paused{background:var(--amber)}
.muted{color:var(--muted)}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}button{border:0;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}
.success{background:var(--green);color:#fff}.danger{background:var(--red);color:#fff}.warning{background:var(--amber)}.secondary{background:var(--soft)}.primary{background:var(--blue);color:#fff}.full{width:100%}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.stats-grid article{padding:20px;text-align:center}.stats-grid span{display:block;color:var(--muted);font-size:12px;font-weight:700}.stats-grid strong{display:block;font-size:24px;margin-top:8px}
.panel{padding:20px;margin-top:14px}.event-row{display:grid;grid-template-columns:150px 1fr 120px;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.login-card{max-width:420px;margin:80px auto;padding:28px}label{display:block;font-weight:700;margin:14px 0 6px}input{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;font-size:16px;margin-top:6px}.alert{background:#fff2f2;padding:10px;border-radius:9px}
@media(max-width:700px){.stats-grid{grid-template-columns:1fr}.event-row{grid-template-columns:1fr}.topbar{height:auto;align-items:flex-start;flex-direction:column;padding:16px;gap:10px}}