:root { --ink:#f4f8fc; --muted:#aec0d0; --line:rgba(191,222,244,.24); --cyan:#67d7ff; --green:#9bea54; --danger:#ff8b9a; }
* { box-sizing:border-box; } body { min-height:100vh; margin:0; padding:34px 18px; color:var(--ink); font-family:Georgia,'Times New Roman',serif; background:linear-gradient(90deg,rgba(3,17,31,.76),rgba(4,17,31,.38)),url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=85') center/cover fixed; }
.auth-page { max-width:1080px; margin:auto; } .auth-form { padding:32px; border:1px solid var(--line); border-radius:18px; background:rgba(5,20,36,.72); box-shadow:0 24px 80px rgba(0,0,0,.42); backdrop-filter:blur(14px); } h1 { margin:0 0 8px; font-size:clamp(28px,4vw,44px); font-weight:400; } .intro { margin:0 0 28px; color:var(--muted); font:14px/1.5 Arial,sans-serif; }
.progress { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:28px; } .progress-step { padding:12px 4px; border-bottom:2px solid rgba(255,255,255,.2); color:#91a7b9; font:700 11px Arial,sans-serif; text-align:center; } .progress-step.active { border-color:var(--cyan); color:#fff; } .progress-step.complete { border-color:#5eacbd; color:#c0e7ef; }
.wizard-step { display:none; animation:appear .25s ease-out; } .wizard-step.active { display:block; } @keyframes appear { from { opacity:.3; transform:translateY(5px); } to { opacity:1; transform:none; } } .section-title { margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--line); font:700 12px Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; } .row { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px; } .col { flex:1 1 240px; min-width:220px; } label { display:block; margin-bottom:7px; color:#d8e6ef; font:700 12px Arial,sans-serif; } label.required::after { content:' *'; color:#ff9aa7; } input,textarea,button { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:9px; background:rgba(3,15,29,.68); color:var(--ink); font:14px Arial,sans-serif; } input:focus,textarea:focus { outline:2px solid rgba(103,215,255,.28); border-color:var(--cyan); } textarea { min-height:98px; resize:vertical; } input[readonly] { background:rgba(30,54,72,.6); color:#b6c7d3; } input[type=checkbox] { width:auto; margin-right:8px; accent-color:var(--cyan); } .check-label { display:flex; align-items:center; line-height:1.5; } button { width:auto; min-width:120px; cursor:pointer; font-weight:700; } button:hover { border-color:var(--cyan); } button[type=submit],.next-btn { background:var(--cyan); border-color:var(--cyan); color:#062137; } .wizard-actions { display:flex; justify-content:space-between; margin-top:30px; } .hint { display:block; margin-top:7px; color:var(--muted); font:12px/1.5 Arial,sans-serif; } .link { color:var(--cyan); } .msg { margin:14px 0; padding:12px 14px; border-radius:8px; font:13px Arial,sans-serif; } .msg.error { background:rgba(133,35,51,.65); color:#ffdce0; } .msg.info { background:rgba(24,105,151,.45); } .msg.success { background:rgba(37,123,56,.55); color:#e2ffd4; } .gps-section { padding:18px; border:1px solid var(--line); border-radius:12px; background:rgba(3,22,38,.48); } .map-frame { width:100%; height:260px; margin-top:16px; border:1px solid var(--line); border-radius:9px; } .strength { height:7px; margin-top:9px; border-radius:8px; background:rgba(255,255,255,.15); overflow:hidden; } .strength span { display:block; height:100%; width:0; } .strength-label,.match-status { display:block; min-height:18px; margin-top:6px; font:12px Arial,sans-serif; } .match-status.ok { color:var(--green); } .match-status.bad { color:var(--danger); } .success-screen { padding:60px 20px; text-align:center; } .success-screen[hidden] { display:none; } .success-screen h2 { color:var(--green); font-weight:400; } @media(max-width:650px) { body { padding:12px 8px; background-attachment:scroll; } .auth-form { padding:20px 16px; } .progress-step { font-size:9px; } }