/* ==========================================================================
   BTZ – Bablu Trusted Zone | Cyber Tactical Gold Design System v2.0
   Bootstrap 5.3 + Vanilla JS | CodeIgniter Ready
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark Mode (default) ── */
:root,
html.dark {
  /* Surfaces */
  --btz-bg:               #0f131b;
  --btz-surface:          #0f131b;
  --btz-surface-dim:      #0f131b;
  --btz-surface-bright:   #353942;
  --btz-surface-lowest:   #0a0e16;
  --btz-surface-low:      #181c24;
  --btz-surface-container:#1c2028;
  --btz-surface-high:     #262a33;
  --btz-surface-highest:  #31353e;

  /* On-surface text */
  --btz-on-surface:         #dfe2ee;
  --btz-on-surface-variant: #c4b89e;
  --btz-on-surface-muted:   #8a8fa8;
  --btz-outline:            #9c8f7b;
  --btz-outline-variant:    #504535;

  /* Header zones */
  --btz-header-bg:     rgba(10,14,22,.97);
  --btz-announce-bg:   #07090D;
  --btz-ribbon-bg:     #0a0e16;
  --btz-card-border:   rgba(255,255,255,.07);
  --btz-nav-hover-bg:  rgba(28,32,40,.65);

  /* Primary Gold */
  --btz-primary:              #ffda9c;
  --btz-primary-container:    #f5b942;
  --btz-on-primary-container: #5c3d00;
  --btz-primary-fixed:        #ffdea8;
  --btz-primary-fixed-dim:    #f9bc45;

  /* Secondary Cyan */
  --btz-secondary:              #bdf4ff;
  --btz-secondary-container:    #00e3fd;
  --btz-on-secondary-container: #00616d;
  --btz-secondary-fixed-dim:    #00daf3;

  /* Tertiary Emerald */
  --btz-tertiary:              #63f8c2;
  --btz-tertiary-container:    #3fdba8;
  --btz-on-tertiary-container: #005c43;
  --btz-whatsapp:              #25d366;

  /* Danger / Error */
  --btz-error:           #ffb4ab;
  --btz-error-container: #93000a;

  /* Shadow tones */
  --btz-shadow-sm: 0 2px 8px rgba(0,0,0,.5);
  --btz-shadow-md: 0 4px 20px rgba(0,0,0,.6);
  --btz-shadow-lg: 0 10px 40px rgba(0,0,0,.75);

  /* Fonts */
  --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* ── Light Mode ── */
html.light {
  /* Surfaces */
  --btz-bg:               #f0ede7;
  --btz-surface:          #f0ede7;
  --btz-surface-dim:      #e8e4dc;
  --btz-surface-bright:   #ffffff;
  --btz-surface-lowest:   #e4e0d8;
  --btz-surface-low:      #ebe7e0;
  --btz-surface-container:#f5f2ec;
  --btz-surface-high:     #ffffff;
  --btz-surface-highest:  #ffffff;

  /* On-surface text */
  --btz-on-surface:         #1a1410;
  --btz-on-surface-variant: #4a3a28;
  --btz-on-surface-muted:   #7a6a58;
  --btz-outline:            #9c8870;
  --btz-outline-variant:    #d4c4af;

  /* Header zones */
  --btz-header-bg:    rgba(240,237,231,.97);
  --btz-announce-bg:  #dedad2;
  --btz-ribbon-bg:    #e4e0d8;
  --btz-card-border:  rgba(0,0,0,.09);
  --btz-nav-hover-bg: rgba(200,195,185,.55);

  /* Primary Gold — darkened for readability on light bg */
  --btz-primary:              #9a6c00;
  --btz-primary-container:    #c4880a;
  --btz-on-primary-container: #fff8e8;
  --btz-primary-fixed:        #b87b10;
  --btz-primary-fixed-dim:    #a06e00;

  /* Secondary Cyan */
  --btz-secondary:              #005f6e;
  --btz-secondary-container:    #007a8a;
  --btz-on-secondary-container: #e0faff;
  --btz-secondary-fixed-dim:    #006978;

  /* Tertiary Emerald */
  --btz-tertiary:              #006840;
  --btz-tertiary-container:    #008a56;
  --btz-on-tertiary-container: #e0fff4;
  --btz-whatsapp:              #25d366;

  /* Danger / Error */
  --btz-error:           #ba1a1a;
  --btz-error-container: #ffdad6;

  /* Shadow tones */
  --btz-shadow-sm: 0 2px 8px rgba(0,0,0,.12);
  --btz-shadow-md: 0 4px 20px rgba(0,0,0,.15);
  --btz-shadow-lg: 0 10px 40px rgba(0,0,0,.18);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. THEME TRANSITION
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition:
    background-color .25s ease,
    border-color     .25s ease,
    color            .18s ease,
    box-shadow       .25s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BASE RESET & TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  background-color: var(--btz-bg);
  color:            var(--btz-on-surface);
  font-family:      var(--font-body);
  font-size:        14px;
  line-height:      1.6;
  margin:  0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
  font-family: var(--font-heading);
  color:        var(--btz-on-surface);
  line-height:  1.25;
}

/* Override Bootstrap's text-light to be theme-aware */
.text-light {
  color: var(--btz-on-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. TYPE SCALE UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.text-2xs  { font-size: 9px  !important; }
.text-xs   { font-size: 11px !important; }
.text-sm   { font-size: 13px !important; }
.text-base { font-size: 14px !important; }
.text-md   { font-size: 16px !important; }

.leading-tight   { line-height: 1.2 !important; }
.leading-snug    { line-height: 1.35 !important; }
.leading-normal  { line-height: 1.5 !important; }
.leading-relaxed { line-height: 1.7 !important; }
.tracking-tight  { letter-spacing: -.02em !important; }
.tracking-wide   { letter-spacing:  .06em !important; }
.tracking-wider  { letter-spacing:  .1em  !important; }

.fw-extrabold { font-weight: 800 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. COLOUR UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
/* Backgrounds */
.bg-btz-surface   { background-color: var(--btz-surface)           !important; }
.bg-btz-lowest    { background-color: var(--btz-surface-lowest)    !important; }
.bg-btz-low       { background-color: var(--btz-surface-low)       !important; }
.bg-btz-container { background-color: var(--btz-surface-container) !important; }
.bg-btz-high      { background-color: var(--btz-surface-high)      !important; }
.bg-btz-highest   { background-color: var(--btz-surface-highest)   !important; }
.bg-btz-bright    { background-color: var(--btz-surface-bright)    !important; }

/* Text colours */
.text-btz-primary       { color: var(--btz-primary-container)    !important; }
.text-btz-primary-fixed { color: var(--btz-primary-fixed)        !important; }
.text-btz-secondary     { color: black                            !important; }
.text-btz-tertiary      { color: var(--btz-tertiary)             !important; }
.text-btz-muted         { color: var(--btz-on-surface-muted)     !important; }
.text-btz-whatsapp      { color: var(--btz-whatsapp)             !important; }
.text-btz-outline       { color: var(--btz-outline)              !important; }
.text-btz-outline40     { color: rgba(156,143,123,.4)            !important; }

/* Hover colour helpers */
.hover-primary:hover    { color: var(--btz-primary-container) !important; }
.hover-light:hover      { color: var(--btz-on-surface)        !important; }
.hover-bright:hover     { background-color: var(--btz-surface-bright) !important; }
.btz-hover-primary:hover{ color: var(--btz-primary-container) !important; }
.btz-hover-light:hover  { color: var(--btz-on-surface) !important; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. BRAND / ACCENT BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */
.bg-btz-gold-btn {
  background-color: var(--btz-primary-container) !important;
  color:            var(--btz-on-primary-container) !important;
  font-weight:      800;
  box-shadow:       0 0 22px rgba(245,185,66,.28);
  transition:       background-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.bg-btz-gold-btn:hover {
  background-color: var(--btz-primary-fixed) !important;
  box-shadow:       0 0 30px rgba(245,185,66,.44);
  transform:        translateY(-1px);
}

.bg-btz-whatsapp              { background-color: var(--btz-whatsapp) !important; color: #fff !important; }
.bg-btz-whatsapp:hover        { background-color: #1dbb5a !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. GLASSMORPHISM & SHADOWS
   ═══════════════════════════════════════════════════════════════════════════ */
.glass-header {
  background-color:   var(--btz-header-bg);
  backdrop-filter:    blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom:      1px solid var(--btz-card-border);
  box-shadow:         0 4px 30px rgba(0,0,0,.3);
}

.glass-card {
  background-color:   var(--btz-surface-high);
  backdrop-filter:    blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:             1px solid var(--btz-card-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. GLOW EFFECTS
   ═══════════════════════════════════════════════════════════════════════════ */
.glow-gold     { box-shadow: 0 0 25px rgba(245,185,66,.22); }
.glow-cyan     { box-shadow: 0 0 25px rgba(0,227,253,.22);  }
.glow-emerald  { box-shadow: 0 0 25px rgba(99,248,194,.22); }
.glow-whatsapp { box-shadow: 0 0 22px rgba(37,211,102,.38); }

/* ═══════════════════════════════════════════════════════════════════════════
   9. TACTICAL LABEL (FONT-TACTICAL)
   ═══════════════════════════════════════════════════════════════════════════ */
.font-tactical {
  font-family:    var(--font-heading);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* 10px variant for very tight labels */
.font-tactical-xs {
  font-family:    var(--font-heading);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. BORDER UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */
.border-btz-gold   { border-color: rgba(245,185,66,.3)   !important; }
.border-btz-subtle { border-color: var(--btz-card-border) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. SIZE HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */
.max-w-1440 { max-width: 1440px !important; }
.w-36-px  { width:  36px !important; }
.h-36-px  { height: 36px !important; }
.w-40-px  { width:  40px !important; }
.h-40-px  { height: 40px !important; }
.w-48-px  { width:  48px !important; }
.h-48-px  { height: 48px !important; }
.w-32-px  { width:  32px !important; }
.h-32-px  { height: 32px !important; }
.w-160-px { width:  160px !important; }
.h-160-px { height: 160px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   12. CUSTOM SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--btz-surface-lowest); }
::-webkit-scrollbar-thumb { background: var(--btz-surface-highest); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--btz-primary-container); }

/* ═══════════════════════════════════════════════════════════════════════════
   13. CARD HOVER
   ═══════════════════════════════════════════════════════════════════════════ */
.btz-card-hover {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.btz-card-hover:hover {
  transform:    translateY(-4px);
  border-color: rgba(245,185,66,.42) !important;
  box-shadow:   0 12px 36px -8px rgba(0,0,0,.7), 0 0 22px -2px rgba(245,185,66,.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

@keyframes btz-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.btz-ping-ring {
  animation: btz-ping 1.2s cubic-bezier(0,0,.2,1) infinite;
  inset: 0;
}
.btz-pulse-dot { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

/* ═══════════════════════════════════════════════════════════════════════════
   15. HEADER ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Row 1: Announce bar ── */
.btz-announce-bar {
  font-family: var(--font-heading);
  font-size:   11px;
  color:       var(--btz-on-surface-muted);
}
.btz-announce-bar .btz-ticker-text { color: var(--btz-on-surface); }

/* ── Row 2: Nav Bar ── */
.btz-nav-link {
  font-family:    var(--font-heading);
  font-size:      12px;
  font-weight:    600;
  color:          var(--btz-on-surface-muted);
  padding:        8px 14px;
  border-radius:  8px;
  text-decoration: none;
  transition:     color .15s ease, background-color .15s ease;
  white-space:    nowrap;
}
.btz-nav-link:hover {
  color:            var(--btz-on-surface) !important;
  background-color: var(--btz-nav-hover-bg) !important;
}
.btz-nav-link.btz-nav-active {
  color:       var(--btz-primary-container) !important;
  font-weight: 700;
}

/* Active underline bar */
.btz-nav-underline {
  left: 14px; right: 14px;
  height:     2px;
  background: var(--btz-primary-container);
  box-shadow: 0 0 8px rgba(245,185,66,.7);
}

/* ── Row 3: Ribbon ── */
.btz-ribbon-scroll {
  -ms-overflow-style: none;
  scrollbar-width:    none;
}
.btz-ribbon-scroll::-webkit-scrollbar { display: none; }

/* Chips */
.btz-chip {
  font-family:   var(--font-heading);
  font-size:     12px;
  font-weight:   600;
  color:         var(--btz-on-surface-muted);
  white-space:   nowrap;
  cursor:        pointer;
  border-radius: 999px;
  padding:       4px 14px;
  transition:    color .15s ease, background-color .15s ease, border-color .15s ease;
  text-decoration: none;
}
.btz-chip:hover,
.btz-chip.btz-chip-active {
  color: var(--btz-on-surface) !important;
  background-color: var(--btz-surface-container) !important;
}

/* Brand */
.btz-brand-link { text-decoration: none; }
.btz-brand-name {
  font-family:    var(--font-heading);
  font-size:      22px;
  font-weight:    800;
  letter-spacing: -.02em;
  color:          var(--btz-primary-container);
  transition:     color .15s ease;
}
.btz-brand-link:hover .btz-brand-name { color: var(--btz-primary-fixed) !important; }
.btz-brand-sub {
  font-family:    var(--font-heading);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--btz-on-surface-muted);
}

/* ── WhatsApp CTA Button ── */
.btz-btn-whatsapp {
  font-family:    var(--font-heading);
  font-size:      10px;
  font-weight:    800;
  letter-spacing: .06em;
  text-transform: uppercase;
  width:          auto;
  padding:        6px 12px;
  border-radius:  8px;
  background:     linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color:          #ffffff !important;
  border:         1px solid rgba(255, 255, 255, 0.25);
  box-shadow:     0 4px 14px rgba(37, 211, 102, 0.35);
  text-decoration: none;
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  gap:            5px;
  white-space:    nowrap;
  transition:     all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btz-btn-whatsapp .material-symbols-outlined {
  font-size:     14px;
}
.btz-btn-whatsapp:hover  {
  background:     linear-gradient(135deg, #28e16f 0%, #159e8e 100%);
  box-shadow:     0 6px 20px rgba(37, 211, 102, 0.5);
  transform:      translateY(-1px);
  color:          #ffffff !important;
}
.btz-btn-whatsapp:active { transform: scale(.95); }

/* ── Theme Toggle Button ── */
.btz-theme-toggle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   10px;
  border:          1px solid var(--btz-card-border);
  background:      var(--btz-surface-high);
  color:           var(--btz-on-surface-muted);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background .25s ease, border-color .25s ease, box-shadow .2s ease, transform .12s ease;
}
.btz-theme-toggle:hover {
  background:    var(--btz-surface-bright);
  border-color:  rgba(245,185,66,.4);
  box-shadow:    0 0 12px rgba(245,185,66,.22);
  color:         var(--btz-primary-container);
}
.btz-theme-toggle:active { transform: scale(.92); }

/* Sun/moon icon swap */
.btz-theme-toggle .icon-sun  { display: none;  }
.btz-theme-toggle .icon-moon { display: block; }
html.light .btz-theme-toggle .icon-sun  { display: block; }
html.light .btz-theme-toggle .icon-moon { display: none;  }

/* ═══════════════════════════════════════════════════════════════════════════
   16. HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.btz-hero-eyebrow {
  font-family:   var(--font-heading);
  font-size:     11px;
  font-weight:   700;
  letter-spacing:.08em;
  text-transform: uppercase;
  color:         var(--btz-primary-container);
}
.btz-stat-card {
  background:    var(--btz-surface-high);
  border-radius: 12px;
  border:        1px solid var(--btz-card-border);
  padding:       14px 16px;
}
.btz-stat-card h4 {
  font-size:   20px;
  font-weight: 800;
  color:       var(--btz-primary-container);
  margin:      0;
}
.btz-stat-label {
  font-size:  11px;
  color:      var(--btz-on-surface-muted);
  margin-top: 2px;
  display:    block;
}
.btz-stat-sub {
  font-family:   var(--font-heading);
  font-size:     9px;
  font-weight:   700;
  letter-spacing:.06em;
  margin-top:    4px;
  display:       flex;
  align-items:   center;
  gap:           4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. SECTION LAYOUT HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */
.btz-section-eyebrow {
  font-family:    var(--font-heading);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--btz-primary-container);
  display:        block;
  margin-bottom:  4px;
}
.btz-section-title {
  font-family: var(--font-heading);
  font-size:   28px;
  font-weight: 700;
  color:       var(--btz-on-surface);
  margin:      0 0 4px;
}
.btz-section-sub {
  font-size: 14px;
  color:     var(--btz-on-surface-muted);
  margin:    0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. FILTER CHIP SCROLL
   ═══════════════════════════════════════════════════════════════════════════ */
.filter-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   19. ACCOUNT CARD INTERNALS
   ═══════════════════════════════════════════════════════════════════════════ */
.btz-card-img-wrap {
  position:  relative;
  overflow:  hidden;
  height:    220px;
  background: var(--btz-surface-lowest);
}
.btz-card-spec-row {
  background:    var(--btz-surface-low);
  border:        1px solid var(--btz-card-border);
  border-radius: 10px;
  padding:       10px 12px;
}
.btz-spec-label {
  font-family:    var(--font-heading);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--btz-on-surface-muted);
  display:        block;
}
.btz-spec-value {
  font-size:   13px;
  font-weight: 600;
  color:       var(--btz-on-surface);
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
footer {
  background: var(--btz-surface-lowest);
  border-top: 1px solid var(--btz-card-border);
  color:      var(--btz-on-surface-muted);
}
.btz-footer-heading {
  font-family:    var(--font-heading);
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--btz-on-surface);
  margin-bottom:  12px;
  display:        block;
}
.btz-footer-link {
  font-size:       13px;
  color:           var(--btz-on-surface-muted);
  text-decoration: none;
  transition:      color .15s ease;
}
.btz-footer-link:hover { color: var(--btz-primary-container); }

/* ═══════════════════════════════════════════════════════════════════════════
   21. MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-content {
  background-color: var(--btz-surface-container);
  border:           1px solid rgba(245,185,66,.35);
  color:            var(--btz-on-surface);
}
.modal-header,
.modal-footer {
  border-color: var(--btz-card-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */
.bg-btz-input {
  background-color: #141822 !important;
  color: #ffffff !important;
}

.form-control, .form-select {
  background-color: #141822 !important;
  color:            #ffffff !important;
  border:           1px solid rgba(245,185,66,.25) !important;
  box-shadow:       inset 0 2px 4px rgba(0,0,0,0.4);
  font-size:        13px;
  padding:          10px 14px;
  border-radius:    8px;
}
.form-control::placeholder { color: #8a8fa8; opacity: .8; }
.form-control:focus, .form-select:focus {
  background-color: #1a202c !important;
  color:            #ffffff !important;
  box-shadow:       0 0 12px rgba(245,185,66,.35) !important;
  border-color:     var(--btz-primary-container) !important;
  outline:          none;
}
.form-select option {
  background-color: #141822 !important;
  color:            #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. MISC LIGHT-MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
html.light .btz-chip:hover { color: var(--btz-on-surface) !important; }

/* Fix Bootstrap .btn-outline-light in light mode */
html.light .btn-outline-light {
  color:        var(--btz-on-surface) !important;
  border-color: var(--btz-card-border) !important;
}
html.light .btn-outline-light:hover {
  background-color: var(--btz-surface-highest) !important;
  color:            var(--btz-on-surface)       !important;
}

/* Fix btn-secondary in modal for light mode */
html.light .btn-secondary {
  background-color: var(--btz-surface-highest) !important;
  color:            var(--btz-on-surface)       !important;
  border-color:     var(--btz-card-border)      !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. MOBILE & PWA ULTIMATE OPTIMIZATIONS (95-98% Mobile Focus)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  main {
    padding-top: 140px !important;
  }
}

@media (max-width: 575.98px) {
  main {
    padding-top: 130px !important;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  }
  
  .display-6 {
    font-size: 1.55rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: -0.03em !important;
  }
  
  .btz-stat-card {
    padding: 10px 12px !important;
  }
  
  .btz-stat-card h4 {
    font-size: 15px !important;
  }

  .btz-card-img-wrap {
    height: 195px !important;
  }
  
  /* Touch-optimized tap targets */
  .btn, .btz-chip, .btz-nav-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* PWA Standalone Mode adjustments (Safe Areas for notch & bottom bar) */
@media (display-mode: standalone) {
  body {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .fixed-top {
    top: env(safe-area-inset-top, 0px);
  }
}