/* ========================================================
   STORE PANEL CSS VARIABLES & BASE COLOR FIXES
   ======================================================== */
:root,
.buy-data-modal-overlay,
#buy-data-modal-overlay,
.store-panel,
#store-overlays-container,
.modal {
  --ink: #0f1115;
  --muted: #68707d;
  --line: #dde1e8;
  --panel: #ffffff;
  --soft: #f7f8fa;
  --header: #28282d;
  --mtn: #f6cd1c;
  --airteltigo: #2269c9;
  --telecel: #d81831;
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.store-panel {
  color: var(--ink);
}

.store-panel-title {
  color: #0f1923 !important;
}

.store-panel-note {
  color: #6b7a8d !important;
}

/* ========================================================
   BUY DATA MODAL OVERLAY & DIALOG
   ======================================================== */
html.modal-persisted-open,
html.modal-persisted-open body,
html:has(.buy-data-modal-overlay.open),
body:has(.buy-data-modal-overlay.open) {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

html.modal-persisted-open::-webkit-scrollbar,
html.modal-persisted-open body::-webkit-scrollbar,
html:has(.buy-data-modal-overlay.open)::-webkit-scrollbar,
body:has(.buy-data-modal-overlay.open)::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.modal-persisted-open .buy-data-modal-overlay {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.modal-persisted-open .buy-data-modal-dialog {
  transform: scale(1) translateY(0) !important;
}

html.modal-persisted-verify .verify-main,
html.modal-persisted-history .history-main {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.buy-data-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: none !important;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 20px 0 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Storefront stays a completely static stage while a modal is open (owner spec
   2026-09-02: "the website... should be static... it shouldn't move... nothing should
   happen. The only thing that should happen is that it will go blur"). This used to
   translateX(-28%) + fade the header/page/footer to 0.35 opacity whenever a modal opened
   ("store-shifted") -- a real "push" transition layered ON TOP of .buy-data-modal-backdrop,
   which already does the actual blur/dim (position:fixed, backdrop-filter:blur(14px),
   rgba(0,0,0,.72) -- see that rule below) with zero effect on the page underneath. The
   shift was pure extra motion the backdrop didn't need, and exactly what read as
   "chaotic"/"the website goes blank" to a real visitor. Only pointer-events:none remains,
   to stop clicks on the background while a modal covers it -- the page itself never
   moves or changes opacity now, no matter which modal state is active.
   Kept .site-footer's own selector (formerly used for the transition) empty rather than
   removing it outright -- more of this rebuild's own CSS may still key off exactly
   these 3 selectors elsewhere; deleting the block risks silently breaking that layout. */
.sticky-header-container,
.page-container,
.site-footer {
}

body.store-shifted .sticky-header-container,
body.store-shifted .page-container,
body.store-shifted .site-footer {
  pointer-events: none;
}

body.history-mode:not(.transitioning-to-store) .buy-data-modal-overlay,
body.verify-active:not(.transitioning-to-store) .buy-data-modal-overlay {
  display: none !important;
}

body.transitioning-to-store .buy-data-modal-overlay {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10005 !important;
}

body.transitioning-to-store .history-main,
body.transitioning-to-store .verify-main {
  display: flex !important;
  opacity: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  z-index: 10006 !important;
}

body.transitioning-to-subpage .buy-data-modal-overlay {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 10005 !important;
}

body.transitioning-to-subpage .history-main,
body.transitioning-to-subpage .verify-main {
  display: flex !important;
  opacity: 1 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
  z-index: 10006 !important;
}

.buy-data-modal-overlay::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.buy-data-modal-overlay.open {
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
}

.buy-data-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Smooth Hardware-Accelerated 3D Screen Push & Pop Transitions */
@keyframes modalSlideInRight {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes modalSlideOutLeft {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
}

@keyframes modalSlideOutRight {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
}

@keyframes modalSlideInLeft {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.buy-data-modal-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  box-sizing: border-box;
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #ffffff;
  padding: 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15);
  transform: translate3d(0, 0, 0);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.buy-data-modal-dialog::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.buy-data-modal-dialog.slide-in-left {
  animation: modalSlideInLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.buy-data-modal-dialog.slide-in-right {
  animation: modalSlideInRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.buy-data-modal-dialog.slide-out-left {
  animation: modalSlideOutLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.buy-data-modal-dialog.slide-out-right {
  animation: modalSlideOutRight 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Sticky Floating Top Bar - Completely Transparent, Zero Shelf, Strictly Dynamic Island Static */
.modal-top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 36px 18px 8px;
  background: transparent;
  pointer-events: none;
}

.modal-top-bar .modal-island-search,
.modal-island-search {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 185px;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  height: 30px !important;
  display: flex;
  align-items: center;
}

.modal-top-bar .modal-island-search svg,
.modal-island-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
  width: 13px;
  height: 13px;
}

.modal-top-bar .modal-island-search input,
.modal-island-search input {
  width: 100%;
  height: 30px;
  background: #0b0c10 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  padding: 0 14px 0 30px !important;
  font-size: 11.5px !important;
  letter-spacing: -0.15px;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-top-bar .modal-island-search input::placeholder,
.modal-island-search input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11.5px;
}

.modal-top-bar .modal-island-search input:focus,
.modal-island-search input:focus {
  border-color: rgba(0, 122, 255, 0.85) !important;
  background: #111319 !important;
  box-shadow: none !important;
}

.modal-top-bar .buy-data-modal-close,
.buy-data-modal-close {
  pointer-events: auto;
  position: absolute;
  top: 34px;
  right: 20px;
  z-index: 100;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1c22;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-top-bar .buy-data-modal-close:hover,
.buy-data-modal-close:hover {
  background: rgba(0, 0, 0, 0.12);
  transform: scale(1.08);
}

.buy-data-modal-dialog .store-panel {
  margin-top: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 24px 24px !important;
}

.modal-island-search svg,
.store-panel .search.modal-island-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 2;
  width: 13px;
  height: 13px;
}

.modal-island-search input,
.store-panel .search.modal-island-search input {
  width: 100%;
  height: 30px;
  background: #0b0c10 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  padding: 0 14px 0 30px !important;
  font-size: 11.5px !important;
  letter-spacing: -0.15px;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-island-search input::placeholder,
.store-panel .search.modal-island-search input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11.5px;
}

.modal-island-search input:focus,
.store-panel .search.modal-island-search input:focus {
  border-color: rgba(0, 122, 255, 0.85) !important;
  background: #111319 !important;
  box-shadow: none !important;
}

/* Horizontal Track Order & Verify Payment Row - Apple Inspired Capsule Chips */
.modal-actions-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 300px !important;
  margin: 4px auto 16px auto !important;
}

.modal-actions-row .modal-action-btn,
.modal-actions-row .track-action {
  flex: 1 1 0px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(120, 120, 128, 0.08) !important;
  border: 0.5px solid rgba(0, 0, 0, 0.06) !important;
  color: #1c1c1e !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.15px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.25, 1, 0.5, 1) !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.modal-actions-row .modal-action-btn svg,
.modal-actions-row .track-action svg {
  width: 13px !important;
  height: 13px !important;
  color: #636366 !important;
  opacity: 0.85 !important;
}

.modal-actions-row .modal-action-btn:hover,
.modal-actions-row .track-action:hover {
  background: rgba(120, 120, 128, 0.15) !important;
  color: #000000 !important;
  transform: translateY(-0.5px) !important;
}

.modal-actions-row .modal-action-btn:active,
.modal-actions-row .track-action:active {
  transform: scale(0.96) !important;
  background: rgba(120, 120, 128, 0.22) !important;
}

@media (max-width: 768px) {
  .buy-data-modal-overlay {
    padding: 24px 14px 0 14px;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .buy-data-modal-dialog {
    max-width: 420px;
    width: 100%;
    max-height: 88vh;
    box-sizing: border-box;
    border-top-left-radius: 34px;
    border-top-right-radius: 34px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0 auto;
  }
  .modal-top-bar {
    padding: 34px 16px 8px;
  }
  .buy-data-modal-close {
    top: 32px;
    right: 18px;
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .buy-data-modal-dialog .store-panel {
    padding: 2px 18px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .modal-top-bar .modal-island-search,
  .modal-island-search,
  .store-panel .search.modal-island-search {
    max-width: 180px;
  }
  .modal-top-bar .modal-island-search input,
  .modal-island-search input,
  .store-panel .search.modal-island-search input {
    height: 30px;
    font-size: 11.5px;
    padding: 0 12px 0 30px;
  }
  .modal-top-bar .modal-island-search svg,
  .modal-island-search svg,
  .store-panel .search.modal-island-search svg {
    left: 10px;
    width: 12px;
    height: 12px;
  }
  .modal-actions-row {
    margin: 4px auto 14px auto !important;
    gap: 8px !important;
    max-width: 270px !important;
  }
  .modal-actions-row .modal-action-btn,
  .modal-actions-row .track-action {
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }
  .modal-actions-row .modal-action-btn svg,
  .modal-actions-row .track-action svg {
    width: 12.5px !important;
    height: 12.5px !important;
  }
}


    :root {
      --ink: #0f1115;
      --muted: #68707d;
      --line: #dde1e8;
      --panel: #ffffff;
      --soft: #f7f8fa;
      --header: #28282d;
      --mtn: #f6cd1c;
      --airteltigo: #2269c9;
      --telecel: #d81831;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    }

    * { box-sizing: border-box; }

    [hidden] {
      display: none !important;
    }

    #page-loader {
      position: absolute;
      
      inset: -4px;
      z-index: 10;
      
      background: #ffffff;
      border-radius: 18px;
      transition: opacity .3s ease;
      padding: 48px 0 0;
      overflow: hidden;
    }
    #page-loader.hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .skel-tabs { display: flex; gap: 8px; padding: 0 16px; margin-bottom: 18px; }
    .skel-tab { flex: 1; height: 64px; border-radius: 14px; }
    .skel-card-row { padding: 0 16px; margin-bottom: 10px; }
    .skel-label { width: 40%; height: 16px; border-radius: 5px; margin-bottom: 8px; }
    .skel-sublabel { width: 60%; height: 12px; border-radius: 5px; margin-bottom: 18px; }
    .skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
    .skel-bundle { height: 92px; border-radius: 14px; }
    .skel-tab, .skel-label, .skel-sublabel, .skel-bundle {
      
      background: linear-gradient(90deg, #e9eaed 25%, #f4f4f6 37%, #e9eaed 63%);
      background-size: 400% 100%;
      animation: skel-shimmer 1.4s ease infinite;
    }
    @keyframes skel-shimmer {
      0% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .skel-tab, .skel-label, .skel-sublabel, .skel-bundle { animation: none; background: #eceef1; }
    }
    
    
    @keyframes page-loader-spin {
      to { transform: rotate(360deg); }
    }
    .mtn-inline-spinner {
      display: inline-block;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      border: 2px solid rgba(59,130,246,.2);
      border-top-color: #3b82f6;
      animation: page-loader-spin .8s linear infinite;
      vertical-align: -2px;
      margin-right: 6px;
    }

    button, input, a {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .hero {
      position: relative;
      overflow: hidden;
      background: #111111;
      color: white;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.08) 100%);
      pointer-events: none;
    }

    .wrap {
      width: min(100%, 1280px);
      margin: 0 auto;
      padding-inline: 20px;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      min-height: 88px;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: #000;
      border: none;
      flex-shrink: 0;
      overflow: hidden;
    }

    h1 {
      margin: 0;
      font-size: clamp(17px, 2.5vw, 20px);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    .store-subtitle {
      margin: 3px 0 0;
      color: rgba(255,255,255,.45);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .01em;
    }

    .hero-brand {
      flex: 1;
      min-width: 0;
    }

    .hero-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }

    .visit-shop-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 14px;
      height: 32px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 100%);
      border: 1px solid rgba(255,255,255,.35);
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      letter-spacing: .01em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 16px rgba(0,0,0,.2);
      transition: background .18s, box-shadow .18s, transform .12s;
      backdrop-filter: blur(8px);
    }

    .visit-shop-btn:hover {
      background: linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.15) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 22px rgba(0,0,0,.25);
      transform: translateY(-1px);
    }

    .visit-shop-btn:active {
      transform: translateY(0);
    }

    .digitv-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 14px;
      height: 32px;
      border-radius: 999px;
      background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
      border: 1px solid rgba(255,255,255,.2);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      letter-spacing: .01em;
      box-shadow: 0 4px 16px rgba(239,68,68,.35);
      transition: background .18s, box-shadow .18s, transform .12s;
      font-family: inherit;
    }
    .digitv-btn:hover {
      background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
      box-shadow: 0 6px 22px rgba(239,68,68,.5);
      transform: translateY(-1px);
    }
    .digitv-btn:active { transform: translateY(0); }

    
    #digitv-overlay {
      display: flex;
      position: fixed;
      inset: 0;
      background: #05070c;
      z-index: 9999;
      align-items: stretch;
      justify-content: stretch;
      flex-direction: column;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease;
    }
    #digitv-overlay.open { opacity: 1; pointer-events: auto; }

    
    
    @keyframes dtvSlideIn {
      from { opacity: 0; transform: translateX(-18px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes dtvFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .dtv-cat-wrap { padding: 40px 40px 32px; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box; }
    
    .dtv-cat-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 18px;
      opacity: 0;
    }
    #digitv-category.dtv-anim .dtv-cat-header { animation: dtvSlideIn .65s ease .30s forwards; }
    .dtv-cat-brand { display: flex; align-items: center; gap: 10px; }
    .dtv-cat-badge {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      background: linear-gradient(135deg,#3b82f6,#1d4ed8);
      display: flex; align-items: center; justify-content: center; font-size: 18px;
    }
    .dtv-cat-wordmark { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .01em; }
    .dtv-cat-wordmark span { color: #ef4444; }
    .dtv-cat-close {
      display: flex; align-items: center; white-space: nowrap;
      padding: 7px 14px; border-radius: 999px; border: none; cursor: pointer;
      background: rgba(255,255,255,.08); color: #cbd5e1; font-size: 12px; font-weight: 700;
    }
    .dtv-cat-heading {
      opacity: 0;
      margin-bottom: 20px;
    }
    #digitv-category.dtv-anim .dtv-cat-heading { animation: dtvSlideIn .65s ease .42s forwards; }
    .dtv-cat-heading h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #fff; }
    .dtv-cat-heading p { margin: 0; font-size: 13px; color: #94a3b8; }
    .dtv-cat-cards { display: flex; gap: 16px; }
    .dtv-cat-card {
      flex: 1; position: relative; overflow: hidden; text-align: left; cursor: pointer;
      min-height: 220px; border-radius: 16px; padding: 20px; display: flex; flex-direction: column;
      color: #fff; font-family: inherit;
      opacity: 0;
    }
    #digitv-category.dtv-anim .dtv-cat-card { animation: dtvFadeIn .5s ease forwards; }
    .dtv-cat-card.live   { border: 1.5px solid rgba(59,130,246,.4); background: linear-gradient(135deg, rgba(30,58,138,.4), rgba(10,14,26,.6)); }
    .dtv-cat-card.movies { border: 1.5px solid rgba(239,68,68,.4);  background: linear-gradient(135deg, rgba(127,29,29,.4), rgba(10,14,26,.6)); }
    #digitv-category.dtv-anim .dtv-cat-card.live   { animation-delay: .48s; }
    #digitv-category.dtv-anim .dtv-cat-card.movies { animation-delay: .54s; }
    .dtv-cat-bg-icon {
      position: absolute; right: -14px; bottom: -14px; font-size: 108px; line-height: 1;
      opacity: .16; filter: blur(.3px); pointer-events: none;
    }
    .dtv-cat-glow {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.12), transparent 55%);
    }
    .dtv-cat-icon {
      width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center; font-size: 20px;
      position: relative; z-index: 1;
    }
    .dtv-cat-card.live .dtv-cat-icon   { background: linear-gradient(135deg,#3b82f6,#1e40af); }
    .dtv-cat-card.movies .dtv-cat-icon { background: linear-gradient(135deg,#ef4444,#b91c1c); }
    .dtv-cat-card-head {
      display: flex; align-items: center; gap: 12px; margin-bottom: 12px; position: relative; z-index: 1;
      opacity: 0;
    }
    #digitv-category.dtv-anim .dtv-cat-card-head { animation: dtvSlideIn .65s ease forwards; }
    #digitv-category.dtv-anim .dtv-cat-card.live .dtv-cat-card-head   { animation-delay: .68s; }
    #digitv-category.dtv-anim .dtv-cat-card.movies .dtv-cat-card-head { animation-delay: .74s; }
    .dtv-cat-title { font-size: 17px; font-weight: 800; color: #fff; }
    .dtv-cat-sub { font-size: 12px; font-weight: 700; }
    .dtv-cat-card.live .dtv-cat-sub   { color: #60a5fa; }
    .dtv-cat-card.movies .dtv-cat-sub { color: #f87171; }
    .dtv-cat-desc {
      font-size: 13px; color: #cbd5e1; line-height: 1.5; position: relative; z-index: 1; flex: 1;
      opacity: 0;
    }
    #digitv-category.dtv-anim .dtv-cat-desc { animation: dtvSlideIn .65s ease forwards; }
    #digitv-category.dtv-anim .dtv-cat-card.live .dtv-cat-desc   { animation-delay: .80s; }
    #digitv-category.dtv-anim .dtv-cat-card.movies .dtv-cat-desc { animation-delay: .86s; }
    .dtv-cat-arrow {
      width: 40px; height: 40px; border-radius: 50%; align-self: flex-end; margin-top: 12px;
      display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
      position: relative; z-index: 1;
      opacity: 0;
    }
    #digitv-category.dtv-anim .dtv-cat-arrow { animation: dtvSlideIn .65s ease forwards; }
    .dtv-cat-card.live .dtv-cat-arrow   { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
    .dtv-cat-card.movies .dtv-cat-arrow { background: linear-gradient(135deg,#ef4444,#b91c1c); }
    #digitv-category.dtv-anim .dtv-cat-card.live .dtv-cat-arrow   { animation-delay: 1.05s; }
    #digitv-category.dtv-anim .dtv-cat-card.movies .dtv-cat-arrow { animation-delay: 1.11s; }
    .dtv-cat-trust {
      display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
      margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07);
      font-size: 12px; color: #64748b;
      opacity: 0;
    }
    #digitv-category.dtv-anim .dtv-cat-trust { animation: dtvSlideIn .65s ease 1.25s forwards; }
    .dtv-cat-trust span { display: inline-flex; align-items: center; gap: 5px; }
    @media (max-width: 640px) {
      .dtv-cat-cards { flex-direction: column; }
      .dtv-cat-card { min-height: 180px; }
      .dtv-cat-bg-icon { font-size: 84px; }
      .dtv-cat-wrap { padding: 20px 18px 24px; }
      .dtv-movies-rows { padding: 18px; gap: 24px; }
      .dtv-movie-tile { flex: 0 0 150px; }
      .dtv-movie-row-title { font-size: 15px; margin-bottom: 8px; }
      .dtv-movie-pills { padding: 14px 18px; }
    }
    #digitv-modal {
      width: 100%;
      height: 100%;
      max-width: none;
      padding: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    #digitv-modal video {
      width: 100%;
      height: auto;
      min-height: 200px;
      border-radius: 0;
      background: #000;
      display: block;
      object-fit: contain;
    }
    #digitv-landing-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
    }
    #digitv-label, #digitv-label2 {
      font-size: 12px;
      font-weight: 800;
      color: #ef4444;
      display: flex;
      align-items: center;
      gap: 7px;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    #digitv-label2 { color: #fff; font-size: 13px; text-transform: none; letter-spacing: 0; }
    #digitv-live-dot, .digitv-live-dot2 {
      width: 8px; height: 8px;
      background: #ef4444;
      border-radius: 50%;
      animation: blink 1.2s ease-in-out infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .digitv-x {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
    }
    .digitv-x:hover { background: rgba(255,255,255,.18); }
    .digitv-q-opt {
      background: none;
      border: none;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      padding: 8px 14px;
      text-align: left;
      cursor: pointer;
      border-radius: 7px;
      width: 100%;
      white-space: nowrap;
    }
    .digitv-q-opt:hover { background: rgba(255,255,255,.1); }
    .digitv-q-opt.active { color: #ef4444; }
    
    .digitv-ticker-scroll { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 600; color: #fbbf24; letter-spacing: .03em; will-change: transform; }
    #digitv-player-wrap:fullscreen #digitv-ticker-strip,
    #digitv-player-wrap:-webkit-full-screen #digitv-ticker-strip,
    #digitv-player-wrap:-moz-full-screen #digitv-ticker-strip { padding: 12px 0 !important; }
    #digitv-player-wrap:fullscreen .digitv-ticker-scroll,
    #digitv-player-wrap:-webkit-full-screen .digitv-ticker-scroll,
    #digitv-player-wrap:-moz-full-screen .digitv-ticker-scroll { font-size: 1.4vw !important; letter-spacing: .05em !important; }
    
    #digitv-landing { background: #0f172a; overflow-y: auto; overflow-x: hidden; flex: 1; display: flex; flex-direction: column; }
    #digitv-landing-header { background: #0f172a; border-bottom: 1px solid rgba(255,255,255,.07); }
    #digitv-thumb {
      background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
      background-size: cover;
      background-position: center;
      flex: 1;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 32px 16px;
      position: relative;
    }
    #digitv-channel-info { text-align: center; }
    #digitv-channel-name { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; }
    #digitv-channel-sub { font-size: 12px; color: #64748b; }
    #digitv-play-btn {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: #ef4444;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 8px rgba(239,68,68,.2), 0 8px 32px rgba(239,68,68,.4);
      transition: transform .15s, box-shadow .15s;
    }
    #digitv-play-btn:hover { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(239,68,68,.2), 0 8px 40px rgba(239,68,68,.5); }
    #digitv-notice { font-size: 11px; color: #475569; text-align: center; padding: 10px 16px 14px; background: #0f172a; }
    #digitv-brand-logo { position: absolute; top: 12px; right: 12px; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 12px rgba(0,0,0,.5); }
    
    #digitv-landing.movie-mode #digitv-landing-header,
    #digitv-landing.movie-mode #digitv-brand-logo,
    #digitv-landing.movie-mode #digitv-channel-sub,
    #digitv-landing.movie-mode #digitv-notice { display: none !important; }
    #digitv-landing.movie-mode #digitv-thumb { min-height: 260px; }
    #digitv-landing.movie-mode #digitv-thumb::before {
      content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60%;
      background: linear-gradient(to bottom, rgba(2,6,15,.9) 0%, rgba(2,6,15,.45) 60%, transparent 100%);
      pointer-events: none;
    }
    #digitv-landing.movie-mode #digitv-channel-info {
      position: absolute; top: 0; left: 0; right: 0; padding: 18px 20px 0; z-index: 1; text-align: left;
    }
    #digitv-landing.movie-mode #digitv-channel-name { font-size: 20px; }
    .dtv-movie-menu-btn { display: none; }
    #digitv-landing.movie-mode .dtv-movie-menu-btn {
      display: flex; position: absolute; top: 16px; left: 16px; z-index: 2;
      background: rgba(0,0,0,.5);
    }
    
    .dtv-movie-pills {
      display: flex; gap: 10px; overflow-x: auto;
      padding: 0 40px 20px; max-width: 1400px; width: 100%; margin: 0 auto; box-sizing: border-box;
    }
    .dtv-movie-pill {
      flex-shrink: 0; padding: 8px 18px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
      color: #cbd5e1; font-family: inherit; font-size: 13px; font-weight: 700;
      cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
    }
    .dtv-movie-pill.active { background: #ef4444; border-color: #ef4444; color: #fff; }
    .dtv-movie-pill:hover:not(.active) { background: rgba(255,255,255,.14); }
    
    .dtv-menu-btn {
      background: rgba(255,255,255,.08); border: none; color: #fff;
      width: 32px; height: 32px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .dtv-menu-btn:hover { background: rgba(255,255,255,.18); }
    #digitv-drawer-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10000;
      opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    #digitv-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
    #digitv-drawer {
      position: fixed; top: 0; left: 0; bottom: 0; width: 100%; max-width: 340px;
      background: #0a0e1a; z-index: 10001;
      transform: translateX(-100%); transition: transform .3s ease;
      display: flex; flex-direction: column; overflow-y: auto;
      box-shadow: 4px 0 28px rgba(0,0,0,.45);
    }
    #digitv-drawer.open { transform: translateX(0); }
    #digitv-drawer-top {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
    }
    #digitv-drawer-nav { display: flex; flex-direction: column; padding: 8px 0; }
    #digitv-drawer-nav button {
      background: none; border: none; color: #fff; font-family: inherit;
      font-size: 17px; font-weight: 700; text-align: left; padding: 14px 20px;
      cursor: pointer;
    }
    #digitv-drawer-nav button:hover { background: rgba(255,255,255,.06); }
    .digitv-drawer-sep { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0; flex-shrink: 0; }
    .digitv-drawer-link {
      display: flex; align-items: center; gap: 8px;
      background: none; border: none; color: #cbd5e1; font-family: inherit;
      font-size: 14px; font-weight: 600; text-align: left; padding: 12px 20px;
      cursor: pointer; text-decoration: none;
    }
    .digitv-drawer-link:hover { background: rgba(255,255,255,.06); color: #fff; }
    
    .dtv-movies-rows {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 40px;
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
    }
    .dtv-movie-row-title { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 12px; }
    .dtv-movie-row-track {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      padding-bottom: 4px;
    }
    .dtv-movie-tile {
      position: relative;
      flex: 0 0 240px;
      aspect-ratio: 16 / 9;
      border-radius: 8px;
      overflow: hidden;
      border: none;
      padding: 0;
      cursor: pointer;
      background-color: #1e293b;
      background-size: cover;
      background-position: center;
      scroll-snap-align: start;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .dtv-movie-tile:hover, .dtv-movie-tile:focus-visible {
      transform: scale(1.06);
      box-shadow: 0 8px 24px rgba(0,0,0,.55);
      z-index: 1;
    }
    .dtv-movie-placeholder {
      display: flex; align-items: center; justify-content: center;
      color: #64748b; font-size: 12px; font-weight: 600; text-align: center; padding: 0 10px;
      border: 1.5px dashed rgba(255,255,255,.15); cursor: default;
    }
    .dtv-movie-placeholder:hover { transform: none; box-shadow: none; }
    
    #digitv-player-wrap { background: #000; overflow: hidden; position: relative; flex: 1; display: flex; }
    #digitv-player-wrap video { width: 100%; height: auto; min-height: 200px; display: block; background: #000; }
    
    #digitv-top-bar {
      position: absolute; top: 0; left: 0; right: 0; z-index: 20;
      display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
      background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, transparent 100%);
      transition: opacity .25s;
    }
    
    #digitv-controls {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
      display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
      background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
      transition: opacity .25s; gap: 8px;
    }
    .digitv-ctrl-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .digitv-ctrl-btn {
      background: none; border: none; color: #fff; cursor: pointer;
      padding: 6px; border-radius: 6px; display: flex; align-items: center;
      justify-content: center; opacity: .88; transition: opacity .15s, background .15s;
      flex-shrink: 0;
    }
    .digitv-ctrl-btn:hover { opacity: 1; background: rgba(255,255,255,.12); }
    #digitv-center-ctrl {
      position: absolute; inset: 0; z-index: 20;
      display: flex; align-items: center; justify-content: center;
      pointer-events: none; transition: opacity .25s;
    }
    #digitv-pp-btn {
      width: 64px; height: 64px; border-radius: 50%;
      background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.35);
      pointer-events: all; cursor: pointer; color: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, transform .1s; flex-shrink: 0;
    }
    #digitv-pp-btn:hover, #digitv-pp-btn:active { background: rgba(0,0,0,.72); transform: scale(1.07); }
    #digitv-live-badge {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 800; letter-spacing: .07em; color: #fff;
      background: rgba(239,68,68,.8); padding: 3px 8px; border-radius: 5px;
      text-transform: uppercase; white-space: nowrap;
    }
    
    #digitv-progress-wrap {
      position: absolute; left: 0; right: 0; bottom: 46px; z-index: 19;
      display: none; align-items: center; gap: 8px; padding: 0 14px;
      transition: opacity .25s;
    }
    #digitv-progress-wrap.show { display: flex; }
    #digitv-time-current, #digitv-time-duration {
      font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    #digitv-progress-track {
      position: relative; flex: 1; height: 14px; display: flex; align-items: center;
      cursor: pointer; touch-action: none;
    }
    #digitv-progress-track::before {
      content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
      height: 4px; border-radius: 999px; background: rgba(255,255,255,.25);
    }
    #digitv-progress-buffered, #digitv-progress-played {
      position: absolute; top: 50%; left: 0; transform: translateY(-50%);
      height: 4px; border-radius: 999px; width: 0%;
    }
    #digitv-progress-buffered { background: rgba(255,255,255,.4); }
    #digitv-progress-played   { background: #ef4444; }
    #digitv-progress-thumb {
      position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; border-radius: 50%;
      background: #ef4444; transform: translate(-50%, -50%) scale(.001);
      box-shadow: 0 1px 4px rgba(0,0,0,.5); transition: transform .12s;
    }
    #digitv-progress-track:hover #digitv-progress-thumb,
    #digitv-progress-wrap.scrubbing #digitv-progress-thumb { transform: translate(-50%, -50%) scale(1); }
    
    #digitv-pause-info {
      position: absolute; left: 16px; right: 16px; bottom: 76px; z-index: 18;
      opacity: 0; transform: translateY(10px); pointer-events: none;
      transition: opacity .35s ease, transform .35s ease;
    }
    #digitv-pause-info.show { opacity: 1; transform: translateY(0); }
    #digitv-pause-title {
      font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 4px;
      text-shadow: 0 2px 10px rgba(0,0,0,.7);
    }
    #digitv-pause-desc {
      font-size: 12.5px; color: #cbd5e1; line-height: 1.5; max-width: 520px;
      text-shadow: 0 1px 6px rgba(0,0,0,.8);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    #digitv-click-layer { position: absolute; inset: 0; z-index: 15; }
    #digitv-spinner {
      position: absolute; inset: 0; z-index: 18;
      display: none; align-items: center; justify-content: center; pointer-events: none;
    }
    .digitv-spin-ring {
      width: 40px; height: 40px; border: 3px solid rgba(255,255,255,.15);
      border-top-color: #ef4444; border-radius: 50%; animation: digitv-spin .75s linear infinite;
    }
    @keyframes digitv-spin { to { transform: rotate(360deg); } }
    .digitv-skip-flash {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 700;
      padding: 8px 16px; border-radius: 24px; z-index: 25; opacity: 0;
      pointer-events: none; transition: opacity .15s; backdrop-filter: blur(4px);
    }
    .digitv-skip-flash.show { opacity: 1; }
    
    #digitv-player-wrap.ctrl-hide #digitv-top-bar,
    #digitv-player-wrap.ctrl-hide #digitv-controls,
    #digitv-player-wrap.ctrl-hide #digitv-progress-wrap,
    #digitv-player-wrap.ctrl-hide #digitv-center-ctrl { opacity: 0; pointer-events: none; }
    #digitv-player-wrap.ctrl-hide { cursor: none; }
    
    #digitv-player-wrap:not(.ctrl-hide) #digitv-ticker-strip { bottom: 50px !important; }
    
    #digitv-quality-popup {
      display: none; position: absolute; bottom: calc(100% + 8px); right: 0;
      background: #1e293b; border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
      padding: 6px; flex-direction: column; gap: 3px; min-width: 100px; z-index: 200;
      box-shadow: 0 8px 24px rgba(0,0,0,.5);
    }
    #digitv-quality-popup.open { display: flex; }
    
    #digitv-player-wrap:fullscreen,
    #digitv-player-wrap:-webkit-full-screen { border-radius: 0; }
    #digitv-player-wrap:fullscreen video,
    #digitv-player-wrap:-webkit-full-screen video { height: 100vh; object-fit: contain; min-height: unset; }

    .home {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 999px;
      color: rgba(255,255,255,.9);
      background: transparent;
      display: grid;
      place-items: center;
    }

    .home:hover {
      background: rgba(255,255,255,.1);
    }

    main {
      padding: 0 0 100px;
    }

    body.history-mode main.store-main,
    body.history-mode .contact-wrap,
    body.admin-mode main.store-main,
    body.admin-mode .contact-wrap,
    body.admin-mode main.history-main {
      display: none;
    }

    body:not(.history-mode):not(.admin-mode) main.history-main,
    body:not(.admin-mode) main.admin-main {
      display: none;
    }

    
    body.admin-mode main.verify-main,
    body:not(.history-mode):not(.admin-mode) main.verify-main {
      display: none;
    }
    body.history-mode.verify-active main.history-main {
      display: none;
    }
    body.history-mode:not(.verify-active) main.verify-main {
      display: none;
    }

    body.history-mode .hero,
    body.admin-mode .hero {
      background: #111111;
      color: #fff;
      box-shadow: none;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    body.history-mode .hero::after,
    body.admin-mode .hero::after {
      display: none;
    }

    body.history-mode .hero-inner,
    body.admin-mode .hero-inner {
      min-height: 76px;
      justify-content: center;
    }

    body.history-mode .logo,
    body.admin-mode .logo {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: #000;
      border: none;
      overflow: hidden;
      flex-shrink: 0;
    }

    body.history-mode .logo::before,
    body.admin-mode .logo::before {
      display: none;
    }

    body.history-mode h1,
    body.admin-mode h1 {
      font-size: clamp(17px, 2.5vw, 20px);
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
      text-shadow: none;
    }

    body.history-mode .store-subtitle,
    body.admin-mode .store-subtitle {
      color: rgba(255,255,255,.45);
    }

    body.history-mode .hero-nav,
    body.admin-mode .hero-nav {
      display: none;
    }

    body.history-mode .visit-shop-btn,
    body.admin-mode .visit-shop-btn {
      display: none;
    }

    body.history-mode .home,
    body.admin-mode .home {
      display: none;
    }

    .trust-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      color: #4a5a6a;
      font-size: 12px;
      margin-bottom: 18px;
    }

    .trust-pill {
      min-height: 30px;
      padding: 6px 20px;
      border: 1px solid rgba(140,190,240,.3);
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: rgba(255,255,255,.6);
      color: #3a5068;
      white-space: nowrap;
      font-size: 12px;
    }

    .store-panel .search,
    .history-card .search,
    .history-shell .search {
      position: relative;
      margin-bottom: 20px;
    }

    .store-panel .search svg,
    .history-card .search svg,
    .history-shell .search svg {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #77808c;
    }

    .store-panel .search input,
    .history-card .search input,
    .history-shell .search input {
      width: 100%;
      height: 44px;
      border: 1.5px solid rgba(0,0,0,.35);
      border-radius: 999px;
      padding: 0 18px 0 46px;
      outline: none;
      color: var(--ink);
      background: rgba(255,255,255,.07);
      font-size: 14px;
    }

    .store-panel .search input:focus,
    .history-card .search input:focus,
    .history-shell .search input:focus {
      border-color: rgba(80,160,240,.5);
      background: rgba(255,255,255,.95);
      box-shadow: 0 0 0 3px rgba(80,160,240,.12);
    }

    .tabs {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      width: 100%;
      justify-content: center;
      color: #11151c;
      margin-bottom: 26px;
    }

    .tab {
      flex: 1;
      max-width: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-height: 72px;
      border: 1px solid rgba(255,255,255,.58);
      border-radius: 13px;
      background: var(--tab-bg);
      color: var(--tab-fg);
      padding: 10px 6px 8px;
      font-size: 13px;
      line-height: 1;
      font-weight: 750;
      box-shadow: 0 4px 12px rgba(15,17,21,.1);
      text-shadow: var(--tab-shadow);
      transition: transform .18s ease, box-shadow .18s ease, opacity .2s, filter .2s;
      position: relative;
    }
    .tab::after {
      content: ''; position: absolute; top: 7px; right: 7px;
      width: 8px; height: 8px; border-radius: 50%;
      background: #4ade80; box-shadow: 0 0 0 2px rgba(255,255,255,.35);
      display: none;
    }
    .tab.tab-online::after { display: block; }
    .tab.tab-down::after { display: block; background: #9ca3af; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
    .tab.tab-down { opacity: 0.45; filter: grayscale(0.55); }

    .tab[aria-selected="true"] {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.78);
      box-shadow: 0 7px 16px rgba(15,17,21,.14), 0 0 0 3px color-mix(in srgb, var(--network), transparent 72%);
    }

    .tab-logo {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(255,255,255,.94);
      box-shadow: inset 0 0 0 1px rgba(15,17,21,.08), 0 1px 2px rgba(15,17,21,.1);
      overflow: hidden;
      flex: 0 0 auto;
    }

    .tab-logo img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      display: block;
    }

    .tab-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .tab-name {
      font-size: 13px;
      font-weight: 750;
      line-height: 1;
    }

    .tab[data-network="airteltigo"] .tab-logo img {
      width: 32px;
      height: 32px;
    }

    
    .tab[data-network="mtn"] .tab-logo img,
    .tab[data-network="telecel"] .tab-logo img {
      width: 37px;
      height: 37px;
    }

    
    .tab[data-network="mtn"] .tab-logo,
    .tab[data-network="telecel"] .tab-logo {
      background: transparent;
      box-shadow: none;
      border: 1.5px solid #fff;
    }

    .catalog-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin: 0 5px 12px;
      align-items: end;
    }

    h2 {
      margin: 0;
      font-size: 15px;
      line-height: 1.35;
      letter-spacing: 0;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      height: 19px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid #e1e4ea;
      color: #4c5563;
      background: #f5f6f8;
      text-transform: uppercase;
      font-size: 9px;
      font-weight: 700;
      vertical-align: 1px;
      margin-left: 6px;
    }

    .subtitle,
    .validity {
      color: var(--muted);
      font-size: 12px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .store-panel {
      position: relative;
      margin-top: 16px;
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 20px;
      background: rgba(255,255,255,.82);
      box-shadow: 0 8px 40px rgba(100,160,220,.12), 0 2px 8px rgba(100,160,220,.08), inset 0 1px 0 rgba(255,255,255,1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 24px;
    }

    .store-panel::before {
      display: none;
    }

    .store-panel > * {
      position: relative;
      z-index: 1;
    }

    .store-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }

    .store-panel-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #0f1923;
    }

    .store-panel-note {
      margin: 4px 0 0;
      color: #6b7a8d;
      font-size: 12.5px;
    }

    .secure-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      border-radius: 999px;
      border: 1px solid rgba(140,190,240,.3);
      background: rgba(255,255,255,.6);
      color: #3a5068;
      padding: 0 10px;
      font-size: 12px;
      white-space: nowrap;
    }

    .bundle {
      position: relative;
      overflow: hidden;
      min-height: 92px;
      text-align: left;
      border: 1px solid color-mix(in srgb, var(--network), white 42%);
      border-radius: 14px;
      background: var(--card-bg);
      color: white;
      box-shadow: 0 8px 18px rgba(15,17,21,.12);
      padding: 14px 14px 12px;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      text-shadow: 0 1px 2px rgba(0,0,0,.42);
    }

    .bundle::before {
      content: "";
      position: absolute;
      inset: -1px;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 18px),
        radial-gradient(circle at 90% 12%, rgba(255,255,255,.32), transparent 36%);
      opacity: .55;
      pointer-events: none;
    }

    .bundle::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(255,255,255,.18), transparent 42%, rgba(0,0,0,.12));
      pointer-events: none;
    }

    .bundle:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,.55);
      box-shadow: 0 14px 28px rgba(15,17,21,.2);
    }

    
    .bundle:active {
      transform: scale(0.97);
      transition: transform .08s ease;
    }

    .bundle strong,
    .bundle span {
      position: relative;
      z-index: 1;
      display: block;
    }

    .bundle strong {
      font-size: 18px;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .price {
      font-weight: 650;
      margin-bottom: 12px;
      color: rgba(255,255,255,.95);
    }

    
    .bundle:has(.price-was) strong { font-size: 22px; }
    .bundle:has(.price-was) .price { font-size: 16px; }

    .price-was {
      display: inline-block !important;
      position: relative;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,.95);
      line-height: 1;
      margin-bottom: 2px;
    }
    .price-was::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 1px;
      background: rgba(255,255,255,.85);
    }

    .bundle-speed {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      opacity: .72;
      margin-bottom: 8px !important;
      margin-top: -6px !important;
    }

    .buy-line {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      color: rgba(245,247,250,.78);
      font-size: 12px;
      text-shadow: 0 1px 2px rgba(0,0,0,.32);
    }

    .buy-copy {
      display: inline-flex !important;
      align-items: center;
      gap: 5px;
    }

    .bundle[data-card="mtn"] {
      border-color: #ffd83b;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 9px 18px rgba(116, 78, 0, .2);
      text-shadow: 0 2px 2px rgba(84, 55, 0, .68), 0 0 1px rgba(58, 38, 0, .8);
    }

    .bundle[data-card="mtn"]::before {
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 1px, transparent 1px, transparent 18px),
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.32), transparent 34%),
        linear-gradient(145deg, rgba(99,63,0,.22), rgba(99,63,0,.08) 44%, rgba(99,63,0,.18));
      opacity: .85;
    }

    .bundle[data-card="mtn"]::after {
      background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(71, 45, 0, .2) 38%, rgba(71, 45, 0, .42));
    }

    .bundle[data-card="mtn"] .buy-line {
      color: rgba(255, 253, 238, .82);
      text-shadow: 0 1px 2px rgba(72, 47, 0, .58);
    }

    .bundle[data-card="airteltigo"] {
      border-color: rgba(255,255,255,.42);
      text-shadow: 0 2px 2px rgba(4, 18, 64, .6), 0 0 1px rgba(52, 0, 8, .38);
    }

    .bundle[data-card="airteltigo"]::before {
      opacity: .68;
    }

    .bundle[data-card="telecel"] {
      border-color: rgba(255,255,255,.38);
      text-shadow: 0 2px 2px rgba(88, 0, 10, .6), 0 0 1px rgba(50, 0, 8, .42);
    }

    .empty {
      border: 1px dashed #d6dae2;
      border-radius: 14px;
      padding: 28px 18px;
      color: var(--muted);
      background: #fafbfc;
    }

    .track-order {
      width: min(100%, 520px);
      margin: 34px auto 0;
      text-align: center;
    }

    .track-action {
      min-height: 45px;
      border: 1px solid #d6dae2;
      border-radius: 14px;
      background: #f7f8fa;
      color: #11151c;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 18px;
      box-shadow: 0 2px 8px rgba(15,17,21,.05);
      font-size: 14px;
      font-weight: 800;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }

    .track-action:hover {
      border-color: #c5cad3;
      background: #f2f4f7;
      transform: translateY(-1px);
    }

    .track-action svg {
      color: #5f6874;
    }

    .footer {
      text-align: center;
      margin-top: 30px;
      color: #5d6572;
      font-size: 12px;
    }

    /* ========================================================
       TRACK ORDER & VERIFY PAYMENT MODALS
       ======================================================== */
    .history-main,
    .verify-main {
      position: fixed !important;
      inset: 0 !important;
      z-index: 10005 !important;
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      background: rgba(0, 0, 0, 0.72) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
      padding: 12vh 20px 24px 20px !important;
      min-height: 100vh !important;
      width: 100vw !important;
      max-width: 100vw !important;
      box-sizing: border-box !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    body:not(.history-mode) .history-main,
    body:not(.history-mode) .verify-main,
    body.history-mode.verify-active .history-main,
    body.history-mode:not(.verify-active) .verify-main {
      display: none !important;
    }

    .history-shell {
      position: relative !important;
      width: 100% !important;
      max-width: 860px !important;
      height: auto !important;
      min-height: unset !important;
      max-height: 88vh !important;
      background: #ffffff !important;
      border-radius: 36px !important;
      margin: 0 auto !important;
      padding: 24px 24px 28px !important;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
      overflow-y: auto !important;
      -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      animation: modalSlideInRight 0.44s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
      will-change: transform, opacity;
    }

    .history-shell.slide-in-right {
      animation: modalSlideInRight 0.44s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .history-shell.slide-out-right {
      animation: modalSlideOutRight 0.44s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .history-shell.slide-out-left {
      animation: modalSlideOutLeft 0.44s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .history-shell::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }

    @media (max-width: 768px) {
      .history-main,
      .verify-main {
        align-items: flex-start !important;
        padding: 12vh 14px 24px 14px !important;
      }
      .history-shell {
        max-width: 420px !important;
        height: auto !important;
        min-height: unset !important;
        max-height: 88vh !important;
        border-radius: 34px !important;
        margin: 0 auto !important;
        padding: 22px 18px 24px !important;
      }
    }

    .history-shell-header {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      margin-bottom: 14px !important;
      padding-bottom: 6px !important;
    }

    .history-shell-header .buy-data-modal-close {
      position: static !important;
      width: 30px !important;
      height: 30px !important;
      font-size: 19px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .back-store {
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      margin-bottom: 0 !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      background: rgba(120, 120, 128, 0.08) !important;
      color: #1a1c22 !important;
      padding: 6px 14px !important;
      border-radius: 999px !important;
      font-size: 12px !important;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", sans-serif !important;
      font-weight: 600 !important;
      cursor: pointer !important;
      box-shadow: none !important;
      transition: all 0.18s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }
    .back-store:hover {
      background: rgba(120, 120, 128, 0.15) !important;
      transform: translateY(-0.5px) !important;
    }
    .back-store:active {
      transform: scale(.96) !important;
    }

    .history-layout {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      width: 100% !important;
    }

    .history-title-row {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 14px;
      align-items: center;
      padding-top: 10px;
    }

    .history-icon {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.6);
      border: 1px solid rgba(140,190,240,.25);
      color: #0f1923;
    }

    .history-title-row h2 {
      margin: 0;
      font-size: clamp(26px, 6vw, 38px);
      line-height: 1;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #0f1923;
    }

    .history-title-row p {
      margin: 10px 0 0;
      color: #6b7a8d;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      font-size: 15px;
      line-height: 1.45;
    }

    .history-card {
      border: 1px solid #e5e7eb !important;
      border-radius: 18px !important;
      background: #fafbfc !important;
      padding: 18px 16px !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .history-card h3 {
      margin: 0 0 6px !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      font-family: inherit !important;
      font-size: 20px !important;
      font-weight: 700 !important;
      letter-spacing: -.02em !important;
      line-height: 1.2 !important;
      color: #111827 !important;
    }

    .history-card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(22,163,74,.12);
      color: #16a34a;
      flex-shrink: 0;
    }

    .history-card p {
      margin: 0 0 10px;
      color: #5a6475;
      font-family: inherit;
      font-size: 13px;
      line-height: 1.4;
    }

    .history-field-label {
      display: block;
      margin: 0 0 4px;
      color: #11151c;
      font-size: 12px;
      font-weight: 700;
      text-transform: none;
    }

    .history-search {
      display: grid;
      grid-template-columns: 1fr 40px;
      gap: 8px;
    }

    .history-search input {
      min-width: 0;
      height: 40px;
      border: 1.5px solid #34C759;
      border-radius: 12px;
      padding: 0 14px;
      outline: none;
      color: #111827;
      background: #fff;
      font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
      font-size: 15px;
      transition: border-color .15s, box-shadow .15s;
    }

    .history-search input:focus {
      border-color: #34C759;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(52,199,89,.15);
    }

    .history-search button {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 12px;
      background: #34C759;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s;
    }

    .history-search button:hover { background: #2ab54d; }

    @media (max-width: 700px) {
      .history-layout {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .settings-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: #4b5563;
      margin: 0 0 12px;
    }

    .admin-field-label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: #9aa3b0;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 7px;
    }
    .admin-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin-bottom: 20px;
    }
    .admin-input {
      height: 40px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 9px;
      background: rgba(255,255,255,.06);
      color: #fff;
      font-size: 14px;
      padding: 0 12px;
      font-family: inherit;
      outline: none;
      min-width: 0;
    }
    .admin-input:focus { border-color: rgba(255,255,255,.3); }
    
    select.admin-input { background: #1e2530; color-scheme: dark; }
    
    .admin-input option { background: #1a1c22; color: #fff; }
    .admin-input option:disabled { color: #6b7a8d; }
    .admin-action-btn {
      height: 40px;
      padding: 0 16px;
      border: 0;
      border-radius: 9px;
      background: #fff;
      color: #0f1115;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
    }
    .admin-order-card {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 20px;
      font-size: 14px;
    }
    .admin-order-row {
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .admin-order-row:last-child { border-bottom: none; }
    .admin-order-row span:first-child { color: #9aa3b0; }
    .admin-order-row span:last-child { font-weight: 600; color: #fff; }
    .admin-status-select {
      flex: 1;
      height: 40px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 9px;
      background: #1e2530;
      color: #fff;
      font-size: 14px;
      padding: 0 12px;
      font-family: inherit;
      outline: none;
      color-scheme: dark;
    }
    .admin-msg {
      font-size: 13px;
      margin-top: 10px;
      text-align: center;
    }
    .admin-msg.success { color: #4ade80; }
    .admin-msg.error { color: #f87171; }

    
    .order-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(4px);
      display: grid;
      place-items: center;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
    }
    .order-modal-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }
    .order-modal-box {
      background: #1a1c22;
      border-radius: 20px;
      padding: 32px 24px 28px;
      width: min(100%, 380px);
      text-align: center;
      color: #fff;
      border: 1px solid rgba(255,255,255,.08);
    }
    .order-modal-check { font-size: 44px; margin-bottom: 12px; }
    .order-modal-box h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
    .order-modal-box .om-sub { margin: 0 0 16px; color: #9aa3b0; font-size: 14px; line-height: 1.45; }
    .om-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; text-align: left; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; }
    .om-info-row { display: flex; flex-direction: column; gap: 3px; }
    .om-info-label { font-size: 11px; color: #6b7a8d; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
    .om-info-val { font-size: 14px; font-weight: 700; color: #e2e8f0; }
    .order-modal-save-note { color: #9aa3b0; font-size: 13px; margin: 0 0 10px; }
    .order-code-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 14px 18px;
      margin-bottom: 22px;
    }
    .order-code-text { font-size: 22px; font-weight: 800; letter-spacing: .12em; color: #fff; }
    .copy-code-btn {
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.1);
      color: #fff;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s;
    }
    .copy-code-btn:hover { background: rgba(255,255,255,.18); }
    .om-done-btn {
      width: 100%;
      height: 44px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 12px;
      background: transparent;
      color: #9aa3b0;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      margin-top: 8px;
    }
    .om-track-btn {
      width: 100%;
      height: 44px;
      border: 0;
      border-radius: 12px;
      background: #fff;
      color: #0f1923;
      font-size: 15px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      margin-top: 14px;
    }
    .om-notify-delivered-btn {
      width: 100%;
      height: 44px;
      border: 1px solid rgba(99,102,241,.35);
      border-radius: 12px;
      background: rgba(99,102,241,.1);
      color: #c7d2fe;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      margin-top: 14px;
    }
    .om-notify-bell { display: inline-block; transform-origin: 50% 0%; animation: om-notify-bell-pendulum .6s ease-in-out infinite; }
    @keyframes om-notify-bell-pendulum {
      0%, 100% { transform: rotate(-20deg); }
      50% { transform: rotate(20deg); }
    }

    
    .loyalty-bonus-banner {
      margin-top: 16px;
      background: linear-gradient(135deg, rgba(167,139,250,.18) 0%, rgba(74,222,128,.12) 100%);
      border: 1px solid rgba(167,139,250,.35);
      border-radius: 14px;
      padding: 14px 16px;
      text-align: center;
      display: none;
    }
    .loyalty-bonus-banner.visible { display: block; }
    .loyalty-bonus-gb {
      font-size: 22px;
      font-weight: 900;
      color: #a78bfa;
      letter-spacing: -.01em;
      line-height: 1.2;
    }
    .loyalty-bonus-sub {
      font-size: 13px;
      color: #c4b5fd;
      margin-top: 4px;
      font-weight: 500;
    }

    
    .tracker-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 0;
    }
    .tcard {
      background: #fff;
      border-radius: 20px;
      padding: 14px;
      box-shadow: 0 4px 20px rgba(15,23,42,.04);
      border: 1px solid rgba(0,0,0,.05);
      text-align: left;
    }
    .tracker-network-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .03em;
    }
    .badge-mtn      { background: transparent; color: #856404; }
    .badge-airteltigo { background: transparent; color: #1e40af; }
    .badge-telecel  { background: transparent; color: #9b1c1c; }
    .pb-badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 800;
      color: #16a34a;
      margin-left: 2px;
    }
    .tracker-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      gap: 8px;
    }
    .tracker-code {
      font-size: 16px;
      font-weight: 800;
      color: #111827;
      letter-spacing: .04em;
      line-height: 1;
      min-width: 0;
      white-space: nowrap;
    }
    .tracker-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      letter-spacing: .01em;
    }
    .tracker-status-pill.pill-delivered {
      background: #EAF8EC;
      color: #34C759;
      font-weight: 800;
    }
    .tracker-status-pill.pill-processing {
      background: rgba(96,165,250,.1);
      border: 1px solid rgba(96,165,250,.25);
      color: #2563eb;
    }
    .tracker-status-pill.pill-overnight {
      background: rgba(99,102,241,.08);
      border: 1px solid rgba(99,102,241,.22);
      color: #4f46e5;
    }
    .tracker-status-pill.pill-failed {
      background: rgba(248,113,113,.1);
      border: 1px solid rgba(248,113,113,.25);
      color: #dc2626;
    }
    .tracker-status-pill.pill-pending {
      background: rgba(251,191,36,.09);
      border: 1px solid rgba(251,191,36,.3);
      color: #b45309;
    }
    .tracker-status-pill.pill-refunded {
      background: rgba(20,184,166,.09);
      border: 1px solid rgba(20,184,166,.3);
      color: #0f766e;
    }
    .tracker-info-row {
      display: flex;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
      background: #fafafa;
      margin-bottom: 8px;
    }
    .tracker-info-cell {
      display: flex;
      flex-direction: column;
      padding: 7px 12px;
      gap: 2px;
    }
    .tracker-info-cell.phone-cell { flex: 1; border-right: 1px solid #e5e7eb; }
    .tracker-info-cell.badge-cell { flex-shrink: 0; justify-content: center; min-width: 90px; }
    .tracker-info-label {
      font-size: 10px;
      font-weight: 700;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .tracker-info-cell .tracker-network-badge { color: #111827; font-size: 14px; font-weight: 800; padding: 0; }
    .tracker-phone {
      font-size: 15px;
      font-weight: 700;
      color: #111827;
    }
    .tracker-meta {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .tracker-steps {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin-bottom: 8px;
      position: relative;
    }
    .tracker-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
    }
    .tracker-step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 14px;
      left: calc(50% + 14px);
      right: calc(-50% + 14px);
      height: 2px;
      background: #e5e7eb;
      z-index: 0;
      border-radius: 2px;
    }
    .tracker-step.done:not(:last-child)::after { background: #34C759; }
    .tracker-step.active:not(:last-child)::after { background: #e5e7eb; }
    .tracker-dot {
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px;
      position: relative; z-index: 1;
      flex-shrink: 0;
    }
    .tracker-step.done .tracker-dot {
      background: #34C759;
      color: #fff;
      box-shadow: 0 2px 8px rgba(52,199,89,.28);
    }
    .tracker-step.active .tracker-dot {
      background: rgba(251,191,36,.12);
      border: 2px solid #fbbf24;
      color: #d97706;
    }
    @keyframes tracker-spin { to { transform: rotate(360deg); } }
    .tracker-spin {
      display: inline-block;
      animation: tracker-spin 1.2s linear infinite;
    }
    .tracker-step.idle .tracker-dot {
      background: #f3f4f6;
      border: 2px solid #d8dde6;
      color: #c0c8d4;
    }
    .tracker-step.failed .tracker-dot {
      background: rgba(248,113,113,.12);
      border: 2px solid #ef4444;
      color: #dc2626;
    }
    .tracker-step-label {
      font-size: 10px;
      font-weight: 500;
      margin-top: 4px;
      text-align: center;
      line-height: 1.3;
      max-width: 56px;
      color: #9ca3af;
    }
    .tracker-step.done .tracker-step-label  { color: #34C759; font-weight: 700; }
    .tracker-step.active .tracker-step-label { color: #d97706; font-weight: 700; }
    .tracker-step.idle .tracker-step-label  { color: #c0c8d4; }
    .tracker-step.failed .tracker-step-label { color: #dc2626; font-weight: 700; }
    .tcard-status {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border-radius: 10px;
      padding: 9px 12px;
      margin-top: 0;
    }
    .tcard-status.pending { background: #fafafa; border: 1px solid #e5e7eb; }
    .tcard-status.processing { background: rgba(96,165,250,.05); border: 1px solid rgba(96,165,250,.15); }
    .tcard-status.delivered { background: #EAF8EC; border: 1px solid rgba(52,199,89,.2); }
    .tcard-status.failed { background: rgba(248,113,113,.05); border: 1px solid rgba(248,113,113,.15); }
    .tcard-status.overnight { background: rgba(99,102,241,.05); border: 1px solid rgba(99,102,241,.15); }
    .tcard-status.overnight .tracker-status-title { color: #4f46e5; }
    .tracker-status-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
    .tracker-status-title { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 2px; }
    .tcard-status.processing .tracker-status-title { color: #2563eb; }
    .tracker-status-sub { font-size: 13px; color: #4b5a6a; line-height: 1.45; }
    .tracker-tip { font-size: 12px; color: #6b7280; line-height: 1.5; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
    .tracker-paused-hint { font-size: 13px; color: #b45309; background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.28); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; line-height: 1.45; }
    .tcard-actions {
      display: flex;
      gap: 8px;
    }
    .tracker-refresh-btn {
      flex: 1;
      height: 40px;
      
      background: transparent;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 12px;
      color: #e5e7eb;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background .15s, border-color .15s;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .tracker-refresh-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
    .tracker-copy-btn {
      flex: 1;
      height: 40px;
      background: transparent;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 12px;
      color: #e5e7eb;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: background .15s;
      display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .tracker-copy-btn:hover { background: rgba(255,255,255,.08); }
    .tracker-wa-btn {
      display: flex; align-items: center; gap: 8px;
      width: 100%;
      padding: 10px 16px;
      
      background: transparent;
      border: 1px solid rgba(52,199,89,.4);
      border-radius: 12px;
      color: #34C759;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      text-decoration: none;
      justify-content: center;
      cursor: pointer;
    }
    
    .tracker-issue-btn {
      display: flex; align-items: center; gap: 8px;
      width: 100%;
      padding: 10px 16px;
      background: transparent;
      border: 1px solid rgba(239,68,68,.4);
      border-radius: 12px;
      color: #dc2626;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      text-decoration: none;
      justify-content: center;
      cursor: pointer;
    }
    
    .tracker-queue-btn {
      display: flex; align-items: center; gap: 8px;
      width: 100%;
      padding: 10px 16px;
      background: transparent;
      border: 1px solid rgba(240,177,58,.45);
      border-radius: 12px;
      color: #b9790a;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      text-decoration: none;
      justify-content: center;
      cursor: pointer;
      margin-top: 12px;
    }
    
    .tracker-om-notify {
      background: #F5F4FF !important;
      border-color: #DCD9FF !important;
      color: #5B4FE8 !important;
      margin-top: 0 !important;
    }
    .tracker-om-notify.subscribed { opacity: .85; }
    
    .verify-info-row {
      display: flex;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
      background: #fafafa;
      margin-bottom: 8px;
    }
    .verify-info-cell {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 8px 12px;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }
    .verify-info-cell + .verify-info-cell { border-left: 1px solid #e5e7eb; }
    .verify-info-label {
      font-size: 10px;
      font-weight: 700;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .verify-info-val {
      font-size: 14px;
      font-weight: 700;
      color: #111827;
      overflow-wrap: break-word;
    }
    @keyframes momoNotice {
      0%   { opacity: 0; transform: translateY(14px) scale(0.88); box-shadow: none; }
      55%  { opacity: 1; transform: translateY(-6px) scale(1.06); box-shadow: 0 0 0 6px rgba(251,191,36,.35); }
      75%  { transform: translateY(3px) scale(0.98); box-shadow: 0 0 0 3px rgba(251,191,36,.15); }
      100% { transform: translateY(0)  scale(1);    box-shadow: none; }
    }
    .momo-notice { animation: momoNotice .55s cubic-bezier(.36,.07,.19,.97) both; }
    
    .batch-label { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:rgba(59,130,246,.12); color:#2563eb; border:1px solid rgba(59,130,246,.25); border-radius:4px; padding:2px 6px; vertical-align:middle; margin-left:6px; }
    .batch-meta { font-size:12px; color:#6b7a8d; display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
    .batch-meta-sep { color:#cbd5e1; }
    .batch-lines { display:flex; flex-direction:column; gap:6px; }
    .batch-line { display:flex; align-items:center; justify-content:space-between; background:#f7f8fa; border:1px solid #eaecf0; border-radius:9px; padding:8px 10px; gap:8px; }
    .batch-line-info { display:flex; align-items:center; gap:8px; min-width:0; }
    .batch-line-num { width:18px; height:18px; border-radius:50%; background:#e4e8f0; color:#6b7a8d; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .batch-line-bundle { font-size:12px; font-weight:700; color:#0f1923; }
    .batch-line-phone { font-size:11px; color:#6b7a8d; margin-top:1px; }
    .batch-line-status { font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; flex-shrink:0; white-space:nowrap; }
    .batch-line-status.delivered { background:rgba(22,163,74,.1); color:#16a34a; border:1px solid rgba(22,163,74,.2); }
    .batch-line-status.processing { background:rgba(251,191,36,.1); color:#b45309; border:1px solid rgba(251,191,36,.25); }
    .batch-line-status.failed { background:rgba(248,113,113,.1); color:#dc2626; border:1px solid rgba(248,113,113,.2); }

    
    .order-result {
      margin-top: 18px;
      border-radius: 14px;
      background: rgba(255,255,255,.6);
      border: 1px solid rgba(140,190,240,.25);
      padding: 16px;
      font-size: 14px;
      font-family: inherit;
    }
    .order-result-row {
      display: flex;
      justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px solid rgba(140,190,240,.15);
      color: #0f1923;
    }
    .order-result-row:last-of-type { border-bottom: none; }
    .order-result-row span:first-child { color: #6b7a8d; font-weight: 500; }
    .order-result-row span:last-child { font-weight: 600; }
    .status-processing { color: #d97706; }
    .status-delivered { color: #16a34a; }
    .status-failed { color: #dc2626; }
    .report-issue-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 14px;
      height: 40px;
      border: 0;
      border-radius: 10px;
      background: #25D366;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      text-decoration: none;
    }

    .contact-wrap {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }

    .whatsapp-link, .telegram-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      color: white;
      text-decoration: none;
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      flex-shrink: 0;
    }

    .whatsapp-link:hover, .telegram-link:hover {
      transform: scale(1.08);
    }

    .whatsapp-link {
      background: #16a47a;
      box-shadow: 0 6px 18px rgba(13, 122, 87, .38);
    }

    .telegram-link {
      background: #229ED9;
      box-shadow: 0 6px 18px rgba(34, 158, 217, .42);
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 30;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(0,0,0,.48);
      /* Real frosted blur (owner request, 2026-08-29) -- 1px was barely visible, the
         Buy Data modal underneath stayed distractingly legible through the overlay. */
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .modal.open {
      display: flex;
    }

    .sheet {
      position: relative;
      /* Matched to .buy-data-modal-dialog's max-width (owner request, 2026-08-29) --
         both this checkout card and the Buy Data modal behind it sit in an overlay with
         the same 20px horizontal padding, so matching max-width lines up their left/right
         edges exactly. Height is deliberately untouched -- this card should stay only as
         tall as its own content. */
      width: min(860px, 100%);
      border-radius: 36px;
      background: white;
      box-shadow: 0 24px 60px rgba(0,0,0,.24);
      padding: 24px;
    }

    .close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      /* Matched to .buy-data-modal-close's already-approved circle style (owner
         request, 2026-08-29) -- was a bare transparent X with no button chrome at all. */
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(0, 0, 0, 0.06);
      color: #1a1c22;
      border-radius: 50%;
    }

    .ticket {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 14px;
      background: white;
      border: 1px solid #eef0f4;
      border-radius: 14px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }

    .ticket-logo-wrap {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      background: #f5f6f8;
    }

    .ticket-logo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .ticket-info {
      flex: 1;
      min-width: 0;
    }

    .ticket-title {
      font-size: 15px;
      font-weight: 800;
      color: #11151c;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mini-network {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      color: white;
      background: var(--network);
      padding: 4px 8px;
      font-size: 10px;
      font-weight: 800;
    }

    .ticket-price-col {
      text-align: right;
      flex-shrink: 0;
    }

    .ticket-price-label {
      display: block;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #9da8b8;
      margin-bottom: 2px;
    }

    .ticket-price {
      font-size: 22px;
      font-weight: 900;
      white-space: nowrap;
      color: #11151c;
    }

    .phone-warning {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      background: #faf7ef;
      border: 1px solid #e2d5b5;
      border-radius: 10px;
      padding: 10px 12px;
      margin-top: -2px;
      margin-bottom: 14px;
    }

    .phone-warning svg {
      flex-shrink: 0;
      margin-top: 1px;
      color: #16a34a;
    }

    .phone-warning span {
      font-size: 12px;
      color: #6b5c3e;
      line-height: 1.45;
    }

    .paystack-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 14px;
      font-size: 11px;
      color: #9da8b8;
    }

    .form-title {
      margin: 0 0 10px;
      font-size: 20px;
      letter-spacing: 0;
    }

    .form-copy {
      margin: 0 0 18px;
      color: #656d79;
      font-size: 12.5px;
      line-height: 1.45;
    }

    
    .form-copy.notice-dark  { color: #656d79; }
    .form-copy.notice-red   { color: #dc2626; }
    .form-copy.notice-amber { color: #b45309; }
    .form-copy.notice-green { color: #16a34a; }
    .form-copy.notice-blue  { color: #2563eb; }

    label {
      display: block;
      margin-bottom: 6px;
      color: #5a6270;
      font-size: 12px;
      font-weight: 750;
      text-transform: uppercase;
    }

    .field {
      margin-bottom: 12px;
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .input-wrap {
      position: relative;
    }

    .input-wrap svg {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #6f7783;
    }

    .field input {
      width: 100%;
      height: 40px;
      border: 1px solid #d8dde5;
      border-radius: 9px;
      padding: 0 12px;
      outline: none;
      background: white;
    }

    .field input.with-icon {
      padding-left: 42px;
    }

    
    #phone {
      height: 54px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: .02em;
      border-width: 1.5px;
      border-color: #22c55e;
    }
    
    #phone::placeholder {
      color: #c2c8d1;
      font-weight: 400;
    }

    .sheet label {
      text-transform: none;
    }

    .input-wrap svg {
      width: 20px;
      height: 20px;
    }

    .field input:focus {
      border-color: var(--network, #9da8ff);
      box-shadow: 0 0 0 3px rgba(0,0,0,.07);
    }

    .totals {
      background: #f8f9fb;
      border-radius: 12px;
      padding: 12px 14px;
      margin: 8px 0 18px;
      color: #656d79;
      font-size: 13px;
    }

    .total-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 9px;
    }

    .total-row.final {
      color: #11151c;
      font-weight: 850;
      font-size: 16px;
      margin-top: 12px;
    }

    .actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .cancel {
      height: 50px;
      border-radius: 12px;
      font-weight: 750;
      font-size: 15px;
      border: 1.5px solid #dfe3ea;
      background: white;
      color: #454b55;
    }

    .pay {
      height: 58px;
      border: 0;
      border-radius: 12px;
      background: #16a34a;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 750;
      font-size: 15px;
    }

    .toast {
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 40;
      display: none;
      width: min(340px, calc(100vw - 36px));
      border: 1px solid #dfe3ea;
      border-radius: 12px;
      background: white;
      box-shadow: 0 12px 34px rgba(15,17,21,.16);
      padding: 14px 16px;
      color: #303743;
    }

    .toast.show {
      display: block;
    }

    .toast strong {
      display: block;
      margin-bottom: 4px;
      color: #11151c;
    }

    @media (min-width: 1100px) {
      .grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }

    @media (max-width: 850px) {
      .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .wrap {
        padding-inline: 14px;
      }

      .hero-inner {
        min-height: unset;
        padding: 14px 0;
        flex-wrap: wrap;
        gap: 10px 16px;
      }

      .hero-nav {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
      }

      .logo {
        width: 44px;
        height: 44px;
      }


      .trust-row {
        flex-direction: column;
        align-items: stretch;
      }
      .trust-pill {
        justify-content: center;
      }

      .store-panel {
        margin-top: -18px;
        border-radius: 18px;
        padding: 14px;
      }

      .store-panel-head {
        align-items: flex-start;
      }

      .secure-chip {
        display: none;
      }

      .tabs {
        justify-content: center;
      }

      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .catalog-head {
        align-items: start;
      }

      .sheet {
        padding: 20px 18px;
        border-radius: 36px;
        max-height: calc(100svh - 20px);
        overflow-y: auto;
      }

      .ticket {
        padding: 11px 12px;
        gap: 10px;
        margin-bottom: 14px;
      }

      .ticket-logo-wrap {
        width: 42px;
        height: 42px;
      }

      .ticket-title {
        font-size: 14px;
      }

      .ticket-price {
        font-size: 18px;
      }

      .mini-network {
        padding: 3px 7px;
        font-size: 9px;
      }

      .form-title {
        margin-bottom: 5px;
        font-size: 18px;
      }

      .form-copy {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 1.35;
      }

      label {
        margin-bottom: 4px;
        font-size: 10px;
      }

      .field input {
        height: 36px;
        border-radius: 8px;
      }

      #phone {
        height: 50px;
        font-size: 18px;
      }

      .totals {
        margin: 9px 0 9px;
        padding-top: 10px;
        font-size: 12px;
      }

      .total-row {
        margin-bottom: 6px;
      }

      .total-row.final {
        margin-top: 8px;
        font-size: 15px;
      }

      .field {
        margin-bottom: 7px;
      }

      .actions {
        gap: 8px;
      }

      .cancel,
      .pay {
        height: 50px;
      }

      .contact-wrap {
        right: 16px;
        bottom: 16px;
      }
    }

    @media (max-width: 420px) {
      .home {
        display: none;
      }

      .tab {
        padding: 8px 4px 6px;
        gap: 4px;
        min-height: 62px;
      }

      .tab-logo {
        width: 32px;
        height: 32px;
        border-radius: 8px;
      }

      .tab-logo img {
        width: 26px;
        height: 26px;
      }

      .tab[data-network="airteltigo"] .tab-logo img {
        width: 26px;
        height: 26px;
      }

      
      .tab[data-network="mtn"] .tab-logo img,
      .tab[data-network="telecel"] .tab-logo img {
        width: 28px;
        height: 28px;
      }

      .tab-name { font-size: 11px; }
      .tab-speed { font-size: 8px; }

      .whatsapp-link, .telegram-link {
        width: 38px;
        height: 38px;
      }
    }

    
    .pb-scenario { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 2px 14px; margin-bottom: 10px; }
    .pb-scenario > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 2px; user-select: none; }
    .pb-scenario > summary::-webkit-details-marker { display: none; }
    .pb-scenario > summary::after { content: "›"; margin-left: auto; color: #6b7a8d; font-size: 24px; line-height: 1; flex-shrink: 0; transition: transform .2s; }
    .pb-scenario[open] > summary::after { transform: rotate(90deg); color: #a78bfa; }
    .pb-scenario[open] > summary { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 12px; margin-bottom: 2px; }
    .pb-scenario-title { display: block; font-size: 14px; font-weight: 700; color: #fff; }
    .pb-scenario-sub { display: block; font-size: 11px; color: #6b7a8d; margin-top: 3px; line-height: 1.4; }
    
    .pb-steps { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 14px; }
    .pb-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: background .15s; }
    .pb-step:hover { background: rgba(255,255,255,.05); }
    .pb-step-ann { align-items: flex-start; }
    
    .pb-dot { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #6b7a8d; transition: all .2s; margin-top: 2px; }
    .pb-dot::before { content: "○"; }
    .pb-dot.done { background: rgba(74,222,128,.15); border-color: rgba(74,222,128,.4); color: #4ade80; }
    .pb-dot.done::before { content: "✓"; }
    .pb-dot.needed { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: #f87171; }
    .pb-dot.needed::before { content: "!"; font-size: 13px; }
    .pb-dot.posted { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.35); color: #60a5fa; }
    .pb-dot.posted::before { content: "✓"; }
    .pb-step-info { flex: 1; min-width: 0; }
    .pb-step-info b { display: block; font-size: 13px; color: #e2e8f0; font-weight: 700; }
    .pb-step-info span { display: block; font-size: 11px; color: #6b7a8d; margin-top: 3px; line-height: 1.4; }
    .pb-ann { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #e2e8f0; font-family: inherit; font-size: 12px; padding: 8px; resize: vertical; outline: none; margin-top: 6px; }
    
    .pb-btn { flex-shrink: 0; font-size: 12px; font-weight: 700; font-family: inherit; padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #e2e8f0; cursor: pointer; white-space: nowrap; margin-top: 2px; transition: all .15s; }
    .pb-btn:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
    .pb-btn:disabled { opacity: .4; cursor: default; }
    
    .pb-manual-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; border-radius: 12px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
    .pb-manual-step:hover { background: rgba(255,255,255,.04); }
    .pb-manual-step input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; cursor: pointer; accent-color: #4ade80; }
    .pb-manual-step span { font-size: 12px; color: #9aa3b0; line-height: 1.5; }
    .pb-manual-step b { color: #e2e8f0; font-weight: 700; }
    .pb-manual-step em { color: #6b7a8d; }
    
    .pb-scenario-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
    
    .settings-group { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 0; margin-bottom: 10px; overflow: hidden; }
    .settings-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 13px; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #e2e8f0; padding: 14px 16px; user-select: none; -webkit-tap-highlight-color: transparent; }
    .settings-group > summary::-webkit-details-marker { display: none; }
    .settings-group > summary::after { content: "\203A"; margin-left: auto; font-size: 22px; font-weight: 400; color: #4b5563; transition: transform .2s; line-height: 1; flex-shrink: 0; }
    .settings-group[open] > summary { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
    .settings-group[open] > summary::after { transform: rotate(90deg); color: #a78bfa; }
    .settings-group[open] { padding: 0; }
    
    .sg-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; line-height: 1; }
    .sg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .sg-title { font-size: 13.5px; font-weight: 700; color: #e2e8f0; }
    .sg-sub { font-size: 11px; color: #6b7a8d; }
    
    .sg-body { padding: 14px 16px 16px; }
    .sg-body > .net-card:last-child, .sg-body > details.net-card:last-child { margin-bottom: 0; }
    
    .settings-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b7a8d; padding: 18px 2px 7px; margin: 0; display: block; }
    
    
    details.net-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
    details.net-card > summary::-webkit-details-marker { display: none; }
    details.net-card > summary::after { content: "\25B8"; margin-left: auto; flex-shrink: 0; transition: transform .2s, color .2s; color: #6b7a8d; font-size: 28px; line-height: 1; }
    details.net-card[open] > summary::after { transform: rotate(90deg); color: #4ade80; }
    details.net-card[open] > summary { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 12px; margin-bottom: 2px; background: rgba(74,222,128,.06); border-radius: 8px 8px 0 0; }

    
    .net-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
    .net-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .net-card-header > div:first-child { min-width: 0; flex: 1; }
    .net-card-name { font-size: 14px; font-weight: 700; color: #fff; }
    .net-toggle-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .net-toggle-label { font-size: 12px; color: #9aa3b0; }
    .net-toggle-switch { position: relative; width: 40px; height: 22px; cursor: pointer; }
    .net-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
    .net-toggle-track { position: absolute; inset: 0; background: #374151; border-radius: 999px; transition: background .2s; }
    .net-toggle-switch input:checked + .net-toggle-track { background: #4ade80; }
    .net-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .2s; pointer-events: none; }
    .net-toggle-switch input:checked ~ .net-toggle-thumb { left: 21px; }
    .net-speed-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .net-speed-row span { font-size: 13px; color: #9aa3b0; }
    .net-speed-select { background: #1e2530; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff; font-size: 13px; font-family: inherit; padding: 6px 10px; outline: none; cursor: pointer; color-scheme: dark; }
    .net-speed-select option { background: #1a1c22; }
    .net-save-btn { width: 100%; padding: 10px; border: 0; border-radius: 9px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; margin-bottom: 16px; transition: background .15s; }
    .net-save-btn:hover { background: rgba(255,255,255,.16); }
    .net-waitlist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .net-waitlist-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7a8d; }
    .net-waitlist-count { font-size: 12px; font-weight: 700; color: #4ade80; }
    .wl-list { display: flex; flex-direction: column; gap: 4px; max-height: 130px; overflow-y: auto; margin-bottom: 10px; }
    .wl-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9aa3b0; background: rgba(255,255,255,.04); border-radius: 6px; padding: 5px 8px; transition: opacity .2s; }
    .wl-item.texted { opacity: .45; }
    .wl-item.texted .wl-item-phone { text-decoration: line-through; color: #6b7a8d; }
    .wl-item-phone { font-weight: 600; color: #e2e8f0; flex: 1; }
    .wl-item-date { color: #4b5563; font-size: 11px; }
    .wl-item-btns { display: flex; gap: 4px; flex-shrink: 0; }
    .wl-item-btn { font-size: 10px; font-weight: 700; font-family: inherit; padding: 3px 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #9aa3b0; cursor: pointer; text-decoration: none; line-height: 1.4; display: inline-block; }
    .wl-item-btn.wa { border-color: rgba(74,222,128,.3); color: #4ade80; background: rgba(74,222,128,.07); }
    .wl-item-btn.texted-on { border-color: rgba(74,222,128,.3); color: #4ade80; background: rgba(74,222,128,.07); }
    .wl-item-btn.remove { border-color: rgba(248,113,113,.25); color: #f87171; background: rgba(248,113,113,.06); }
    .wl-empty { font-size: 12px; color: #4b5563; text-align: center; padding: 12px; }
    .wl-clear-btn { width: 100%; padding: 7px; border: 1px solid rgba(248,113,113,.3); border-radius: 8px; background: transparent; color: #f87171; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; }

    
    .discount-area { margin-bottom: 4px; }
    .discount-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 5px; }
    .discount-code-input { height: 38px; border: 1.5px solid #d8dde5; border-radius: 9px; padding: 0 12px; outline: none; background: white; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #0f1115; width: 100%; box-sizing: border-box; text-transform: uppercase; }
    .discount-code-input:focus { border-color: #9da8ff; box-shadow: 0 0 0 3px rgba(88,101,242,.12); }
    .discount-code-input.valid { border-color: #16a34a; background: #f0fdf4; }
    .discount-code-input.invalid { border-color: #dc2626; background: #fff5f5; }
    .discount-apply-btn { height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: #111214; color: #fff; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s; }
    .discount-apply-btn:disabled { background: #4ade80; cursor: default; }
    .discount-msg { font-size: 12px; min-height: 15px; margin: 0 0 6px; }
    .total-row.discount-line strong { color: #16a34a; }

    
    .discount-info-list { margin-top: 14px; padding: 10px 12px; background: rgba(255,255,255,.04); border-radius: 8px; border: 1px solid rgba(255,255,255,.06); }
    .discount-info-list p { margin: 3px 0; font-size: 11px; color: #6b7a8d; }
    .discount-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
    .discount-grid .admin-input { width: 100%; box-sizing: border-box; }

    
    .tab-speed { display: block; font-size: 9px; font-weight: 600; letter-spacing: .02em; opacity: .85; text-align: center; min-height: 11px; }

    
    .orders-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      align-items: start;
    }
    .orders-split-history .order-list-section {
      border-top: none;
      padding-top: 0;
      margin-top: 0;
    }
    @media (max-width: 600px) {
      
      .orders-split {
        display: flex;
        flex-direction: column;
      }
      .orders-split-history { order: 1; }
      .orders-split-search  { order: 2; }

      
      #wallets-cards {
        grid-template-columns: 1fr;
      }
    }

    
    .bonus-split {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 28px;
      align-items: start;
    }
    .bonus-split-left { position: sticky; top: 20px; }
    @media (max-width: 600px) {
      .bonus-split { grid-template-columns: 1fr; }
      .bonus-split-left { position: static; }
    }

    
    .order-list-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
    .order-list-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .order-refresh-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #9aa3b0; font-size: 12px; font-family: inherit; padding: 5px 10px; cursor: pointer; }
    .order-refresh-btn:hover { background: rgba(255,255,255,.13); }
    .order-list { display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; overflow-x: hidden; }
    .order-list-empty { font-size: 13px; color: #4b5563; text-align: center; padding: 20px; }
    .profit-card { background: linear-gradient(135deg, rgba(74,222,128,.08), rgba(34,197,94,.04)); border: 1px solid rgba(74,222,128,.22); border-radius: 14px; padding: 18px 20px; margin-bottom: 22px; }
    .profit-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .profit-card-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(74,222,128,.15); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
    .profit-card-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7a8d; }
    .profit-card-date { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-top: 2px; }
    .profit-total { font-size: 40px; font-weight: 800; color: #4ade80; margin: 4px 0 2px; letter-spacing: -.03em; line-height: 1; }
    
    .admin-section-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #6b7a8d; text-transform: uppercase; display: block; margin: 20px 0 10px; }
    
    .time-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
    .time-field { min-width: 0; }
    .time-field-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #6b7a8d; text-transform: uppercase; display: block; margin-bottom: 6px; }
    .time-field-wrap { display: flex; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 0 10px; gap: 6px; }
    .time-field-icon { font-size: 17px; flex-shrink: 0; line-height: 1; }
    .time-field-input { flex: 1; background: none; border: none; color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; padding: 11px 0; outline: none; min-width: 0; color-scheme: dark; }
    .time-field-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
    .profit-sub { font-size: 12px; color: #9aa3b0; margin-bottom: 12px; }
    .profit-nets { display: flex; flex-wrap: wrap; gap: 8px; }
    .profit-net-chip { font-size: 12px; font-weight: 600; color: #e2e8f0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 6px 11px; display: flex; gap: 6px; align-items: baseline; }
    .profit-net-chip b { color: #4ade80; font-weight: 700; }
    .profit-net-chip small { color: #6b7a8d; font-size: 10px; }
    .profit-note { font-size: 10px; color: #5b6675; margin: 12px 0 0; }
    .insights-list { display: flex; flex-direction: column; gap: 6px; }
    .ins-row { display: flex; align-items: center; gap: 10px; }
    .ins-row.peak .ins-bar { background: linear-gradient(90deg, #22c55e, #4ade80); }
    .ins-row.peak .ins-label { color: #4ade80; }
    .ins-label { flex: 0 0 90px; font-size: 12px; color: #cbd5e1; font-weight: 600; }
    .ins-bar-wrap { flex: 1; height: 16px; background: rgba(255,255,255,.04); border-radius: 5px; overflow: hidden; }
    .ins-bar { height: 100%; background: linear-gradient(90deg, rgba(96,165,250,.6), rgba(96,165,250,.9)); border-radius: 5px; min-width: 2px; transition: width .3s; }
    .ins-val { flex: 0 0 auto; font-size: 12px; color: #e2e8f0; font-weight: 700; text-align: right; min-width: 54px; }
    .ins-val small { display: block; font-size: 10px; color: #6b7a8d; font-weight: 500; }
    .insights-peak { font-size: 13px; color: #4ade80; font-weight: 700; margin: 14px 0 0; }
    
    .ins-yesterday-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 16px 18px; margin: 14px 0 6px; }
    .ins-yesterday-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .ins-yesterday-label { font-size: 13px; font-weight: 700; color: #cbd5e1; }
    .ins-yesterday-date { font-size: 11px; color: #6b7a8d; }
    .ins-yesterday-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .ins-yd-stat { display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.03); border-radius: 10px; padding: 10px 12px; }
    .ins-yd-stat span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6b7a8d; }
    .ins-yd-stat b { font-size: 15px; font-weight: 800; color: #4ade80; letter-spacing: -.01em; }
    .ins-chart-card { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px 14px 8px; margin-top: 12px; }
    .ins-chart-card.ins-chart-tall { min-height: 220px; }
    
    .seg-group { border-top: 1px solid rgba(255,255,255,.06); padding: 0; margin-top: 6px; }
    .seg-group:first-child { border-top: none; margin-top: 0; }
    .seg-summary { display: flex; align-items: center; gap: 8px; padding: 9px 2px; cursor: pointer; list-style: none; user-select: none; }
    .seg-summary::-webkit-details-marker { display: none; }
    .seg-label { font-size: 12px; font-weight: 700; color: #cbd5e1; }
    .seg-count { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.08); border-radius: 10px; padding: 1px 7px; color: #94a3b8; }
    .seg-desc { font-size: 11px; color: #475569; margin-left: auto; }
    .seg-header-row { display: grid; grid-template-columns: 1fr .6fr .5fr .4fr .55fr .55fr; gap: 4px; padding: 4px 6px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
    .seg-row { display: grid; grid-template-columns: 1fr .6fr .5fr .4fr .55fr .55fr; gap: 4px; padding: 7px 6px; border-radius: 8px; cursor: pointer; transition: background .15s; align-items: center; }
    .seg-row:hover { background: rgba(255,255,255,.05); }
    .seg-phone { font-size: 13px; font-weight: 600; color: #e2e8f0; }
    .seg-meta { font-size: 12px; color: #94a3b8; }
    .seg-src-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
    .seg-src-web { background: rgba(96,165,250,.15); color: #60a5fa; border: 1px solid rgba(96,165,250,.3); }
    .seg-src-manual { background: rgba(167,139,250,.15); color: #a78bfa; border: 1px solid rgba(167,139,250,.3); }
    .seg-src-both { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.3); }
    .seg-net { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #6b7a8d; }

    
    body.agent-hub-mode > header,
    body.agent-hub-mode > main,
    body.agent-hub-mode > #order-success-overlay,
    body.agent-hub-mode > #feedback-overlay,
    body.agent-hub-mode > #closing-warn-banner,
    body.agent-hub-mode > #hours-popup,
    body.agent-hub-mode > #mo-overlay,
    body.agent-hub-mode > #mo-panel,
    body.agent-hub-mode > #phone-mismatch-modal { display: none !important; }

    #agent-hub { display: none; flex-direction: column; min-height: 100dvh; background: #0d1117; font-family: inherit; }

    
    #agent-login-screen { display: none; flex: 1; align-items: center; justify-content: center; padding: 24px; }
    .agent-login-card { background: #131920; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 32px 28px; width: 100%; max-width: 360px; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
    .agent-login-logo { text-align: center; margin-bottom: 20px; }
    .agent-login-logo img { width: 48px; height: 48px; object-fit: cover; filter: invert(1); border-radius: 10px; }
    .agent-login-title { text-align: center; font-size: 20px; font-weight: 800; color: #e2e8f0; margin-bottom: 4px; }
    .agent-login-sub { text-align: center; font-size: 12px; color: #6b7a8d; margin-bottom: 24px; }
    .agent-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 14px; color: #e2e8f0; font-size: 14px; font-family: inherit; margin-bottom: 12px; outline: none; }
    .agent-input:focus { border-color: rgba(96,165,250,.5); }
    .agent-login-btn { width: 100%; padding: 13px; border-radius: 10px; border: none; background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: 4px; }
    .agent-login-btn:disabled { opacity: .6; cursor: not-allowed; }
    .agent-login-error { font-size: 13px; color: #f87171; margin-top: 10px; min-height: 18px; text-align: center; }

    
    #agent-dashboard { display: none; flex-direction: column; flex: 1; }
    .agent-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #131920; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; }
    .agent-header-brand { font-size: 15px; font-weight: 800; color: #e2e8f0; flex: 1; }
    .agent-badge-chip { font-size: 9px; font-weight: 800; background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; padding: 2px 6px; border-radius: 4px; letter-spacing: .06em; margin-left: 6px; vertical-align: middle; }
    .agent-wallet-pill { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.25); border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 700; color: #4ade80; white-space: nowrap; }
    .agent-header-name { font-size: 12px; color: #6b7a8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
    .agent-logout-btn { background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 5px 10px; color: #94a3b8; font-size: 11px; font-family: inherit; cursor: pointer; white-space: nowrap; }

    
    .agent-tab-bar { display: flex; background: #0d1117; border-bottom: 1px solid rgba(255,255,255,.07); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
    .agent-tab-bar::-webkit-scrollbar { display: none; }
    .agent-tab { flex: 1; min-width: 64px; padding: 11px 8px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #6b7a8d; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
    .agent-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }

    
    .agent-tab-content { flex: 1; overflow-y: auto; padding: 16px; display: none; }
    .agent-tab-content:first-of-type { display: block; }

    
    .agent-net-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
    .agent-net-tab { flex: 1; padding: 10px 6px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); color: #94a3b8; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .15s; }
    .agent-net-tab.active { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.4); color: #60a5fa; }

    
    .agent-bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 16px; }
    .agent-bundle-card { background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; transition: all .15s; }
    .agent-bundle-card:hover, .agent-bundle-card.selected { background: rgba(96,165,250,.1); border-color: #3b82f6; }
    .agent-bundle-size { display: block; font-size: 16px; font-weight: 800; color: #e2e8f0; }
    .agent-bundle-price { display: block; font-size: 12px; color: #60a5fa; font-weight: 600; margin-top: 3px; }

    
    #agent-order-confirm { display: none; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px; margin-top: 4px; }
    .agent-confirm-label { font-size: 13px; font-weight: 700; color: #e2e8f0; margin-bottom: 12px; }
    .agent-phones-textarea { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; color: #e2e8f0; font-size: 13px; font-family: monospace; min-height: 80px; resize: vertical; outline: none; margin-bottom: 10px; }
    .agent-phones-hint { font-size: 11px; color: #6b7a8d; margin-bottom: 12px; }
    .agent-primary-btn { width: 100%; padding: 13px; border-radius: 10px; border: none; background: linear-gradient(135deg,#3b82f6,#2563eb); color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
    .agent-primary-btn:disabled { opacity: .6; cursor: not-allowed; }
    .agent-error-msg { font-size: 12px; color: #f87171; margin-top: 8px; min-height: 16px; }
    #agent-order-success { margin-top: 12px; }
    .agent-success-box { background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); border-radius: 12px; padding: 16px; text-align: center; }
    .agent-btn-sm { padding: 8px 18px; border-radius: 8px; border: 1px solid rgba(96,165,250,.3); background: rgba(96,165,250,.1); color: #60a5fa; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; }

    
    .agent-orders-header { display: grid; grid-template-columns: 80px 70px 55px 100px 90px 1fr 60px; gap: 4px; padding: 6px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #475569; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 4px; }
    .agent-order-row { display: grid; grid-template-columns: 80px 70px 55px 100px 90px 1fr 60px; gap: 4px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.04); align-items: center; font-size: 12px; color: #94a3b8; }
    .agent-order-code { font-family: monospace; font-size: 11px; color: #60a5fa; }
    .agent-order-net { font-weight: 700; color: #e2e8f0; font-size: 11px; }
    .agent-order-phone { font-family: monospace; font-size: 11px; }
    .agent-order-date { font-size: 10px; color: #6b7a8d; }
    .agent-order-actions { display: flex; gap: 4px; }
    .agent-status-badge { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 20px; }
    .status-delivered { background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.25); }
    .status-failed { background: rgba(248,113,113,.12); color: #f87171; border: 1px solid rgba(248,113,113,.25); }
    .status-pending { background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.25); }
    .agent-icon-btn { background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 3px 6px; cursor: pointer; font-size: 13px; }
    .agent-wa-btn { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.25); border-radius: 6px; padding: 3px 6px; font-size: 13px; text-decoration: none; }

    
    .agent-topup-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
    .agent-topup-title { font-size: 14px; font-weight: 700; color: #e2e8f0; margin-bottom: 14px; }
    .agent-amount-row { display: flex; gap: 8px; margin-bottom: 12px; }
    .agent-amount-input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 11px 14px; color: #e2e8f0; font-size: 15px; font-family: inherit; outline: none; }
    .agent-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 20px 0; }
    .agent-verify-title { font-size: 13px; color: #94a3b8; margin-bottom: 10px; }
    .agent-ref-row { display: flex; gap: 8px; }
    .agent-ref-input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; color: #e2e8f0; font-size: 13px; font-family: monospace; outline: none; }
    .agent-secondary-btn { padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(96,165,250,.3); background: rgba(96,165,250,.08); color: #60a5fa; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; }
    .agent-topup-status { font-size: 12px; margin-top: 10px; min-height: 16px; }

    
    .agent-track-search { display: flex; gap: 8px; margin-bottom: 16px; }
    .agent-track-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; }
    .agent-track-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
    .agent-track-row:last-child { border-bottom: none; }
    .agent-track-row span:first-child { color: #6b7a8d; font-size: 12px; }

    
    .agent-profile-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 20px; margin-bottom: 14px; }
    .agent-profile-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
    .agent-profile-row:last-child { border-bottom: none; }
    .agent-profile-row span:first-child { color: #6b7a8d; }
    .agent-profile-row strong { color: #e2e8f0; }
    .agent-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #475569; margin-bottom: 12px; }

    .agent-empty { text-align: center; color: #6b7a8d; padding: 32px 16px; font-size: 13px; }
    .seg-ago { font-size: 11px; color: #6b7a8d; text-align: right; }
    
    .hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .hist-table th { text-align: left; padding: 4px 8px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
    .hist-table td { padding: 8px; border-top: 1px solid rgba(255,255,255,.06); color: #cbd5e1; vertical-align: middle; }
    .hist-table tr:first-child td { border-top: none; }
    .hist-month { font-weight: 700; color: #e2e8f0; }
    .hist-rev { font-weight: 700; color: #4ade80; }
    .hist-net { display: flex; gap: 4px; flex-wrap: wrap; }
    .hist-net-pill { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 99px; background: rgba(255,255,255,.07); color: #94a3b8; }
    .hist-net-pill.mtn { background: rgba(246,205,28,.12); color: #f6cd1c; }
    .hist-net-pill.telecel { background: rgba(239,68,68,.12); color: #f87171; }
    .hist-net-pill.airteltigo { background: rgba(59,130,246,.12); color: #60a5fa; }
    
    .archive-btn { margin-top: 10px; width: 100%; padding: 9px; border-radius: 10px; font-size: 12px; font-weight: 700; border: 1px solid rgba(248,113,113,.25); background: rgba(248,113,113,.07); color: #f87171; cursor: pointer; }
    .archive-btn:disabled { opacity: .5; cursor: default; }
    .ins-chart-card svg { min-height: 200px; }
    .ins-chart-title { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #cbd5e1; margin: 0 0 8px; }
    .ins-chart-title span { color: #6b7a8d; font-weight: 600; text-transform: none; letter-spacing: 0; }
    .ins-chart-section-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7a8d; margin-bottom: 6px; }
    .ins-collapse-header { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
    .ins-chevron { font-size:11px; opacity:.5; flex-shrink:0; }
    .ins-section-row { display:flex; align-items:center; justify-content:space-between; padding:13px 2px; cursor:pointer; user-select:none; border-top:1px solid rgba(255,255,255,.09); margin-top:6px; }
    .ins-section-name { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#94a3b8; }
    
    .profit-yesterday { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; }
    .profit-yesterday-summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 700; color: #cbd5e1; user-select: none; }
    .profit-yesterday-summary::-webkit-details-marker { display: none; }
    .profit-yesterday-val { color: #4ade80; font-size: 14px; font-weight: 800; margin-left: auto; }
    .order-group-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f0a830; margin: 2px 0 8px; }
    
    .delivered-group { margin-top: 6px; }
    .delivered-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 13px 14px; user-select: none; transition: background .15s; }
    .delivered-group > summary::-webkit-details-marker { display: none; }
    .delivered-group > summary::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; color: #6b7a8d; transition: transform .2s; flex-shrink: 0; }
    .delivered-group[open] > summary::after { transform: rotate(90deg); }
    .delivered-group[open] > summary { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
    .pending-group { margin-top: 0; }
    .dg-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
    .dg-info { flex: 1; min-width: 0; }
    .dg-label { font-size: 14px; font-weight: 700; color: #fff; }
    .dg-count { font-size: 12px; color: #6b7a8d; font-weight: 500; flex-shrink: 0; }
    .dg-body { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08); border-top: none; border-radius: 0 0 12px 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
    
    .order-all-clear { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.15); border-radius: 12px; font-size: 13px; font-weight: 600; color: #4ade80; margin-bottom: 6px; }
    
    .filter-chip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: #9aa3b0; font-size: 12px; font-family: inherit; padding: 5px 12px; cursor: pointer; font-weight: 600; transition: all .15s; white-space: nowrap; }
    .filter-chip:hover { background: rgba(255,255,255,.1); color: #e2e8f0; }
    .filter-chip.active { background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.35); color: #4ade80; }
    .profit-yesterday-summary::after { content: "\203A"; margin-left: 8px; transition: transform .2s, color .2s; font-size: 20px; line-height: 1; color: #6b7a8d; flex-shrink: 0; }
    .profit-yesterday[open] > summary::after { transform: rotate(90deg); color: #4ade80; }
    .profit-yesterday[open] > summary { background: rgba(74,222,128,.05); border-radius: 8px; padding: 4px 6px; margin: -4px -6px; }
    .order-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .order-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .order-item-code { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
    .order-item-code:active { opacity: .7; }
    .order-item-sub { font-size: 11px; color: #6b7a8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .order-item-date { font-size: 10px; color: #4b5563; }
    .order-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
    .order-chip { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
    .order-chip.processing { background: rgba(251,191,36,.15); color: #fbbf24; }
    .order-chip.delivered { background: rgba(74,222,128,.15); color: #4ade80; }
    .order-chip.failed { background: rgba(248,113,113,.15); color: #f87171; }
    .order-chip.cancelled { background: rgba(107,114,128,.15); color: #9ca3af; }
    .order-chip.fulfilling { background: rgba(251,146,60,.15); color: #fb923c; }

    
    .op-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; backdrop-filter:blur(2px); }
    .op-overlay.open { display:block; }
    .op-panel {
      position:fixed; top:0; right:0; bottom:0; width:min(400px,100vw);
      background:#141e2b; border-left:1px solid rgba(255,255,255,.08);
      z-index:1001; transform:translateX(110%);
      transition:transform .25s cubic-bezier(.4,0,.2,1);
      display:flex; flex-direction:column; overflow:hidden;
    }
    .op-panel.open { transform:translateX(0); }
    @media (max-width:600px) {
      .op-panel { top:auto; left:0; right:0; bottom:0; width:100%; height:90vh; border-left:none;
        border-top:1px solid rgba(255,255,255,.1); border-radius:16px 16px 0 0; transform:translateY(110%); }
      .op-panel.open { transform:translateY(0); }
    }
    .op-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
    .op-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
    .op-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .op-info-cell { background:rgba(255,255,255,.04); border-radius:9px; padding:10px 12px; }
    .op-info-label { font-size:10px; color:#6b7a8d; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
    .op-info-val { font-size:13px; font-weight:700; color:#e2e8f0; }
    .op-action-btn { width:100%; padding:11px; border-radius:9px; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; border:1px solid; transition:opacity .15s; }
    .op-action-btn:hover { opacity:.8; }

    
    .mo-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1100; backdrop-filter:blur(2px); }
    .mo-overlay.open { display:block; }
    .mo-panel {
      position:fixed; top:50%; left:50%; transform:translate(-50%,-48%) scale(.97);
      width:min(460px,94vw); max-height:88vh;
      background:#fff; border:1px solid #e2e8f0; border-radius:16px;
      z-index:1101; opacity:0; pointer-events:none;
      transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .18s ease;
      display:flex; flex-direction:column; overflow:hidden;
    }
    .mo-panel.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
    @media (max-width:600px) {
      .mo-panel { top:auto; left:0; right:0; bottom:0; width:100%; max-height:none; height:92vh;
        border:none; border-top:1px solid rgba(255,255,255,.1); border-radius:16px 16px 0 0;
        transform:translateY(110%); opacity:1; pointer-events:auto; }
      .mo-panel.open { transform:translateY(0); }
    }
    .mo-header { display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid #e2e8f0; flex-shrink:0; }
    .mo-header-left { display:flex; align-items:center; gap:10px; }
    .mo-network-logo { width:48px; height:48px; border-radius:50%; object-fit:cover; }
    .mo-title { font-size:15px; font-weight:800; color:#0f1115; }
    .mo-network-badge { font-size:11px; font-weight:600; color:#fbbf24; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.3); border-radius:999px; padding:2px 8px; margin-top:3px; display:inline-block; letter-spacing:.3px; }
    .mo-close-btn { background:none; border:none; color:#6b7a8d; padding:6px; cursor:pointer; display:flex; align-items:center; border-radius:7px; }
    .mo-close-btn:hover { background:#f1f5f9; color:#0f1115; }
    .mo-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
    .mo-list-empty { text-align:center; padding:28px 16px; color:#4b5a6a; font-size:13px; line-height:1.6; }
    .mo-item { display:flex; align-items:center; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px 12px; gap:10px; }
    .mo-item-info { flex:1; min-width:0; }
    .mo-item-top { font-size:13px; font-weight:700; color:#0f1115; }
    .mo-item-sub { font-size:11px; color:#6b7a8d; margin-top:2px; }
    .mo-item-price { font-size:13px; font-weight:700; color:#16a34a; flex-shrink:0; }
    .mo-item-remove { background:none; border:none; color:#4b5a6a; cursor:pointer; padding:4px 7px; border-radius:5px; font-size:16px; line-height:1; flex-shrink:0; }
    .mo-item-remove:hover { color:#f87171; background:rgba(248,113,113,.1); }
    .mo-add-section { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:14px; }
    .mo-add-label { font-size:11px; font-weight:700; color:#6b7a8d; text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
    .mo-add-row { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:stretch; }
    @media (max-width:400px) { .mo-add-row { grid-template-columns:1fr 1fr; } .mo-add-btn { grid-column:1/-1; } }
    .mo-size-select { background:#fff; border:1px solid #d1d5db; border-radius:8px; color:#0f1115; font-family:inherit; font-size:13px; font-weight:600; padding:8px 28px 8px 10px; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; }
    .mo-size-select option { background:#fff; color:#0f1115; }
    .mo-phone-input { background:#fff; border:1px solid #d1d5db; border-radius:8px; color:#0f1115; font-family:inherit; font-size:13px; padding:8px 10px; width:100%; }
    .mo-phone-input::placeholder { color:#4b5a6a; }
    .mo-phone-input:focus, .mo-size-select:focus { outline:none; border-color:rgba(96,165,250,.5); }
    .mo-add-btn { background:#3b82f6; border:none; border-radius:8px; color:#fff; font-size:13px; font-weight:700; font-family:inherit; padding:8px 14px; cursor:pointer; white-space:nowrap; }
    .mo-add-btn:hover { background:#2563eb; }
    .mo-add-err { font-size:12px; color:#f87171; margin-top:8px; }
    .mo-cap-note { font-size:11px; color:#6b7a8d; text-align:center; padding:6px 0 0; }
    .mo-footer { border-top:1px solid #e2e8f0; padding:14px 0 0; margin-top:auto; display:flex; flex-direction:column; gap:10px; }
    .mo-total-row { display:flex; flex-direction:column; align-items:center; gap:2px; }
    .mo-total-label { font-size:13px; color:#6b7a8d; font-weight:600; }
    .mo-total-val { font-size:24px; font-weight:900; color:#0f1115; }
    .mo-count-label { font-size:11px; color:#4b5a6a; text-align:center; }
    .mo-proceed-btn { width:100%; height:58px; border-radius:12px; border:none; background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; }
    .mo-proceed-btn:disabled { background:#d1d5db; color:#9ca3af; cursor:not-allowed; }
    .mo-proceed-btn:not(:disabled):hover { opacity:.9; }
    .mo-proceed-err { font-size:12px; color:#f87171; text-align:center; }

    
    .mo-success-overlay { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:grid; place-items:center; padding:16px; opacity:0; pointer-events:none; transition:opacity .2s; }
    .mo-success-overlay.open { opacity:1; pointer-events:auto; }
    .mo-success-box { background:#1a1c22; border-radius:20px; padding:28px 22px 24px; width:min(100%,380px); text-align:center; color:#fff; border:1px solid rgba(255,255,255,.08); max-height:90vh; overflow-y:auto; }
    .mo-success-check { font-size:42px; margin-bottom:10px; }
    .mo-success-title { margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
    .mo-success-sub { margin:0 0 18px; color:#9aa3b0; font-size:13px; line-height:1.4; }
    .mo-success-save-note { color:#9aa3b0; font-size:12px; margin:0 0 8px; }
    .mo-success-lines-wrap { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:10px 12px; margin:14px 0 0; text-align:left; }
    .mo-success-line { display:flex; align-items:center; justify-content:space-between; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.05); }
    .mo-success-line:last-child { border-bottom:none; }
    .mo-success-line-left { font-size:12px; color:#cbd5e1; font-weight:600; }
    .mo-success-line-status { font-size:11px; color:#fbbf24; font-weight:600; }

    
    .order-row { display:flex; align-items:center; gap:10px; padding:11px 12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:10px; cursor:pointer; transition:background .15s; }
    .order-row:hover, .order-row:active { background:rgba(255,255,255,.07); }
    .order-row-main { flex:1; min-width:0; }
    .order-row-top { font-size:12px; font-weight:700; color:#e2e8f0; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
    .order-row-sub { font-size:11px; color:#6b7a8d; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .order-row-time { font-size:11px; color:#4b5a6a; flex-shrink:0; text-align:right; line-height:1.4; }
    .order-quick-btns { display: flex; gap: 4px; }
    .order-quick-btn { font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #9aa3b0; cursor: pointer; }
    .order-quick-btn.delivered { border-color: rgba(74,222,128,.3); color: #4ade80; }
    .order-quick-btn.processing { border-color: rgba(251,191,36,.3); color: #fbbf24; }

    
    .announcement-banner { display: none; margin-bottom: 16px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(251,191,36,.3); border-left: 3px solid #fbbf24; background: linear-gradient(130deg, #1c1a0a 0%, #211e0b 50%, #2a2610 100%); box-shadow: 0 4px 20px rgba(180,130,9,.12); }
    .announcement-banner.visible { display: block; }
    .announcement-banner-inner { display: flex; align-items: center; gap: 13px; padding: 11px 14px; }
    .announcement-banner-text { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.5; }

    
    .night-notice-banner { display: none; margin-bottom: 16px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(139,92,246,.35); border-left: 3px solid #a78bfa; background: linear-gradient(130deg, #1e1b4b 0%, #1e1a3a 50%, #1a1730 100%); box-shadow: 0 4px 20px rgba(109,40,217,.12); }
    .night-notice-banner.visible { display: block; }
    .night-notice-banner-inner { display: flex; align-items: center; gap: 13px; padding: 11px 14px; }
    .night-notice-banner-text { margin: 0; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }

    
    .help-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#6b7a8d; font-size:10px; font-weight:900; cursor:pointer; flex-shrink:0; margin-left:4px; vertical-align:middle; user-select:none; line-height:1; transition:background .15s,color .15s; }
    .help-btn:hover { background:rgba(96,165,250,.2); border-color:rgba(96,165,250,.4); color:#60a5fa; }

    
    .hours-popup { display:none; position:fixed; bottom:0; left:0; right:0; z-index:1200; padding:0 0 env(safe-area-inset-bottom,0); animation:slideUp .3s ease; }
    .hours-popup.visible { display:block; }
    body.admin-mode .hours-popup { display:none !important; }
    @keyframes slideUp { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
    .hours-popup-inner { background:linear-gradient(160deg,#1a1a2e,#16213e); border:1px solid rgba(167,139,250,.3); border-bottom:none; border-radius:14px 14px 0 0; padding:12px 16px 14px; box-shadow:0 -6px 28px rgba(0,0,0,.45); max-width:480px; margin:0 auto; position:relative; }
    .hours-popup-dismiss { position:absolute; top:10px; right:14px; background:none; border:none; color:rgba(255,255,255,.35); font-size:18px; cursor:pointer; line-height:1; padding:2px 4px; }
    .hours-popup-dismiss:hover { color:rgba(255,255,255,.7); }
    .hours-popup-header { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
    .hours-popup-icon { font-size:20px; flex-shrink:0; }
    .hours-popup-title { margin:0; font-size:14px; font-weight:800; color:#fff; }
    .hours-popup-times { margin:0; font-size:11px; color:#a78bfa; font-weight:600; }
    .hours-popup-msg { margin:6px 0 10px; font-size:12px; color:rgba(255,255,255,.65); line-height:1.45; }
    .hours-popup-actions { display:flex; gap:8px; }
    .hours-popup-btn-primary { flex:1; padding:10px; background:linear-gradient(135deg,#7c3aed,#6d28d9); border:none; border-radius:10px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
    .hours-popup-btn-secondary { flex:1; padding:10px; background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:10px; color:rgba(255,255,255,.5); font-size:12px; cursor:pointer; font-family:inherit; }
    .hours-greyed { pointer-events:none; opacity:.35; user-select:none; }
    .store-panel.hours-closed .network-tabs,
    .store-panel.hours-closed #bundle-grid { pointer-events:none; opacity:.3; user-select:none; filter:grayscale(.4); }

    
    .store-closed-banner { display: none; margin-bottom: 16px; border-radius: 11px; overflow: hidden; border: 1px solid rgba(248,113,113,.35); border-left: 3px solid #f87171; background: linear-gradient(130deg, #3b0a0a 0%, #4c0f0f 50%, #5c1313 100%); box-shadow: 0 4px 20px rgba(220,38,38,.15); }
    .store-closed-banner.visible { display: block; }
    .store-closed-banner-inner { display: flex; align-items: center; gap: 13px; padding: 11px 14px; }
    .store-closed-banner-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
    .store-closed-banner-title { margin: 0; font-size: 14px; font-weight: 800; color: #fff; }
    .store-closed-banner-sub { margin: 2px 0 0; font-size: 11px; color: rgba(255,255,255,.65); }

    
    .bundle-unavailable { opacity: 0.6; cursor: default; pointer-events: none; }
    .bundle-unavail-label { display: block; position: relative; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 6px; }
    .bundle-price-hidden { cursor: default; pointer-events: none; }
    .bundle-ph-label { display: block; font-size: 13px; font-style: italic; color: white; margin-top: 6px; }

    
    .store-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); align-items: center; justify-content: center; }
    .store-modal-overlay.visible { display: flex; }
    .store-modal-box { background: #1a1c22; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 24px; max-width: 310px; width: 90%; text-align: center; }
    .store-modal-icon { font-size: 36px; margin-bottom: 10px; }
    .store-modal-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #fff; }
    .store-modal-sub { margin: 0 0 22px; font-size: 13px; color: #6b7a8d; line-height: 1.5; }
    .store-modal-btns { display: flex; gap: 10px; }
    
    .store-modal-cancel { flex: 1; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: #fff; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
    .store-modal-confirm { flex: 1; padding: 11px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.4); font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }

    
    #momo-claim-modal-overlay .store-modal-box { background: #fff; border-color: rgba(0,0,0,.1); }
    #momo-claim-modal-overlay .store-modal-title { color: #111319; }
    #momo-claim-modal-overlay .store-modal-sub { color: #444b57; }
    #momo-claim-modal-overlay .store-modal-cancel { background: #fff; border-color: rgba(0,0,0,.18); color: #111319; }

    
    #mtn-qc-overlay .store-modal-box { background: #fff; border-color: rgba(0,0,0,.08); }
    #mtn-qc-overlay .store-modal-title { color: #111319; }
    #mtn-qc-overlay .store-modal-sub { color: #5a6270; }
    .mtn-qc-step { margin-bottom: 10px; }
    .mtn-qc-step-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .mtn-qc-circle { width: 22px; height: 22px; border-radius: 50%; background: #9aa5b8; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; }
    .mtn-qc-circle.done { background: #16a34a; }
    .mtn-qc-step-label { font-size: 13px; font-weight: 800; color: #1f2430; }
    .mtn-qc-field-row { position: relative; }
    
    .mtn-qc-field-row .input-wrap input {
      width: 100%; height: 44px; border: 1.5px solid #b8c0cc; border-radius: 9px;
      padding: 0 38px 0 42px; outline: none; background: #fff; color: #111;
      font-size: 14px; font-family: inherit;
    }
    .mtn-qc-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #c7ccd4; transition: color .2s; display: flex; }
    .mtn-qc-check.done { color: #16a34a; }
    .mtn-qc-inline-check { display: inline-flex; color: #c7ccd4; transition: color .2s; }
    .mtn-qc-inline-check.done { color: #16a34a; }
    
    .mtn-qc-checkbox {
      -webkit-appearance: none; -moz-appearance: none; appearance: none;
      margin: 0; border-radius: 4px; border: 1.5px solid #b8c0cc; background: #fff;
      position: relative; outline: none;
    }
    .mtn-qc-checkbox:checked { background: #16a34a; border-color: #16a34a; }
    .mtn-qc-checkbox:checked::after {
      content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
      border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    }
    
    .shake { animation: mtnWarnShake .5s cubic-bezier(.36,.07,.19,.97); }

    
    #mtn-warn-overlay {
      --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
      --modal-bg: rgba(255, 255, 255, 0.92);
      --modal-border: rgba(255, 255, 255, 0.95);
      --modal-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.35), 0 16px 32px -16px rgba(0, 0, 0, 0.2);
      --text-primary: #1d1d1f;
      --text-secondary: #6e6e73;
      --badge-bg: rgba(255, 149, 0, 0.12);
      --badge-border: rgba(255, 149, 0, 0.2);
      --badge-icon: #ff9500;
      --notice-bg: rgba(120, 120, 128, 0.07);
      --notice-border: rgba(120, 120, 128, 0.12);
      --notice-accent-bar: #ff9500;
      --notice-icon: #ff9500;
      --notice-text: #1d1d1f;
      --checkbox-checked: #007aff;
      --checkbox-shadow: 0 4px 12px rgba(0, 122, 255, 0.35);
      --btn-primary: #007aff;
      --btn-primary-hover: #0062cc;
      --btn-disabled: rgba(0, 122, 255, 0.25);
      --btn-disabled-text: rgba(255, 255, 255, 0.65);
      --btn-cancel: #007aff;
      --btn-cancel-hover-bg: rgba(120, 120, 128, 0.08);
      --close-btn-bg: rgba(118, 118, 128, 0.14);
      --close-btn-hover: rgba(118, 118, 128, 0.22);
      --close-btn-icon: #6e6e73;

      position: fixed;
      inset: 0;
      z-index: 11000;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(40px) saturate(200%);
      -webkit-backdrop-filter: blur(40px) saturate(200%);
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
      font-family: var(--font-sf);
      -webkit-font-smoothing: antialiased;
    }

    @media (prefers-color-scheme: dark) {
      #mtn-warn-overlay {
        --modal-bg: rgba(28, 28, 30, 0.92);
        --modal-border: rgba(255, 255, 255, 0.12);
        --modal-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.75);
        --text-primary: #f5f5f7;
        --text-secondary: #a1a1a6;
        --badge-bg: rgba(255, 159, 10, 0.16);
        --badge-border: rgba(255, 159, 10, 0.28);
        --badge-icon: #ff9f0a;
        --notice-bg: rgba(255, 255, 255, 0.06);
        --notice-border: rgba(255, 255, 255, 0.08);
        --notice-accent-bar: #ff9f0a;
        --notice-icon: #ff9f0a;
        --notice-text: #f5f5f7;
        --btn-cancel: #0a84ff;
        --btn-cancel-hover-bg: rgba(120, 120, 128, 0.2);
        --close-btn-bg: rgba(118, 118, 128, 0.24);
        --close-btn-hover: rgba(118, 118, 128, 0.34);
        --close-btn-icon: #a1a1a6;
      }
    }

    #mtn-warn-overlay .apple-modal {
      position: relative;
      width: 100%;
      max-width: 390px;
      background: var(--modal-bg);
      backdrop-filter: blur(40px) saturate(200%);
      -webkit-backdrop-filter: blur(40px) saturate(200%);
      border: 1px solid var(--modal-border);
      border-radius: 32px;
      padding: 30px 24px 26px;
      box-shadow: var(--modal-shadow);
      text-align: center;
    }

    #mtn-warn-overlay .close-btn {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      background: var(--close-btn-bg);
      color: var(--close-btn-icon);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
    }

    #mtn-warn-overlay .close-btn:hover { background: var(--close-btn-hover); transform: scale(1.06); }
    #mtn-warn-overlay .close-btn:active { transform: scale(0.92); }

    #mtn-warn-overlay .close-btn svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      fill: none;
    }

    #mtn-warn-overlay .modal-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 18px;
    }

    #mtn-warn-overlay .header-badge {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: var(--badge-bg);
      border: 1px solid var(--badge-border);
      color: var(--badge-icon);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      box-shadow: 0 8px 20px rgba(255, 149, 0, 0.18);
    }

    #mtn-warn-overlay .header-badge svg {
      width: 30px;
      height: 30px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #mtn-warn-overlay .modal-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.4px;
      color: var(--text-primary);
    }

    #mtn-warn-overlay .notice-card {
      position: relative;
      background: var(--notice-bg);
      border: 1px solid var(--notice-border);
      border-radius: 18px;
      padding: 16px 16px 16px 20px;
      margin-bottom: 22px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      text-align: left;
      overflow: hidden;
    }

    #mtn-warn-overlay .notice-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      background: var(--notice-accent-bar);
      border-radius: 4px 0 0 4px;
    }

    #mtn-warn-overlay .notice-icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      color: var(--notice-icon);
      margin-top: 1px;
    }

    #mtn-warn-overlay .notice-icon svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
    }

    #mtn-warn-overlay .notice-text {
      font-size: 13.5px;
      line-height: 1.48;
      color: var(--notice-text);
      font-weight: 500;
    }

    #mtn-warn-overlay .checkbox-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      margin-bottom: 24px;
      text-align: left;
      user-select: none;
      padding: 4px 6px;
      border-radius: 12px;
      transition: background 0.2s;
    }

    #mtn-warn-overlay .checkbox-row:hover {
      background: rgba(120, 120, 128, 0.05);
    }

    #mtn-warn-overlay .checkbox-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    #mtn-warn-overlay .custom-checkbox-badge {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.8px solid #c7c7cc;
      background: rgba(255, 255, 255, 0.9);
      flex-shrink: 0;
      margin-top: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #mtn-warn-overlay .checkbox-input:checked + .custom-checkbox-badge {
      background: var(--checkbox-checked);
      border-color: var(--checkbox-checked);
      box-shadow: var(--checkbox-shadow);
      transform: scale(1.08);
    }

    #mtn-warn-overlay .custom-checkbox-badge svg {
      width: 13px;
      height: 13px;
      stroke: #ffffff;
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      stroke-dasharray: 22;
      stroke-dashoffset: 22;
      transition: stroke-dashoffset 0.25s ease-out;
    }

    #mtn-warn-overlay .checkbox-input:checked + .custom-checkbox-badge svg {
      stroke-dashoffset: 0;
    }

    #mtn-warn-overlay .checkbox-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.4;
      color: var(--text-primary);
      flex: 1;
    }

    #mtn-warn-overlay .actions-stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #mtn-warn-overlay .btn-understand {
      width: 100%;
      height: 50px;
      border: none;
      border-radius: 16px;
      background: var(--btn-primary);
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: -0.2px;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
      transition: background 0.2s, transform 0.15s, opacity 0.2s;
    }

    #mtn-warn-overlay .btn-understand:not(:disabled):hover {
      background: var(--btn-primary-hover);
    }

    #mtn-warn-overlay .btn-understand:not(:disabled):active { transform: scale(0.975); }

    #mtn-warn-overlay .btn-understand:disabled {
      background: var(--btn-disabled);
      color: var(--btn-disabled-text);
      box-shadow: none;
      cursor: not-allowed;
    }

    #mtn-warn-overlay .btn-cancel {
      width: 100%;
      height: 42px;
      border: none;
      border-radius: 14px;
      background: transparent;
      color: var(--btn-cancel);
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: -0.2px;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
    }

    #mtn-warn-overlay .btn-cancel:hover { background: var(--btn-cancel-hover-bg); }
    #mtn-warn-overlay .btn-cancel:active { transform: scale(0.975); }

    
    .mode-banner { display: none; margin-bottom: 16px; border-radius: 11px; overflow: hidden; position: relative; cursor: default; pointer-events: none; user-select: none; }
    .mode-banner.promo { display: block; background: linear-gradient(130deg, #064e3b 0%, #065f46 50%, #047857 100%); border: 1px solid rgba(74,222,128,.3); border-left: 3px solid #4ade80; box-shadow: 0 4px 20px rgba(4,120,87,.18); }
    .mode-banner.holiday { display: block; background: linear-gradient(130deg, #7c2d12 0%, #92400e 48%, #b45309 100%); border: 1px solid rgba(251,191,36,.3); border-left: 3px solid #fbbf24; box-shadow: 0 4px 20px rgba(180,83,9,.2); }
    .mode-banner-inner { display: flex; align-items: center; gap: 13px; padding: 11px 14px; position: relative; z-index: 1; }
    .mode-banner-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
    .mode-banner-title { margin: 0; font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
    .mode-banner-sub { margin: 2px 0 0; font-size: 11px; color: rgba(255,255,255,.68); }
    .mode-banner-badge { margin-left: auto; flex-shrink: 0; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.2); }
    
    .mode-banner-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .confetti-piece { position: absolute; top: -10px; opacity: 0; border-radius: 2px; animation: confetti-fall linear infinite; }
    @keyframes confetti-fall {
      0%   { transform: translateY(0) rotate(0deg) scaleX(1);   opacity: 1; }
      40%  { scaleX(-1); }
      85%  { opacity: .85; }
      100% { transform: translateY(90px) rotate(760deg) scaleX(-1); opacity: 0; }
    }
    
    .mode-banner.holiday .mode-banner-inner::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: repeating-linear-gradient(105deg, transparent 0px, rgba(255,255,255,.04) 1px, transparent 2px, transparent 22px);
    }
    
    .mode-banner.promo .mode-banner-title { animation: promo-pulse 2.4s ease-in-out infinite; }
    @keyframes promo-pulse { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 12px rgba(74,222,128,.55); } }

    
    .catalog-stage { position: relative; }
    .bundle-faded { opacity: 0.4; pointer-events: none; filter: grayscale(0.15); }
    .network-down-panel { display: none; }
    .network-down-panel.visible { display: flex; justify-content: center; margin-bottom: 16px; }
    .down-card {
      display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
      background: #fff; border: 1px solid #e4e8f0; border-radius: 16px; padding: 26px 24px;
      box-shadow: 0 14px 44px rgba(15,25,35,.18); max-width: 340px; width: 88%;
    }
    .down-icon { font-size: 34px; line-height: 1; }
    .down-title { font-size: 16px; font-weight: 700; color: #1a1c22; margin: 0; }
    .down-sub { font-size: 13px; color: #5a6474; max-width: 270px; margin: 0; line-height: 1.5; }
    .down-form { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 320px; margin-top: 4px; }
    .down-cc-select { height: 40px; border: 1.5px solid rgba(0,0,0,.18); border-radius: 9px; background: #fff; color: #0f1115; font-size: 13px; padding: 0 6px; font-family: inherit; outline: none; max-width: 100px; flex-shrink: 0; }
    .down-phone-input { flex: 1; height: 40px; border: 1.5px solid rgba(0,0,0,.18); border-radius: 9px; background: #fff; color: #0f1115; font-size: 14px; padding: 0 12px; font-family: inherit; outline: none; min-width: 120px; }
    .down-phone-input::placeholder { color: #9aa3b0; }
    .down-phone-input:focus { border-color: rgba(0,0,0,.4); }
    .down-submit-btn { height: 40px; padding: 0 18px; border: 2px solid #0f1115; border-radius: 999px; background: #0f1115; color: #fff; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; }
    .down-msg { font-size: 12px; min-height: 18px; }
    @media (max-width: 640px) {
      .down-icon, .down-title { display: none; }
      .down-card { padding: 16px 18px 14px; gap: 6px; }
    }
    
    .ins-delta { font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; margin-left:6px; }
    .ins-delta.up { background:rgba(74,222,128,.12); color:#4ade80; }
    .ins-delta.down { background:rgba(248,113,113,.12); color:#f87171; }
    .ins-delta.flat { background:rgba(255,255,255,.06); color:#6b7a8d; }
    
    .kv-bar-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .kv-bar-label { font-size:11px; color:#9aa3b0; width:42px; flex-shrink:0; }
    .kv-bar-track { flex:1; height:8px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden; }
    .kv-bar-fill { height:100%; border-radius:99px; transition:width .4s; }
    .kv-bar-fill.green { background:#4ade80; }
    .kv-bar-fill.yellow { background:#fbbf24; }
    .kv-bar-fill.red { background:#f87171; }
    .kv-bar-pct { font-size:11px; color:#9aa3b0; width:42px; text-align:right; flex-shrink:0; }


body.tools-mode main.store-main,
body.tools-mode .contact-wrap,
body.tools-mode main.history-main,
body.tools-mode main.admin-main { display: none !important; }
body:not(.tools-mode) main.tools-main { display: none !important; }
body.tools-mode .hero::after { opacity: 0; }
body.tools-mode .hero { background: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#4338ca 100%); }
body.tools-mode .visit-shop-btn { display: inline-flex !important; }
body.admin-mode .digitools-btn,
body.history-mode .digitools-btn { display: none; }

.digitools-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 32px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.digitools-btn:hover { background: rgba(255,255,255,0.28); }
body.tools-mode .digitools-btn { background: rgba(255,255,255,0.28); }

.tools-main { padding: 28px 0 80px; min-height: 60vh; background: #0e0c1e; }
.tools-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.65);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s;
}
.tools-back-btn:hover { color: #fff; }
.tools-page-head { text-align: center; margin-bottom: 28px; }
.tools-page-head h2 { font-size: 28px; font-weight: 900; color: #fff; margin: 0 0 6px; letter-spacing: -0.5px; }
.tools-page-head p { color: rgba(255,255,255,0.65); font-size: 14px; margin: 0; }

.tools-section-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 10px;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.tool-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 12px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  border: 2px solid transparent;
  text-align: center;
  user-select: none;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.tool-card.active { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.18); }
.tool-card-icon { font-size: 30px; margin-bottom: 8px; line-height: 1; }
.tool-card-name { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 3px; }
.tool-card-desc { font-size: 11px; color: #64748b; line-height: 1.4; }
.tool-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  margin-top: 7px;
  background: #ede9fe;
  color: #6d28d9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tool-badge.ext { background: #fef3c7; color: #92400e; }


.tool-panel-wrap {
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  margin-top: 10px;
  animation: tpIn 0.2s ease;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
@keyframes tpIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.tp-title {
  font-size: 15px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tp-close {
  margin-left: auto;
  background: #f1f5f9;
  border: none;
  border-radius: 8px;
  width: 28px; height: 28px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
}
.tp-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}
.tp-input:focus { border-color: #6366f1; }
.tp-btn {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tp-btn:hover { background: #4f46e5; }
.tp-btn.sec { background: #f1f5f9; color: #374151; }
.tp-btn.sec:hover { background: #e2e8f0; }
.tp-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.tp-stat { background: #f8fafc; border-radius: 10px; padding: 12px 8px; text-align: center; }
.tp-stat-val { font-size: 22px; font-weight: 800; color: #6366f1; }
.tp-stat-lbl { font-size: 10px; color: #64748b; margin-top: 2px; }
@media (max-width: 480px) {
  .tools-grid { grid-template-columns: repeat(3,1fr); }
  .tp-stat-grid { grid-template-columns: repeat(2,1fr); }
}

.sna-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; }
.sna-status--off { background: rgba(255,255,255,.05); color: #6b7a8d; border: 1px solid rgba(255,255,255,.08); }
.sna-status--monitor { background: rgba(74,222,128,.08); color: #4ade80; border: 1px solid rgba(74,222,128,.22); }
.sna-status--active { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
.sna-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sna-dot--off { background: #4a5568; }
.sna-dot--monitor { background: #4ade80; animation: sna-pulse 2s ease-in-out infinite; }
.sna-dot--active { background: #fbbf24; animation: sna-pulse 1.4s ease-in-out infinite; }
@keyframes sna-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.sna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.sna-field label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7a8d; display: block; margin-bottom: 6px; }
.sna-input-row { display: flex; align-items: center; gap: 7px; }
.sna-input-row input[type=number] { width: 58px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e2e8f0; font-family: inherit; font-size: 15px; font-weight: 700; padding: 7px 9px; outline: none; -moz-appearance: textfield; }
.sna-input-row input[type=number]::-webkit-inner-spin-button,
.sna-input-row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sna-input-row span { font-size: 12px; color: #6b7a8d; }

.rdx-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 18px; }
.rdx-title { font-size:19px; font-weight:800; margin:0; display:flex; align-items:center; gap:8px; }
.rdx-close { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#e7e9ee; width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer; flex-shrink:0; }
.rdx-step-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7c8393; margin-bottom:6px; }
.rdx-drop { border:2px dashed rgba(255,255,255,.18); border-radius:18px; padding:48px 20px; text-align:center; cursor:pointer; transition:border-color .15s,background .15s; }
.rdx-drop:hover, .rdx-drop.rdx-drag { border-color:#6366f1; background:rgba(99,102,241,.06); }
.rdx-drop-icon { font-size:38px; margin-bottom:10px; }
.rdx-drop-title { font-size:16px; font-weight:700; margin-bottom:4px; }
.rdx-drop-sub { font-size:12.5px; color:#8a92a3; }
.rdx-privacy-note { display:flex; gap:10px; align-items:flex-start; background:rgba(74,222,128,.06); border:1px solid rgba(74,222,128,.18); border-radius:12px; padding:12px 14px; margin-top:16px; font-size:12.5px; color:#b8f5c8; line-height:1.5; }
.rdx-progress-wrap { text-align:center; padding:60px 20px; }
.rdx-spinner { width:44px; height:44px; border-radius:50%; border:3px solid rgba(255,255,255,.15); border-top-color:#6366f1; margin:0 auto 18px; animation:rdx-spin 0.85s linear infinite; }
@keyframes rdx-spin { to { transform:rotate(360deg); } }
.rdx-progress-text { font-size:14px; color:#c3c8d4; }
.rdx-editor { display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
@media (max-width:760px) { .rdx-editor { grid-template-columns:1fr; } }
.rdx-doc-label { font-size:13px; font-weight:700; color:#e7e9ee; margin-bottom:8px; }
.rdx-doc-label-hint { font-size:11.5px; font-weight:500; color:#7c8393; }
.rdx-canvas-wrap { background:#3a3d46; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px; overflow:auto; position:relative; box-shadow:0 12px 32px rgba(0,0,0,.45); }
.rdx-canvas-wrap canvas { max-width:100%; display:block; margin:0 auto; touch-action:none; cursor:crosshair; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35); }
.rdx-sidebar { display:flex; flex-direction:column; gap:16px; }
.rdx-panel { background:#15171e; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; }
.rdx-panel-title { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8a92a3; margin-bottom:10px; }
.rdx-cat-row { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13.5px; }
.rdx-cat-row input[type=checkbox] { width:16px; height:16px; accent-color:#6366f1; flex-shrink:0; }
.rdx-cat-swatch { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.rdx-cat-count { margin-left:auto; font-size:11px; color:#6b7280; background:rgba(255,255,255,.06); padding:1px 7px; border-radius:10px; }
.rdx-input { width:100%; box-sizing:border-box; background:#0f1115; border:1.5px solid rgba(255,255,255,.14); border-radius:9px; color:#fff; font-size:13.5px; padding:9px 11px; font-family:inherit; outline:none; }
.rdx-word-chip { display:inline-flex; align-items:center; gap:6px; background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.35); color:#c7cdff; border-radius:20px; padding:4px 10px 4px 12px; font-size:12px; margin:4px 6px 0 0; }
.rdx-word-chip button { background:none; border:none; color:#c7cdff; cursor:pointer; font-size:13px; padding:0; line-height:1; }
.rdx-match-list { max-height:120px; overflow-y:auto; margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.rdx-match-item { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:5px 8px; background:rgba(255,255,255,.04); border-radius:8px; cursor:pointer; }
.rdx-match-item input { accent-color:#6366f1; }
.rdx-style-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rdx-style-btn { border:1.5px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:#e7e9ee; border-radius:10px; padding:10px 8px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:center; }
.rdx-style-btn.on { border-color:#6366f1; background:rgba(99,102,241,.15); color:#c7cdff; }
.rdx-btn { width:100%; border:none; border-radius:11px; padding:13px; font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.rdx-btn-primary { background:#6366f1; color:#fff; }
.rdx-btn-primary:disabled { opacity:.45; cursor:not-allowed; }
.rdx-btn-ghost { background:rgba(255,255,255,.06); color:#e7e9ee; border:1px solid rgba(255,255,255,.14); }
.rdx-manual-toggle.on { background:#22c55e; color:#06210f; }
.rdx-hint { font-size:11.5px; color:#7c8393; line-height:1.5; margin-top:8px; }
  

/* Ensure all child checkout modals/popups layer above the main buy data modal */
.modal,
.store-modal-overlay,
#order-modal,
#order-success-overlay,
#mtn-warn-overlay,
#mo-panel,
#mo-overlay,
#mo-success,
#phone-mismatch-modal,
#hours-popup,
#feedback-overlay,
#order-wait-modal,
#order-reprocess-modal,
#order-report-modal,
#momo-claim-modal-overlay,
#mtn-notify-modal-overlay,
#mtn-qc-overlay,
#mtn-ineligible-notify-overlay,
#mtn-blocked-overlay {
  z-index: 10050 !important;
}


.store-panel-head {
  padding-right: 48px !important;
}

.buy-data-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1a1c22;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.buy-data-modal-close:hover {
  background: rgba(0, 0, 0, 0.14);
  transform: scale(1.06);
}

#mtn-eta-card,
#mtn-eta-card * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif !important;
}