/* BiKuBe Customer LK — Sidebar Layout v3 */

:root {
  --sidebar-w: 260px;
  --topbar-h: 60px;
  --bg: #06111e;
  --bg2: #0a1b2c;
  --bg3: #0d2240;
  --sidebar-bg: #040e1a;
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.05);
  --text: #edf6ff;
  --muted: #7a96b0;
  --muted2: #556d84;
  --green: #c8ff00;
  --green2: #a8d600;
  --green-dim: rgba(200,255,0,.12);
  --green-border: rgba(200,255,0,.25);
  --blue: #39ccff;
  --amber: #f5bd54;
  --danger: #ff5a70;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body,button,input,textarea,select{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* ── BODY ── */
.bkb-body {
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── LAYOUT ── */
.bkb-layout {
  display: flex;
  min-height: 100vh;
}

/* ── SIDEBAR ── */
.bkb-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  transition: transform .25s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.bkb-sidebar::-webkit-scrollbar{width:4px}
.bkb-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px}

.bkb-sidebar-logo {
  padding: 1.25rem 1.1rem 1rem;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.bkb-logo-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.bkb-logo-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--green);
  display: grid; place-items: center;
  color: #020e00;
  font-weight: 900;
  font-size: .9rem;
  flex-shrink: 0;
}
.bkb-logo-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.01em;
}

/* NAV */
.bkb-sidebar-nav {
  flex: 1;
  padding: .75rem 0;
  overflow-y: auto;
}
.bkb-nav-section {
  padding: 0 .75rem;
  margin-bottom: .5rem;
}
.bkb-nav-label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted2);
  padding: .6rem .5rem .25rem;
}
.bkb-nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .52rem .65rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
  transition: all .12s ease;
  position: relative;
  margin-bottom: 1px;
}
.bkb-nav-item:hover {
  background: rgba(255,255,255,.05);
  color: var(--text);
}
.bkb-nav-item.active {
  background: var(--green-dim);
  color: var(--green);
  font-weight: 600;
}
.bkb-nav-icon { font-size: .9rem; flex-shrink: 0; width: 18px; text-align: center }
.bkb-nav-text { flex: 1 }
.bkb-nav-badge {
  background: #ff5a70;
  color: white;
  font-size: .6rem;
  font-weight: 900;
  padding: .1rem .4rem;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

/* SIDEBAR USER */
.bkb-sidebar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1rem;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.bkb-sidebar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #020e00;
  font-weight: 900;
  font-size: .82rem;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bkb-sidebar-user-info { flex: 1; min-width: 0 }
.bkb-sidebar-user-name { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bkb-sidebar-user-location { font-size: .7rem; color: var(--muted); margin-top: .05rem }
.bkb-signout-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--muted);
  cursor: pointer;
  font-size: .9rem;
  transition: all .12s;
  flex-shrink: 0;
}
.bkb-signout-btn:hover { border-color: var(--danger); color: var(--danger) }

/* ── MAIN AREA ── */
.bkb-main-area {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── TOPBAR ── */
.bkb-topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(6,17,30,.9);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.bkb-sidebar-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
}
.bkb-sidebar-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px }
.bkb-topbar-right { display: flex; align-items: center; gap: .75rem }
.bkb-location-pill {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
}
.bkb-bell {
  position: relative;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  border: 1px solid var(--line);
  color: var(--text);
  transition: all .12s;
}
.bkb-bell:hover { border-color: var(--green-border) }
.bkb-bell-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 16px; height: 16px;
  background: #ff5a70;
  border-radius: 50%;
  font-size: .58rem;
  font-weight: 900;
  display: grid; place-items: center;
  color: white;
}
.bkb-topbar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #020e00;
  font-weight: 900;
  font-size: .8rem;
  display: grid; place-items: center;
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
ol.bkb-ocp-timeline{list-style:none;margin:0;padding:0}

/* ── FLASH ── */
.bkb-flash {
  padding: .65rem 1.5rem;
  font-size: .85rem;
  font-weight: 600;
}
.bkb-flash-success { background: rgba(200,255,0,.08); color: #d4ff66; border-bottom: 1px solid rgba(200,255,0,.15) }
.bkb-flash-error { background: rgba(255,90,112,.08); color: #ffb3bc; border-bottom: 1px solid rgba(255,90,112,.15) }

/* ── PAGE CONTENT ── */
.bkb-page-content {
  flex: 1;
  padding: 1.75rem 1.5rem;
  max-width: 1400px;
  width: 100%;
}

/* ── FOOTER ── */
.bkb-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--muted2);
  flex-shrink: 0;
}
.bkb-footer nav { display: flex; gap: 1rem }
.bkb-footer a { color: var(--muted); text-decoration: none }
.bkb-footer a:hover { color: var(--green) }

/* ── MOBILE OVERLAY ── */
.bkb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 199;
}
.bkb-overlay.show { display: block }

/* ── CARDS ── */
.bkb-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: border-color .15s, box-shadow .15s;
}
.bkb-card:hover { border-color: rgba(255,255,255,.12) }
.bkb-card-green {
  border-color: var(--green-border) !important;
  background: linear-gradient(135deg, rgba(200,255,0,.07), var(--bg2)) !important;
}

/* ── SECTION HEADERS ── */
.bkb-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.bkb-section-title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.bkb-section-link {
  font-size: .78rem;
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}
.bkb-section-link:hover { text-decoration: underline }

/* ── HERO BANNER ── */
.bkb-hero {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 220px;
  background: linear-gradient(135deg, #051428 0%, #0a2440 50%, #061a30 100%);
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem;
}
.bkb-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(0,180,120,.35) 0%, transparent 45%),
    radial-gradient(ellipse at 50% -20%, rgba(0,100,200,.45) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 30%, rgba(200,255,0,.12) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 80%, rgba(0,60,120,.6) 0%, transparent 50%),
    linear-gradient(180deg, #020d1a 0%, #061830 40%, #051020 100%);
  z-index: 0;
}
.bkb-hero-mountains {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(2,10,20,.95), transparent);
  z-index: 1;
}
/* Aurora effect */
.bkb-hero-aurora {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(160deg,
    rgba(0,200,120,.25) 0%,
    rgba(0,100,200,.2) 30%,
    rgba(100,0,200,.15) 60%,
    transparent 100%
  );
  animation: aurora 8s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes aurora {
  0% { opacity: .6; transform: translateX(-5%) scaleY(.95) }
  100% { opacity: 1; transform: translateX(5%) scaleY(1.05) }
}
.bkb-hero-content { position: relative; z-index: 2 }
.bkb-hero-greeting {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 .4rem;
}
.bkb-hero-sub { color: rgba(255,255,255,.65); font-size: .88rem; margin: 0 0 1.1rem }
.bkb-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--green); color: #020e00;
  border: 0; border-radius: var(--radius-sm);
  padding: .58rem 1.1rem; font: 700 .85rem/1 inherit;
  cursor: pointer; text-decoration: none;
  transition: all .12s;
}
.btn-primary:hover { background: var(--green2); transform: translateY(-1px) }
.btn-secondary {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,255,255,.08); border: 1px solid var(--line);
  color: var(--text); border-radius: var(--radius-sm);
  padding: .58rem 1rem; font: 600 .85rem/1 inherit;
  cursor: pointer; text-decoration: none;
  transition: all .12s;
}
.btn-secondary:hover { background: rgba(255,255,255,.13); border-color: rgba(200,255,0,.25) }
.btn-danger {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,90,112,.12); border: 1px solid rgba(255,90,112,.3);
  color: var(--danger); border-radius: var(--radius-sm);
  padding: .58rem 1rem; font: 600 .85rem/1 inherit;
  cursor: pointer; text-decoration: none; transition: all .12s;
}
.btn-danger:hover { background: rgba(255,90,112,.2) }
.btn-sm { padding: .38rem .75rem; font-size: .78rem }

/* ── STATUS CHIPS ── */
.chip {
  display: inline-flex; align-items: center; gap: .28rem;
  border-radius: 999px; padding: .2rem .6rem;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid transparent; white-space: nowrap;
}
.chip-dot { width: .4rem; height: .4rem; border-radius: 50%; flex-shrink: 0 }
.chip-green  { background: var(--green-dim); border-color: var(--green-border); color: var(--green) }
.chip-green .chip-dot { background: var(--green) }
.chip-blue   { background: rgba(57,204,255,.1);  border-color: rgba(57,204,255,.25); color: var(--blue) }
.chip-amber  { background: rgba(245,189,84,.1);  border-color: rgba(245,189,84,.25); color: var(--amber) }
.chip-danger { background: rgba(255,90,112,.1);  border-color: rgba(255,90,112,.25); color: var(--danger) }
.chip-muted  { background: rgba(120,150,180,.08);border-color: rgba(120,150,180,.2); color: var(--muted) }

/* ── STATS CARDS ── */
.bkb-stat {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.bkb-stat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.bkb-stat-icon-green { background: var(--green-dim) }
.bkb-stat-icon-blue  { background: rgba(57,204,255,.1) }
.bkb-stat-icon-amber { background: rgba(245,189,84,.1) }
.bkb-stat-value { font-size: 1.8rem; font-weight: 900; line-height: 1; letter-spacing: -.02em }
.bkb-stat-label { font-size: .7rem; color: var(--muted); margin-top: .2rem }
.bkb-stat-sub   { font-size: .72rem; color: var(--muted2); margin-top: .15rem }

/* ── TIMELINE ── */
.bkb-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: .75rem 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.bkb-timeline::-webkit-scrollbar { display: none }
.bkb-tl-step {
  flex: 1; min-width: 64px;
  display: flex; flex-direction: column; align-items: center;
  gap: .3rem; position: relative; text-align: center;
}
.bkb-tl-step::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.bkb-tl-step:last-child::after { display: none }
.bkb-tl-step.done::after { background: var(--green) }
.bkb-tl-step.active::after { background: linear-gradient(90deg, var(--green), var(--line)) }
.bkb-tl-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 900;
  position: relative; z-index: 1;
  flex-shrink: 0; border: 2px solid;
}
.bkb-tl-step.pending .bkb-tl-dot { background: var(--bg3); border-color: var(--line); color: var(--muted) }
.bkb-tl-step.done .bkb-tl-dot { background: var(--green); border-color: var(--green); color: #020e00 }
.bkb-tl-step.active .bkb-tl-dot {
  background: var(--green); border-color: var(--green); color: #020e00;
  box-shadow: 0 0 0 4px var(--green-dim), 0 0 0 8px rgba(200,255,0,.06);
  animation: tl-pulse 2s infinite;
}
@keyframes tl-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(200,255,0,.25) }
  50%      { box-shadow: 0 0 0 6px rgba(200,255,0,.15) }
}
.bkb-tl-label {
  font-size: .6rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase;
  line-height: 1.2;
}
.bkb-tl-step.done .bkb-tl-label,
.bkb-tl-step.active .bkb-tl-label { color: var(--text) }
.bkb-tl-time { font-size: .6rem; color: var(--green); font-weight: 700 }

/* ── QUICK ACTIONS GRID ── */
.bkb-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.bkb-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .65rem .4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg3);
  text-decoration: none;
  color: var(--text);
  font-size: .7rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all .12s;
  line-height: 1.2;
}
.bkb-quick-item:hover { border-color: var(--green-border); background: var(--green-dim); color: var(--green) }
.bkb-quick-icon { font-size: 1.25rem }

/* ── MAP PLACEHOLDER ── */
.bkb-map-placeholder {
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  background: #0a1e30;
  border: 1px solid var(--line);
}
.bkb-map-route {
  width: 100%; height: 100%;
  display: block;
}

/* ── ORDER ROW ── */
.bkb-order-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line2);
  text-decoration: none;
  color: inherit;
  transition: opacity .12s;
}
.bkb-order-row:last-child { border-bottom: none }
.bkb-order-row:hover { opacity: .8 }
.bkb-order-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg3);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.bkb-order-info { flex: 1; min-width: 0 }
.bkb-order-num { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bkb-order-desc { font-size: .75rem; color: var(--muted); margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bkb-order-meta { text-align: right; flex-shrink: 0 }
.bkb-order-time { font-size: .72rem; color: var(--muted); margin-top: .2rem }

/* ── NOTIFICATION ROW ── */
.bkb-notif-row {
  display: flex;
  gap: .65rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line2);
}
.bkb-notif-row:last-child { border-bottom: none }
.bkb-notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: .4rem;
}
.bkb-notif-dot.read { background: var(--line) }
.bkb-notif-title { font-size: .82rem; font-weight: 600; margin: 0 }
.bkb-notif-body { font-size: .75rem; color: var(--muted); margin: .15rem 0 0 }
.bkb-notif-time { font-size: .68rem; color: var(--muted2); margin-top: .2rem }

/* ── ADDRESS ROW ── */
.bkb-addr-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line2);
}
.bkb-addr-row:last-child { border-bottom: none }
.bkb-addr-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg3);
  display: grid; place-items: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.bkb-addr-label { font-size: .82rem; font-weight: 600; margin: 0 }
.bkb-addr-text { font-size: .72rem; color: var(--muted); margin-top: .05rem }

/* ── PAYMENT ROW ── */
.bkb-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line2);
  font-size: .82rem;
}
.bkb-pay-row:last-child { border-bottom: none }
.bkb-pay-amount { font-weight: 700 }
.bkb-pay-sub { font-size: .7rem; color: var(--muted) }

/* ── PREMIUM BANNER ── */
.bkb-premium {
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(200,255,0,.12), rgba(200,255,0,.04));
  border: 1px solid var(--green-border);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.bkb-premium-icon { font-size: 1.6rem; flex-shrink: 0 }
.bkb-premium-title { font-size: .9rem; font-weight: 700; color: var(--green) }
.bkb-premium-text { font-size: .78rem; color: var(--muted); margin: .15rem 0 0 }

/* ── FORMS ── */
.bkb-input, .bkb-textarea, .bkb-select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
  background: var(--bg3);
  color: var(--text);
  font: 14px/1.5 inherit;
  outline: none;
  transition: border-color .12s;
}
.bkb-input:focus, .bkb-textarea:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(200,255,0,.1) }
.bkb-textarea { resize: vertical; min-height: 90px }
.bkb-form { display: grid; gap: .85rem }
.bkb-label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem }

/* ── BREADCRUMBS ── */
.bkb-breadcrumbs {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: 1.1rem; font-size: .78rem; color: var(--muted);
}
.bkb-breadcrumbs a { color: var(--muted); text-decoration: none }
.bkb-breadcrumbs a:hover { color: var(--green) }

/* ── PAGE HEADER ── */
.bkb-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.bkb-page-title {
  margin: 0 0 .2rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.bkb-page-sub { margin: 0; color: var(--muted); font-size: .85rem }

/* ── GRIDS ── */
.bkb-grid { display: grid; gap: 1rem }
.bkb-grid-2 { grid-template-columns: 1fr 1fr }
.bkb-grid-3 { grid-template-columns: 1fr 1fr 1fr }
.bkb-grid-4 { grid-template-columns: repeat(4, 1fr) }
.bkb-col-2 { grid-column: span 2 }
.bkb-col-3 { grid-column: span 3 }

/* ── DATA ROWS ── */
.bkb-kv { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line2); font-size: .85rem }
.bkb-kv:last-child { border-bottom: none }
.bkb-kv-key { color: var(--muted); flex-shrink: 0 }
.bkb-kv-val { text-align: right; font-weight: 600 }
.bkb-divider { border: none; border-top: 1px solid var(--line); margin: 1rem 0 }

/* ── FILTER TABS ── */
.bkb-filter-tabs { display: flex; gap: .25rem; background: var(--bg3); border: 1px solid var(--line); border-radius: 999px; padding: .25rem; width: fit-content }
.bkb-filter-tab { padding: .32rem .8rem; border-radius: 999px; border: none; background: transparent; color: var(--muted); font: 600 .78rem/1 inherit; cursor: pointer; transition: all .12s }
.bkb-filter-tab.active { background: var(--green-dim); color: var(--green); box-shadow: inset 0 0 0 1px var(--green-border) }
.bkb-filter-tab:hover:not(.active) { color: var(--text) }

/* ── SEARCH ── */
.bkb-search { position: relative }
.bkb-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none }
.bkb-search input { padding-left: 2.1rem }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px) }
  to   { opacity: 1; transform: translateY(0) }
}
.fade-up   { animation: fadeUp .3s ease forwards }
.fade-up-1 { animation-delay: .05s; opacity: 0 }
.fade-up-2 { animation-delay: .1s;  opacity: 0 }
.fade-up-3 { animation-delay: .15s; opacity: 0 }
.fade-up-4 { animation-delay: .2s;  opacity: 0 }

@keyframes shimmer {
  from { background-position: -200% 0 }
  to   { background-position:  200% 0 }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200%; animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm); color: transparent !important;
}

/* ── EMPTY STATE ── */
.bkb-empty { display: grid; place-items: center; text-align: center; padding: 3rem 1.5rem; color: var(--muted) }
.bkb-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .5 }
.bkb-empty h2 { color: var(--text); margin: 0 0 .4rem; font-size: 1.1rem }
.bkb-empty p  { margin: 0 0 1.25rem; font-size: .85rem }

/* ── TABLE ── */
.bkb-table { width: 100%; border-collapse: collapse; font-size: .85rem }
.bkb-table th { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em }
.bkb-table td { padding: .7rem .7rem; border-bottom: 1px solid var(--line2); color: var(--text) }
.bkb-table tr:last-child td { border-bottom: none }
.bkb-table tr:hover td { background: rgba(255,255,255,.02) }

/* ── PROOF CARD ── */
.bkb-proof-card { border: 1px solid rgba(245,189,84,.25); background: rgba(245,189,84,.05); border-radius: var(--radius-sm); padding: 1.1rem }

/* ── PRINT ── */
@media print {
  .bkb-sidebar,.bkb-topbar,.bkb-footer,.bkb-mobile-nav,.no-print { display: none !important }
  .bkb-main-area { margin-left: 0 !important }
  .bkb-body { background: white !important; color: black !important }
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .bkb-grid-4 { grid-template-columns: 1fr 1fr }
}
@media (max-width: 900px) {
  .bkb-grid-3 { grid-template-columns: 1fr 1fr }
  .bkb-grid-4 { grid-template-columns: 1fr 1fr }
  .bkb-col-2, .bkb-col-3 { grid-column: span 1 }
}
@media (max-width: 768px) {
  .bkb-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }
  .bkb-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(0,0,0,.6);
  }
  .bkb-main-area { margin-left: 0 }
  .bkb-sidebar-toggle { display: flex }
  .bkb-grid-2 { grid-template-columns: 1fr }
  .bkb-grid-3 { grid-template-columns: 1fr }
  .bkb-grid-4 { grid-template-columns: 1fr 1fr }
  .bkb-page-content { padding: 1rem }
  .bkb-quick-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 480px) {
  .bkb-grid-4 { grid-template-columns: 1fr 1fr }
  .bkb-page-title { font-size: 1.4rem }
  .bkb-hero { min-height: 180px; padding: 1.25rem }
  .bkb-hero-greeting { font-size: 1.4rem }
}

/* ── LEGACY COMPAT ── */
.shell-card { background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem }
.shell-eyebrow { display:block;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem }
.shell-primary { display:inline-flex;align-items:center;gap:.35rem;background:var(--green);color:#020e00;border:0;border-radius:var(--radius-sm);padding:.58rem 1.1rem;font:700 .85rem/1 inherit;cursor:pointer;text-decoration:none }
.shell-muted { color:var(--muted) }
.shell-grid { display:grid;gap:.75rem }
.shell-grid.cards { grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)) }
.shell-header { display:none }
.shell-main { min-height:calc(100vh - 9rem);padding:1.75rem 1.5rem;max-width:1400px }
.shell-footer { display:none }

/* ─────────────────────────────────────────────────────────────
   BiKuBe Customer Account OS — premium responsive webapp polish v4
   Principles: real data only, no fake GPS/ETA/route/movement, app-grade mobile.
   ───────────────────────────────────────────────────────────── */
:root{
  --surface-glass: rgba(10,27,44,.78);
  --surface-glass-strong: rgba(13,34,64,.84);
  --app-shadow: 0 18px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045);
  --focus-ring: 0 0 0 3px rgba(200,255,0,.18);
}
html{scroll-behavior:smooth;background:#040e1a}
.bkb-body{
  background:
    radial-gradient(circle at 18% -8%, rgba(57,204,255,.16), transparent 34rem),
    radial-gradient(circle at 86% 8%, rgba(200,255,0,.10), transparent 28rem),
    linear-gradient(180deg,#040e1a 0%,#06111e 45%,#040b14 100%);
  letter-spacing:-.01em;
  padding-top: env(safe-area-inset-top);
}
.bkb-page-content{margin-inline:auto;padding:clamp(1rem,2.2vw,2rem);}
.bkb-topbar{background:rgba(4,14,26,.72);backdrop-filter:saturate(150%) blur(22px);-webkit-backdrop-filter:saturate(150%) blur(22px)}
.bkb-sidebar{background:linear-gradient(180deg,rgba(4,14,26,.98),rgba(3,10,18,.98));backdrop-filter:blur(18px)}
.bkb-logo-icon,.bkb-sidebar-avatar,.bkb-topbar-avatar{box-shadow:0 0 28px rgba(200,255,0,.22)}
.bkb-card,.bkb-stat,.bkb-premium,.bkb-map-placeholder,.order-card{
  background:linear-gradient(180deg,var(--surface-glass),rgba(6,17,30,.72));
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  box-shadow:var(--app-shadow);
}
.bkb-card{position:relative;overflow:hidden}.bkb-card::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);pointer-events:none}
.bkb-card:hover,.order-card:hover{transform:translateY(-1px);border-color:rgba(200,255,0,.18);box-shadow:0 22px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06)}
.bkb-hero{min-height:clamp(230px,28vw,360px);box-shadow:0 30px 100px rgba(0,0,0,.38);isolation:isolate}
.bkb-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,8,15,.82),rgba(2,8,15,.42),rgba(2,8,15,.70));z-index:1;pointer-events:none}.bkb-hero-content{z-index:3;max-width:760px}.bkb-hero-greeting{font-size:clamp(2rem,5.4vw,4.35rem);font-weight:900;line-height:.96;letter-spacing:-.07em;text-wrap:balance}.bkb-hero-sub{font-size:clamp(.95rem,1.5vw,1.12rem);max-width:620px;color:rgba(237,246,255,.76)}
.bkb-hero-mountains{display:none!important}
.btn-primary,.btn-secondary,.btn-danger,.bkb-quick-item,.bkb-nav-item,.bkb-bell,.bkb-signout-btn{min-height:44px;touch-action:manipulation}.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-danger:focus-visible,.bkb-nav-item:focus-visible,.bkb-quick-item:focus-visible,.bkb-filter-tab:focus-visible,.bkb-input:focus{outline:0;box-shadow:var(--focus-ring)}
.btn-primary{border-radius:999px;box-shadow:0 10px 34px rgba(200,255,0,.22)}.btn-secondary{border-radius:999px;background:rgba(255,255,255,.07)}
.bkb-stat{align-items:flex-start}.bkb-stat-value{font-variant-numeric:tabular-nums}.bkb-section-title{font-size:.7rem;letter-spacing:.12em;color:#8faac2}.chip{font-variant-numeric:tabular-nums}
.bkb-action-dock{position:sticky;top:calc(var(--topbar-h) + 1rem)}.bkb-trust-card{border-color:rgba(57,204,255,.18)}.bkb-truth-row{display:flex;gap:.72rem;padding:.72rem 0;border-bottom:1px solid var(--line2)}.bkb-truth-row:last-child{border-bottom:0}.bkb-truth-row>span{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(57,204,255,.08);border:1px solid rgba(57,204,255,.18);flex-shrink:0}.bkb-truth-row b{display:block;font-size:.84rem}.bkb-truth-row small{display:block;color:var(--muted);font-size:.73rem;line-height:1.35;margin-top:.12rem}.bkb-service-promise{background:linear-gradient(135deg,rgba(200,255,0,.14),rgba(57,204,255,.08),rgba(10,27,44,.82));}
.bkb-filter-tabs{overflow:auto;max-width:100%;scrollbar-width:none}.bkb-filter-tabs::-webkit-scrollbar{display:none}.order-card{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.bkb-kv-val{overflow-wrap:anywhere}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.bkb-hero-aurora{animation:none!important}}
@media (min-width: 1440px){.bkb-page-content{max-width:1480px}.bkb-hero{min-height:380px}}
@media (max-width: 980px){.bkb-page-content>div[style*="grid-template-columns:1fr 320px"]{grid-template-columns:1fr!important}.bkb-action-dock{position:relative;top:auto}.bkb-location-pill span:nth-child(2){display:none}}
@media (max-width: 768px){
  :root{--topbar-h:56px}.bkb-topbar{padding:0 max(1rem,env(safe-area-inset-left)) 0 max(1rem,env(safe-area-inset-right));position:sticky}.bkb-page-content{padding:1rem max(1rem,env(safe-area-inset-right)) calc(5.5rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.bkb-footer{display:none}.bkb-sidebar{width:min(86vw,340px)}.bkb-sidebar-logo{padding-top:calc(1rem + env(safe-area-inset-top))}.bkb-topbar-right{gap:.5rem}.bkb-hero{border-radius:24px;min-height:300px;padding:1.2rem}.bkb-hero-actions{display:grid;grid-template-columns:1fr;gap:.55rem}.bkb-hero-actions a{justify-content:center}.bkb-card,.bkb-stat,.bkb-premium{border-radius:22px}.bkb-section-header{align-items:flex-start;gap:.7rem}.bkb-page-header{display:grid}.bkb-page-header .btn-primary{width:100%;justify-content:center}.bkb-filter-tabs{width:100%;padding:.3rem}.bkb-filter-tab{flex:1;min-width:max-content}.bkb-search{width:100%;max-width:none!important;margin-left:0!important}.bkb-order-row,.bkb-pay-row,.bkb-kv{align-items:flex-start}.bkb-kv{display:grid;gap:.2rem}.bkb-kv-val{text-align:left}.order-card [style*="text-align:right"]{text-align:left!important;width:100%}.order-card a>div:first-child{align-items:flex-start!important}.bkb-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.bkb-quick-item{border-radius:18px;padding:.8rem .35rem}.bkb-quick-icon{font-size:1.15rem}.bkb-premium{align-items:flex-start;display:grid;grid-template-columns:auto 1fr}.bkb-premium .btn-primary{grid-column:1/-1;justify-content:center}
}
@media (max-width: 420px){.bkb-page-content{padding-left:.78rem;padding-right:.78rem}.bkb-topbar-avatar,.bkb-bell{width:34px;height:34px}.bkb-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bkb-stat{padding:1rem}.bkb-stat-icon{width:40px;height:40px}.bkb-stat-value{font-size:1.55rem}.bkb-page-title{font-size:1.65rem}.bkb-breadcrumbs{font-size:.72rem;overflow:auto;white-space:nowrap}.bkb-hero{min-height:280px}}

/* ─────────────────────────────────────────────────────────────
   BiKuBe Customer Order Command Panel v1
   Premium digital tracker. UI-only; no payment/status mutations.
   ───────────────────────────────────────────────────────────── */
.bkb-order-command-panel{position:relative;overflow:hidden;margin:0 0 1.1rem;border:1px solid rgba(57,204,255,.22);border-radius:32px;background:linear-gradient(135deg,rgba(5,20,36,.92),rgba(8,31,51,.78));box-shadow:0 28px 90px rgba(0,0,0,.42),0 0 0 1px rgba(200,255,0,.045) inset;isolation:isolate}.bkb-ocp-bg{position:absolute;inset:-35% -10% auto;height:28rem;background:radial-gradient(circle at 16% 26%,rgba(200,255,0,.20),transparent 18rem),radial-gradient(circle at 78% 12%,rgba(57,204,255,.22),transparent 20rem),radial-gradient(circle at 54% 80%,rgba(59,70,255,.13),transparent 18rem);filter:blur(14px);opacity:.9;animation:softGlow 8s cubic-bezier(.22,.8,.22,1) infinite alternate;z-index:-2}.bkb-ocp-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,rgba(200,255,0,.07) 46%,rgba(57,204,255,.05) 50%,transparent 54%);transform:translateY(-110%);animation:scanLine 5.6s cubic-bezier(.4,0,.2,1) infinite;z-index:-1;pointer-events:none}.bkb-ocp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:clamp(1rem,2vw,1.4rem) clamp(1rem,2.4vw,1.65rem) 0}.bkb-ocp-kicker{display:block;margin-bottom:.5rem;color:#9fb7cc;font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.bkb-ocp-header h2{margin:0;color:#f7fbff;font-size:clamp(1.65rem,4vw,3.5rem);line-height:.96;font-weight:950;letter-spacing:-.065em;overflow-wrap:anywhere;text-wrap:balance}.bkb-ocp-header p{margin:.55rem 0 0;color:#93aeca;font-size:clamp(.92rem,1.4vw,1.05rem)}.bkb-ocp-status{display:inline-flex;align-items:center;gap:.55rem;min-height:42px;padding:.46rem .85rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#eaf5ff;font-size:.78rem;font-weight:950;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}.bkb-ocp-status span{width:.62rem;height:.62rem;border-radius:50%;background:#c8ff00;box-shadow:0 0 0 .35rem rgba(200,255,0,.12),0 0 24px rgba(200,255,0,.48)}.bkb-ocp-status.is-live span{animation:statusPulse 1.7s ease-in-out infinite}.bkb-ocp-status.is-closed span{background:#39ccff;box-shadow:0 0 0 .35rem rgba(57,204,255,.12),0 0 24px rgba(57,204,255,.38)}.bkb-ocp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,34%);gap:1rem;padding:1rem clamp(1rem,2.4vw,1.65rem)}.bkb-ocp-primary{display:grid;gap:1rem}.bkb-ocp-now{border:1px solid rgba(255,255,255,.09);border-radius:24px;background:rgba(1,10,20,.28);padding:1rem}.bkb-ocp-now span{display:block;color:#c8ff00;font-size:.68rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.bkb-ocp-now strong{display:block;margin:.35rem 0;color:#f7fbff;font-size:clamp(1.25rem,2.5vw,2.1rem);line-height:1.05;letter-spacing:-.04em}.bkb-ocp-now p{margin:0;color:#9fb7cc;font-size:.9rem;line-height:1.5}.bkb-ocp-timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.48rem}.bkb-ocp-step{position:relative;min-height:76px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035);padding:.65rem .55rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.bkb-ocp-step::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.10) 45%,transparent 65%);transform:translateX(-120%)}.bkb-ocp-step.current::after{animation:scanLine 2.7s ease-in-out infinite}.bkb-ocp-step i{width:24px;height:24px;border-radius:10px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06)}.bkb-ocp-step b{color:#8faac2;font-size:.67rem;line-height:1.15;letter-spacing:.02em}.bkb-ocp-step.done i{background:#c8ff00;box-shadow:0 0 20px rgba(200,255,0,.32)}.bkb-ocp-step.done b{color:#dfffa5}.bkb-ocp-step.current{border-color:rgba(200,255,0,.42);box-shadow:0 0 35px rgba(200,255,0,.13),0 0 0 1px rgba(200,255,0,.07) inset}.bkb-ocp-step.current i{background:#c8ff00;animation:markerPing 1.8s ease-out infinite}.bkb-ocp-step.current b{color:#f7fbff}.bkb-ocp-map{min-height:210px;border:1px solid rgba(57,204,255,.18);border-radius:26px;background:radial-gradient(circle at 50% 20%,rgba(57,204,255,.12),transparent 14rem),rgba(1,10,20,.44);display:grid;place-items:center;overflow:hidden}.bkb-ocp-map svg{width:100%;height:100%;min-height:210px}.ocp-route-shadow{fill:none;stroke:rgba(200,255,0,.16);stroke-width:12;filter:url(#ocpGlow)}.ocp-route{fill:none;stroke:url(#ocpRoute);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:12 12;animation:routeFlow 2.8s linear infinite;filter:url(#ocpGlow)}.ocp-marker{fill:#c8ff00;filter:url(#ocpGlow);animation:markerPing 1.8s ease-out infinite}.ocp-marker.start{fill:#39ccff}.ocp-sweep{stroke:rgba(200,255,0,.14);stroke-width:34;animation:scanLine 3.8s ease-in-out infinite}.bkb-ocp-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;padding:0 clamp(1rem,2.4vw,1.65rem) clamp(1rem,2vw,1.4rem)}.bkb-ocp-metrics>div{min-height:92px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.04);padding:.82rem;display:flex;flex-direction:column;justify-content:space-between}.bkb-ocp-metrics span{color:#8faac2;font-size:.67rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.bkb-ocp-metrics strong{color:#eef7ff;font-size:.86rem;line-height:1.3;overflow-wrap:anywhere}@keyframes statusPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.82}}@keyframes routeFlow{to{stroke-dashoffset:-48}}@keyframes scanLine{0%{transform:translateY(-120%)}55%,100%{transform:translateY(120%)}}@keyframes softGlow{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(1%,1%,0) scale(1.04)}}@keyframes markerPing{0%{box-shadow:0 0 0 0 rgba(200,255,0,.34)}70%{box-shadow:0 0 0 11px rgba(200,255,0,0)}100%{box-shadow:0 0 0 0 rgba(200,255,0,0)}}@media (max-width:1000px){.bkb-ocp-body{grid-template-columns:1fr}.bkb-ocp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.bkb-ocp-map{min-height:180px}.bkb-ocp-map svg{min-height:180px}}@media (max-width:640px){.bkb-order-command-panel{border-radius:24px;margin-bottom:1rem}.bkb-ocp-header{display:grid}.bkb-ocp-status{width:max-content}.bkb-ocp-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}.bkb-ocp-step{min-height:68px}.bkb-ocp-metrics{grid-template-columns:1fr}.bkb-ocp-metrics>div{min-height:74px}.bkb-ocp-body{padding:.85rem}.bkb-ocp-header{padding:.95rem .95rem 0}.bkb-ocp-metrics{padding:0 .85rem .85rem}}@media (prefers-reduced-motion:reduce){.bkb-ocp-bg,.bkb-ocp-scan,.bkb-ocp-status span,.bkb-ocp-step.current::after,.bkb-ocp-step.current i,.ocp-route,.ocp-marker,.ocp-sweep{animation:none!important}}

/* Customer order detail live cockpit refinement */
.bkb-ocp-body-live{grid-template-columns:minmax(360px,46%) minmax(0,1fr);align-items:stretch}.bkb-ocp-map-live{position:relative;min-height:275px;padding:0;display:block;background:#061321}.bkb-command-map{position:absolute;inset:0;width:100%;height:100%;z-index:1}.bkb-ocp-map-live::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 18% 58%,rgba(200,255,0,.22),transparent 7rem),radial-gradient(circle at 76% 32%,rgba(57,204,255,.18),transparent 8rem),linear-gradient(90deg,rgba(2,11,22,.55),transparent 46%,rgba(2,11,22,.28))}.bkb-map-live-badge{position:absolute;left:14px;top:14px;z-index:4;padding:.25rem .55rem;border-radius:999px;border:1px solid rgba(200,255,0,.32);background:rgba(1,10,20,.72);color:#dfff9a;font-size:.62rem;font-weight:950;letter-spacing:.08em}.bkb-ocp-map-live .map-pulse{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:.45rem;text-align:center;color:#cfe2f1;font-size:.78rem;max-width:78%;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(1,10,20,.66);backdrop-filter:blur(12px)}.bkb-ocp-map-live .map-pulse span:first-child{font-size:1.5rem;color:var(--green);filter:drop-shadow(0 0 14px rgba(200,255,0,.55))}.bkb-courier-map-dot{width:20px;height:20px;border-radius:50%;background:var(--green,#c8ff00);border:3px solid rgba(200,255,0,.42);box-shadow:0 0 0 7px rgba(200,255,0,.16),0 0 28px rgba(200,255,0,.52);animation:markerPing 1.8s ease-out infinite}.bkb-ocp-now-hero{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;min-height:132px;background:linear-gradient(135deg,rgba(200,255,0,.08),rgba(57,204,255,.04)),rgba(1,10,20,.30)}.bkb-ocp-now-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:1.55rem;border:1px solid rgba(200,255,0,.35);box-shadow:0 0 30px rgba(200,255,0,.22),inset 0 0 20px rgba(200,255,0,.10)}.bkb-ocp-now small{display:inline-flex;margin-top:.55rem;color:#d8f990;font-size:.75rem;font-weight:800}.bkb-ocp-step i{display:grid;place-items:center;color:#0a1500;font-style:normal;font-size:.75rem;font-weight:950}.bkb-ocp-step.pending i{color:#91a7bb}.bkb-ocp-next{margin:0 clamp(1rem,2.4vw,1.65rem) clamp(1rem,2vw,1.4rem);display:flex;align-items:center;gap:.75rem;padding:.72rem .85rem;border:1px solid rgba(200,255,0,.18);border-radius:16px;background:linear-gradient(90deg,rgba(200,255,0,.09),rgba(57,204,255,.04),rgba(1,10,20,.22));color:#b9cbda}.bkb-ocp-next span{color:var(--green);font-size:1.1rem}.bkb-ocp-next b{color:#dfff9a;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.bkb-ocp-next p{margin:0;flex:1;font-size:.82rem}.bkb-ocp-next a{color:#39ccff;text-decoration:none;font-weight:800;white-space:nowrap}.bkb-grid>.bkb-card{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(8,29,48,.92),rgba(5,16,29,.88));box-shadow:0 18px 55px rgba(0,0,0,.28)}.bkb-grid>.bkb-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 28%,rgba(200,255,0,.11),transparent 8rem),radial-gradient(circle at 20% 82%,rgba(57,204,255,.08),transparent 9rem)}.bkb-grid>.bkb-card>*{position:relative;z-index:1}.bkb-grid .btn-secondary{justify-content:space-between;border-radius:14px;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.09)}@media (max-width:1000px){.bkb-ocp-body-live{grid-template-columns:1fr}.bkb-ocp-map-live{min-height:240px}}@media (max-width:640px){.bkb-ocp-map-live{min-height:220px}.bkb-ocp-now-hero{grid-template-columns:1fr}.bkb-ocp-now-icon{width:52px;height:52px}.bkb-ocp-next{display:grid;grid-template-columns:auto 1fr}.bkb-ocp-next a{grid-column:2}}

/* ── MOBILE BOTTOM NAV ── */
.bkb-mobile-nav {
  display: none;
}
@media (max-width: 900px) {
  .bkb-mobile-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: var(--sidebar-bg);
    border-top: 1px solid var(--line);
    padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
    padding-bottom: calc(.4rem + env(safe-area-inset-bottom));
  }
  .bkb-mnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .3rem .2rem;
    border: none;
    background: none;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
  }
  .bkb-mnav-item.active { color: var(--green); }
  .bkb-mnav-icon { font-size: 1.15rem; line-height: 1; }
  .bkb-page-content, .bkb-main-area { padding-bottom: 4.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   BiKuBe Customer LK — App Layer v4
   Appended layer: upgrades tokens, depth, motion, mobile app feel.
   Same class vocabulary as v3 — later rules win the cascade.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --radius: 18px;
  --radius-sm: 12px;
  --card-bg: linear-gradient(160deg, rgba(13,32,54,.86), rgba(7,19,33,.94));
  --card-line: rgba(148,190,222,.10);
  --card-line-hover: rgba(200,255,0,.22);
  --shadow-soft: 0 10px 34px rgba(0,0,0,.32);
  --shadow-lift: 0 18px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(200,255,0,.05) inset;
  --ease-spring: cubic-bezier(.22,.9,.28,1.12);
}

/* ── Ambient background: subtle depth instead of flat navy ── */
.bkb-body {
  background:
    radial-gradient(ellipse 90% 45% at 85% -8%, rgba(20,78,120,.32), transparent),
    radial-gradient(ellipse 55% 32% at 8% 4%, rgba(200,255,0,.05), transparent),
    var(--bg);
  background-attachment: fixed;
}

/* ── Typography rhythm ── */
.bkb-page-title { font-size: clamp(1.65rem, 3.2vw, 2.15rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.08 }
.bkb-page-sub { font-size: .92rem }

/* ── Cards: glass depth, lift on hover, press feedback ── */
.bkb-card {
  background: var(--card-bg);
  border-color: var(--card-line);
  box-shadow: var(--shadow-soft);
  transition: border-color .18s ease, box-shadow .22s ease, transform .18s var(--ease-spring);
}
a .bkb-card:hover, a.bkb-card:hover, .bkb-card:has(> a:only-child):hover {
  border-color: var(--card-line-hover);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
a .bkb-card:active, a.bkb-card:active { transform: translateY(0) scale(.995) }

.bkb-stat {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ── Buttons: tactile press, focus ring ── */
.btn-primary, .btn-secondary, .btn-danger {
  transition: transform .12s var(--ease-spring), box-shadow .15s ease, background .15s ease, border-color .15s ease;
  will-change: transform;
}
.btn-primary:hover { box-shadow: 0 6px 22px rgba(200,255,0,.28) }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: scale(.96) }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible,
.bkb-nav-item:focus-visible, .bkb-mnav-item:focus-visible, a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Sidebar: active pill indicator ── */
.bkb-nav-item { position: relative }
.bkb-nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.75rem; top: 20%;
  height: 60%; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
  box-shadow: 0 0 12px rgba(200,255,0,.5);
}
.bkb-nav-icon svg, .bkb-mnav-icon svg { width: 18px; height: 18px; display: block }
.bkb-nav-icon, .bkb-mnav-icon { display: grid; place-items: center }

/* ── Topbar: deeper blur, tighter mobile ── */
.bkb-topbar { background: rgba(4,13,24,.78); backdrop-filter: blur(22px) saturate(1.3) }

/* ── Mobile bottom nav: floating dock ── */
@media (max-width: 900px) {
  .bkb-mobile-nav {
    left: .6rem; right: .6rem;
    bottom: calc(.55rem + env(safe-area-inset-bottom));
    padding: .3rem;
    border: 1px solid rgba(148,190,222,.14);
    border-radius: 22px;
    background: rgba(4,14,26,.86);
    backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
  }
  .bkb-mnav-item {
    padding: .42rem .2rem .38rem;
    border-radius: 16px;
    gap: .2rem;
    transition: color .15s ease, background .18s ease, transform .12s var(--ease-spring);
  }
  .bkb-mnav-item:active { transform: scale(.93) }
  .bkb-mnav-item.active {
    color: var(--green);
    background: rgba(200,255,0,.10);
  }
  .bkb-mnav-item.active .bkb-mnav-icon { filter: drop-shadow(0 0 8px rgba(200,255,0,.55)) }
  .bkb-page-content, .bkb-main-area { padding-bottom: 5.4rem }
}

/* ── Compact hero (dashboard) ── */
.bkb-hero-compact {
  min-height: 132px;
  padding: 1.15rem 1.4rem;
  border-radius: var(--radius);
}
.bkb-hero-compact .bkb-hero-greeting { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0 }
.bkb-hero-compact .bkb-hero-sub { font-size: .84rem; margin: .2rem 0 .65rem }
.bkb-hero-compact .bkb-hero-actions { gap: .5rem }
.bkb-hero-compact .bkb-hero-actions .btn-primary,
.bkb-hero-compact .bkb-hero-actions .btn-secondary { padding: .5rem .85rem; font-size: .82rem }

/* ── Order stepper (dashboard active-order card) ── */
.bkb-step-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: .85rem 0 .25rem;
}
.bkb-step {
  flex: 1;
  display: grid;
  gap: .3rem;
  justify-items: center;
  min-width: 0;
}
.bkb-step-track { display: flex; align-items: center; width: 100%; gap: .3rem }
.bkb-step-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(148,190,222,.35);
  background: transparent;
  flex-shrink: 0;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.bkb-step-bar { flex: 1; height: 2px; background: rgba(148,190,222,.18); border-radius: 2px }
.bkb-step.done .bkb-step-dot { background: var(--green); border-color: var(--green) }
.bkb-step.done .bkb-step-bar { background: rgba(200,255,0,.45) }
.bkb-step.current .bkb-step-dot {
  background: var(--green); border-color: var(--green);
  animation: stepPulse 1.8s ease-out infinite;
}
.bkb-step-label {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--muted2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bkb-step.done .bkb-step-label { color: #b9d97a }
.bkb-step.current .bkb-step-label { color: var(--text) }
@keyframes stepPulse {
  0% { box-shadow: 0 0 0 0 rgba(200,255,0,.38) }
  70% { box-shadow: 0 0 0 8px rgba(200,255,0,0) }
  100% { box-shadow: 0 0 0 0 rgba(200,255,0,0) }
}

/* ── Skeleton shimmer (for media/map placeholders) ── */
.bkb-skel {
  position: relative;
  overflow: hidden;
  background: rgba(148,190,222,.07);
  border-radius: var(--radius-sm);
}
.bkb-skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: skelShimmer 1.6s ease-in-out infinite;
}
@keyframes skelShimmer { to { transform: translateX(100%) } }

/* ── Entrance motion: smoother, more stagger steps ── */
.fade-up { animation-timing-function: cubic-bezier(.2,.75,.25,1) }
.fade-up-3 { animation-delay: .18s }
.fade-up-4 { animation-delay: .24s }
.fade-up-5 { animation-delay: .30s }

/* ── Empty states: breathing icon ── */
.bkb-empty-icon { animation: emptyFloat 4.5s ease-in-out infinite }
@keyframes emptyFloat {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
}

/* ── Chips: subtle ring ── */
.chip { box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset }

/* ── Reduced motion: kill all v4 animation ── */
@media (prefers-reduced-motion: reduce) {
  .bkb-card, .btn-primary, .btn-secondary, .btn-danger, .bkb-mnav-item { transition: none !important }
  .bkb-step.current .bkb-step-dot, .bkb-skel::after, .bkb-empty-icon { animation: none !important }
  a .bkb-card:hover, a.bkb-card:hover { transform: none }
}

/* ═══════════════════════════════════════════════════════════════
   Auth pages (login/register/forgot-password) — real design
   Reuses the same tokens/palette as the account dashboard (v4 layer)
   so the site feels like one product instead of two.
   ═══════════════════════════════════════════════════════════════ */

.shell-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 40% at 85% -10%, rgba(20,78,120,.30), transparent),
    radial-gradient(ellipse 50% 30% at 10% 100%, rgba(200,255,0,.05), transparent),
    var(--bg, #06111e);
  color: var(--text, #edf6ff);
  font-family: 'Inter', system-ui, sans-serif;
}

.shell-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}
.shell-brand {
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--text, #edf6ff);
  text-decoration: none;
}
.shell-brand span { color: var(--green, #c8ff00) }
.shell-header nav { display: flex; align-items: center; gap: 1.1rem }
.shell-header nav a {
  color: var(--muted, #7a96b0);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
  transition: color .15s ease;
}
.shell-header nav a:hover { color: var(--text, #edf6ff) }

.shell-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem 3rem;
}

.shell-auth {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(160deg, rgba(13,32,54,.86), rgba(7,19,33,.94));
  border: 1px solid rgba(148,190,222,.10);
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 18px 55px rgba(0,0,0,.32);
}
.shell-auth h1 {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -.03em;
  margin: .3rem 0 .6rem;
  line-height: 1.15;
}
.shell-auth > p {
  color: var(--muted, #7a96b0);
  font-size: .88rem;
  line-height: 1.55;
  margin: 0 0 1.4rem;
}
.shell-eyebrow {
  display: inline-block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green, #c8ff00);
  background: rgba(200,255,0,.08);
  border: 1px solid rgba(200,255,0,.2);
  border-radius: 999px;
  padding: .3rem .7rem;
  margin-bottom: .1rem;
}

.shell-form { display: grid; gap: 1rem }
.shell-form label {
  display: grid;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted, #7a96b0);
}
.shell-form input[type="email"],
.shell-form input[type="password"],
.shell-form input[type="text"] {
  font: inherit;
  font-size: .92rem;
  color: var(--text, #edf6ff);
  background: rgba(4,12,23,.75);
  border: 1px solid rgba(148,190,222,.18);
  border-radius: 12px;
  padding: .72rem .85rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.shell-form input:focus {
  outline: none;
  border-color: var(--green, #c8ff00);
  box-shadow: 0 0 0 3px rgba(200,255,0,.12);
}
.shell-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .55rem;
  font-weight: 500 !important;
  color: var(--muted, #7a96b0);
  cursor: pointer;
}
.shell-check input { width: auto !important }

.shell-form button[type="submit"] {
  margin-top: .2rem;
  border: 0;
  border-radius: 12px;
  background: var(--green, #c8ff00);
  color: #0a1500;
  font-weight: 900;
  font-size: .92rem;
  padding: .8rem 1rem;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.22,.9,.28,1.12), box-shadow .15s ease;
}
.shell-form button[type="submit"]:hover { box-shadow: 0 6px 22px rgba(200,255,0,.28) }
.shell-form button[type="submit"]:active { transform: scale(.97) }

.shell-error {
  margin: 0;
  padding: .65rem .85rem;
  border-radius: 10px;
  border: 1px solid rgba(255,90,112,.32);
  background: rgba(255,90,112,.08);
  color: #ffb3bc;
  font-size: .82rem;
  font-weight: 600;
}

.shell-secondary {
  display: block;
  margin-top: 1.4rem;
  text-align: center;
  color: var(--muted, #7a96b0);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}
.shell-secondary:hover { color: var(--green, #c8ff00) }

.shell-footer {
  display: block !important;
  text-align: center;
  padding: 1.1rem 1.25rem 1.6rem;
  color: var(--muted2, #556d84);
  font-size: .76rem;
}
.shell-footer a { color: inherit; text-decoration: underline }

@media (max-width: 480px) {
  .shell-header nav a:not(:last-child) { display: none }
  .shell-header { padding:.7rem 1rem }
  .shell-main { min-height:auto;padding:.75rem 1rem 1rem;place-items:start center }
  .shell-auth { padding:1rem;border-radius:16px }
  .shell-auth > p { margin-bottom:.8rem;line-height:1.4 }
  .shell-form { gap:.7rem }
  .shell-footer { position:relative;z-index:0;padding:.55rem 1rem .8rem }
}

.shell-pw { position: relative; display: block }
.shell-pw input { padding-right: 2.7rem !important }
.shell-pw-toggle {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted, #7a96b0);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.shell-pw-toggle:hover { color: var(--text, #edf6ff); background: rgba(255,255,255,.06) }
.shell-pw-toggle.is-visible { color: var(--green, #c8ff00) }
.shell-pw-toggle:focus-visible { outline: 2px solid var(--green, #c8ff00); outline-offset: 1px }

/* Customer OS Wave 1: unified support composition */
.bkb-eyebrow{margin:0 0:.35rem;color:var(--green);font-size:.68rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.bkb-support-summary{display:grid;grid-template-columns:150px 150px minmax(0,1fr);gap:.75rem;margin-bottom:1rem}
.bkb-support-summary__item,.bkb-support-summary__help{min-height:88px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:1rem;box-sizing:border-box}
.bkb-support-summary__item{display:flex;flex-direction:column;justify-content:center}.bkb-support-summary__item strong{font-size:1.55rem;color:var(--text)}.bkb-support-summary__item span,.bkb-support-summary__help span{font-size:.75rem;color:var(--muted)}
.bkb-support-summary__help{display:flex;flex-direction:column;justify-content:center;gap:.45rem}.bkb-support-summary__help a{color:var(--green);font-size:.82rem;font-weight:800;text-decoration:none}
.bkb-support-list{display:grid;gap:.65rem}.bkb-support-ticket{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:.8rem;align-items:center;min-height:88px;padding:1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:inherit;text-decoration:none;transition:border-color .18s,transform .18s}.bkb-support-ticket:hover{border-color:var(--green-border);transform:translateY(-1px)}
.bkb-support-ticket__icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--green-dim);border:1px solid var(--green-border);color:var(--green);font-weight:900}.bkb-support-ticket__top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.bkb-support-ticket h2{font-size:.9rem;margin:.25rem 0;color:var(--text)}.bkb-support-ticket p{font-size:.72rem;color:var(--muted);margin:0}.bkb-support-ticket__arrow{color:var(--muted);font-size:1.35rem}
@media(max-width:700px){.bkb-support-summary{grid-template-columns:1fr 1fr}.bkb-support-summary__help{grid-column:1/-1}.bkb-support-ticket{grid-template-columns:40px minmax(0,1fr) 18px;padding:.85rem}.bkb-support-ticket__icon{width:40px;height:40px}.bkb-support-ticket__top{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:420px){.bkb-support-summary{grid-template-columns:1fr 1fr;gap:.5rem}.bkb-support-summary__item{min-height:76px;padding:.75rem}.bkb-support-ticket h2{font-size:.84rem}}

/* Customer OS accessibility/navigation contract */
.bkb-skip-link{position:fixed;z-index:10000;top:.5rem;left:.5rem;transform:translateY(-160%);padding:.7rem 1rem;border-radius:10px;background:var(--green);color:#06111e;font-weight:900;text-decoration:none;transition:transform .15s}
.bkb-skip-link:focus{transform:translateY(0)}
.bkb-nav-item,.bkb-mnav-item,.bkb-signout-btn,.bkb-sidebar-toggle,.bkb-bell{min-height:44px;min-width:44px}
.bkb-mnav-badge{position:absolute;top:4px;right:calc(50% - 18px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:var(--danger);color:#fff;font-size:.6rem;font-weight:900}
.bkb-page-content:focus{outline:none}
@media(max-width:900px){html{scroll-padding-bottom:10rem}.bkb-page-content{padding-bottom:calc(10rem + env(safe-area-inset-bottom))}.bkb-page-content :focus{scroll-margin-bottom:10rem}.bkb-footer{padding-bottom:calc(8rem + env(safe-area-inset-bottom))}}
@media(max-width:768px){.bkb-sidebar{visibility:hidden;pointer-events:none}.bkb-sidebar.open{visibility:visible;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){.bkb-skip-link,.bkb-nav-item,.bkb-mnav-item{transition:none!important;scroll-behavior:auto!important}}

/* Customer OS final keyboard and touch-target closure */
.bkb-skip-link:focus,.bkb-skip-link:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(200,255,0,.45)}
.bkb-page-content button,.bkb-page-content select,.bkb-page-content textarea,.bkb-page-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.bkb-filter-tab{min-height:44px}
.bkb-page-content input[type="checkbox"],.bkb-page-content input[type="radio"]{min-width:24px;min-height:24px}
.bkb-logo-link,.bkb-page-content a{min-width:44px;min-height:44px;display:inline-flex;align-items:center}
.bkb-page-content a.bkb-card,.bkb-page-content a.bkb-support-ticket{display:grid}
@media(max-width:430px){.bkb-page-content a{white-space:normal!important}}

/* Customer account information architecture + profile hub */
.bkb-sidebar-primary-action{margin:.15rem .75rem 1rem;min-height:48px;padding:.75rem 1rem;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:.7rem;background:linear-gradient(135deg,var(--green),#9be800);color:#06111e;font-size:.86rem;font-weight:900;text-decoration:none;box-shadow:0 12px 34px rgba(170,230,0,.16);transition:transform .18s,box-shadow .18s}
.bkb-sidebar-primary-action:hover{transform:translateY(-1px);box-shadow:0 15px 38px rgba(170,230,0,.24)}
.bkb-sidebar-primary-action .bkb-nav-icon{color:#06111e}
.bkb-profile-heading{align-items:center}
.bkb-profile-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:1rem;align-items:start}
.bkb-profile-identity{position:relative;overflow:hidden;padding:0}
.bkb-profile-cover{height:112px;background:radial-gradient(circle at 75% 30%,rgba(57,204,255,.34),transparent 34%),radial-gradient(circle at 35% 20%,rgba(200,255,0,.16),transparent 31%),linear-gradient(125deg,#071827,#0a2a40 58%,#071323)}
.bkb-profile-cover::after{content:"";position:absolute;inset:0 0 auto;height:112px;background-image:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.04) 50%,transparent 62%);transform:translateX(-80%);animation:bkb-profile-shimmer 9s ease-in-out infinite}
@keyframes bkb-profile-shimmer{50%,100%{transform:translateX(100%)}}
.bkb-profile-identity-body{display:flex;gap:1rem;align-items:flex-end;padding:0 1.4rem 1.35rem;margin-top:-42px;position:relative}
.bkb-profile-avatar{width:88px;height:88px;flex:0 0 88px;border-radius:24px;display:grid;place-items:center;border:4px solid var(--panel);background:linear-gradient(145deg,var(--green),#79c900);color:#06111e;font-size:2rem;font-weight:900;box-shadow:0 15px 36px rgba(0,0,0,.35)}
.bkb-profile-summary{min-width:0;padding-bottom:.25rem}.bkb-profile-summary h2{margin:.25rem 0 .15rem;font-size:1.45rem}.bkb-profile-summary p{margin:0;color:var(--muted);overflow-wrap:anywhere}.bkb-profile-meta{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}
.bkb-profile-name-form{display:flex;align-items:flex-end;gap:.9rem;padding:1.25rem 1.4rem 1.4rem;border-top:1px solid var(--line)}
.bkb-field-grow{flex:1;min-width:0}.bkb-field-grow label{display:block;margin-bottom:.45rem;font-size:.76rem;font-weight:800;color:var(--text)}.bkb-field-help{margin:.45rem 0 0;color:var(--muted);font-size:.7rem}
.bkb-profile-name-form .btn-primary{flex:0 0 auto;white-space:nowrap}
.bkb-account-tools h2,.bkb-profile-contact h2,.bkb-profile-assistance h2{margin:.25rem 0 0;font-size:1.05rem}
.bkb-account-tool{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto;gap:.75rem;align-items:center;width:100%;min-height:70px;padding:.75rem 0;color:inherit;text-decoration:none;border-top:1px solid var(--line)}
.bkb-account-tool:first-of-type{margin-top:.55rem}.bkb-account-tool-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--green-dim);border:1px solid var(--green-border);color:var(--green);font-weight:900}.bkb-account-tool span:nth-child(2){display:grid;gap:.15rem}.bkb-account-tool small{color:var(--muted);line-height:1.35}.bkb-account-tool>span:last-child{color:var(--muted)}
.bkb-profile-contact{grid-column:1/-1}.bkb-profile-contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:.9rem}.bkb-profile-readonly{min-width:0;padding:1rem;border:1px solid var(--line);border-radius:14px;background:rgba(4,14,26,.45);display:grid;gap:.35rem}.bkb-profile-readonly>span{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.bkb-profile-readonly strong{overflow-wrap:anywhere}.bkb-profile-readonly small{color:var(--muted);line-height:1.4}.bkb-profile-readonly a{color:var(--green)}.bkb-profile-truth-note{margin:1rem 0 0;color:var(--muted);font-size:.76rem}
.bkb-profile-assistance{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;background:linear-gradient(120deg,rgba(57,204,255,.07),rgba(200,255,0,.04))}.bkb-profile-assistance p{max-width:760px;color:var(--muted);margin:.55rem 0 0}.bkb-profile-actions{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:flex-end}
.bkb-mnav-primary{position:relative;color:var(--green)!important}.bkb-mnav-primary-icon{width:46px;height:46px;margin-top:-22px;border-radius:15px;display:grid;place-items:center;background:var(--green);color:#06111e;border:4px solid var(--sidebar-bg);box-shadow:0 8px 24px rgba(168,214,0,.28)}.bkb-mnav-primary-icon svg{width:22px;height:22px}
@media(max-width:980px){.bkb-profile-layout{grid-template-columns:1fr}.bkb-profile-contact,.bkb-profile-assistance{grid-column:auto}.bkb-profile-contact-grid{grid-template-columns:1fr 1fr}.bkb-profile-readonly:last-child{grid-column:1/-1}}
@media(max-width:620px){.bkb-profile-identity-body{align-items:center;margin-top:-34px;padding-left:1rem;padding-right:1rem}.bkb-profile-avatar{width:72px;height:72px;flex-basis:72px;border-radius:20px;font-size:1.6rem}.bkb-profile-name-form,.bkb-profile-assistance{align-items:stretch;flex-direction:column}.bkb-profile-name-form .btn-primary{align-self:flex-start}.bkb-profile-contact-grid{grid-template-columns:1fr}.bkb-profile-readonly:last-child{grid-column:auto}.bkb-profile-actions{justify-content:flex-start}.bkb-profile-actions .btn-secondary{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.bkb-profile-cover::after{animation:none}.bkb-sidebar-primary-action{transition:none}}

/* Active order hero — real Order data, decorative media only */
.bkb-order-hero{position:relative;isolation:isolate;min-height:330px;overflow:hidden;border:1px solid rgba(50,225,211,.55);border-radius:20px;background:#062236;box-shadow:inset 0 0 0 1px rgba(169,255,235,.04),0 22px 55px rgba(0,0,0,.2)}
.bkb-order-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(2,18,34,.98) 0%,rgba(2,24,39,.9) 42%,rgba(1,34,47,.28) 75%,rgba(1,24,38,.5) 100%)}
.bkb-order-hero__bg{position:absolute;z-index:-3;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;opacity:.94}
.bkb-order-hero__ring{position:absolute;z-index:-2;right:-2%;top:-28%;width:min(62%,680px);height:auto;opacity:.38;mix-blend-mode:screen;filter:saturate(1.15)}
.bkb-order-hero__art{position:absolute;z-index:-1;right:3%;top:10px;width:auto;height:210px;max-width:34%;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(0,0,0,.48));animation:bkb-order-art-float 7s ease-in-out infinite}
@keyframes bkb-order-art-float{50%{transform:translateY(-6px)}}
.bkb-order-hero__content{position:relative;z-index:2;width:min(58%,650px);padding:1.5rem 1.6rem 7.25rem}
.bkb-order-hero__eyebrow{margin-bottom:.35rem;color:#8ec5d0;font-size:.7rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.bkb-order-hero h2{margin:.1rem 0 .25rem;font-size:clamp(1.55rem,3vw,2.25rem);line-height:1.08}.bkb-order-hero__service{margin:0 0 .7rem;color:#d8f7f3;font-size:.95rem;font-weight:700}.bkb-order-hero__meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:#8fb1c4;font-size:.75rem}.bkb-order-hero__status{padding:.28rem .55rem;border-radius:999px;border:1px solid rgba(23,229,214,.35);background:rgba(5,182,184,.12);color:#38e7d5;font-weight:800}.bkb-order-hero__link{margin-top:.8rem;color:#bfff00!important;font-size:.8rem;font-weight:900;text-decoration:none}
.bkb-order-hero--empty{min-height:280px}.bkb-order-hero--empty .bkb-order-hero__content{padding-bottom:1.6rem}.bkb-order-hero__empty-text{max-width:560px;margin:.65rem 0 1.15rem;color:#9bb5c6;line-height:1.6}.bkb-order-hero--empty .bkb-order-hero__art{height:245px;right:4%;top:18px;opacity:.9}
.bkb-order-progress{position:absolute;z-index:3;left:1.6rem;right:1.6rem;bottom:1.25rem;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}.bkb-order-progress::before{content:"";position:absolute;left:7%;right:7%;top:17px;height:2px;background:rgba(142,177,196,.24)}
.bkb-order-progress li{position:relative;display:grid;justify-items:center;gap:.4rem;min-width:0;color:#8299aa;font-size:.68rem;text-align:center}.bkb-order-progress__dot{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(142,177,196,.35);background:#092337;color:#8299aa;font-size:.7rem;font-weight:900}.bkb-order-progress li.done,.bkb-order-progress li.current{color:#eaffff}.bkb-order-progress li.done .bkb-order-progress__dot{border-color:#00d8ea;background:#07324a;color:#49efff}.bkb-order-progress li.current .bkb-order-progress__dot{border-color:#19ead7;background:#0d7e80;color:#fff;box-shadow:0 0 0 6px rgba(25,234,215,.1),0 0 22px rgba(25,234,215,.36)}.bkb-order-progress__label{overflow-wrap:anywhere}
@media(max-width:720px){.bkb-order-hero{min-height:410px}.bkb-order-hero::after{background:linear-gradient(180deg,rgba(2,18,34,.96) 0%,rgba(2,22,37,.82) 58%,rgba(2,22,37,.96) 100%)}.bkb-order-hero__content{width:auto;padding:1.2rem 1.15rem 9.25rem}.bkb-order-hero__art{width:auto;max-width:none;height:180px;right:-18px;top:88px;opacity:.58}.bkb-order-hero__ring{width:420px;right:-170px;top:-40px;opacity:.28}.bkb-order-progress{left:.65rem;right:.65rem;bottom:1rem}.bkb-order-progress::before{left:10%;right:10%;top:15px}.bkb-order-progress__dot{width:30px;height:30px}.bkb-order-progress__label{font-size:.58rem}}
@media(max-width:720px){.bkb-order-hero--empty{min-height:350px}.bkb-order-hero--empty .bkb-order-hero__content{padding-bottom:1.25rem}.bkb-order-hero--empty .bkb-order-hero__art{height:155px;right:-20px;top:160px;opacity:.42}}
@media(prefers-reduced-motion:reduce){.bkb-order-hero__art{animation:none}}