/* BiKuBe Customer LK — Sidebar Layout v3 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

: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;
}

/* ── 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 }
}