body{min-height:100vh;}

nav{padding:0 2rem;}
.nav-links{display:flex;align-items:center;gap:12px;font-size:var(--fs-caption);}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:700;}
.nav-links a:hover{color:var(--brand);}
.nav-user{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--muted);}
.nav-avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-size:var(--fs-caption);font-weight:700;color:var(--brand);}

.page{max-width:760px;}
.page-title{font-size:var(--fs-h1);font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-0.3px;}
.page-sub{font-size:var(--fs-body);color:var(--muted);margin-bottom:2rem;}
.kyc-status{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--muted);font-size:var(--fs-caption);font-weight:700;margin-bottom:1rem;}
.kyc-status.ok{border-color:var(--success);background:var(--success-light);color:var(--success);}
.kyc-status.warn{border-color:var(--warning);background:var(--warning-light);color:var(--warning);}
.kyc-status.err{border-color:var(--danger);background:var(--danger-light);color:var(--danger);}

.level-banner{
  display:flex;align-items:center;gap:1rem;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:1rem 1.25rem;margin-bottom:1.5rem;
}
.level-steps{display:flex;gap:6px;flex:1;}
.level-step{flex:1;height:6px;border-radius:3px;background:var(--border);overflow:hidden;}
.level-step-fill{height:100%;border-radius:3px;}
.ls-done{background:var(--success);}
.ls-active{background:var(--brand);}
.level-info{text-align:left;}
.level-label{font-size:11px;color:var(--muted);font-weight:500;}
.level-val{font-size:14px;font-weight:800;color:var(--brand);}

.steps-nav{display:flex;gap:0;margin-bottom:1.5rem;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
.step-nav-item{flex:1;padding:0.875rem;text-align:center;cursor:pointer;border-left:1px solid var(--border);transition:all 0.2s;position:relative;}
.step-nav-item:last-child{border-left:none;}
.step-nav-item.done{background:var(--success-light);}
.step-nav-item.active{background:var(--brand-light);}
.step-nav-item.locked{opacity:0.5;cursor:not-allowed;}
.sni-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin:0 auto 4px;}
.sni-num-done{background:var(--success);color:#fff;}
.sni-num-active{background:var(--brand);color:#fff;}
.sni-num-todo{background:var(--border);color:var(--muted);}
.sni-label{font-size:11px;font-weight:600;color:var(--muted);}
.sni-label.active-lbl{color:var(--brand);}
.sni-label.done-lbl{color:var(--success);}

.card{overflow:hidden;margin-bottom:1rem;}
.card-hdr{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.card-hdr-icon{width:34px;height:34px;background:var(--brand-light);border-radius:8px;display:flex;align-items:center;justify-content:center;}
.card-hdr-title{font-size:var(--fs-body);font-weight:700;color:var(--text);}
.card-hdr-sub{font-size:var(--fs-caption);color:var(--muted);margin-top:1px;}
.card-body{padding:1.25rem;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
.form-full{grid-column:1/-1;}
.inp-grp{display:flex;flex-direction:column;gap:5px;}
.inp-lbl{font-size:var(--fs-caption);font-weight:600;color:var(--muted);display:flex;align-items:center;gap:4px;}
.inp-required{color:var(--danger);}
.inp{padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:var(--fs-body);color:var(--text);background:#fff;outline:none;transition:border-color 0.15s;}
.inp:focus{border-color:var(--brand);}
.inp-note{font-size:var(--fs-caption);color:var(--muted);}
select.inp{cursor:pointer;}

.upload-zone{border:2px dashed var(--border);border-radius:10px;padding:2rem;text-align:center;cursor:pointer;transition:all 0.2s;background:#fafafa;position:relative;}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--brand);background:var(--brand-light);}
.upload-zone.has-file{border-color:var(--success);background:var(--success-light);border-style:solid;}
.upload-icon{font-size:32px;margin-bottom:8px;}
.upload-title{font-size:var(--fs-small);font-weight:700;color:var(--text);margin-bottom:4px;}
.upload-sub{font-size:var(--fs-caption);color:var(--muted);}
.upload-types{font-size:var(--fs-caption);color:var(--muted);margin-top:8px;}
.upload-input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.upload-preview{display:none;align-items:center;gap:10px;}
.upload-preview.show{display:flex;}
.upload-preview-icon{font-size:24px;}
.upload-preview-name{font-size:var(--fs-small);font-weight:600;color:var(--success);}
.upload-preview-remove{font-size:var(--fs-caption);color:var(--danger);cursor:pointer;font-weight:600;margin-right:auto;}

.selfie-zone{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px;max-height:240px;}
.selfie-placeholder{text-align:center;color:#fff;}
.selfie-placeholder-icon{font-size:48px;margin-bottom:8px;}
.selfie-placeholder-txt{font-size:var(--fs-small);font-weight:600;}
.selfie-placeholder-sub{font-size:var(--fs-caption);opacity:0.6;margin-top:4px;}
video,canvas{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.selfie-btn{width:100%;padding:11px;border:none;border-radius:8px;font-size:var(--fs-body);font-weight:700;cursor:pointer;transition:all 0.15s;}
.selfie-btn-start{background:var(--brand);color:#fff;}
.selfie-btn-capture{background:var(--success);color:#fff;}
.selfie-btn-retake{background:var(--border);color:var(--text);}

.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;}
.tip{padding:8px;background:var(--brand-light);border-radius:8px;text-align:center;}
.tip-icon{font-size:18px;margin-bottom:4px;}
.tip-txt{font-size:var(--fs-caption);color:var(--brand);font-weight:600;}

.bank-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.bank-empty{padding:12px;border:1px dashed var(--border);border-radius:10px;background:var(--bg);font-size:var(--fs-caption);color:var(--muted);line-height:1.8;}
.bank-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff;}
.bank-flag{font-size:24px;}
.bank-info{flex:1;}
.bank-name{font-size:var(--fs-small);font-weight:700;}
.bank-num{font-size:var(--fs-caption);color:var(--muted);direction:ltr;margin-top:2px;}
.bank-verified{font-size:var(--fs-caption);font-weight:600;color:var(--success);background:var(--success-light);padding:2px 8px;border-radius:4px;}
.bank-remove{font-size:var(--fs-caption);color:var(--danger);cursor:pointer;font-weight:600;}

.add-bank-form{background:var(--bg);border:1px dashed var(--border);border-radius:10px;padding:1rem;display:none;}
.add-bank-form.open{display:block;}

.review-section{margin-bottom:1rem;}
.review-title{font-size:var(--fs-caption);font-weight:700;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;}
.review-box{background:var(--bg);border-radius:8px;padding:10px 12px;}
.review-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:var(--fs-small);}
.review-row:last-child{border-bottom:none;}
.review-label{color:var(--muted);}
.review-val{font-weight:600;color:var(--text);}
.review-status{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:700;padding:4px 10px;border-radius:5px;}
.rs-ok{color:var(--success);background:var(--success-light);}
.rs-pending{color:var(--warning);background:var(--warning-light);}
.rs-missing{color:var(--danger);background:var(--danger-light);}

.security-notice{display:flex;gap:10px;padding:12px;background:var(--brand-light);border:1px solid var(--brand);border-radius:10px;margin-bottom:1rem;}
.sn-icon{font-size:18px;flex-shrink:0;}
.sn-text{font-size:var(--fs-caption);color:var(--brand);line-height:1.8;}
.sn-text a{color:var(--brand-dark);font-weight:800;text-decoration:none;}
.sn-text a:hover{text-decoration:underline;}
.sn-title{font-weight:700;margin-bottom:2px;}

.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1rem;}
.trust-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;}
.trust-card strong{font-size:var(--fs-caption);color:var(--text);}
.trust-card span{font-size:var(--fs-caption);color:var(--muted);line-height:1.7;}

.level-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem;}
.lb-item{display:flex;align-items:center;gap:8px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:8px;font-size:var(--fs-caption);color:var(--text);}
.lb-icon{font-size:18px;}

.btn-row{display:flex;gap:8px;margin-top:1.25rem;}
.btn-back{padding:11px 20px;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:var(--fs-body);font-weight:600;color:var(--muted);cursor:pointer;transition:all 0.15s;}
.btn-back:hover{background:var(--bg);}
.btn-next{flex:1;padding:12px;background:var(--brand);border:none;border-radius:9px;font-size:var(--fs-body);font-weight:700;color:#fff;cursor:pointer;transition:all 0.15s;}
.btn-next:hover{background:var(--brand-dark);}
.btn-next:disabled{opacity:0.5;cursor:not-allowed;}

.success-screen{display:none;text-align:center;padding:3rem 2rem;}
.success-screen.show{display:block;}
.success-icon-big{width:80px;height:80px;background:var(--success-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:36px;}
.success-h{font-size:var(--fs-h1);font-weight:800;margin-bottom:8px;}
.success-p{font-size:var(--fs-body);color:var(--muted);line-height:var(--lh-relaxed);margin-bottom:1.5rem;}
.success-level{display:inline-flex;align-items:center;gap:8px;background:var(--brand-light);border:1px solid var(--brand);border-radius:10px;padding:10px 20px;margin-bottom:1.5rem;font-size:var(--fs-h3);font-weight:800;color:var(--brand);}
.success-limits{background:var(--bg);border-radius:10px;padding:1rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:1.5rem;}
.sl-item{text-align:center;}
.sl-val{font-size:var(--fs-h3);font-weight:800;color:var(--brand);}
.sl-lbl{font-size:var(--fs-caption);color:var(--muted);margin-top:2px;}

.step-content{display:none;}
.step-content.active{display:block;}
.saving-msg{display:none;align-items:center;gap:6px;font-size:12px;color:var(--success);font-weight:600;margin-top:8px;}
.saving-msg.show{display:flex;}

@media (max-width: 860px){
  .page{max-width:100%}
}

@media (max-width: 680px){
  nav{padding:0 1rem}
  .nav-links{display:none}
  .form-grid{grid-template-columns:1fr}
  .level-benefits{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .tips-grid{grid-template-columns:1fr 1fr}
  .success-limits{grid-template-columns:1fr}
}

@media (max-width: 420px){
  .tips-grid{grid-template-columns:1fr}
  .btn-row{flex-direction:column}
  .step-nav-item{padding:0.7rem 0.4rem}
}
