:root{
  --bg:#0a1628; --panel:#0d1e36; --panel2:#1a3050; --ink:#d0d8e8;
  --muted:#80b0c8; --gold:#f0a500; --green:#40e090; --red:#ff8060;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.screen{display:none;min-height:100vh;padding:24px;max-width:560px;margin:0 auto}
.screen.active{display:block}
.muted{color:var(--muted)} .tiny{font-size:12px}

/* Pair + login screens */
#pair,#login{display:none;flex-direction:column;gap:14px;justify-content:center}
#pair.active,#login.active{display:flex}
#login input{font-size:17px;padding:13px;background:var(--panel);border:1px solid var(--panel2);
  border-radius:10px;color:var(--ink)}
#login input:focus{outline:none;border-color:var(--gold)}
.brand{text-align:center;margin-bottom:8px}
.brand img{border-radius:18px}
.brand h1{margin:10px 0 2px;color:var(--gold);font-size:26px}
#pin{
  font-size:32px;letter-spacing:12px;text-align:center;padding:14px;
  background:var(--panel);border:1px solid var(--panel2);border-radius:10px;
  color:var(--ink);width:100%;
}
#pin:focus{outline:none;border-color:var(--gold)}
button{font-size:16px;border-radius:10px;border:1px solid var(--panel2);
  background:var(--panel2);color:var(--ink);padding:13px 16px;cursor:pointer}
button:active{transform:translateY(1px)}
.primary{background:var(--gold);color:#000;font-weight:700;border:none}
.ghost{background:transparent}
.status{min-height:20px;text-align:center}
.status.err{color:var(--red)} .status.ok{color:var(--green)}

/* App screen */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.company{color:var(--gold);font-weight:700;font-size:18px}
.link{font-size:12px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--panel2);border-radius:14px;
  padding:18px 8px;font-size:24px}
.card span{font-size:13px;color:var(--ink)}
.output{margin-top:20px;background:var(--panel);border:1px solid var(--panel2);
  border-radius:12px;padding:14px;min-height:120px}
#out{white-space:pre-wrap;word-break:break-word;font-size:13px;margin:8px 0 0;color:var(--green)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.green{background:var(--green)} .dot.amber{background:var(--gold)} .dot.red{background:var(--red)}