:root{--bg:#eef3f1;--card:#fff;--tx:#12231f;--mut:#566761;--ln:#d3ddd9;--sun:#f2b705;--ok:#0f766e;--bad:#c92a2a}
@media (prefers-color-scheme:dark){:root{--bg:#0a1412;--card:#112321;--tx:#e6f1ed;--mut:#8fa59f;--ln:#22393a;--sun:#f2c230;--ok:#34d1b6;--bad:#ff8787}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--tx);font:16px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;margin:0 0 6px;line-height:1.1}
.center{display:grid;place-items:center;min-height:100vh;padding:24px 16px}
.card{width:100%;max-width:400px;background:var(--card);border-radius:18px;padding:26px 22px;box-shadow:0 0 0 1px var(--ln)}
.wrap{max-width:720px;margin:0 auto;padding:24px 16px}
p.mut{color:var(--mut);margin:0 0 18px;font-size:.95rem}
label{display:block;font-size:.85rem;font-weight:600;margin:12px 0 4px}
input[type=text],input[type=password]{width:100%;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--ln);background:var(--bg);color:var(--tx)}
input:focus{outline:none;border-color:var(--ok)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.chk{display:flex;gap:8px;align-items:center;font-weight:500}
button,.btn{font:inherit;font-size:.9rem;padding:8px 16px;border-radius:99px;border:0;box-shadow:inset 0 0 0 1px var(--ln);background:var(--card);color:var(--tx);cursor:pointer;text-decoration:none;display:inline-block}
button.pri{background:var(--ok);color:#fff;box-shadow:none;font-weight:600;width:100%;margin-top:18px;padding:11px}
button:disabled{opacity:.6;cursor:wait}
.msg{min-height:1.4em;margin:10px 0 0;font-size:.9rem;color:var(--bad)}
.msg.ok{color:var(--ok)}
.top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.top h1{margin-right:auto}
.panel{background:var(--card);border-radius:18px;padding:20px;box-shadow:0 0 0 1px var(--ln);margin-bottom:16px}
ul.users{list-style:none;margin:0;padding:0}
ul.users li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--ln)}
ul.users li:first-child{border-top:0}
ul.users b{margin-right:auto}
.tag{font-size:.75rem;padding:1px 8px;border-radius:99px;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);font-weight:600}
button.del{color:var(--bad)}
.alt{margin:14px 0 0;font-size:.9rem;color:var(--mut);text-align:center}
button.link{background:none;box-shadow:none;padding:0;color:var(--ok);font-weight:600;text-decoration:underline}
.tag.wait{background:color-mix(in srgb,var(--sun) 25%,transparent);color:inherit}
.tag.off{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
button.ok{color:var(--ok);font-weight:600}
.badge{display:inline-block;min-width:1.4em;margin-left:6px;padding:0 6px;border-radius:99px;background:var(--sun);color:#12231f;font-size:.75rem;font-weight:700;text-align:center}
p.empty{color:var(--mut);margin:0;font-size:.9rem}
ul.users .mut{color:var(--mut);font-size:.85rem}