:root{
  --brand:#1f6fd6;
  --brand-ink:#0f4ea3;
  --bg:#f4f6f9;
  --card:#ffffff;
  --ink:#16202c;
  --muted:#667085;
  --line:#e5e9f0;
  --ok:#1a9d5a;
  --warn:#c77700;
  --err:#d23f3f;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,32,44,.06),0 6px 20px rgba(16,32,44,.06);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-text-size-adjust:100%;line-height:1.45;
}
h1,h2{margin:0;font-weight:650}
a{color:var(--brand)}
input,button{font:inherit}

/* ---------- Auth ---------- */
body.auth{display:flex;min-height:100dvh;align-items:center;justify-content:center;padding:24px}
.auth-card{
  width:100%;max-width:400px;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px 24px calc(24px + var(--safe-bottom));
}
.brand{text-align:center;margin-bottom:18px}
.brand-logo{
  width:92px;height:92px;margin:0 auto 12px;display:block;object-fit:contain;
}
.brand h1{font-size:19px}
.brand .sub{color:var(--muted);margin:2px 0 0;font-size:14px}
.form{display:flex;flex-direction:column;gap:6px}
.form label{font-size:13px;color:var(--muted);margin-top:8px}
.form input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  background:#fbfcfe;font-size:16px;/* 16px avoids iOS zoom */
}
.form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,111,214,.15)}
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap.grow{flex:1}
.pw-wrap input{width:100%;padding-right:62px}
.pw-toggle{
  position:absolute;right:8px;border:0;background:transparent;color:var(--brand);
  font-size:13px;font-weight:600;padding:6px;cursor:pointer
}
.btn{
  border:0;border-radius:12px;padding:13px 16px;font-weight:650;font-size:16px;cursor:pointer;
  background:#eef1f6;color:var(--ink)
}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-ink));color:#fff;margin-top:16px}
.btn.primary:active{transform:translateY(1px)}
.btn.small{padding:11px 14px;font-size:14px;background:var(--brand);color:#fff;flex:0 0 auto}
.btn[disabled]{opacity:.55;cursor:default}
.foot{color:var(--muted);font-size:12.5px;text-align:center;margin-top:18px}
.alert{border-radius:12px;padding:11px 13px;font-size:14px;margin-bottom:6px}
.alert.error{background:#fdecec;color:var(--err);border:1px solid #f7cfcf}

/* ---------- App ---------- */
.topbar{
  position:sticky;top:0;z-index:5;
  background:var(--card);border-bottom:1px solid var(--line);
  padding-top:var(--safe-top);
}
.topbar-in{max-width:620px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:12px 16px}
.topbar-logo{height:32px;width:auto;display:block;flex:0 0 auto}
.who{margin-left:auto;color:var(--muted);font-size:13px;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout{font-size:13px;font-weight:600;text-decoration:none}
.wrap{max-width:620px;margin:0 auto;padding:16px 16px calc(40px + var(--safe-bottom))}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:14px
}

/* status */
.status-row{display:flex;gap:12px;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;background:#c3c9d4;flex:0 0 auto;box-shadow:0 0 0 4px rgba(0,0,0,.03)}
.dot.online{background:var(--ok);box-shadow:0 0 0 4px rgba(26,157,90,.15)}
.dot.offline{background:var(--err);box-shadow:0 0 0 4px rgba(210,63,63,.15)}
.status-title{font-weight:650}
.status-sub{color:var(--muted);font-size:13px}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.meta div{min-width:0}
.meta dt{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.meta dd{margin:2px 0 0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* band card */
.band-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.band-name{font-size:17px}
.field{margin-top:14px}
.field>label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.row{display:flex;gap:8px;align-items:center}
.row input[type=text],.row .pw-wrap input{
  flex:1;min-width:0;width:100%;padding:12px 13px;border:1px solid var(--line);
  border-radius:12px;background:#fbfcfe;font-size:16px
}
.row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,111,214,.15)}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0;min-height:0}
.hint.err{color:var(--err)}

/* switch */
.switch{position:relative;display:inline-block;width:46px;height:28px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#cfd6e0;border-radius:999px;transition:.2s}
.slider::before{content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked+.slider{background:var(--ok)}
.switch input:checked+.slider::before{transform:translateX(18px)}
.switch input:disabled+.slider{opacity:.5}

/* skeleton */
.skeleton .sk-line{height:12px;border-radius:6px;background:linear-gradient(90deg,#eef1f6 25%,#e3e8f0 37%,#eef1f6 63%);background-size:400% 100%;animation:sh 1.3s infinite;margin:10px 0}
.w40{width:40%}.w60{width:60%}.w80{width:80%}
@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* connected devices */
.refresh{border:0;background:transparent;color:var(--brand);font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:8px}
.refresh.spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.device{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.device:first-child{border-top:0}
.dev-icon{width:34px;height:34px;border-radius:9px;background:#eef2f8;display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.dev-main{flex:1;min-width:0}
.dev-name{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-sub{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.support-note{color:var(--muted);font-size:12.5px;text-align:center;margin-top:6px}

/* toast */
/* floating WhatsApp support button */
.wa-fab{
  position:fixed;right:16px;bottom:calc(16px + var(--safe-bottom));z-index:30;
  width:56px;height:56px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-fab:active{transform:scale(.94)}
.wa-fab svg{width:32px;height:32px;fill:#fff}
@media (min-width:620px){ .wa-fab{right:24px} }

.toast{
  position:fixed;left:50%;bottom:calc(84px + var(--safe-bottom));transform:translate(-50%,20px);
  background:#16202c;color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;
  max-width:88vw;text-align:center;opacity:0;pointer-events:none;transition:.25s;z-index:20;box-shadow:var(--shadow)
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:#14663c}
.toast.warn{background:#8a5500}
.toast.err{background:#9d2b2b}

@media (prefers-color-scheme:dark){
  :root{--bg:#0f141b;--card:#161d27;--ink:#e8edf4;--muted:#9aa6b6;--line:#26303d}
  .form input,.row input[type=text],.row .pw-wrap input{background:#0f141b;color:var(--ink)}
  .btn{background:#222c3a;color:var(--ink)}
}