:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#0a0f1b; color:#edf4ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -10%,#24375b 0,#101827 36%,#0a0f1b 72%); }
main { width:min(760px,100%); margin:auto; padding:clamp(24px,5vw,56px) 18px; }
.hidden { display:none!important; }
.card { background:rgba(20,31,51,.88); border:1px solid #2b3b57; border-radius:20px; box-shadow:0 18px 60px #0005; backdrop-filter:blur(14px); }
.login-card { width:min(420px,100%); margin:8vh auto 0; padding:36px; }
.logo { width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#42a5ff,#6a67ff);font-weight:900;letter-spacing:-1px;box-shadow:0 10px 28px #327bea55; }
.eyebrow { margin:28px 0 6px; color:#78bcff; text-transform:uppercase; letter-spacing:.15em; font-size:.72rem; font-weight:800; }
h1 { margin:0; font-size:clamp(2rem,7vw,3.2rem); letter-spacing:-.045em; }
.muted, small { color:#99a9bf; }
form { margin-top:28px; }
label { display:block; margin-bottom:8px; font-weight:700; }
input { width:100%; padding:15px 16px; border:1px solid #3b4d69; border-radius:12px; background:#0b1322; color:white; font:inherit; font-size:1.15rem; outline:none; }
input:focus { border-color:#65b5ff; box-shadow:0 0 0 4px #3899f52e; }
button { width:100%; margin-top:14px; padding:14px 18px; border:0; border-radius:12px; background:linear-gradient(135deg,#2d9cff,#625df5); color:white; font:inherit; font-weight:800; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
.error { color:#ff8e9d; min-height:1.3em; margin-bottom:0; }
header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
header .eyebrow { margin-top:0; }
button.secondary { width:auto; margin:0; background:#1b2940; border:1px solid #344965; }
.summary { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:20px; margin-bottom:18px; }
.summary strong,.summary small { display:block; }
.status-dot { width:13px;height:13px;border-radius:50%;background:#ef5e72;box-shadow:0 0 16px #ef5e72; }
.status-dot.online { background:#4de1a4;box-shadow:0 0 16px #4de1a4; }
.count { min-width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:#263957; font-size:1.2rem; font-weight:900; }
.channels { display:grid; gap:14px; }
.channel { overflow:hidden; }
.channel h2 { display:flex; justify-content:space-between; margin:0; padding:16px 20px; border-bottom:1px solid #2b3b57; font-size:1rem; }
.channel h2 span { color:#78bcff; }
.client { display:flex; align-items:center; gap:13px; padding:14px 20px; }
.client+.client { border-top:1px solid #26364f; }
.client strong,.client small { display:block; }
.avatar { width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#2d4263;color:#9fd0ff;font-weight:900; }
.empty,.center { padding:28px;text-align:center; }
.admin-panel { margin:0 0 18px; padding:22px; }
.panel-heading,.day-heading,.switch-row,.button-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-heading .eyebrow { margin:0 0 5px; }
.panel-heading h2 { margin:0; font-size:1.35rem; }
.admin-badge { padding:6px 10px; border-radius:999px; color:#a8d7ff; background:#263d61; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.push-device { padding:18px; margin:20px 0; background:#0d1727; border:1px solid #2b3b57; border-radius:15px; }
.push-device input { font-size:1rem; }
.button-row button { flex:1; }
.button-row .secondary { width:auto; margin-top:14px; }
.push-device small { display:block; margin-top:12px; }
.device-list { display:grid; gap:8px; margin-top:14px; }
.device-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 0; border-top:1px solid #26364f; }
.device-row strong,.device-row small { display:block; }
.remove-device { width:auto; margin:0; padding:8px 10px; background:#3a2635; color:#ffabba; }
.settings-form { margin-top:0; }
.switch-row { justify-content:flex-start; padding:14px 0 20px; cursor:pointer; }
.switch-row input { width:20px; height:20px; accent-color:#4d9fff; }
.schedule { display:grid; gap:10px; }
.day-row { padding:14px; background:#0d1727; border:1px solid #283a55; border-radius:14px; }
.text-button,.remove-window { width:auto; margin:0; padding:7px 10px; background:#203450; }
.time-windows { display:grid; gap:8px; margin-top:10px; }
.time-window { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:8px; }
.time-window input { min-width:0; padding:10px; font-size:1rem; }
.remove-window { color:#ff9ba9; font-size:1.2rem; }
.form-message { min-height:1.3em; color:#69dda9; text-align:center; }
@media(max-width:520px){.login-card{padding:28px 22px}header{align-items:center}header h1{font-size:1.8rem}.eyebrow{margin-top:18px}button.secondary{padding:11px 13px}.summary{padding:16px}.admin-panel{padding:17px}.button-row{display:grid;gap:0}.button-row .secondary{width:100%}.time-window{grid-template-columns:1fr auto 1fr auto}.time-window input{padding:9px 6px}}