:root{
  --bg:#090d18;
  --card:#111827;
  --card2:#151f33;
  --text:#f5f7fb;
  --muted:#9aa5b8;
  --line:#263146;
  --accent:#8fd4ff;
  --accent2:#ff6fae;
  --danger:#ff7070;
  --ok:#8affc1;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,#16243e 0,#090d18 42%,#050711 100%);color:var(--text);min-height:100vh}
button,input,textarea,select{font:inherit}
.login-shell,.app-shell{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:28px 0 48px}
.login-shell{min-height:100vh;display:grid;place-items:center}
.login-card{width:min(420px,100%);background:rgba(17,24,39,.88);border:1px solid var(--line);border-radius:28px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.38);text-align:center}
.brand-dot{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));margin:0 auto 14px;box-shadow:0 0 40px rgba(143,212,255,.28)}
h1,h2,p{margin-top:0}h1{font-size:32px;margin-bottom:4px}h2{font-size:22px;margin-bottom:8px}p{color:var(--muted);line-height:1.45}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.alert{padding:10px 12px;border-radius:14px;background:rgba(255,112,112,.12);color:#ffc8c8;border:1px solid rgba(255,112,112,.28);margin-bottom:16px}
.pattern-wrap{position:relative;width:270px;height:270px;margin:24px auto}.pattern-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;touch-action:none}.pattern-lines{position:absolute;inset:0;z-index:0;overflow:visible}.pattern-lines line{stroke:var(--accent);stroke-width:5;stroke-linecap:round;opacity:.75}.pattern-node{position:relative;z-index:1;border:1px solid var(--line);background:#0d1424;border-radius:50%;color:var(--muted);display:grid;place-items:center;cursor:pointer}.pattern-node span{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:12px}.pattern-node.active{border-color:var(--accent);box-shadow:0 0 28px rgba(143,212,255,.22);color:var(--text)}.pattern-node.active span{background:var(--accent);color:#07101c}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.logout{color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:10px 14px}.logout:hover{color:var(--text);border-color:var(--accent)}
.status{padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(17,24,39,.75);color:var(--muted);margin-bottom:18px}.status.ok{color:var(--ok)}.status.err{color:#ffd0d0}
.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:rgba(17,24,39,.88);border:1px solid var(--line);border-radius:24px;padding:22px;margin-bottom:18px;box-shadow:0 24px 70px rgba(0,0,0,.22)}
label{display:block;color:#d8deea;font-size:13px;margin:12px 0 7px}input[type=text],input[type=time],input[type=date],textarea,select{width:100%;background:#0a1020;border:1px solid var(--line);color:var(--text);border-radius:14px;padding:12px 13px;outline:none}textarea{resize:vertical}input[type=color]{width:64px;height:44px;padding:3px;background:#0a1020;border:1px solid var(--line);border-radius:12px}input[type=range]{width:100%;accent-color:var(--accent)}input:focus,textarea:focus,select:focus{border-color:var(--accent)}
.form-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.form-row>div{min-width:140px}.align-end{align-items:flex-end}.btn{border:0;background:linear-gradient(135deg,#59c4ff,#ff6fae);color:#06101d;font-weight:700;border-radius:14px;padding:12px 16px;cursor:pointer;box-shadow:0 14px 34px rgba(89,196,255,.14);margin-top:14px}.btn.secondary{background:#0d1424;color:var(--text);border:1px solid var(--line);box-shadow:none}.btn.danger{background:rgba(255,112,112,.16);color:#ffc2c2;border:1px solid rgba(255,112,112,.28);box-shadow:none}.btn.small{padding:9px 11px;margin-top:0;font-size:13px}.btn:disabled{opacity:.55;cursor:not-allowed}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0}.toggle-row small{display:block;color:var(--muted);margin-top:3px}.switch{margin:0}.switch input{display:none}.switch span{display:block;width:56px;height:32px;border-radius:999px;background:#0a1020;border:1px solid var(--line);position:relative;cursor:pointer}.switch span:before{content:"";position:absolute;width:24px;height:24px;left:4px;top:3px;border-radius:50%;background:#6d778b;transition:.2s}.switch input:checked+span{background:rgba(143,212,255,.16);border-color:var(--accent)}.switch input:checked+span:before{transform:translateX(23px);background:var(--accent)}hr{border:0;border-top:1px solid var(--line);margin:18px 0}.winner{margin-top:14px;font-size:18px;font-weight:700;color:#ffd34d}.alarm-form{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr .8fr 1fr auto;gap:12px;align-items:end}.alarms-list{display:grid;gap:12px;margin-top:20px}.alarm-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#0a1020;border:1px solid var(--line);border-radius:16px;padding:14px}.alarm-title{display:flex;align-items:center;gap:10px}.color-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}.alarm-meta{color:var(--muted);font-size:13px;margin-top:3px}.alarm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:860px){.grid.two{grid-template-columns:1fr}.alarm-form{grid-template-columns:1fr 1fr}.alarm-form .btn{grid-column:1/-1}.alarm-item{align-items:flex-start;flex-direction:column}.alarm-actions{justify-content:flex-start}.topbar{align-items:flex-start;gap:14px}}
@media(max-width:520px){.login-shell,.app-shell{width:min(100% - 18px,1120px);padding-top:18px}.card,.login-card{border-radius:20px;padding:18px}.pattern-wrap{width:236px;height:236px}.pattern-grid{gap:22px}.alarm-form{grid-template-columns:1fr}.form-row{align-items:stretch}.form-row>div{width:100%}.btn{width:100%}}