/* Verification wizard */
.wizard-card {
    width: min(860px, calc(100% - 30px));
    margin: 70px auto 100px;
    padding: 38px;
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(17,28,53,.9), rgba(8,16,31,.88));
    box-shadow: 0 30px 80px rgba(0,0,0,.34);
    backdrop-filter: blur(18px);
    color: white;
}
.wizard-card h2 { margin: 0 0 30px; text-align: center; font-size: 30px; font-weight: 900; }
.wizard-card h3 { margin-bottom: 10px; font-size: 21px; font-weight: 800; }
.step-text { color: #94a3b8; margin-bottom: 24px; }
.progress { height: 9px; margin-bottom: 34px; overflow: hidden; border-radius: 999px; background: rgba(148,163,184,.13); }
#progressBar { width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#35d4ff,#6475ff); box-shadow: 0 0 18px rgba(53,212,255,.35); transition: width .4s ease; }
.input, .form-control {
    width: 100%; margin-bottom: 16px; padding: 15px 16px; border: 1px solid rgba(148,163,184,.13);
    border-radius: 14px; outline: none; background: rgba(148,163,184,.07); color: white; transition: .25s;
}
.input:focus, .form-control:focus { border-color: rgba(53,212,255,.55); background: rgba(53,212,255,.05); box-shadow: 0 0 0 4px rgba(53,212,255,.07); color: white; }
.input::placeholder { color: #718096; }
.option-card { margin-bottom: 13px; padding: 4px 16px; border: 1px solid rgba(148,163,184,.13); border-radius: 15px; background: rgba(148,163,184,.055); transition: .25s; }
.option-card:hover { border-color: rgba(53,212,255,.35); transform: translateY(-2px); }
.option-card label { display: flex; align-items: center; gap: 12px; padding: 14px 0; margin: 0; cursor: pointer; font-size: 15px; }
.option-card input[type="radio"] { width: 18px; height: 18px; accent-color: #35d4ff; }
.step-buttons { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }
.btn-next { min-width: 140px; padding: 13px 24px; border: 0; border-radius: 13px; background: linear-gradient(135deg,#35d4ff,#60e5ff); color: #07111f; font-weight: 800; cursor: pointer; transition: .25s; }
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 14px 35px rgba(53,212,255,.22); }
.document-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.document-card { padding: 20px; border: 1px dashed rgba(53,212,255,.28); border-radius: 18px; text-align: center; background: rgba(53,212,255,.035); }
.document-card h4 { margin-bottom: 16px; font-size: 16px; font-weight: 800; }
.document-card input[type="file"] { width: 100%; color: #94a3b8; font-size: 12px; }
.document-card input[type="file"]::file-selector-button { margin-left: 10px; padding: 9px 12px; border: 0; border-radius: 10px; background: rgba(53,212,255,.11); color: #c9f7ff; cursor: pointer; }
.document-card span { display: block; margin-top: 12px; color: #78879e; font-size: 11px; }
.preview-image { width: 100%; max-height: 200px; margin-top: 14px; border-radius: 13px; object-fit: cover; }

@media (max-width: 700px) {
    .wizard-card { margin: 35px auto 70px; padding: 23px 17px; border-radius: 22px; }
    .wizard-card h2 { font-size: 22px; }
    .document-grid { grid-template-columns: 1fr; }
    .step-buttons { flex-wrap: wrap; }
    .btn-next { flex: 1; min-width: 120px; }
}

/* Mobile OTP */
.otp-panel {
    margin-top: 18px;
    padding: 20px;
    border: 1px solid rgba(53,212,255,.24);
    border-radius: 18px;
    background: rgba(53,212,255,.045);
}
.otp-panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.otp-panel-head div { display:flex; flex-direction:column; gap:4px; }
.otp-panel-head strong { font-size:16px; }
.otp-panel-head small { color:#94a3b8; }
.otp-status-badge { padding:6px 10px; border-radius:999px; background:rgba(245,158,11,.13); color:#fbbf24; font-size:11px; white-space:nowrap; }
.otp-status-badge.verified { background:rgba(53,224,161,.13); color:#35e0a1; }
.otp-code-wrap { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.otp-code-input { margin:0; text-align:center; letter-spacing:10px; font-size:23px; font-weight:900; direction:ltr; }
.otp-verify-button { min-width:120px; }
.otp-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.otp-link-button { border:0; background:transparent; color:#35d4ff; cursor:pointer; font-weight:700; }
.otp-link-button:disabled { color:#64748b; cursor:not-allowed; }
#otpCountdown { direction:ltr; color:#94a3b8; font-variant-numeric:tabular-nums; }
.otp-message { min-height:24px; margin-top:10px; color:#fbbf24; font-size:13px; }
.otp-message.success { color:#35e0a1; }
.otp-message.error { color:#fb7185; }
.input.input-locked { opacity:.72; pointer-events:none; }
@media (max-width:700px) {
    .otp-code-wrap { grid-template-columns:1fr; }
    .otp-verify-button { width:100%; }
    .otp-panel-head { align-items:flex-start; }
}


/* Phase 13 responsive sizing */
.site-main { min-height: calc(100vh - 82px); overflow-x: hidden; }
.wizard-card-wide { width: min(980px, calc(100% - 32px)); margin: 38px auto 70px; padding: clamp(22px, 3vw, 42px); }
.wizard-heading { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.wizard-heading p { margin:0; color:#94a3b8; }
.wizard-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:rgba(53,212,255,.10); font-size:26px; }
.steps-status { display:flex; align-items:center; justify-content:center; margin:-14px 0 30px; }
.step-status { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#17243a; color:#7f8da4; border:1px solid rgba(148,163,184,.2); font-weight:900; }
.step-status.active { color:#07111f; background:#35d4ff; border-color:#35d4ff; }
.step-line { width:min(110px,12vw); height:2px; background:rgba(148,163,184,.18); }
.form-grid.two-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.option-card { display:flex; align-items:center; gap:14px; padding:18px; cursor:pointer; }
.option-content { display:flex; flex-direction:column; gap:5px; flex:1; }
.option-content small,.level-documents { color:#94a3b8; }
.level-number { display:grid; place-items:center; min-width:44px; height:44px; border-radius:14px; background:rgba(53,212,255,.1); color:#67e8f9; font-weight:900; }
.option-check { color:#35d4ff; font-weight:900; }
.btn-back { min-width:120px; padding:13px 22px; border:1px solid rgba(148,163,184,.25); border-radius:13px; background:rgba(148,163,184,.08); color:#fff; font-weight:800; }
.single-upload-grid { grid-template-columns:1fr; }
.upload-tutorial { margin:22px 0; padding:18px; border:1px solid rgba(99,102,241,.28); border-radius:18px; background:rgba(99,102,241,.055); }
.tutorial-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.tutorial-head h4 { margin:8px 0 0; }
.tutorial-badge { color:#a5b4fc; font-size:12px; }
.tutorial-toggle { border:1px solid rgba(165,180,252,.35); border-radius:10px; padding:9px 14px; background:transparent; color:#c7d2fe; }
.tutorial-content { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.tutorial-content.show { display:grid; }
.tutorial-step { display:flex; gap:10px; padding:14px; border-radius:14px; background:rgba(255,255,255,.04); }
.tutorial-step>span { display:grid; place-items:center; min-width:30px; height:30px; border-radius:50%; background:#6366f1; font-weight:900; }
.tutorial-step div { display:flex; flex-direction:column; gap:5px; }
.tutorial-step small { color:#94a3b8; }
.tutorial-example { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.example-good,.example-bad { padding:16px; border-radius:14px; font-weight:800; }
.example-good { background:rgba(16,185,129,.1); color:#6ee7b7; border:1px solid rgba(16,185,129,.25); }
.example-bad { background:rgba(244,63,94,.1); color:#fda4af; border:1px solid rgba(244,63,94,.25); }
.verification-rules { margin-top:22px; padding:18px 22px; border-radius:16px; background:rgba(255,255,255,.035); }
.agreement-box { display:flex; align-items:center; gap:10px; margin-top:20px; }
.agreement-box input { width:18px; height:18px; }
.file-upload-label { display:inline-flex; margin:10px 0; padding:11px 16px; border-radius:11px; background:rgba(53,212,255,.12); color:#cffafe; cursor:pointer; }
.file-input { display:block; width:100%; }

@media (max-width: 900px) {
  .wizard-card-wide { margin-top:24px; }
  .tutorial-content.show { grid-template-columns:1fr; }
  .tutorial-example { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .wizard-card-wide { width:calc(100% - 20px); padding:20px 14px; margin:16px auto 44px; }
  .wizard-heading { align-items:flex-start; }
  .form-grid.two-columns { grid-template-columns:1fr; gap:0; }
  .option-card { padding:14px 10px; }
  .step-buttons { display:grid; grid-template-columns:1fr 1fr; }
  .step-buttons>div:only-child { display:none; }
  .btn-next,.btn-back { width:100%; min-width:0; }
  .tutorial-head { align-items:flex-start; flex-direction:column; }
}

.account-card{width:min(720px,calc(100% - 24px));margin:30px auto 60px;padding:clamp(22px,4vw,38px)}
.account-card .btn-next{width:100%}


/* Phase 14 - guest verification flow */
.quick-track-note{margin-top:18px;padding:12px 14px;border:1px solid rgba(125,211,252,.18);border-radius:13px;background:rgba(14,165,233,.06);color:#aebbd0;font-size:14px;text-align:center}
.quick-track-note a{color:#7dd3fc;font-weight:800;text-decoration:none}
.quick-track-note a:hover{text-decoration:underline}
.header-track-secondary{background:rgba(255,255,255,.06)!important;color:#dbeafe!important;border:1px solid rgba(148,163,184,.2)!important}
@media(max-width:760px){.header-track-secondary{display:none!important}}