:root{
  --b2b5-bg:#06111d;
  --b2b5-panel:rgba(7,16,28,.76);
  --b2b5-panel-strong:rgba(8,18,31,.92);
  --b2b5-line:rgba(72,220,255,.16);
  --b2b5-line-strong:rgba(72,220,255,.30);
  --b2b5-text:#effcff;
  --b2b5-sub:#9ccadb;
  --b2b5-accent:#35dcff;
  --b2b5-accent-2:#2d8eff;
  --b2b5-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 1px rgba(72,220,255,.04);
}

body.b2b-phase5-safe{
  color:var(--b2b5-text);
}
body.b2b-phase5-safe .b2b-main,
body.b2b-phase5-safe .b2b-page{position:relative;z-index:1}

/* home blank-safe skeleton */
body.b2b-route-home .b2b-phase5-home-shell{
  display:grid;
  gap:18px;
  padding:6px 0 12px;
}
body.b2b-route-home .b2b-phase5-skel-card,
body.b2b-route-home .b2b-phase5-skel-line{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(9,20,34,.62), rgba(8,17,28,.84));
  border:1px solid rgba(72,220,255,.12);
  box-shadow:var(--b2b5-shadow);
}
body.b2b-route-home .b2b-phase5-skel-card{height: clamp(260px, 40vw, 430px); border-radius:28px;}
body.b2b-route-home .b2b-phase5-skel-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
body.b2b-route-home .b2b-phase5-skel-col{display:grid; gap:12px;}
body.b2b-route-home .b2b-phase5-skel-line{height:86px; border-radius:22px;}
body.b2b-route-home .b2b-phase5-skel-card::after,
body.b2b-route-home .b2b-phase5-skel-line::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 38%, rgba(92,231,255,.14) 52%, rgba(255,255,255,.05) 68%, transparent 100%);
  animation:b2b5Skel 1.35s ease infinite;
}
@keyframes b2b5Skel{to{transform:translateX(100%)}}
body.b2b-route-home .b2b-phase5-home-shell[hidden]{display:none!important}
body.b2b-route-home .b2b-phase5-home-fallback{
  display:none; margin:12px 0 6px; padding:14px 16px; border-radius:18px;
  background:rgba(8,19,32,.74); border:1px solid rgba(72,220,255,.14); color:#bdefff; font-weight:700;
}
body.b2b-route-home .b2b-phase5-home-fallback.is-on{display:flex; align-items:center; justify-content:space-between; gap:10px}
body.b2b-route-home .b2b-phase5-home-fallback button{
  appearance:none; border:none; border-radius:12px; padding:10px 14px; cursor:pointer;
  background:linear-gradient(135deg, rgba(53,220,255,.96), rgba(45,142,255,.96)); color:#031119; font-weight:900;
}

/* orders page redesign */
body.b2b-route-orders .b2b-page{
  max-width:1280px;
  margin:0 auto;
  padding-bottom:12px;
}
body.b2b-route-orders .b2b-h2{
  font-size:clamp(24px,3vw,38px);
  letter-spacing:-.04em;
  margin:6px 0 18px;
}
body.b2b-route-orders .b2b-muted{
  color:var(--b2b5-sub)!important;
}
body.b2b-route-orders .b2b-card,
body.b2b-route-orders .b2b-list,
body.b2b-route-orders .b2b-table,
body.b2b-route-orders [class*="order" i],
body.b2b-route-orders [class*="Order"],
body.b2b-route-orders [data-order-id],
body.b2b-route-orders article,
body.b2b-route-orders section{
  background:linear-gradient(180deg, rgba(9,20,34,.78), rgba(7,16,27,.92));
  border:1px solid var(--b2b5-line);
  box-shadow:var(--b2b5-shadow);
  border-radius:24px;
  backdrop-filter:blur(16px);
}
body.b2b-route-orders .b2b-card,
body.b2b-route-orders [class*="order" i],
body.b2b-route-orders article{
  padding:18px 18px 16px;
  margin-bottom:16px;
}
body.b2b-route-orders .b2b-card:hover,
body.b2b-route-orders [class*="order" i]:hover,
body.b2b-route-orders article:hover{
  border-color:var(--b2b5-line-strong);
  transform:translateY(-2px);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.b2b-route-orders h3,
body.b2b-route-orders h4,
body.b2b-route-orders strong{
  color:#f3fdff;
}
body.b2b-route-orders button,
body.b2b-route-orders .btn,
body.b2b-route-orders [role="button"]{
  border-radius:14px;
}
body.b2b-route-orders button:not(.b2b-fixdock a),
body.b2b-route-orders .btn-primary,
body.b2b-route-orders [data-variant="primary"]{
  background:linear-gradient(135deg, rgba(53,220,255,.96), rgba(45,142,255,.96));
  color:#031119;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 32px rgba(0,164,255,.22);
}
body.b2b-route-orders table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
}
body.b2b-route-orders table thead th{
  color:#a8ddec;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:0 10px 8px;
}
body.b2b-route-orders table tbody tr{
  background:rgba(255,255,255,.02);
}
body.b2b-route-orders table tbody td{
  padding:14px 10px;
  border-top:1px solid rgba(72,220,255,.10);
  border-bottom:1px solid rgba(72,220,255,.10);
}
body.b2b-route-orders table tbody td:first-child{border-left:1px solid rgba(72,220,255,.10); border-radius:16px 0 0 16px}
body.b2b-route-orders table tbody td:last-child{border-right:1px solid rgba(72,220,255,.10); border-radius:0 16px 16px 0}
body.b2b-route-orders img{border-radius:16px; object-fit:cover; box-shadow:0 10px 22px rgba(0,0,0,.18)}

/* subtle status pill when JS adds class */
body.b2b-route-orders .b2b-phase5-status{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; font-size:12px; font-weight:900; line-height:1;
  border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
body.b2b-route-orders .b2b-phase5-status.is-pending{background:rgba(255,184,76,.14); color:#ffd58d; border-color:rgba(255,184,76,.28)}
body.b2b-route-orders .b2b-phase5-status.is-working{background:rgba(77,231,255,.14); color:#c4fbff; border-color:rgba(77,231,255,.28)}
body.b2b-route-orders .b2b-phase5-status.is-shipped{background:rgba(122,143,255,.16); color:#d6ddff; border-color:rgba(122,143,255,.28)}
body.b2b-route-orders .b2b-phase5-status.is-done{background:rgba(74,214,141,.16); color:#d3ffe3; border-color:rgba(74,214,141,.28)}
body.b2b-route-orders .b2b-phase5-status.is-refund{background:rgba(255,95,122,.18); color:#ffd2da; border-color:rgba(255,95,122,.30)}

@media (max-width: 920px){
  body.b2b-route-home .b2b-phase5-skel-grid{grid-template-columns:1fr}
  body.b2b-route-orders .b2b-card,
  body.b2b-route-orders [class*="order" i],
  body.b2b-route-orders article{padding:16px 14px 14px; border-radius:22px}
  body.b2b-route-orders table{display:block; overflow-x:auto; white-space:nowrap}
}
@media (max-width: 640px){
  body.b2b-route-orders .b2b-page{padding-bottom:8px}
  body.b2b-route-orders .b2b-h2{margin:2px 0 14px; font-size:28px}
  body.b2b-route-home .b2b-phase5-skel-card{height:220px; border-radius:24px}
  body.b2b-route-home .b2b-phase5-skel-line{height:72px; border-radius:18px}
}