
:root{
  --brand:#2f6bff;--brand-d:#1f56d6;--brand-t:#eef3ff;
  --ok:#0eaa5e;--ok-t:#e8faf0;--warn:#e8930c;--bad:#e5484d;--bad-t:#feecec;
  --ink:#0e1726;--sub:#5b6b82;--faint:#8b99ad;--line:#e5eaf1;--line2:#eef1f6;
  --bg:#f4f6fa;--r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter','Segoe UI',system-ui,sans-serif;background:
 radial-gradient(900px 400px at 85% -10%, #dfe9ff 0%, transparent 60%),
 var(--bg);color:var(--ink);font-size:14px;line-height:1.55;min-height:100vh}
a{color:var(--brand);text-decoration:none}
.top{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.logo{font-weight:800;font-size:16px;display:flex;align-items:center;gap:9px}
.lg{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#2f6bff,#7c5cff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.secure{font-size:11.5px;color:var(--sub);display:flex;gap:5px;align-items:center}
.shell{max-width:1060px;margin:26px auto;padding:0 20px 70px}

/* progress */
.prog{display:flex;align-items:center;margin-bottom:24px}
.pstep{display:flex;flex-direction:column;align-items:center;position:relative;flex:1}
.pstep .dot{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--sub);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:2}
.pstep.active .dot{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--brand-t)}
.pstep.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.pstep span{font-size:10.5px;color:var(--sub);margin-top:6px;font-weight:600;text-align:center}
.pbar{position:absolute;top:17px;left:50%;width:100%;height:3px;background:var(--line)}
.pbar.fill{background:var(--ok)}

/* card + steps */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 32px;box-shadow:0 1px 2px #0e17260a,0 10px 36px #0e17260b}
.step{display:none}.step.on{display:block}
h1{font-size:21px;font-weight:800;margin-bottom:4px}
.mut{color:var(--sub);font-size:13px;margin-bottom:20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{margin-bottom:14px}
label{display:block;font-size:12px;font-weight:700;color:var(--sub);margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:13.5px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px #2f6bff18}
.hint{font-size:11px;color:var(--faint);margin-top:4px}
.err{background:var(--bad-t);color:#bb2d33;border-radius:10px;padding:10px 14px;font-size:12.5px;margin-bottom:14px;display:none}
.err.show{display:block}

/* buttons */
.row{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:10px}
.btn{border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;padding:12px 22px;border-radius:10px;transition:.15s}
.b-next{background:var(--brand);color:#fff}
.b-next:hover{background:var(--brand-d)}
.b-back{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:6px}
.plan{border:2px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;position:relative;background:#fff}
.plan:hover{border-color:#c6d8ff}
.plan.sel{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-t)}
.plan .pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--warn);color:#fff;font-size:10px;font-weight:800;padding:3px 12px;border-radius:11px;letter-spacing:.04em}
.pn{font-weight:800;font-size:15px}
.pp{font-size:27px;font-weight:800;margin:7px 0 2px}
.pp small{font-size:12px;font-weight:500;color:var(--sub)}
.pf{font-size:11.5px;color:var(--sub);margin-top:8px;line-height:1.7}

/* test results */
.test{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.trow{display:flex;align-items:center;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line2);font-size:13px}
.trow:last-child{border:none}
.tick{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.tk-g{background:var(--ok-t);color:var(--ok)}
.tk-w{background:var(--warn-t);color:var(--warn)}
.tk-r{background:var(--bad-t);color:var(--bad)}
.spin{width:16px;height:16px;border:2.5px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:sp 0.7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.waiting{color:var(--faint)}

/* import table */
.imp{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:11px}
.imp table{width:100%;border-collapse:collapse;font-size:12.5px}
.imp th{text-align:left;padding:8px 12px;background:var(--bg);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);position:sticky;top:0}
.imp td{padding:7px 12px;border-bottom:1px solid var(--line2)}
.dup{color:var(--warn);font-weight:600;font-size:11px}
.new{color:var(--ok);font-weight:600;font-size:11px}

/* success */
.done{text-align:center;padding:26px 0}
.big{width:74px;height:74px;border-radius:50%;background:var(--ok-t);color:var(--ok);font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.urls{display:flex;gap:11px;justify-content:center;margin:18px 0}
.urlbox{background:var(--bg);border:1px dashed #c6d8ff;border-radius:11px;padding:12px 20px}
.urlbox b{display:block;font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.05em}
.urlbox a{font-weight:700;font-size:13.5px}

/* summary sidebar rows */
.srow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line2);font-size:13px}
.srow:last-child{border:none}
.note{background:var(--brand-t);border-left:3px solid var(--brand);padding:10px 14px;border-radius:8px;font-size:12px;color:#33415c;margin-bottom:16px}

@media(max-width:760px){.grid,.plans{grid-template-columns:1fr}}
