:root{
  --bg:#0b0d10; --panel:#15181d; --panel2:#1d2128; --line:#2a2f38;
  --fg:#eef1f5; --muted:#8d96a5; --accent:#3b82f6; --rec:#ef4444; --ok:#22c55e;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  overscroll-behavior:none;
  padding-env:0;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.safe{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

/* --- лендинг --- */
.wrap{max-width:520px;margin:0 auto;padding:28px 20px 40px}
h1{font-size:26px;font-weight:650;letter-spacing:-.02em;margin:0 0 6px}
.sub{color:var(--muted);font-size:15px;margin:0 0 26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px}
.card h2{font-size:17px;margin:0 0 4px;font-weight:600}
.card p{margin:0 0 14px;color:var(--muted);font-size:14px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;font-size:16px}
.btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--fg)}
.btn:active{opacity:.75}
.code-in{width:100%;padding:16px;font-size:30px;letter-spacing:.4em;text-align:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--fg);
  font-variant-numeric:tabular-nums;font-weight:600}
.code-in:focus{outline:2px solid var(--accent);outline-offset:-1px}
.row{display:flex;gap:10px}
.hint{font-size:13px;color:var(--muted);line-height:1.5}
.hint b{color:var(--fg);font-weight:600}
ol.steps{margin:0;padding-left:20px;font-size:14px;color:var(--muted);line-height:1.7}
ol.steps b{color:var(--fg)}

/* --- статус --- */
.status{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:#6b7280;flex:none}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.dot.wait{background:#f59e0b;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}