:root{
  --ink:#171717; --muted:#6b7280; --line:#e5e7eb; --bg:#fdfdfd; --ok:#0f7b3f; --warn:#c2410c; --card:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  color:var(--ink); background:var(--bg); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.top{padding:22px 20px 6px; max-width:520px; margin:0 auto}
.logo{display:block; height:22px; width:auto}
.wrap{max-width:520px; margin:0 auto; padding:8px 16px 40px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 22px 22px; position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(23,23,23,.04)}
.progress{position:absolute; inset:0 0 auto 0; height:3px; background:#f1f2f4}
.progress span{display:block; height:100%; width:0; background:var(--ink); transition:width .35s ease}
h1{font-size:22px; line-height:1.28; margin:6px 0 6px; letter-spacing:-.3px; font-weight:600}
.sub{margin:0 0 16px; color:var(--muted); font-size:14.5px}
.sub b{color:var(--ink); word-break:break-all; font-weight:600}
.device{display:flex; gap:12px; align-items:center; background:#fafafa; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 18px}
.device-ico{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:#f1f2f4;color:var(--ink);display:grid;place-items:center}
.device-ico svg{width:19px;height:19px}
.device-txt{display:flex; flex-direction:column; min-width:0}
.device-txt strong{font-size:14px; font-weight:600}
.device-txt span{font-size:12.5px; color:var(--muted)}
.fld{display:block; margin:0 0 14px}
.fld > span{display:block; font-size:13px; font-weight:500; margin:0 0 6px; color:#374151}
.fld > span i{font-weight:400; font-style:normal; color:var(--muted)}
input{
  width:100%; padding:13px 14px; font-size:16px; color:var(--ink); font-family:inherit;
  border:1.5px solid var(--line); border-radius:9px; background:#fff; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:#9ca3af}
input:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,23,23,.08)}
input.bad{border-color:var(--warn)}
input.good{border-color:var(--ok)}
.pw{position:relative}
.pw input{padding-right:46px}
.eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px;height:36px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px}
.eye svg{width:19px;height:19px}
.eye:hover{background:#f1f2f4; color:var(--ink)}
.err{display:none; font-style:normal; font-size:12.5px; color:var(--warn); margin:7px 0 0}
.err.on{display:block}
.rules{list-style:none; margin:2px 0 18px; padding:0; font-size:13px; color:var(--muted)}
.rules li{display:flex; gap:8px; align-items:center; padding:3px 0}
.rules li::before{content:""; width:15px;height:15px; border-radius:50%; border:1.5px solid #d1d5db; flex:0 0 15px}
.rules li.ok{color:var(--ok)}
.rules li.ok::before{border-color:var(--ok); background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.btn{
  width:100%; padding:13px; font-size:16px; font-weight:500; color:#fff; background:var(--ink);
  border:0; border-radius:9999px; cursor:pointer; font-family:inherit;
  transition:background .15s, transform .06s;
}
.btn:hover{background:#000}
.btn:active{transform:scale(.995)}
.btn:disabled{background:#d4d4d4; color:#fff; cursor:not-allowed}
.link{display:block; width:100%; margin-top:10px; padding:8px; background:none; border:0; color:var(--muted); font-size:14px; font-weight:500; cursor:pointer; font-family:inherit}
.link:hover{color:var(--ink)}
.fine{font-size:12.5px; color:var(--muted); text-align:center; margin:14px 0 0}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.grid .wide{grid-column:1/-1}
.grid .half2{grid-column:auto}
.center{text-align:center}
.tick{width:54px;height:54px;margin:6px auto 10px;border-radius:50%;background:#eaf7ee;color:var(--ok);display:grid;place-items:center}
.tick svg{width:26px;height:26px}
.spin{height:4px;border-radius:4px;background:#f1f2f4;overflow:hidden;margin-top:6px}
.spin span{display:block;height:100%;width:40%;background:var(--ink);animation:mv 1.1s infinite ease-in-out}
@keyframes mv{0%{margin-left:-40%}100%{margin-left:100%}}
.foot{text-align:center; font-size:12px; color:#9ca3af; margin:18px 0 0}
.foot b{color:#6b7280}
@media (max-width:420px){ .grid{grid-template-columns:1fr} .panel{padding:22px 16px} .top{padding-top:18px} }

/* ---- single form layout ---- */
h1{margin:10px 0 4px}
.sub{margin:0 0 14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 18px 18px; box-shadow:0 1px 2px rgba(23,23,23,.04)}
.rules{display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 0}
.rules li{font-size:12px; padding:4px 9px 4px 7px; border:1px solid var(--line); border-radius:9999px; background:#fafafa}
.rules li::before{width:12px;height:12px;flex:0 0 12px}
.rules li.ok{background:#00d66f14; border-color:#b9f0d1}
.opt{font-size:12px; color:var(--muted); margin:16px 0 10px; padding-top:14px; border-top:1px solid #f1f2f4}
.card .btn{margin-top:6px}
.done{text-align:center; padding:26px 18px; background:var(--card); border:1px solid var(--line); border-radius:14px}
.fine{margin-top:10px}

/* ---- select ---- */
select{
  width:100%; padding:13px 34px 13px 14px; font-size:16px; color:var(--ink); font-family:inherit;
  border:1.5px solid var(--line); border-radius:9px; background:#fff; outline:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  transition:border-color .15s, box-shadow .15s;
}
select:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,23,23,.08)}
select:invalid{color:#9ca3af}
.row3{display:grid; grid-template-columns:1fr 96px 104px; gap:0 10px; grid-column:1/-1}
@media (max-width:420px){ .row3{grid-template-columns:1fr 92px; } .row3 .fld:last-child{grid-column:1/-1} }
.hint{font-size:12px; color:var(--muted); margin:7px 0 0}