:root { color-scheme: dark; font-family: Inter, "Yu Gothic UI", system-ui, sans-serif; background:#0c0e12; color:#f3f4f6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at top,#202633 0,#0c0e12 55%); }
.card { width:min(100%,390px); padding:30px; border:1px solid #2c313c; border-radius:22px; background:rgba(24,27,34,.94); box-shadow:0 24px 70px #0008; }
.card[hidden] { display:none; }
.dashboard[hidden] { display:none; }
.dashboard { width:min(100%,820px); }
.dashboard-header { display:flex; align-items:center; justify-content:space-between; margin:0 4px 20px; }
.participants { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.participant { width:100%; }
.participant h1 { margin-top:0; }
.dashboard .logout { position:static; }
@media (max-width:650px) { .participants { grid-template-columns:1fr; } }
.card { position:relative; }
.brand { color:#aeb5c2; letter-spacing:.04em; }
h1 { margin:20px 0 12px; font-size:1.15rem; font-weight:600; }
.status { display:flex; align-items:center; gap:12px; font-size:1.75rem; font-weight:750; margin:0 0 28px; }
.dot { width:14px; height:14px; border-radius:50%; background:#737985; box-shadow:0 0 18px currentColor; }
.online .dot { background:#3ddc84; color:#3ddc84; }.idle .dot { background:#f3c969; color:#f3c969; }.offline .dot { background:#737985; color:#737985; }
section { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid #2a2e37; color:#9da4b2; }
section strong { color:#e6e8ec; text-align:right; font-weight:550; }
.error { min-height:1.2em; margin:14px 0 0; color:#ef9a9a; font-size:.85rem; }
.login-help { color:#9da4b2; line-height:1.6; }
.google-button { width:100%; background:#f3f4f6; color:#202124; margin:10px 0 20px; }
form { display:grid; gap:16px; margin-top:22px; }
label { display:grid; gap:7px; color:#b8bec9; font-size:.9rem; }
input { width:100%; border:1px solid #363c48; border-radius:10px; padding:12px; background:#101218; color:#f3f4f6; font:inherit; }
input:focus { outline:2px solid #6ba4ff; outline-offset:1px; }
button { border:0; border-radius:10px; padding:12px 16px; background:#4f8cff; color:white; font:inherit; font-weight:700; cursor:pointer; }
button:disabled { opacity:.6; cursor:wait; }
.logout { position:absolute; top:20px; right:20px; padding:7px 10px; background:transparent; color:#9da4b2; font-size:.78rem; font-weight:500; }
@media (max-width:420px) { .card { padding:24px; border-radius:18px; }.status { font-size:1.5rem; } }