:root{--bg:#0d1117; --panel:#161b22; --border:#283039; --accent:#2f81f7;
  --on:#2ea043; --warn:#d29922; --bad:#f85149; --muted:#8b949e; --text:#e6edf3;}
html,body{background:var(--bg); color:var(--text);}
body{font-family:-apple-system,'Segoe UI',Roboto,system-ui,sans-serif; margin:0;
  padding-bottom:env(safe-area-inset-bottom);}
.wrap{max-width:640px; margin:0 auto; padding:0 16px;}
main.wrap{padding-bottom:40px;}
.topbar{position:sticky; top:0; z-index:5; background:rgba(13,17,23,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); padding:10px 0; padding-top:calc(10px + env(safe-area-inset-top));}
.brand{display:flex; align-items:center; gap:8px; font-weight:650; color:var(--text); text-decoration:none; margin-right:8px;}
.navlink{color:var(--muted); text-decoration:none; padding:6px 10px; border-radius:8px; font-size:14.5px;}
.navlink.active{background:#21262d; color:var(--text);}
@media (max-width:420px){ .navlink span{display:none;} .brand span{display:none;} }
.center{min-height:85vh; display:flex; align-items:center; justify-content:center;}
.cardx{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; margin-top:12px;}
.cardx.narrow{width:100%; max-width:400px; padding:26px 22px;}
.h1x{font-size:22px; font-weight:650; letter-spacing:-.3px;}
.h2x{font-size:19px; font-weight:650; line-height:1.25;}
.sub{color:var(--muted); font-size:14px;}
.muted{color:var(--muted); font-size:13px;}
.lbl{font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:600; margin-bottom:10px;}
.err{color:#ff8079; min-height:22px; font-size:14px; margin-top:8px;}
.hero{display:flex; align-items:center; gap:14px;}
.orb{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:27px; flex:none;}
.orb.on{background:rgba(46,160,67,.15); color:var(--on);}
.orb.play{background:rgba(210,153,34,.15); color:var(--warn);}
.orb.off{background:#21262d; color:var(--muted);}
.big{font-size:34px; font-weight:700; letter-spacing:-.5px;}
.big small{font-size:15px; color:var(--muted); font-weight:500;}
.progress{height:12px; background:#21262d; margin:8px 0 6px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.bigbtn{padding:13px 6px; font-size:16px; font-weight:600; border-radius:12px;}
.seg{display:grid; grid-template-columns:1fr 1fr; background:#0d1117; border:1px solid var(--border); border-radius:12px; padding:4px;}
.seg button{border:0; background:none; color:var(--muted); padding:11px 6px; border-radius:9px; font-size:14.5px; font-weight:600;}
.seg button.active{background:var(--accent); color:#fff;}
.form-switch .form-check-input{width:3.4em; height:1.85em;}
.form-check-input:checked{background-color:var(--on); border-color:var(--on);}
.form-control,.form-control:focus,.form-select{background-color:#0d1117; border-color:var(--border); color:var(--text);}
.form-control{font-size:16px;}
.days{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.days label{font-size:12px; color:var(--muted); display:block; text-align:center; margin-bottom:2px;}
.days input{text-align:center;}
.code-input{font-family:Consolas,monospace; letter-spacing:2px; text-transform:uppercase; text-align:center;}
.mono{font-family:Consolas,monospace; font-size:13px;}
.row-item{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border);}
.row-item:first-child{border-top:0;}
.dev{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text);}
.dev .orb{width:46px; height:46px; font-size:22px;}
.pill{font-size:12px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap;}
.pill.on{background:rgba(46,160,67,.15); color:#5dd57e;}
.pill.off{background:#21262d; color:var(--muted);}
.pill.wait{background:rgba(210,153,34,.15); color:#e3b341;}
.pill.bad{background:rgba(248,81,73,.13); color:#ff8079;}
.ev{display:flex; gap:10px; font-size:13.5px; padding:7px 0; border-top:1px solid var(--border);}
.ev:first-child{border-top:0;}
.ev .t{color:var(--muted); font-size:12px; flex:none; width:80px; padding-top:1px;}
.offline-banner{margin-top:12px; border-radius:12px; padding:11px 14px; font-size:13.5px;
  background:rgba(210,153,34,.1); border:1px solid rgba(210,153,34,.35); color:#e3b341;}
details summary{cursor:pointer; font-weight:600; list-style:none;}
details summary::-webkit-details-marker{display:none;}
details[open] summary .bi-chevron-down{transform:rotate(180deg);}
#toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:#21262d; border:1px solid var(--border); border-radius:12px; padding:11px 16px; font-size:14.5px;
  opacity:0; transition:.2s; pointer-events:none; max-width:90%; z-index:20;}
#toast.show{opacity:1;} #toast.err{color:#ff8079; border-color:rgba(248,81,73,.5);}
.busy{opacity:.55; pointer-events:none;}
.ev .pill{flex:none; align-self:flex-start;}