:root { --ink:#f4f8fc; --muted:#aec0d0; --line:rgba(191,222,244,.24); --cyan:#67d7ff; --green:#9bea54; --danger:#ff8b9a; --glass:rgba(7,24,42,.78); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; padding:34px 18px; color:var(--ink); font-family:var(--portal-font, 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; }
.portal-page { background:linear-gradient(90deg,rgba(3,17,31,.76),rgba(4,17,31,.38)),var(--portal-background, url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=2200&q=85')) center/cover fixed; }
.icon-sprite { position:absolute; width:0; height:0; overflow:hidden; } .step-icon,.section-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; vertical-align:middle; } .step-icon { display:block; margin:0 auto 6px; } .section-title { display:flex; align-items:center; gap:9px; }
.container { max-width:1080px; margin:auto; padding:32px; border:1px solid var(--line); border-radius:18px; background:rgba(5,20,36,.55); box-shadow:0 24px 80px rgba(0,0,0,.42); backdrop-filter:blur(14px); }
.registration-banner { margin:-32px -32px 30px; padding:40px 38px; border-bottom:1px solid var(--line); border-radius:18px 18px 0 0; background:linear-gradient(110deg,rgba(4,27,49,.92),rgba(14,88,121,.5)); }
.registration-banner h2 { margin:10px 0 6px; font-size:clamp(28px,4vw,44px); font-weight:400; letter-spacing:.02em; }
.registration-banner p { max-width:600px; margin:0; color:var(--muted); line-height:1.6; font-family:Arial,sans-serif; }
.banner-badge { color:var(--cyan); font:700 11px Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.progress { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:28px; }
.progress-step { padding:12px 6px; border-bottom:2px solid rgba(255,255,255,.2); color:#91a7b9; font:700 11px Arial,sans-serif; text-align:center; letter-spacing:.04em; }
.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:0 0 12px; border-bottom:1px solid var(--line); color:#fff; 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; letter-spacing:.03em; } .required::after { content:' *'; color:#ff9aa7; }
input,select,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,select:focus { outline:2px solid rgba(103,215,255,.28); border-color:var(--cyan); } textarea { min-height:98px; resize:vertical; } input[readonly] { color:#b6c7d3; background:rgba(30,54,72,.6); }
input[type=checkbox] { width:auto; margin-right:8px; accent-color:var(--cyan); } .checkbox-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,.login-btn { border-color:var(--cyan); background:var(--cyan); color:#062137; } button:disabled { opacity:.6; cursor:wait; } .button-icon { width:16px; height:16px; margin-right:6px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; vertical-align:-3px; }
.wizard-actions { display:flex; justify-content:space-between; gap:12px; margin-top:30px; } .btn-row { display:flex; gap:8px; align-items:center; } .btn-row input { flex:1; }
.msg { margin:14px 0; padding:12px 14px; border-radius:8px; font:13px Arial,sans-serif; } .msg.info { background:rgba(24,105,151,.45); } .msg.success { background:rgba(37,123,56,.55); color:#e2ffd4; } .msg.error { background:rgba(133,35,51,.65); color:#ffdce0; }
.hint { display:block; margin-top:7px; color:var(--muted); font:12px/1.5 Arial,sans-serif; } .link { color:var(--cyan); } .file-input { padding:9px; } .upload-card { padding:18px; border:1px dashed rgba(103,215,255,.45); border-radius:11px; background:rgba(13,45,65,.42); }
.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; background:#0a1a2a; }
.file-preview { display:flex; align-items:center; gap:12px; min-height:0; margin-top:12px; color:#d8e6ef; font:12px/1.4 Arial,sans-serif; } .file-preview:empty { display:none; } .file-preview img { width:72px; height:72px; border:1px solid rgba(103,215,255,.45); border-radius:8px; object-fit:cover; } .document-preview { display:flex; align-items:center; justify-content:center; width:72px; height:72px; border:1px solid rgba(255,255,255,.24); border-radius:8px; background:rgba(184,54,70,.35); color:#fff; font-weight:700; letter-spacing:.08em; } .preview-details { display:flex; flex-direction:column; gap:2px; } .preview-details strong { color:#fff; overflow-wrap:anywhere; }
.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; transition:width .2s,background .2s; } .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 { display:none; padding:60px 20px; text-align:center; } .success-screen.visible { display:block; } .success-screen h2 { color:var(--green); font-size:32px; font-weight:400; } .success-reference { color:var(--cyan)!important; font:700 14px Arial,sans-serif; }
@media(max-width:650px) { body { padding:12px 8px; background-attachment:scroll; } .container { padding:20px 16px; } .registration-banner { margin:-20px -16px 24px; padding:28px 20px; } .progress-step { font-size:9px; } .btn-row { flex-wrap:wrap; } }