:root{
  --vb-bg:#06060f;
  --vb-s1:#0e0e1a;
  --vb-s2:#13131f;
  --vb-s3:#191928;
  --vb-bd:rgba(255,255,255,0.065);
  --vb-bd2:rgba(255,255,255,0.12);
  --vb-bd3:rgba(255,255,255,0.18);
  --vb-vi:#7c6dfa;
  --vb-vi2:#a99dff;
  --vb-vi3:rgba(124,109,250,0.1);
  --vb-cy:#00cfe8;
  --vb-em:#00e07a;
  --vb-am:#ffb020;
  --vb-ro:#ff5066;
  --vb-wh:#edeeff;
  --vb-mu:rgba(237,238,255,0.42);
  --vb-mu2:rgba(237,238,255,0.2);
  --vb-fh:'Instrument Serif',serif;
  --vb-fb:'Geist',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body.page-checkout{
  background:var(--vb-bg);
  color:var(--vb-wh);
  font-family:var(--vb-fb);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  color-scheme: dark;
}

/* floating icons */
body.page-checkout #fbg{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
body.page-checkout #fbg .fi{position:absolute;opacity:0;animation:vb-rise linear infinite;filter:blur(0.5px)}
@keyframes vb-rise{0%{opacity:0;transform:translateY(108vh) rotate(0deg)}8%{opacity:0.1}85%{opacity:0.1}100%{opacity:0;transform:translateY(-8vh) rotate(340deg)}}

/* Top nav (re-skin existing .top-nav) */
body.page-checkout .top-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:500;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.35rem;
  background:rgba(6,6,15,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--vb-bd);
}
body.page-checkout .top-nav .nav-link{
  padding:0.38rem 0.8rem;
  border-radius:7px;
  font-size:0.82rem;
  font-weight:600;
  color:var(--vb-mu);
  text-decoration:none;
  transition:all 0.18s;
}
body.page-checkout .top-nav .nav-link:hover{color:var(--vb-wh);background:rgba(255,255,255,0.05)}
body.page-checkout .top-nav .nav-right{display:flex;align-items:center;gap:0.7rem}
body.page-checkout .top-nav .nav-user{display:flex;gap:0.55rem;align-items:center}
body.page-checkout .top-nav .nav-welcome{color:var(--vb-mu);font-size:0.82rem;font-weight:600}

/* Secure badge */
body.page-checkout .secure-badge{
  display:flex;
  align-items:center;
  gap:0.4rem;
  padding:0.32rem 0.8rem;
  background:rgba(0,224,122,0.08);
  border:1px solid rgba(0,224,122,0.18);
  border-radius:999px;
  font-size:0.73rem;
  font-weight:700;
  color:var(--vb-em);
  white-space:nowrap;
}
body.page-checkout .lock-dot{width:6px;height:6px;background:var(--vb-em);border-radius:50%;box-shadow:0 0 5px var(--vb-em)}

/* Layout */
body.page-checkout main.shell{
  display:flex;
  padding-top:54px;
  min-height:100vh;
  position:relative;
  z-index:1;
}
body.page-checkout .app-layout-shell{display:flex;width:100%}
body.page-checkout .app-sidebar{
  width:205px;
  background:var(--vb-s1);
  border-right:1px solid var(--vb-bd);
  padding:1.2rem 0.75rem;
  position:fixed;
  top:54px;left:0;bottom:0;
  display:flex;
  flex-direction:column;
  z-index:100;
  overflow-y:auto;
}
body.page-checkout .app-side-label{
  font-size:0.6rem;
  font-weight:800;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--vb-mu2);
  padding:0.4rem 0.5rem;
  margin-bottom:0.12rem;
}
body.page-checkout .app-side-link{
  display:flex;
  align-items:center;
  gap:0.55rem;
  padding:0.55rem 0.65rem;
  border-radius:8px;
  font-size:0.83rem;
  font-weight:600;
  color:var(--vb-mu);
  text-decoration:none;
  transition:all 0.16s;
  margin-bottom:0.15rem;
}
body.page-checkout .app-side-link:hover{background:rgba(255,255,255,0.04);color:var(--vb-wh)}
body.page-checkout .app-side-link.active{
  background:rgba(124,109,250,0.12);
  color:var(--vb-vi2);
  border:1px solid rgba(124,109,250,0.18);
}
body.page-checkout .app-main{
  margin-left:205px;
  flex:1;
  padding:2.2rem 2.35rem;
  min-height:calc(100vh - 54px);
}

/* Page header */
body.page-checkout .pg-eyebrow{
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--vb-vi2);
  margin-bottom:0.55rem;
  display:flex;
  align-items:center;
  gap:0.4rem;
}
body.page-checkout .pg-eyebrow::before{content:'';width:16px;height:1px;background:var(--vb-vi2);display:inline-block}
body.page-checkout .pg-title{
  font-family:var(--vb-fh);
  font-size:2rem;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin-bottom:0.35rem;
}
body.page-checkout .pg-title em{font-style:italic;color:var(--vb-vi2)}
body.page-checkout .pg-sub{
  color:var(--vb-mu);
  font-size:0.9rem;
  margin-bottom:2rem;
  max-width:620px;
  line-height:1.65;
}

/* Checkout grid */
body.page-checkout .checkout-grid{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:1.6rem;
  align-items:start;
  max-width:1100px;
}

/* Cards */
body.page-checkout .card{
  background:var(--vb-s1);
  border:1px solid var(--vb-bd);
  border-radius:14px;
  overflow:hidden;
}
body.page-checkout .card-head{
  padding:1.25rem 1.45rem;
  border-bottom:1px solid var(--vb-bd);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
body.page-checkout .ch-left{display:flex;align-items:center;gap:0.6rem}
body.page-checkout .ch-icon{
  width:34px;height:34px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0;
  background:rgba(124,109,250,0.12);
  border:1px solid rgba(124,109,250,0.2);
}
body.page-checkout .ch-icon.is-em{background:rgba(0,224,122,0.1);border-color:rgba(0,224,122,0.18)}
body.page-checkout .ch-icon.is-cy{background:rgba(0,207,232,0.1);border-color:rgba(0,207,232,0.18)}
body.page-checkout .ch-title{font-size:0.9rem;font-weight:900}
body.page-checkout .ch-sub{font-size:0.72rem;color:var(--vb-mu);margin-top:0.05rem}
body.page-checkout .ch-badge{
  font-size:0.68rem;
  font-weight:900;
  padding:0.22rem 0.6rem;
  border-radius:999px;
  background:rgba(124,109,250,0.1);
  color:var(--vb-vi2);
  border:1px solid rgba(124,109,250,0.2);
}
body.page-checkout .card-body{padding:1.45rem}

/* Provider + currency selectors */
body.page-checkout .subhead{
  font-size:0.78rem;
  font-weight:800;
  color:var(--vb-mu);
  margin-bottom:0.75rem;
}
body.page-checkout .provider-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.65rem;
  margin-bottom:1.2rem;
}
body.page-checkout .prov{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.8rem;
  background:rgba(255,255,255,0.03);
  border:2px solid var(--vb-bd);
  border-radius:10px;
  cursor:pointer;
  transition:all 0.2s;
  user-select:none;
}
body.page-checkout .prov:hover{border-color:var(--vb-bd2)}
body.page-checkout .prov.on{border-color:var(--vb-vi);background:rgba(124,109,250,0.07)}
body.page-checkout .prov.disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:saturate(0.6);
}
body.page-checkout .prov-ic{font-size:1.3rem}
body.page-checkout .prov-nm{font-size:0.82rem;font-weight:900}
body.page-checkout .prov-sc{font-size:0.68rem;color:var(--vb-mu)}

body.page-checkout .currency-row{display:flex;gap:0.45rem;flex-wrap:wrap;margin-bottom:1.2rem}
body.page-checkout .curp{
  padding:0.38rem 0.75rem;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--vb-bd2);
  border-radius:999px;
  font-size:0.75rem;
  font-weight:700;
  color:var(--vb-mu);
  cursor:pointer;
  transition:all 0.18s;
  user-select:none;
}
body.page-checkout .curp:hover{border-color:var(--vb-bd3);color:var(--vb-wh)}
body.page-checkout .curp.on{background:rgba(124,109,250,0.1);border-color:var(--vb-vi);color:var(--vb-vi2)}

/* Inputs */
body.page-checkout label{font-size:0.72rem;font-weight:700;color:var(--vb-mu);letter-spacing:0.02em}
body.page-checkout .inp{
  width:100%;
  padding:0.68rem 0.9rem;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--vb-bd2);
  border-radius:9px;
  color:var(--vb-wh);
  font-family:var(--vb-fb);
  font-size:0.9rem;
  outline:none;
  transition:border-color 0.18s,box-shadow 0.18s;
}
body.page-checkout .inp:focus{border-color:var(--vb-vi);box-shadow:0 0 0 3px rgba(124,109,250,0.12)}
body.page-checkout .inp::placeholder{color:var(--vb-mu2)}
body.page-checkout .form-note{margin-top:0.65rem;font-size:0.78rem;color:var(--vb-mu)}

body.page-checkout .sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* CTA */
body.page-checkout .cta-btn{
  width:100%;
  padding:0.95rem;
  background:linear-gradient(135deg,var(--vb-vi),var(--vb-vi2));
  color:#fff;
  border:none;
  border-radius:11px;
  font-family:var(--vb-fb);
  font-size:0.95rem;
  font-weight:900;
  cursor:pointer;
  transition:all 0.22s;
  box-shadow:0 6px 22px rgba(124,109,250,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.55rem;
  letter-spacing:0.01em;
}
body.page-checkout .cta-btn:hover{box-shadow:0 8px 30px rgba(124,109,250,0.48);transform:translateY(-2px)}
body.page-checkout .cta-btn:active{transform:translateY(0)}

/* Order summary (right col) */
body.page-checkout .os-card{position:sticky;top:76px}
body.page-checkout .os-header{
  padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--vb-bd);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
}
body.page-checkout .os-title{font-size:0.88rem;font-weight:900}
body.page-checkout .os-edit{
  font-size:0.73rem;
  color:var(--vb-vi2);
  cursor:pointer;
  font-weight:800;
  text-decoration:none;
  transition:opacity 0.18s;
}
body.page-checkout .os-edit:hover{opacity:0.75}
body.page-checkout .os-lines{padding:1rem 1.4rem}

/* Re-style result cards rendered by app.js */
body.page-checkout .result-stack{display:flex;flex-direction:column;gap:0.9rem}
body.page-checkout .result-card{
  background:rgba(255,255,255,0.025);
  border:1px solid var(--vb-bd);
  border-radius:12px;
  padding:1rem 1.05rem;
}
body.page-checkout .result-card h3{font-size:0.92rem;font-weight:900;margin-bottom:0.35rem}
body.page-checkout .result-card p,body.page-checkout .result-card li{color:var(--vb-mu)}
body.page-checkout .result-card strong{color:var(--vb-wh)}
body.page-checkout .result-card a{color:var(--vb-vi2)}

/* Footer */
body.page-checkout footer.footer{
  border-top:1px solid var(--vb-bd);
  background:rgba(6,6,15,0.6);
}

@media(max-width:960px){
  body.page-checkout .checkout-grid{grid-template-columns:1fr}
  body.page-checkout .os-card{position:static}
}
@media(max-width:768px){
  body.page-checkout .app-sidebar{display:none}
  body.page-checkout .app-main{margin-left:0;padding:1.2rem}
  body.page-checkout .provider-row{grid-template-columns:1fr}
}