:root{
  --vfs-bg:#f5f7fb;
  --vfs-paper:#ffffff;
  --vfs-paper-soft:#f0f4f8;
  --vfs-border:#dce4ef;
  --vfs-text:#142033;
  --vfs-muted:#66758c;
  --vfs-brand:#173f73;
  --vfs-brand-2:#2458d6;
  --vfs-brand-3:#1f7a6b;
  --vfs-danger:#b42318;
  --vfs-success:#12803c;
  --vfs-warning:#9a6700;
}

*{box-sizing:border-box}
html,body{letter-spacing:0}

body.page,
.page{
  background:#f5f7fb !important;
  color:var(--vfs-text) !important;
}

.page-wrap,
.page-shell-main{
  min-height:100vh;
}

.topbar{
  position:sticky !important;
  top:0;
  z-index:50;
  min-height:72px;
  background:rgba(255,255,255,.94) !important;
  color:var(--vfs-text) !important;
  border-bottom:1px solid rgba(220,228,239,.9);
  box-shadow:0 10px 24px rgba(20,32,51,.06);
  backdrop-filter:saturate(140%) blur(10px);
}

.topbar .brand img{
  height:46px !important;
  max-width:170px;
  object-fit:contain;
}

.topbar .center{
  gap:8px !important;
}

.topbar .btn,
.btn-lang{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px !important;
  border:1px solid var(--vfs-border) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--vfs-brand) !important;
  font-weight:700 !important;
  text-decoration:none !important;
  box-shadow:0 1px 2px rgba(20,32,51,.05);
}

.topbar .btn:hover,
.btn-lang:hover{
  border-color:#b8c8dd !important;
  background:#f8fbff !important;
}

.topbar .btn-logout{
  background:#fff5f4 !important;
  border-color:#ffd1cb !important;
  color:var(--vfs-danger) !important;
}

.container{
  max-width:1180px !important;
  margin:28px auto 0 !important;
  padding:0 18px !important;
  gap:16px !important;
}

.card,
details.stage{
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--vfs-border) !important;
  border-radius:8px !important;
  box-shadow:0 14px 32px rgba(20,32,51,.08) !important;
}

.card{
  padding:20px !important;
}

.title{
  align-items:flex-start !important;
}

.title h2{
  color:var(--vfs-text);
  font-size:22px;
  line-height:1.2;
}

.avatar{
  width:58px !important;
  height:58px !important;
  background:#e8f0fb !important;
  border:1px solid #cfdded;
  position:relative;
}

.avatar:after{
  content:"";
  position:absolute;
  inset:14px 17px 10px;
  border-radius:999px 999px 12px 12px;
  background:var(--vfs-brand);
  opacity:.86;
}

.meta{
  color:var(--vfs-muted) !important;
  margin-top:6px;
  line-height:1.7;
}

.progress{
  height:10px !important;
  background:#e6edf5 !important;
  border-radius:999px !important;
  overflow:hidden;
}

.progress > span{
  background:linear-gradient(90deg, var(--vfs-brand-3), var(--vfs-brand-2)) !important;
}

.stages{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
}

.stage-pill{
  border-radius:8px !important;
  border:1px solid var(--vfs-border) !important;
  background:#fff !important;
  color:#4d5e75 !important;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stage-pill.active{
  background:#e8f2ff !important;
  border-color:#b8d2f5 !important;
  color:var(--vfs-brand-2) !important;
}

.payment-hero{
  color:var(--vfs-text) !important;
  font-size:15px !important;
}

.payment-toggle,
.doc-btn,
.doc-btn-primary{
  border-radius:8px !important;
}

.payment-toggle{
  min-height:44px;
  background:#e8f2ff !important;
  border-color:#bdd6fa !important;
  color:var(--vfs-brand-2) !important;
}

.payment-line-item{
  border-color:var(--vfs-border) !important;
  border-radius:8px !important;
  background:#fbfdff !important;
}

.faq h3{
  color:var(--vfs-text);
}

.faq details{
  border-color:var(--vfs-border) !important;
  border-radius:8px !important;
}

details.stage{
  overflow:hidden;
  margin-bottom:10px !important;
}

details.stage > summary{
  min-height:56px;
  background:#fff !important;
  color:var(--vfs-text) !important;
  border:0 !important;
  padding:14px 16px !important;
}

details.stage[open] > summary{
  background:#f7faff !important;
  border-bottom:1px solid var(--vfs-border) !important;
}

details.stage.pending{
  opacity:.82;
}

.panel-inner{
  padding:16px !important;
}

.table,
.table.kv2,
.table.compact{
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
}

.table th,
.table td,
.table.kv2 th,
.table.kv2 td{
  border-color:var(--vfs-border) !important;
  color:var(--vfs-text) !important;
  background:#fff;
}

.table th,
.table.kv2 th{
  background:#f4f7fb !important;
  color:#40516a !important;
}

.badge,
.stage-badge .badge{
  border-radius:999px !important;
  padding:5px 10px !important;
  font-size:12px !important;
  font-weight:800 !important;
}

.badge-completed{background:#e7f8ee !important;color:var(--vfs-success) !important;border:1px solid #9fe0b8 !important}
.badge-inprogress{background:#e8f2ff !important;color:var(--vfs-brand-2) !important;border:1px solid #bdd6fa !important}
.badge-pending{background:#fff5db !important;color:var(--vfs-warning) !important;border:1px solid #f5d37e !important}

.langmenu{
  border-radius:8px !important;
  border-color:var(--vfs-border) !important;
  box-shadow:0 16px 32px rgba(20,32,51,.12) !important;
}

body.auth-page{
  min-height:100vh !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  padding:32px 16px !important;
  background:#f5f7fb !important;
  color:var(--vfs-text) !important;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
}

body.auth-page .header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:transparent !important;
  padding:22px 28px !important;
}

body.auth-page .logo{
  height:48px !important;
}

body.auth-page .card,
body.auth-page .login-box,
body.auth-page > div[style],
body.auth-page .wrap .card{
  width:100% !important;
  max-width:420px !important;
  margin:0 auto !important;
  padding:28px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid var(--vfs-border) !important;
  border-radius:8px !important;
  box-shadow:0 20px 44px rgba(20,32,51,.12) !important;
  color:var(--vfs-text) !important;
  text-align:left !important;
}

body.auth-page .wrap{
  min-height:auto !important;
  display:block !important;
  padding:0 !important;
}

body.auth-page h2,
body.auth-page .h1,
body.auth-page .login-box h2{
  margin:0 0 18px !important;
  color:var(--vfs-text) !important;
  text-align:left !important;
  font-size:26px !important;
  font-weight:800 !important;
}

body.auth-page label,
body.auth-page .label{
  color:#40516a !important;
  font-weight:700 !important;
  font-size:13px !important;
}

body.auth-page input,
body.auth-page .input{
  width:100% !important;
  height:44px !important;
  margin:7px 0 14px !important;
  padding:10px 12px !important;
  border:1px solid var(--vfs-border) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:var(--vfs-text) !important;
  outline:none !important;
}

body.auth-page input:focus,
body.auth-page .input:focus{
  border-color:var(--vfs-brand-2) !important;
  outline:3px solid rgba(36,88,214,.14) !important;
}

body.auth-page button,
body.auth-page .btn{
  width:100% !important;
  min-height:44px !important;
  border:1px solid var(--vfs-brand-2) !important;
  border-radius:8px !important;
  background:var(--vfs-brand-2) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 10px 22px rgba(36,88,214,.2) !important;
}

body.auth-page .pwd-toggle{
  width:34px !important;
  min-height:34px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#62748c !important;
}

body.auth-page .error,
body.auth-page .err{
  margin-bottom:14px !important;
  padding:10px 12px !important;
  border-radius:8px !important;
  background:#fff0ee !important;
  border:1px solid #ffc9c2 !important;
  color:var(--vfs-danger) !important;
  text-align:left !important;
}

body.auth-page .footer{
  color:var(--vfs-muted) !important;
  text-align:center !important;
  margin-top:18px !important;
}

@media (max-width:760px){
  .topbar{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:14px !important;
  }
  .topbar .center,
  .topbar .right{
    position:static !important;
    transform:none !important;
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .stages{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .card{
    padding:16px !important;
  }
  .title{
    display:block !important;
  }
  .avatar{
    margin-bottom:12px;
  }
  .table,
  .table tbody,
  .table tr,
  .table th,
  .table td{
    white-space:normal !important;
  }
}