:root{
  --green:#075E54; --green2:#128C7E; --accent:#25D366; --bg:#0b141a;
  --card:#111b21; --line:#22303a; --txt:#e9edef; --muted:#8696a0; --warn:#f0b429; --bad:#e05252;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0b141a,#0e1a20 60%,#0b141a);color:var(--txt);min-height:100vh}
a{color:var(--accent)}
.wrap{max-width:520px;margin:0 auto;padding:18px 16px 60px}
.brand{display:flex;gap:12px;align-items:center;padding:14px 0 18px;border-bottom:1px solid var(--line)}
.brand img{width:52px;height:52px;border-radius:14px;object-fit:cover;background:#0d2b23;border:1px solid var(--line)}
.brand .ph{width:52px;height:52px;border-radius:14px;background:#0d2b23;display:grid;place-items:center;font-weight:800;color:var(--accent);border:1px solid var(--line)}
.brand h1{font-size:14px;margin:0;line-height:1.35;font-weight:700}
.brand p{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
h2{font-size:19px;margin:26px 0 8px}
p.lead{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
input[type=text],input[type=tel],input[type=password]{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0b141a;color:var(--txt);font-size:15px;outline:none}
input:focus{border-color:var(--accent)}
button{font-family:inherit;cursor:pointer;border:0;border-radius:12px;font-weight:700;font-size:15px;padding:14px;width:100%}
.btn{background:var(--accent);color:#04120a}
.btn:disabled{opacity:.45}
.btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--line)}
.hide{display:none!important}
.ring{position:relative;width:150px;height:150px;margin:8px auto 4px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) var(--p,100%),#1b2a32 0)}
.ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card)}
.ring .in{position:relative;z-index:2;text-align:center}
.code{font-size:31px;letter-spacing:5px;font-weight:800;font-family:ui-monospace,Menlo,monospace}
.ring .lbl{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.steps{display:flex;gap:6px;margin:18px 0 4px}
.steps i{height:3px;flex:1;border-radius:3px;background:#1b2a32}
.steps i.on{background:var(--accent)}
ol.how{font-size:13.5px;color:var(--muted);line-height:1.75;padding-left:20px;margin:6px 0 0}
ol.how b{color:var(--txt)}
.cand{display:flex;gap:13px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px;margin:10px 0;cursor:pointer;transition:.15s}
.cand.sel{border-color:var(--accent);background:#0f2119;box-shadow:0 0 0 1px var(--accent) inset}
.cand img,.cand .ini{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 48px;background:#0d2b23;
  display:grid;place-items:center;font-weight:800;color:var(--accent);border:1px solid var(--line)}
.cand h3{margin:0;font-size:14.5px}
.cand .tag{font-size:11px;color:var(--accent);font-weight:700;letter-spacing:.4px}
.cand p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tick{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:0 0 22px;display:grid;place-items:center;font-size:13px;color:#04120a}
.cand.sel .tick{background:var(--accent);border-color:var(--accent)}
.ok{width:86px;height:86px;border-radius:50%;background:#0f2119;border:2px solid var(--accent);display:grid;place-items:center;margin:10px auto 16px;font-size:42px;color:var(--accent)}
.big{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;text-align:center;letter-spacing:1px}
.mid{text-align:center}
.bar{height:9px;border-radius:9px;background:#1b2a32;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:.6s}
.res{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.res:last-child{border:0}
.res .nm{font-size:13.5px;font-weight:600}
.res .vt{font-size:12px;color:var(--muted)}
.res .pc{margin-left:auto;font-weight:800;font-size:13px;color:var(--accent)}
.note{font-size:12px;color:var(--muted);line-height:1.6;background:#0d1a20;border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.err{color:var(--bad);font-size:12.5px;margin-top:10px}
.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:20px;z-index:50}
.modal .box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;max-width:380px;width:100%}
.modal h3{margin:0 0 8px;font-size:17px}
.modal p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 18px}
.row{display:flex;gap:10px;margin-top:6px}
.foot{text-align:center;font-size:11px;color:#5c6b73;margin-top:26px}