/* =====================================================================
   PIWZ DIGITAL — Klikqris-inspired Design System v3
   Brand: Trustworthy, modern, blue palette, soft rounded, generous space.
===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root {
  --pz-bg:           #ffffff;
  --pz-surface:      #f8fafc;
  --pz-muted:        #f1f5f9;
  --pz-border:       #e2e8f0;
  --pz-border-2:     #cbd5e1;
  --pz-fg:           #1e293b;
  --pz-fg-muted:     #64748b;
  --pz-dark-bg:      #0f172a;

  --pz-primary:      #3b82f6;
  --pz-primary-dark: #2563eb;
  --pz-primary-50:   #eff6ff;
  --pz-accent:       #8b5cf6;
  --pz-success:      #16a34a;
  --pz-warning:      #ea580c;
  --pz-info:         #06b6d4;
  --pz-danger:       #e11d48;

  --pz-radius-sm: 4px;
  --pz-radius-md: 8px;
  --pz-radius-lg: 12px;
  --pz-radius-xl: 24px;
  --pz-radius-pill: 9999px;

  --pz-sh-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pz-sh-md:  0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --pz-sh-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --pz-sh-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
  --pz-sh-cta: 0 10px 25px -5px hsl(217 91% 60% / 0.45);
  --pz-sh-card:       0 8px 24px hsl(222 47% 11% / 0.08);
  --pz-sh-card-hover: 0 12px 30px hsl(222 47% 11% / 0.12);

  --pz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--pz-bg);
  color: var(--pz-fg);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { padding-bottom: 0; }

/* Admin body - no bottom padding needed */
.admin-body { padding-bottom: 0 !important; }

h1,h2,h3,h4,h5,h6,.font-display{
  font-family: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  color: var(--pz-fg);
  letter-spacing: -0.6px;
}
h1,.h1{ font-size: clamp(2.25rem, 4vw, 3.5rem); line-height:1.1;  letter-spacing:-1.2px; }
h2,.h2{ font-size: clamp(1.75rem, 3vw, 3rem);   line-height:1.15; letter-spacing:-.9px; }
h3,.h3{ font-size: 1.875rem; line-height:1.25; font-weight:700; letter-spacing:-.6px; }
h4,.h4{ font-size: 1.35rem;  line-height:1.35; font-weight:700; letter-spacing:-.3px; }

p { color: var(--pz-fg); }
.font-mono{ font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ===== BACKGROUND LAYERS ===== */
.bg-gradient{
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 60% at 0% 0%,   rgba(59,130,246,.06), transparent 60%),
    radial-gradient(60% 60% at 100% 0%, rgba(139,92,246,.05), transparent 60%);
}
.grain-overlay{ display:none; }

/* ===== HEADER ===== */
.header-glass{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--pz-border);
  color: var(--pz-fg);
}
.header-glass a{ color: var(--pz-fg); }
.header-glass nav a{ color: var(--pz-fg-muted); font-weight:600; }
.header-glass nav a:hover{ color: var(--pz-fg); background: var(--pz-surface); }

/* ===== CARDS ===== */
.brutal-card,
.glass-card{
  background: #fff;
  color: var(--pz-fg);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-radius-xl);
  box-shadow: var(--pz-sh-card);
  transition: transform .3s var(--pz-ease), box-shadow .3s var(--pz-ease), border-color .2s ease;
}
.brutal-card.bg-white      { background:#fff; color:var(--pz-fg); }
.brutal-card.bg-yellow-300 { background:#fffbeb; color:var(--pz-fg); }
.brutal-card.bg-pink-200   { background:#fdf2f8; color:var(--pz-fg); }
.brutal-card.bg-cyan-300   { background:#ecfeff; color:var(--pz-fg); }
.brutal-card.bg-green-300  { background:#f0fdf4; color:var(--pz-fg); }
.brutal-card.bg-black\/80, .brutal-card.bg-black\/70{ background: var(--pz-dark-bg); color:#fff; }
.brutal-card.bg-black\/80 *, .brutal-card.bg-black\/70 *{ color: inherit; }

.brutal-red, .brutal-yellow, .brutal-green, .brutal-blue{
  background:#fff; color:var(--pz-fg);
  border:1px solid var(--pz-border); border-radius:var(--pz-radius-lg);
  box-shadow: var(--pz-sh-sm);
}
.brutal-red    { border-left:4px solid var(--pz-danger);  background:#fff1f2; }
.brutal-yellow { border-left:4px solid var(--pz-warning); background:#fff7ed; }
.brutal-green  { border-left:4px solid var(--pz-success); background:#f0fdf4; }
.brutal-blue   { border-left:4px solid var(--pz-info);    background:#ecfeff; }

.card-hover:hover{ transform: translateY(-4px); box-shadow: var(--pz-sh-card-hover); border-color: var(--pz-primary); }

/* ===== BUTTONS ===== */
.brutal-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1.25rem;
  background:#fff; color:var(--pz-fg);
  border:1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg);
  box-shadow: var(--pz-sh-sm);
  font-weight:600; font-family:'Plus Jakarta Sans',sans-serif;
  text-decoration:none; cursor:pointer; user-select:none;
  transition: transform .25s var(--pz-ease), box-shadow .25s var(--pz-ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.brutal-btn:hover { transform: translateY(-1px); box-shadow: var(--pz-sh-md); border-color: var(--pz-primary); }
.brutal-btn:active{ transform: translateY(0); }
.brutal-btn-sm    { padding:.45rem .9rem; font-size:.8rem; border-radius: var(--pz-radius-pill); }
.brutal-btn-lg    { padding:.95rem 2rem; font-size:1rem; }

.cta-neon, .brutal-btn.cta-neon{
  background: var(--pz-primary); color:#fff;
  border-color: transparent; box-shadow: var(--pz-sh-cta);
}
.cta-neon:hover, .brutal-btn.cta-neon:hover{ background: var(--pz-primary-dark); transform: translateY(-2px) scale(1.02); }

.glow-neon, .glow-pink, .glow-green{ box-shadow: var(--pz-sh-xl); }

.iconbtn{
  display:inline-grid; place-items:center; width:36px; height:36px;
  border:1px solid var(--pz-border); background:#fff; border-radius: var(--pz-radius-md);
  color: var(--pz-fg); cursor:pointer; transition: all .2s ease;
}
.iconbtn:hover{ background: var(--pz-surface); color: var(--pz-primary); }

/* ===== FORMS ===== */
.brutal-input,
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=search], textarea, select{
  width:100%; padding:.7rem 1rem;
  background:#fff; color:var(--pz-fg);
  border:1px solid var(--pz-border); border-radius: var(--pz-radius-lg);
  font:inherit; font-size:1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.brutal-input:focus,
input:focus, textarea:focus, select:focus{
  outline:none; border-color: var(--pz-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.20);
}
label, .field-label{ font-weight:600; color: var(--pz-fg); }
.field-hint{ font-size:.75rem; color: var(--pz-fg-muted); margin-top:.25rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.input-wrap{ position:relative; }
.form-row{ display:grid; gap:1rem; }
@media(min-width:768px){ .form-row{ grid-template-columns: 1fr 1fr; } }

/* ===== HERO TITLE ===== */
.hero-title{
  font-family: 'Sora','Plus Jakarta Sans',sans-serif;
  font-weight:800; letter-spacing:-1.2px;
  background: linear-gradient(90deg, var(--pz-primary), var(--pz-dark-bg));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== SECTION HEAD ===== */
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap;
}
.section-head h2{ font-size:1.5rem; font-weight:800; letter-spacing:-.5px; color:var(--pz-fg); }
.section-head a{ color: var(--pz-primary) !important; font-weight:600; }
.eyebrow{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color: var(--pz-primary); }

/* ===== BANNER CAROUSEL ===== */
.banner-wrap{
  position:relative; overflow:hidden; border-radius: var(--pz-radius-xl);
  box-shadow: var(--pz-sh-card);
  margin-bottom: 2rem; aspect-ratio: 1160 / 480; background: var(--pz-surface);
}
.banner-track{ display:flex; height:100%; transition: transform .6s var(--pz-ease); }
.banner-slide{ flex:0 0 100%; height:100%; }
.banner-slide img, .banner-slide a{ display:block; width:100%; height:100%; object-fit:cover; }
.banner-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:9999px;
  background:rgba(255,255,255,.9); color:var(--pz-fg);
  border:1px solid var(--pz-border); box-shadow: var(--pz-sh-md);
  font-size:1.5rem; font-weight:700; display:grid; place-items:center; cursor:pointer;
}
.banner-arrow.prev{ left:.75rem; } .banner-arrow.next{ right:.75rem; }
.banner-dots{ position:absolute; bottom:.75rem; left:50%; transform:translateX(-50%); display:flex; gap:.4rem; }
.banner-dots button{
  width:8px; height:8px; border-radius:9999px; background:rgba(255,255,255,.55); border:0; cursor:pointer;
}
.banner-dots button.is-active{ width:24px; background: var(--pz-primary); }

/* ===== FLASH SALE ===== */
.flash-section{
  border-radius: var(--pz-radius-xl);
  background: linear-gradient(180deg, var(--pz-primary-50), #fff);
  border:1px solid var(--pz-border); box-shadow: var(--pz-sh-card);
  padding:1.25rem; margin-bottom:2rem;
}
.flash-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; flex-wrap:wrap; gap:.5rem; }
.flash-title{ display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--pz-fg); font-size:1.125rem; letter-spacing:-.3px; }
.flash-title .ico{ color: var(--pz-warning); font-size:1.25rem; }
.flash-badge-live{
  background: linear-gradient(90deg, var(--pz-danger), var(--pz-warning));
  color:#fff; font-size:.7rem; font-weight:800; padding:.2rem .6rem; border-radius:9999px; letter-spacing:.5px;
}
.pulse{ animation: pz-pulse 1.6s ease-in-out infinite; }
@keyframes pz-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
.flash-countdown{ display:flex; align-items:center; gap:.35rem; }
.flash-countdown .seg{
  background: var(--pz-dark-bg); color:#fff; font-weight:700; font-variant-numeric:tabular-nums;
  padding:.25rem .5rem; border-radius: var(--pz-radius-md); min-width:32px; text-align:center; font-size:.8rem;
}
.flash-slider-viewport{ overflow:hidden; }
.flash-track{ display:flex; gap:1rem; animation: flashScroll 45s linear infinite; }
@keyframes flashScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.flash-item{
  flex:0 0 200px; background:#fff; border:1px solid var(--pz-border);
  border-radius: var(--pz-radius-lg); overflow:hidden; box-shadow: var(--pz-sh-sm);
  text-decoration:none; color:var(--pz-fg);
  transition: transform .3s var(--pz-ease), box-shadow .3s var(--pz-ease);
}
.flash-item:hover{ transform: translateY(-4px); box-shadow: var(--pz-sh-md); }
.flash-item .img-wrap{ aspect-ratio:1; background: var(--pz-muted); }
.flash-item .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.flash-item .body{ padding:.65rem .75rem .85rem; }
.flash-item .name{ font-weight:700; font-size:.875rem; line-height:1.3; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.flash-item .price-row{ display:flex; align-items:baseline; gap:.4rem; margin-top:.4rem; flex-wrap:wrap; }
.flash-item .price-now{ font-weight:800; color: var(--pz-primary); font-size:1rem; }
.flash-item .price-old{ font-size:.75rem; color: var(--pz-fg-muted); text-decoration:line-through; }
.flash-item .flash-stock{ display:inline-block; margin-top:.4rem; font-size:.7rem; font-weight:700; color: var(--pz-warning); background:#fff7ed; padding:.15rem .5rem; border-radius:9999px; }
.flash-item .flash-cta{ display:block; margin-top:.5rem; font-size:.75rem; font-weight:800; color:var(--pz-primary); }

/* ===== PRODUCT CARD ===== */
.product-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media(min-width:640px){ .product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media(min-width:1024px){ .product-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:1.5rem; } }

.product-card{
  position:relative; background:#fff;
  border:1px solid var(--pz-border); border-radius: var(--pz-radius-xl);
  box-shadow: var(--pz-sh-card); overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .3s var(--pz-ease), box-shadow .3s var(--pz-ease), border-color .25s ease;
}
.product-card:hover{ transform: translateY(-4px); box-shadow: var(--pz-sh-card-hover); border-color: var(--pz-primary); }
.product-card.is-soldout{ opacity:.7; filter: grayscale(.2); }

.product-img{
  position:relative; aspect-ratio:1; background: var(--pz-muted); overflow:hidden;
  border-bottom: 1px solid var(--pz-border);
}
.product-img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s var(--pz-ease);
}
.product-card:hover .product-img img{ transform: scale(1.04); }

/* Subtle bottom gradient so badges/text on image stay legible */
.product-img::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background: linear-gradient(180deg, transparent, rgba(15,23,42,.55));
  pointer-events:none;
  opacity:.6; transition: opacity .3s var(--pz-ease);
}
.product-card:hover .product-img::after{ opacity:.85; }

/* Ribbon — top-LEFT, compact pill, NO overhang, NO huge shadow */
.ribbon{
  position:absolute; top:.55rem; left:.55rem; z-index:5;
  padding:.22rem .55rem;
  font-size:.62rem; font-weight:800; letter-spacing:.4px; line-height:1;
  border-radius: var(--pz-radius-pill);
  background: rgba(255,255,255,.95); color: var(--pz-warning);
  border: 1px solid var(--pz-border);
  box-shadow: var(--pz-sh-sm);
  backdrop-filter: blur(6px);
  text-transform: uppercase;
  display:inline-flex; align-items:center; gap:.25rem;
  max-width: calc(100% - 5.5rem);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ribbon.hot { background: linear-gradient(90deg, var(--pz-danger), var(--pz-warning)); color:#fff; border-color: transparent; }
.ribbon.best{ background: linear-gradient(90deg, var(--pz-accent), var(--pz-primary)); color:#fff; border-color: transparent; }

/* Discount slash — top-RIGHT compact square */
.product-img .discount-slash{
  position:absolute; top:.55rem; right:.55rem; z-index:5;
  padding:.3rem .55rem;
  background: var(--pz-danger); color:#fff;
  border-radius: var(--pz-radius-md);
  font-size:.78rem; font-weight:800; line-height:1; letter-spacing:-.2px;
  box-shadow: 0 4px 10px rgba(225,29,72,.35);
}

/* Stock + brand mini-strip on bottom of image (above gradient) */
.glass-info{
  position:absolute; left:.55rem; right:.55rem; bottom:.55rem; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.32rem .55rem;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--pz-radius-pill);
  backdrop-filter: blur(10px) saturate(160%);
  font-size:.66rem; color: var(--pz-fg);
  font-weight:600; letter-spacing:.3px;
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
}
.glass-info .brand{
  font-size:.6rem; font-weight:700; letter-spacing:.5px;
  color: var(--pz-primary); text-transform: uppercase;
}
.stock-pill{
  display:inline-flex; align-items:center; gap:.2rem;
  padding:.12rem .55rem; border-radius:9999px;
  background: var(--pz-primary); color:#fff;
  font-size:.6rem; font-weight:700; letter-spacing:.4px; line-height:1.4;
}
.stock-pill.low{ background: var(--pz-warning); }
.stock-pill.out{ background: var(--pz-danger); }

/* Live timer for flash sale — bottom-right floating chip (above gradient) */
.badge-timer{
  position:absolute; right:.55rem; top:.55rem; z-index:5;
  background: rgba(15,23,42,.92); color:#fff;
  padding:.28rem .6rem; border-radius: var(--pz-radius-pill);
  font-size:.7rem; font-weight:700; font-variant-numeric:tabular-nums;
  box-shadow: 0 4px 10px rgba(15,23,42,.3);
  letter-spacing:.5px;
}

/* When BOTH ribbon and discount, ribbon takes top-left, discount takes top-right.
   The timer (if active) goes to bottom-right of the badge area, replacing discount. */
.product-img .badge-timer + .discount-slash,
.product-img .ribbon + .discount-slash{ /* ok, no conflict */ }

/* Allow image-area badges to be positioned relative to .product-img */

.product-body{ padding: .9rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.product-cat{ font-size:.7rem; font-weight:600; color: var(--pz-fg-muted); margin:0; }
.product-title{
  font-size:.95rem; font-weight:700; line-height:1.3; color: var(--pz-fg);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0; min-height:2.5em;
}
.price-block{ display:flex; flex-direction:column; gap:.1rem; margin-top:auto; }
.price-main{ font-size:1.05rem; font-weight:800; color: var(--pz-primary); letter-spacing:-.3px; }
.price-main.flash{ color: var(--pz-danger); }
.price-old{ font-size:.75rem; color: var(--pz-fg-muted); text-decoration:line-through; }
.product-actions{ display:flex; gap:.4rem; margin-top:.6rem; }
.product-actions .brutal-btn{ flex:1; }

/* Badge utility */
.badge, .pill{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.7rem; font-weight:700; padding:.2rem .65rem; border-radius:9999px;
  background: var(--pz-primary-50); color: var(--pz-primary);
}
.badge-green, .badge-success { background:#f0fdf4; color: var(--pz-success); }
.badge-red, .badge-danger    { background:#fff1f2; color: var(--pz-danger); }
.badge-yellow, .badge-warn   { background:#fff7ed; color: var(--pz-warning); }
.badge-blue, .badge-info     { background:#ecfeff; color: var(--pz-info); }
.badge-grey, .badge-muted    { background: var(--pz-muted); color: var(--pz-fg-muted); }
.badge-flash {
  background: linear-gradient(90deg, var(--pz-danger), var(--pz-warning));
  color:#fff; box-shadow: var(--pz-sh-sm);
}
.badge-neon { background: var(--pz-primary); color:#fff; }
.badge-timer{
  background: var(--pz-dark-bg); color:#fff;
  padding:.25rem .5rem; border-radius: var(--pz-radius-md);
  font-size:.7rem; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ===== UTILITY OVERRIDES — preserve legacy class meaning ===== */
.text-brand-primary{ color: var(--pz-primary) !important; }
.text-brand-pink{ color: var(--pz-danger) !important; }
.text-neon{ color: var(--pz-primary) !important; }
.bg-brand-primary  { background: var(--pz-primary) !important; color:#fff !important; }
.bg-brand-pink     { background: var(--pz-accent) !important; color:#fff !important; }
.bg-brand-blue     { background: var(--pz-info) !important; color:#fff !important; }
.bg-brand-amber    { background: var(--pz-warning) !important; color:#fff !important; }
.bg-brand-purple   { background: var(--pz-accent) !important; color:#fff !important; }
.bg-brand-dark     { background: var(--pz-dark-bg) !important; color:#fff !important; }
.bg-brand-surface  { background: var(--pz-surface) !important; }

/* Map dark "bg-black/*" backgrounds to subtle surface for non-card uses */
.bg-black { background: var(--pz-fg) !important; }
.bg-black\/40, .bg-black\/70, .bg-black\/80, .bg-black\/60{
  background: rgba(15,23,42,.04) !important;
  color: var(--pz-fg) !important;
}
/* Inside known dark surfaces (footer, .bg-brand-dark, dark cards), keep light text */
footer.bg-black\/80, footer.bg-black\/70, footer.bg-brand-dark{
  background: var(--pz-dark-bg) !important; color: rgba(255,255,255,.75) !important;
  border-top:0 !important;
}

/* Border helpers (legacy) */
.border-black{ border-color: var(--pz-fg) !important; }
.border-black\/40{ border-color: var(--pz-border) !important; }
.border-white\/5,
.border-white\/10,
.border-white\/15,
.border-white\/20{ border-color: var(--pz-border) !important; }

.border-brand-border, .border-brand-primary{ border-color: var(--pz-border) !important; }
.border-brand-primary{ border-color: var(--pz-primary) !important; }

/* "shadow-[Npx_Npx_0_#000]" arbitrary brutal shadow → soft modern shadow */
.shadow-\[3px_3px_0_\#000\],
.shadow-\[3px_3px_0_0_\#000\],
.shadow-\[4px_4px_0_\#000\],
.shadow-\[6px_6px_0_\#000\]{ box-shadow: var(--pz-sh-md) !important; }

/* Text/opacity legacy — fine on white BG when foreground darkens */
.text-white\/40, .text-white\/60{ color: var(--pz-fg-muted) !important; }
.text-white\/70, .text-white\/75, .text-white\/80, .text-white\/85, .text-white\/90{ color: var(--pz-fg) !important; }
header.header-glass .text-white,
header.header-glass .text-brand-primary{ color: inherit !important; }
header.header-glass .text-brand-primary{ color: var(--pz-primary) !important; }

/* Inside dark sections, return to white text */
.bg-brand-dark .text-white,
.bg-brand-dark .text-white\/85,
.bg-brand-dark .text-white\/80,
.bg-brand-dark .text-white\/75,
.bg-brand-dark .text-white\/70,
.bg-brand-dark .text-white\/60{ color: rgba(255,255,255,.85) !important; }

/* Bottom navigation */
.bottom-nav{
  position: fixed; left:0; right:0; bottom:0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--pz-border) !important;
  color: var(--pz-fg) !important;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; padding:.55rem .25rem; text-decoration:none; color: var(--pz-fg-muted);
  font-size:.7rem; font-weight:600;
  transition: color .2s ease;
}
.bottom-nav .nav-icon{ font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.bottom-nav .nav-item.is-active{ color: var(--pz-primary); }
@media (min-width: 1024px){ .bottom-nav{ display:none; } }

/* Animations */
.fade-up{ animation: pz-fadeUp .55s var(--pz-ease) both; }
@keyframes pz-fadeUp{ from{ opacity:0; transform: translateY(20px); } to{ opacity:1; transform:none; } }
.page-enter{ animation: pz-fadeIn .35s var(--pz-ease) both; }
@keyframes pz-fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.shake{ animation: pz-shake .35s ease both; }
@keyframes pz-shake{ 10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)} }

/* Tables (admin) */
table{ background:#fff; border-radius: var(--pz-radius-lg); overflow:hidden; }
table th{ background: var(--pz-surface); color:var(--pz-fg); font-weight:700; }
table td, table th{ border-color: var(--pz-border) !important; padding:.65rem .8rem; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   ADMIN PANEL
===================================================================== */
.admin-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 260px 1fr;
  background: var(--pz-surface);
  color: var(--pz-fg);
}
@media(max-width:1023px){ .admin-shell{ grid-template-columns: 1fr; } }

.admin-sidebar{
  position: sticky; top:0; height:100vh; overflow-y:auto;
  background:#fff; border-right:1px solid var(--pz-border);
  padding:1.25rem 1rem;
  display:flex; flex-direction:column; gap:.5rem;
}
@media(max-width:1023px){
  .admin-sidebar{ display:none; }
  .admin-sidebar-drawer{
    position: fixed; inset:0; z-index:60;
    background: rgba(15,23,42,.4); backdrop-filter: blur(4px);
    transform: translateX(-100%); transition: transform .3s var(--pz-ease);
  }
  .admin-sidebar-drawer.is-open{ transform: translateX(0); }
  .admin-sidebar-drawer .admin-sidebar{
    position: relative; display:flex; width:280px; height:100vh;
    box-shadow: var(--pz-sh-xl);
  }
}

.sidebar-brand{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .25rem;
  font-weight:800; color: var(--pz-fg); font-size:1.05rem; letter-spacing:-.3px;
}
.sidebar-brand .logo{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius: var(--pz-radius-md);
  background: var(--pz-primary); color:#fff; font-weight:800;
  box-shadow: var(--pz-sh-cta);
}
.sidebar-section-label{
  font-size:.65rem; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; color: var(--pz-fg-muted);
  padding: 1rem .5rem .35rem;
}
.admin-sidebar a, .nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem;
  font-size:.875rem; font-weight:500; color: var(--pz-fg-muted);
  border-radius: var(--pz-radius-md);
  text-decoration:none; transition: all .2s ease;
}
.admin-sidebar a:hover, .nav-link:hover{
  background: var(--pz-primary-50); color: var(--pz-primary);
}
.admin-sidebar a.is-active, .nav-link.is-active{
  background: var(--pz-primary); color:#fff;
  box-shadow: var(--pz-sh-cta);
}
.sidebar-footer{
  margin-top:auto; padding:.75rem .25rem; border-top:1px solid var(--pz-border);
  font-size:.75rem; color: var(--pz-fg-muted);
}

.admin-main{
  display:flex; flex-direction:column; min-width:0; min-height:100vh;
}
.admin-topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1.25rem;
  background: rgba(255,255,255,.85); backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--pz-border);
}
.topbar-title{ font-weight:700; font-size:1rem; color: var(--pz-fg); }
.topbar-clock{ font-variant-numeric: tabular-nums; color: var(--pz-fg-muted); font-size:.8rem; }
.topbar-actions, .topbar-menu{ margin-left:auto; display:flex; gap:.4rem; align-items:center; }
.admin-search{
  position:relative; flex:1; max-width:340px; min-width:0;
}
.admin-search .ico{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; pointer-events:none; color: var(--pz-fg-muted);
}
.admin-search input{
  background: var(--pz-muted); border-color: transparent;
  padding-left:2.4rem; height:40px;
}
.admin-search input:focus{ background:#fff; }

.admin-body{ padding: 1.25rem; }
@media(min-width:768px){ .admin-body{ padding: 1.75rem; } }

.admin-card{
  background:#fff; border:1px solid var(--pz-border);
  border-radius: var(--pz-radius-xl); box-shadow: var(--pz-sh-card);
  padding: 1.25rem;
}
.admin-card.panel{ padding:1.5rem; }
.admin-card.head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

.admin-stat{
  background:#fff; border:1px solid var(--pz-border);
  border-radius: var(--pz-radius-xl); box-shadow: var(--pz-sh-sm);
  padding:1.25rem; display:flex; flex-direction:column; gap:.4rem;
  position:relative; overflow:hidden;
}
.admin-stat::before{
  content:""; position:absolute; right:-20px; top:-20px; width:80px; height:80px;
  border-radius:9999px; opacity:.12; background: var(--pz-primary);
}
.admin-stat .label{ font-size:.75rem; color: var(--pz-fg-muted); font-weight:600; }
.admin-stat .value{ font-size:1.75rem; font-weight:800; color: var(--pz-fg); letter-spacing:-.5px; }
.admin-stat .sub{ font-size:.75rem; color: var(--pz-fg-muted); }
.admin-stat.stat-orders::before  { background: var(--pz-primary); }
.admin-stat.stat-revenue::before { background: var(--pz-success); }
.admin-stat.stat-products::before{ background: var(--pz-accent); }
.admin-stat.stat-rate::before    { background: var(--pz-warning); }

/* Admin tables */
.admin-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border-radius: var(--pz-radius-xl); overflow:hidden;
  box-shadow: var(--pz-sh-card);
}
.admin-table th{
  background: var(--pz-surface); color: var(--pz-fg-muted);
  font-weight:700; text-align:left;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.7px;
  padding:.75rem 1rem;
  border-bottom: 2px solid var(--pz-border);
  white-space:nowrap;
}
.admin-table th.col-img{ width:1%; }
.admin-table th.col-aksi{ text-align:right; }
.admin-table td{
  font-size:.875rem; vertical-align:middle;
  padding:.75rem 1rem;
  border-bottom: 1px solid var(--pz-border);
}
.admin-table tr:last-child td{ border-bottom:0; }
.admin-table tbody tr{ transition: background .12s; }
.admin-table tbody tr:hover{ background: var(--pz-primary-50,#eff6ff); }

/* Produk cell: gambar + info */
.prod-cell{
  display:flex; align-items:center; gap:.85rem; min-width:220px;
}
.prod-thumb-wrap{
  position:relative; flex-shrink:0;
  width:64px; height:64px;
  border-radius: var(--pz-radius-lg);
  overflow:hidden;
  background: var(--pz-muted);
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
  border: 1.5px solid var(--pz-border);
}
.prod-thumb{
  width:100%; height:100%; object-fit:cover; display:block;
}
.thumb-oos{
  position:absolute; inset:0;
  background:rgba(0,0,0,.52);
  color:#fff; font-size:.6rem; font-weight:700;
  display:grid; place-items:center;
  letter-spacing:.5px; text-transform:uppercase;
}
.prod-info{
  display:flex; flex-direction:column; gap:.18rem; min-width:0;
}
.prod-name{
  font-size:.875rem; font-weight:700; color: var(--pz-fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;
}
.prod-slug{
  font-size:.68rem; font-family:monospace; color: var(--pz-fg-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;
}
.prod-stock{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.7rem; font-weight:600; padding:.15rem .45rem;
  border-radius:999px; width:fit-content; margin-top:.1rem;
}
.prod-stock.stock-ok   { background:#dcfce7; color:#15803d; }
.prod-stock.stock-low  { background:#fef9c3; color:#a16207; }
.prod-stock.stock-empty{ background:#fee2e2; color:#b91c1c; }

/* Harga */
.cell-price{
  font-weight:800; color: var(--pz-primary);
  white-space:nowrap; font-size:.9rem;
}

/* Aksi */
.cell-actions{ display:flex; gap:.35rem; justify-content:flex-end; flex-wrap:nowrap; }

/* Lama — tetap ada untuk backward compat */
.row-thumb{
  width:48px; height:48px; border-radius: var(--pz-radius-md);
  object-fit:cover; background: var(--pz-muted);
}

/* Admin login standalone shell */
.login-shell{
  min-height:100vh; display:grid; place-items:center;
  background: linear-gradient(180deg, var(--pz-primary-50) 0%, #fff 60%);
  padding:1.5rem;
}
.login-card{
  background:#fff; border:1px solid var(--pz-border); border-radius: var(--pz-radius-xl);
  box-shadow: var(--pz-sh-xl); padding: 2.25rem; width:100%; max-width: 440px;
}
.login-brand{ text-align:center; margin-bottom:1.5rem; }
.login-brand .logo{
  width:56px; height:56px; margin:0 auto .75rem; display:grid; place-items:center;
  border-radius: var(--pz-radius-lg); background: var(--pz-primary); color:#fff;
  font-weight:800; font-size:1.5rem; box-shadow: var(--pz-sh-cta);
}
.login-footer{ text-align:center; margin-top:1.5rem; font-size:.8rem; color: var(--pz-fg-muted); }

/* Empty state */
.empty-state{
  background:#fff; border:1px dashed var(--pz-border-2);
  border-radius: var(--pz-radius-xl); padding: 2rem 1.5rem;
  text-align:center; color: var(--pz-fg-muted);
}
.empty-state h3{ font-size:1.125rem; color: var(--pz-fg); margin-bottom:.5rem; }

/* Page header (inside admin) */
.page-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap;
}
.page-header .ph-info h1{ font-size:1.5rem; font-weight:800; letter-spacing:-.5px; color: var(--pz-fg); }
.page-header .ph-sub{ font-size:.85rem; color: var(--pz-fg-muted); }
.page-header .ph-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Filter pills (admin orders/products etc.) */
.filter-pills{ display:flex; gap:.4rem; flex-wrap:wrap; }
.filter-pills a, .filter-pills button{
  padding:.4rem .8rem; border-radius:9999px;
  background:#fff; color: var(--pz-fg-muted);
  border:1px solid var(--pz-border); font-size:.8rem; font-weight:600;
  text-decoration:none; transition: all .2s ease;
}
.filter-pills a.is-active, .filter-pills button.is-active{
  background: var(--pz-primary); color:#fff; border-color: transparent;
}

/* Status dots */
.status-dot{
  display:inline-block; width:8px; height:8px; border-radius:9999px;
  background: var(--pz-fg-muted); margin-right:.4rem;
}
.status-dot.green, .status-dot.success{ background: var(--pz-success); }
.status-dot.red, .status-dot.danger    { background: var(--pz-danger);  }
.status-dot.yellow                      { background: var(--pz-warning); }
.status-dot.blue                        { background: var(--pz-info);    }
.status-dot.grey                        { background: var(--pz-fg-muted); }

/* Drawer/close */
.drawer-close{
  position:absolute; top:.6rem; right:.6rem;
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:9999px; background:#fff; color: var(--pz-fg);
  border:1px solid var(--pz-border); cursor:pointer;
}

/* Avatars */
.avatar{
  width:36px; height:36px; border-radius:9999px;
  background: var(--pz-primary-50); color: var(--pz-primary);
  display:grid; place-items:center; font-weight:700; font-size:.85rem;
  border:1px solid var(--pz-border);
}

/* Source pills (settings test buttons) */
.src-badge{ font-size:.7rem; font-weight:700; padding:.2rem .5rem; border-radius:9999px; }
.src-db   { background:#dcfce7; color:#15803d; }
.src-env  { background:#dbeafe; color:#1d4ed8; }
.src-empty{ background:#f1f5f9; color:#64748b; }

/* Crumbs (admin breadcrumb) */
.crumb{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.75rem; color: var(--pz-fg-muted);
  margin-bottom:.5rem;
}
.crumb a{ color: inherit; text-decoration:none; }
.crumb a:hover{ color: var(--pz-primary); }


/* Mobile drawer panel (admin) */
.admin-sidebar-drawer .panel{
  position:relative;
  width: 280px; height: 100vh;
  background:#fff; box-shadow: var(--pz-sh-xl);
  padding: 1.25rem 1rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:.5rem;
}
.admin-sidebar-drawer .panel .nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .75rem;
  font-size:.875rem; font-weight:500; color: var(--pz-fg-muted);
  border-radius: var(--pz-radius-md); text-decoration:none;
}
.admin-sidebar-drawer .panel .nav-link.is-active{
  background: var(--pz-primary); color:#fff; box-shadow: var(--pz-sh-cta);
}

/* Sidebar footer info */
.sidebar-footer{
  display:flex; align-items:center; gap:.6rem;
}
.sidebar-footer .meta{ font-size:.8rem; color: var(--pz-fg); flex:1; min-width:0; }
.sidebar-footer .meta .name{ font-weight:700; }
.sidebar-footer .meta .role{ font-size:.7rem; color: var(--pz-fg-muted); }

/* iconbtn danger variant */
.iconbtn.danger{ color: var(--pz-danger); }
.iconbtn.danger:hover{ background:#fff1f2; }

/* sidebar ico spans inside link */
.nav-link .ico{ font-size:1rem; line-height:1; flex-shrink:0; }
.admin-sidebar nav{ display:flex; flex-direction:column; gap:.15rem; }
.admin-sidebar-drawer .panel nav{ display:flex; flex-direction:column; gap:.15rem; }

/* SVG icon system — replaces emoji */
.ico-svg{
  display:inline-block; vertical-align:middle;
  width:1em; height:1em; flex-shrink:0;
  stroke:currentColor; fill:none;
}
.nav-link .ico-svg{ width:1.1rem; height:1.1rem; }
.bottom-nav .nav-icon .ico-svg{ width:1.3rem; height:1.3rem; }
.iconbtn .ico-svg{ width:1.1rem; height:1.1rem; }
.empty-state .ico .ico-svg{ width:2.5rem; height:2.5rem; opacity:.5; }
.admin-stat .label .ico-svg{ width:.9rem; height:.9rem; opacity:.8; }
.brutal-btn .ico-svg{ width:.9rem; height:.9rem; }
.brutal-btn-sm .ico-svg{ width:.85rem; height:.85rem; }
.eyebrow .ico-svg{ width:.85rem; height:.85rem; opacity:.7; }
.prod-stock .ico-svg{ width:.75rem; height:.75rem; }
.badge .ico-svg{ width:.7rem; height:.7rem; }

/* ===== LEGACY UTILITIES NEUTRALIZED =====
   Map any leftover heavy brutal borders to subtle modern borders. */
[class*="border-2 border-black"],
[class*="border-4 border-black"],
[class*="border-[3px] border-black"],
[class*="border-[4px] border-black"]{
  border-width:1px !important; border-color: var(--pz-border) !important;
}

/* ===== PRODUCT COVER BANNER ===== */
.product-cover-banner{
  position:relative; overflow:hidden;
  border-radius: var(--pz-radius-xl);
  aspect-ratio: 1160 / 480;
  border: 1px solid var(--pz-border);
  box-shadow: var(--pz-sh-card);
  background: var(--pz-surface);
}
.product-cover-banner img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center;
}
.product-cover-banner .cover-shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(15,23,42,.55) 75%, rgba(15,23,42,.85) 100%);
}
.product-cover-banner .cover-content{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1.25rem 1.5rem 1.5rem;
  color:#fff;
}
.product-cover-banner .cover-tag{
  display:inline-flex; align-items:center;
  background: rgba(255,255,255,.18); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.5px;
  padding:.25rem .65rem; border-radius:9999px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  margin-bottom:.5rem;
}
.product-cover-banner .cover-title{
  font-family: 'Sora','Plus Jakarta Sans',sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800; letter-spacing:-.5px; line-height:1.15;
  color:#fff; text-shadow: 0 2px 12px rgba(0,0,0,.4);
  margin: 0;
}
@media (max-width: 640px){
  .product-cover-banner{ aspect-ratio: 16 / 10; }
  .product-cover-banner .cover-content{ padding: 1rem 1.1rem 1.1rem; }
}

/* =====================================================================
   ADMIN DARK SIDEBAR
===================================================================== */
.admin-sidebar{
  background: #0b1120;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand{ color: #fff; }
.sidebar-brand:hover{ color: #fff; }
.sidebar-section-label{ color: rgba(255,255,255,.35); }
.admin-sidebar .nav-link,
.admin-sidebar a{ color: rgba(255,255,255,.6); }
.admin-sidebar .nav-link:hover,
.admin-sidebar a:hover{ background: rgba(59,130,246,.15); color: #fff; }
.admin-sidebar .nav-link.is-active,
.admin-sidebar a.is-active{ background: #3b82f6; color: #fff; box-shadow: 0 4px 14px rgba(59,130,246,.4); }
.sidebar-footer{ border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-footer .meta .name{ color: #fff; }
.sidebar-footer .meta .role{ color: rgba(255,255,255,.45); }
.admin-sidebar-drawer .panel{
  background: #0b1120;
}
.admin-sidebar-drawer .panel .nav-link{ color: rgba(255,255,255,.6); }
.admin-sidebar-drawer .panel .nav-link.is-active{ background: #3b82f6; color: #fff; }
.drawer-close{ background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.12); }
.drawer-close:hover{ background: rgba(255,255,255,.15); }
.avatar{ background: rgba(59,130,246,.25); color: #60a5fa; border-color: rgba(59,130,246,.3); }

/* Admin topbar improved */
.admin-topbar{
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--pz-border);
}
.admin-nav-badge{
  display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 4px;
  background: var(--pz-danger); color:#fff;
  border-radius:9999px; font-size:.6rem; font-weight:800;
  margin-left:auto;
}

/* Admin welcome card */
.admin-welcome{
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  border-radius: 20px; color: #fff; padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem; position: relative; overflow: hidden;
  box-shadow: 0 8px 30px rgba(59,130,246,.35);
}
.admin-welcome::before{
  content:""; position:absolute; right:-20px; top:-20px;
  width:120px; height:120px; border-radius:9999px;
  background: rgba(255,255,255,.1);
}
.admin-welcome::after{
  content:""; position:absolute; right:30px; bottom:-30px;
  width:80px; height:80px; border-radius:9999px;
  background: rgba(255,255,255,.08);
}
.admin-welcome h2{ color: #fff; font-size: 1.3rem; margin:0; }
.admin-welcome p{ color: rgba(255,255,255,.85); font-size:.875rem; margin:.25rem 0 0; }
.admin-welcome-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.admin-welcome-actions .brutal-btn{
  background: rgba(255,255,255,.18); color: #fff;
  border-color: rgba(255,255,255,.25); backdrop-filter: blur(6px);
  font-size: .8rem; padding: .45rem .9rem;
}
.admin-welcome-actions .brutal-btn:hover{ background: rgba(255,255,255,.28); }
.admin-welcome-actions .brutal-btn.solid{ background: #fff; color: #2563eb; border-color: transparent; }
.admin-welcome-actions .brutal-btn.solid:hover{ background: rgba(255,255,255,.92); }

/* Improved stat cards */
.admin-stat{
  background: #fff;
  border: 1px solid var(--pz-border);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .4rem;
  position: relative; overflow: hidden;
  transition: transform .25s var(--pz-ease), box-shadow .25s var(--pz-ease);
}
.admin-stat:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.10); }
.admin-stat .stat-icon{
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: .25rem;
}
.admin-stat.stat-revenue .stat-icon{ background: #dcfce7; color: #16a34a; }
.admin-stat.stat-orders  .stat-icon{ background: #dbeafe; color: #2563eb; }
.admin-stat.stat-products .stat-icon{ background: #f3e8ff; color: #7c3aed; }
.admin-stat.stat-rate    .stat-icon{ background: #fff7ed; color: #ea580c; }
.admin-stat .label{ font-size:.75rem; color: var(--pz-fg-muted); font-weight:600; }
.admin-stat .value{ font-size:1.6rem; font-weight:800; color: var(--pz-fg); letter-spacing:-.5px; line-height:1.1; }
.admin-stat .stat-trend{
  font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:.2rem;
}
.admin-stat .stat-trend.up{ color: #16a34a; }
.admin-stat .stat-trend.down{ color: #e11d48; }
.admin-stat::before{ display:none; }

/* Admin mobile bottom nav - REMOVED for cleaner interface */
.admin-bottom-nav{ display: none !important; }

/* =====================================================================
   DARK HOME THEME
===================================================================== */
body[data-theme="dark"]{
  background: #050816;
  color: #fff;
}
body[data-theme="dark"] p{ color: #94a3b8; }
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4{ color: #fff; }

body[data-theme="dark"] .bg-gradient{
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 5%, rgba(99,102,241,.12), transparent 55%);
}

/* Dark header */
body[data-theme="dark"] .header-glass{
  background: rgba(5,8,22,.85) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
}
body[data-theme="dark"] .header-glass a{ color: #fff !important; }
body[data-theme="dark"] .header-glass .text-brand-primary{ color: #60a5fa !important; }

/* Dark banner */
body[data-theme="dark"] .banner-wrap{
  background: #0d1a3a;
  border: 1px solid rgba(255,255,255,.06);
}

/* Dark flash section */
body[data-theme="dark"] .flash-section{
  background: linear-gradient(160deg, #0d1a3a 0%, #080e1f 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 32px rgba(59,130,246,.10);
}
body[data-theme="dark"] .flash-title{ color: #fff; }
body[data-theme="dark"] .flash-countdown .seg{
  background: rgba(255,255,255,.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}

/* Dark flash item cards */
body[data-theme="dark"] .flash-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  box-shadow: none;
}
body[data-theme="dark"] .flash-item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(59,130,246,.4);
  box-shadow: 0 0 20px rgba(59,130,246,.15);
  transform: translateY(-3px);
}
body[data-theme="dark"] .flash-item .img-wrap{ background: rgba(255,255,255,.06); }
body[data-theme="dark"] .flash-item .name{ color: #fff; }
body[data-theme="dark"] .flash-item .price-now{ color: #60a5fa; }
body[data-theme="dark"] .flash-item .price-old{ color: #94a3b8; }
body[data-theme="dark"] .flash-item .flash-stock{
  background: rgba(59,130,246,.18); color: #60a5fa;
}

/* Discount badge on flash item */
.flash-item .disc-badge{
  position:absolute; top:.5rem; left:.5rem;
  background: #e11d48; color: #fff;
  font-size:.68rem; font-weight:800;
  padding:.2rem .45rem; border-radius:9999px;
  line-height:1; z-index:2;
}
.flash-item .wish-btn{
  position:absolute; top:.4rem; right:.4rem;
  width:28px; height:28px; border-radius:9999px;
  background: rgba(0,0,0,.35); border:0; cursor:pointer;
  display:grid; place-items:center; z-index:2;
  color: rgba(255,255,255,.7);
  transition: all .2s;
}
.flash-item .wish-btn:hover{ background: rgba(225,29,72,.4); color:#e11d48; }
.flash-item .img-wrap{ position:relative; }

/* Section headers dark */
body[data-theme="dark"] .section-head h2{ color: #fff; }
body[data-theme="dark"] .section-head a{ color: #60a5fa !important; }
body[data-theme="dark"] .eyebrow{ color: #60a5fa; }

/* Category horizontal scroll */
.cat-hscroll{
  display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.cat-hscroll::-webkit-scrollbar{ display:none; }
.cat-card-dark{
  flex: 0 0 90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:.9rem .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  text-decoration:none; color: #fff;
  font-size:.72rem; font-weight:700;
  transition: all .2s var(--pz-ease);
  text-align:center;
}
.cat-card-dark:hover{
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.4);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(59,130,246,.2);
}
.cat-card-dark .cat-ico{ font-size:1.75rem; line-height:1; }
.cat-card-dark .cat-ico svg{ width:1.75rem; height:1.75rem; }

/* Product horizontal scroll */
.prod-hscroll{
  display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem;
  scrollbar-width:none; -ms-overflow-style:none;
}
.prod-hscroll::-webkit-scrollbar{ display:none; }
.prod-card-h{
  flex: 0 0 160px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; overflow:hidden;
  text-decoration:none; color: #fff;
  display:flex; flex-direction:column;
  transition: all .2s var(--pz-ease);
}
.prod-card-h:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(59,130,246,.35);
  transform: translateY(-3px);
  box-shadow: 0 0 22px rgba(59,130,246,.18);
}
.prod-card-h .ph-img{
  position:relative;
  aspect-ratio:1; background: rgba(255,255,255,.06); overflow:hidden;
}
.prod-card-h .ph-img img{ width:100%; height:100%; object-fit:cover; }
.prod-card-h .ph-badge{
  position:absolute; top:.4rem; left:.4rem;
  background: var(--pz-primary); color: #fff;
  font-size:.55rem; font-weight:800; letter-spacing:.5px;
  padding:.15rem .4rem; border-radius:5px; z-index:2;
}
.prod-card-h .ph-wish{
  position:absolute; top:.35rem; right:.35rem;
  width:26px; height:26px; border-radius:9999px;
  background: rgba(0,0,0,.35); border:0; cursor:pointer;
  display:grid; place-items:center;
  color: rgba(255,255,255,.7); z-index:2;
}
.prod-card-h .ph-body{
  padding:.65rem .7rem .75rem; flex:1; display:flex; flex-direction:column; gap:.2rem;
}
.prod-card-h .ph-name{
  font-size:.78rem; font-weight:700; color: #fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35;
}
.prod-card-h .ph-cat{ font-size:.65rem; color: #94a3b8; }
.prod-card-h .ph-price{ font-size:.875rem; font-weight:800; color: #60a5fa; letter-spacing:-.2px; }
.prod-card-h .ph-old{ font-size:.68rem; color: #64748b; text-decoration:line-through; }
.prod-card-h .ph-stock{
  display:inline-block; margin-top:.2rem;
  background: rgba(59,130,246,.18); color: #60a5fa;
  font-size:.62rem; font-weight:700;
  padding:.1rem .45rem; border-radius:9999px;
  width:fit-content;
}

/* Dark product grid cards */
body[data-theme="dark"] .product-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
body[data-theme="dark"] .product-card:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 22px rgba(59,130,246,.18);
}
body[data-theme="dark"] .product-img{ background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
body[data-theme="dark"] .product-img::after{ background: linear-gradient(180deg, transparent, rgba(5,8,22,.7)); }
body[data-theme="dark"] .product-title{ color: #fff; }
body[data-theme="dark"] .product-cat{ color: #94a3b8; }
body[data-theme="dark"] .price-main{ color: #60a5fa; }
body[data-theme="dark"] .price-old{ color: #64748b; }
body[data-theme="dark"] .glass-info{
  background: rgba(5,8,22,.75);
  border-color: rgba(255,255,255,.1);
}
body[data-theme="dark"] .glass-info .brand{ color: #60a5fa; }
body[data-theme="dark"] .brutal-btn{
  background: rgba(255,255,255,.08); color: #fff;
  border-color: rgba(255,255,255,.12);
}
body[data-theme="dark"] .brutal-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(59,130,246,.5);
}
body[data-theme="dark"] .brutal-btn.cta-neon{
  background: #3b82f6; color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(59,130,246,.35);
}
body[data-theme="dark"] .brutal-btn.cta-neon:hover{ background: #2563eb; }

/* Dark bottom nav */
body[data-theme="dark"] .bottom-nav{
  background: rgba(5,8,22,.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 !important;
}
body[data-theme="dark"] .bottom-nav .nav-item{ color: rgba(255,255,255,.4); }
body[data-theme="dark"] .bottom-nav .nav-item.is-active{ color: #3b82f6; }
body[data-theme="dark"] .bottom-nav .nav-label{ color: inherit; }

/* Flash sale countdown boxes */
.flash-countdown-boxes{
  display:flex; align-items:center; gap:.3rem; margin: .65rem 0;
}
.flash-countdown-boxes .cbox{
  display:flex; flex-direction:column; align-items:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: .35rem .55rem; min-width:44px;
}
body[data-theme="dark"] .flash-countdown-boxes .cbox{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
.flash-countdown-boxes .cbox .cnum{
  font-size:1.1rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; color: #fff;
}
.flash-countdown-boxes .cbox .clabel{
  font-size:.5rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color: rgba(255,255,255,.5); margin-top:.15rem;
}
.flash-countdown-boxes .csep{
  font-size:1.1rem; font-weight:800; color: #fff; line-height:1; margin-bottom:.2rem;
}

/* Ensure dark home body padding for bottom nav */
body[data-theme="dark"]{ padding-bottom: 80px; }
@media(min-width:1024px){ body[data-theme="dark"]{ padding-bottom: 0; } }

/* Admin body padding (mobile bottom nav) */
body.admin-body{ padding-bottom: 64px; }
@media(min-width:1024px){ body.admin-body{ padding-bottom: 0; } }

/* Admin body should not have dark-home styling */
.admin-body[data-theme="dark"]{ background: var(--pz-surface); color: var(--pz-fg); }

/* badge-flash for admin bottom */
.admin-stat .stat-change{ font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:.2rem; }
.admin-stat .stat-change.positive{ color: #16a34a; }
.admin-stat .stat-change.negative{ color: #e11d48; }

/* =====================================================================
   FULL DARK THEME — ALL FRONTEND PAGES
   Applied via body[data-theme="dark"] (set in layouts/main.php)
===================================================================== */

/* ── Base text / containers ── */
body[data-theme="dark"] .brutal-card,
body[data-theme="dark"] .glass-card{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
body[data-theme="dark"] .brutal-card *,
body[data-theme="dark"] .glass-card *{ color: inherit; }

/* Explicit bg-white inside dark context */
body[data-theme="dark"] .bg-white{
  background: rgba(255,255,255,.05) !important;
  color: #fff !important;
}

/* ── Typography ── */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4{ color: #fff !important; }
body[data-theme="dark"] p{ color: #94a3b8 !important; }
body[data-theme="dark"] .text-slate-500,
body[data-theme="dark"] .text-slate-600,
body[data-theme="dark"] .text-slate-400{ color: #64748b !important; }
body[data-theme="dark"] .text-slate-800,
body[data-theme="dark"] .text-slate-900{ color: #e2e8f0 !important; }
body[data-theme="dark"] .opacity-70{ opacity:.65 !important; }
body[data-theme="dark"] .eyebrow{ color: #60a5fa !important; }
body[data-theme="dark"] .hero-title{
  background: linear-gradient(90deg, #60a5fa, #a78bfa) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}

/* ── Dividers ── */
body[data-theme="dark"] hr,
body[data-theme="dark"] .border-brand-border,
body[data-theme="dark"] .divide-brand-border > *{ border-color: rgba(255,255,255,.08) !important; }
body[data-theme="dark"] [class*="border-t"],
body[data-theme="dark"] [class*="border-b"]{ border-color: rgba(255,255,255,.08) !important; }

/* ── Buttons dark override ── */
body[data-theme="dark"] .brutal-btn-lg{
  background: rgba(255,255,255,.08);
  color: #fff; border-color: rgba(255,255,255,.14);
}
body[data-theme="dark"] .brutal-btn-lg:hover{
  background: rgba(255,255,255,.14); border-color: rgba(59,130,246,.5);
}
body[data-theme="dark"] .brutal-btn-lg.cta-neon,
body[data-theme="dark"] .brutal-btn.cta-neon{
  background: linear-gradient(135deg,#3b82f6,#2563eb);
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(59,130,246,.4);
}
body[data-theme="dark"] a.brutal-btn-lg:not(.cta-neon){
  background: rgba(255,255,255,.07); color: #e2e8f0;
  border-color: rgba(255,255,255,.12);
}
body[data-theme="dark"] a.brutal-btn-lg:not(.cta-neon):hover{
  background: rgba(255,255,255,.12); color: #fff;
}

/* ── Forms ── */
body[data-theme="dark"] input[type=text],
body[data-theme="dark"] input[type=email],
body[data-theme="dark"] input[type=password],
body[data-theme="dark"] input[type=tel],
body[data-theme="dark"] input[type=number],
body[data-theme="dark"] input[type=search],
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] .brutal-input{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.1) !important;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{ color: #475569 !important; }
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus{
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2) !important;
  background: rgba(59,130,246,.06) !important;
}
body[data-theme="dark"] label,
body[data-theme="dark"] .field-label{ color: #cbd5e1 !important; }
body[data-theme="dark"] .field-hint{ color: #475569 !important; }
body[data-theme="dark"] input[disabled],
body[data-theme="dark"] input:disabled{ opacity:.45 !important; }

/* ── Badges ── */
body[data-theme="dark"] .badge{
  background: rgba(59,130,246,.18) !important; color: #60a5fa !important;
}
body[data-theme="dark"] .badge-green,
body[data-theme="dark"] .badge-success{
  background: rgba(22,163,74,.18) !important; color: #4ade80 !important;
}
body[data-theme="dark"] .badge-red,
body[data-theme="dark"] .badge-danger{
  background: rgba(225,29,72,.18) !important; color: #f87171 !important;
}
body[data-theme="dark"] .badge-yellow,
body[data-theme="dark"] .badge-warn{
  background: rgba(234,88,12,.18) !important; color: #fb923c !important;
}
body[data-theme="dark"] .badge-blue,
body[data-theme="dark"] .badge-info{
  background: rgba(6,182,212,.18) !important; color: #22d3ee !important;
}
body[data-theme="dark"] .badge-neon{
  background: rgba(59,130,246,.3) !important; color: #93c5fd !important;
}
body[data-theme="dark"] .badge-grey,
body[data-theme="dark"] .badge-muted{
  background: rgba(255,255,255,.08) !important; color: #64748b !important;
}
body[data-theme="dark"] .badge-flash{
  background: linear-gradient(90deg,rgba(225,29,72,.8),rgba(234,88,12,.8)) !important;
  color: #fff !important;
}

/* ── Alert blocks ── */
body[data-theme="dark"] .brutal-red{
  background: rgba(225,29,72,.1) !important;
  border-left-color: #e11d48 !important; color: #fca5a5 !important;
}
body[data-theme="dark"] .brutal-yellow{
  background: rgba(234,88,12,.1) !important;
  border-left-color: #ea580c !important; color: #fdba74 !important;
}
body[data-theme="dark"] .brutal-green{
  background: rgba(22,163,74,.1) !important;
  border-left-color: #16a34a !important; color: #86efac !important;
}
body[data-theme="dark"] .brutal-blue{
  background: rgba(6,182,212,.1) !important;
  border-left-color: #06b6d4 !important; color: #67e8f9 !important;
}

/* ── Empty state ── */
body[data-theme="dark"] .empty-state{
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] .empty-state h3{ color: #e2e8f0 !important; }
body[data-theme="dark"] .empty-state p{ color: #475569 !important; }

/* ── Breadcrumb ── */
body[data-theme="dark"] .text-slate-500 a{ color: #60a5fa !important; }

/* ── Dark price block (product detail) ── */
body[data-theme="dark"] .rounded-2xl.bg-brand-dark,
body[data-theme="dark"] [style*="background: radial-gradient"]{
  background: rgba(255,255,255,.04) !important;
}
/* Keep actual dark price card dark */
body[data-theme="dark"] .price-dark-card{
  background: rgba(59,130,246,.12) !important;
  border: 1px solid rgba(59,130,246,.25) !important;
  border-radius: 20px !important;
}

/* ── Status dots ── */
body[data-theme="dark"] .status-dot{ background: rgba(255,255,255,.2); }
body[data-theme="dark"] .status-dot.green,
body[data-theme="dark"] .status-dot.success{ background: #22c55e; }
body[data-theme="dark"] .status-dot.red,
body[data-theme="dark"] .status-dot.danger{ background: #f87171; }
body[data-theme="dark"] .status-dot.yellow{ background: #fb923c; }
body[data-theme="dark"] .status-dot.blue{ background: #22d3ee; }

/* ── Admin-stat on profil page ── */
body[data-theme="dark"] .admin-stat{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #fff !important;
}
body[data-theme="dark"] .admin-stat .label{ color: #64748b !important; }
body[data-theme="dark"] .admin-stat .value{ color: #fff !important; }
body[data-theme="dark"] .admin-stat .sub{ color: #475569 !important; }

/* ── Flash alert box (CI4 flash_alert) ── */
body[data-theme="dark"] .flash-alert-success{ background:rgba(22,163,74,.12)!important; border-color:#22c55e!important; color:#86efac!important; }
body[data-theme="dark"] .flash-alert-error,
body[data-theme="dark"] .flash-alert-danger { background:rgba(225,29,72,.12)!important; border-color:#f87171!important; color:#fca5a5!important; }
body[data-theme="dark"] .flash-alert-info   { background:rgba(59,130,246,.12)!important; border-color:#60a5fa!important; color:#93c5fd!important; }

/* ── KATEGORI PAGE ── */
body[data-theme="dark"] .cat-grid-card{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: #fff !important;
}
body[data-theme="dark"] .cat-grid-card:hover{
  background: rgba(59,130,246,.1) !important;
  border-color: rgba(59,130,246,.35) !important;
  box-shadow: 0 0 24px rgba(59,130,246,.2) !important;
}
body[data-theme="dark"] .cat-grid-card h3{ color: #fff !important; }
body[data-theme="dark"] [class*="absolute inset-x-0 top-0 h-1"]{
  opacity: .7 !important;
}

/* ── CHECKOUT PAGE ── */
body[data-theme="dark"] .checkout-summary-total{
  background: rgba(59,130,246,.12) !important;
  border: 1px solid rgba(59,130,246,.25) !important;
  border-radius: 16px !important;
}
body[data-theme="dark"] .checkout-summary-total p{ color: #60a5fa !important; }

/* ── PAYMENT PAGE ── */
body[data-theme="dark"] .payment-qr-wrap{
  background: #fff !important;
  border-radius: 18px !important;
  padding: 12px !important;
}
body[data-theme="dark"] .payment-timer{
  background: rgba(59,130,246,.15) !important;
  border: 1px solid rgba(59,130,246,.3) !important;
  color: #60a5fa !important;
  border-radius: 12px !important;
}

/* ── VARIANT BUTTONS ── */
body[data-theme="dark"] button[type="button"]:not(.cta-neon):not(.wish-btn):not(.ph-wish):not([class*="brutal-btn"]):not([class*="nav"]):not([class*="drawer"]):not([class*="banner"]):not([class*="topbar"]){
  background: rgba(255,255,255,.06) !important;
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* Variant active state */
body[data-theme="dark"] button.bg-brand-primary{ background: #3b82f6 !important; color: #fff !important; }
body[data-theme="dark"] button.border-brand-border{ border-color: rgba(255,255,255,.1) !important; }

/* ── INLINE STYLE overrides ── */
/* Kill the white gradient backgrounds on hero cards */
body[data-theme="dark"] [style*="background: radial-gradient(circle at 90%"]{
  background: rgba(255,255,255,.03) !important;
}

/* ── Filter pills / nav pills ── */
body[data-theme="dark"] .filter-pills a,
body[data-theme="dark"] .filter-pills button{
  background: rgba(255,255,255,.05) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] .filter-pills a.is-active,
body[data-theme="dark"] .filter-pills a:hover,
body[data-theme="dark"] .filter-pills button.is-active,
body[data-theme="dark"] .filter-pills button:hover{
  background: rgba(59,130,246,.2) !important;
  color: #60a5fa !important;
  border-color: rgba(59,130,246,.4) !important;
}

/* ── Dividers inside cards ── */
body[data-theme="dark"] .divide-y > *{ border-top-color: rgba(255,255,255,.07) !important; }
body[data-theme="dark"] .py-4.space-y-2 span{ color: #64748b !important; }

/* ── Riwayat articles ── */
body[data-theme="dark"] article.brutal-card:hover{
  border-color: rgba(59,130,246,.35) !important;
  box-shadow: 0 0 24px rgba(59,130,246,.15) !important;
}
body[data-theme="dark"] article.brutal-card h3{ color: #fff !important; }
body[data-theme="dark"] article.brutal-card p{ color: #64748b !important; }

/* ── Cek transaksi result card ── */
body[data-theme="dark"] .brutal-card .font-mono.font-extrabold{ color: #60a5fa !important; }
body[data-theme="dark"] .text-brand-primary{ color: #60a5fa !important; }
body[data-theme="dark"] .bg-brand-dark{ background: rgba(59,130,246,.12) !important; }
body[data-theme="dark"] .bg-brand-dark p,
body[data-theme="dark"] .bg-brand-dark .text-3xl{ color: #fff !important; }
body[data-theme="dark"] .bg-brand-dark .text-white\/60{ color: rgba(255,255,255,.45) !important; }

/* ── Product detail price block dark ── */
body[data-theme="dark"] .rounded-2xl.bg-brand-dark{
  background: linear-gradient(135deg,rgba(59,130,246,.15),rgba(37,99,235,.1)) !important;
  border: 1px solid rgba(59,130,246,.2) !important;
  border-radius: 18px !important;
}
body[data-theme="dark"] .rounded-2xl.bg-brand-dark .text-white\/60{ color: rgba(255,255,255,.45) !important; }
body[data-theme="dark"] .rounded-2xl.bg-brand-dark .text-4xl,
body[data-theme="dark"] .rounded-2xl.bg-brand-dark .text-5xl{ color: #fff !important; }

/* ── Profil hero block ── */
body[data-theme="dark"] .rounded-2xl.bg-brand-primary{ background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important; }

/* ── Logout button ── */
body[data-theme="dark"] a[style*="background:#fff1f2"]{
  background: rgba(225,29,72,.1) !important;
  color: #f87171 !important;
  border-color: rgba(225,29,72,.2) !important;
}

/* ── Benefit boxes on product detail ── */
body[data-theme="dark"] .grid.grid-cols-3 .brutal-card.bg-white{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
body[data-theme="dark"] .grid.grid-cols-3 .brutal-card.bg-white .text-2xl{ color: #60a5fa !important; }

/* ── Payment show page ── */
body[data-theme="dark"] .aspect-square.max-w-xs{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.1) !important;
}
/* Keep QR image background white so QR is readable */
body[data-theme="dark"] .aspect-square.max-w-xs img{ background: #fff !important; border-radius: 8px; }
body[data-theme="dark"] .inline-flex.bg-brand-dark{
  background: rgba(59,130,246,.15) !important;
  border: 1px solid rgba(59,130,246,.25) !important;
  border-radius: 12px !important;
  color: #60a5fa !important;
}
body[data-theme="dark"] .text-brand-primary.text-3xl{ color: #60a5fa !important; }
body[data-theme="dark"] .brutal-yellow.mt-6{ background:rgba(234,88,12,.1)!important; border-color:#fb923c!important; color:#fdba74!important; }
body[data-theme="dark"] .brutal-green.mt-6 { background:rgba(22,163,74,.1)!important;  border-color:#22c55e!important; color:#86efac!important; }
body[data-theme="dark"] .brutal-red.mt-6   { background:rgba(225,29,72,.1)!important;  border-color:#f87171!important; color:#fca5a5!important; }

/* ── Auth (login / register) form card ── */
body[data-theme="dark"] .max-w-md .brutal-card,
body[data-theme="dark"] .max-w-md .glass-card{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
}
body[data-theme="dark"] .max-w-md h1{ color: #fff !important; }
/* Logo square */
body[data-theme="dark"] .inline-grid.bg-brand-primary{
  background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important;
  box-shadow: 0 4px 20px rgba(59,130,246,.4) !important;
}
/* Separator */
body[data-theme="dark"] .flex-1.h-px{ background: rgba(255,255,255,.08) !important; }
body[data-theme="dark"] .text-slate-400{ color: #475569 !important; }
body[data-theme="dark"] .text-slate-600 a{ color: #60a5fa !important; }

/* ── Category show page header ── */
body[data-theme="dark"] .brutal-card.flex.items-center.gap-4{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

/* ── Section separators on product detail ── */
body[data-theme="dark"] .border-t.border-brand-border{ border-top-color: rgba(255,255,255,.08) !important; }
body[data-theme="dark"] .text-slate-600.leading-relaxed{ color: #94a3b8 !important; }

/* ── Link colors ── */
body[data-theme="dark"] a{ color: inherit; }
body[data-theme="dark"] a.font-semibold.text-brand-primary,
body[data-theme="dark"] a.text-brand-primary{ color: #60a5fa !important; }
body[data-theme="dark"] a:hover.text-brand-primary{ color: #93c5fd !important; }

/* ── Glow effects ── */
body[data-theme="dark"] .glow-neon,
body[data-theme="dark"] .glow-pink,
body[data-theme="dark"] .glow-green{ box-shadow: 0 0 40px rgba(59,130,246,.2) !important; }

/* ── OR separator ── */
body[data-theme="dark"] .flex.items-center.gap-3 .text-slate-400{ color: #334155 !important; }

/* Ensure no white flash on page transitions */
body[data-theme="dark"] .page-enter{ animation-duration: .3s; }

/* ── PAYMENT / SUCCESS / FAILED pages ── */
body[data-theme="dark"] .success-icon{ color: #4ade80 !important; }
body[data-theme="dark"] .failed-icon { color: #f87171 !important; }

/* ── Headings in dark brutal-card ── */
body[data-theme="dark"] .brutal-card h1,
body[data-theme="dark"] .brutal-card h2,
body[data-theme="dark"] .brutal-card h3{ color: #fff !important; }
body[data-theme="dark"] .brutal-card p{ color: #94a3b8 !important; }

/* ── font-mono order codes ── */
body[data-theme="dark"] .font-mono{ color: #93c5fd !important; }
body[data-theme="dark"] td.font-mono{ color: #60a5fa !important; }

/* Checkout sticky aside */
body[data-theme="dark"] aside .brutal-card.bg-white{ background: rgba(255,255,255,.04) !important; }

/* Product cover banner stays dark-compatible */
body[data-theme="dark"] .product-cover-banner{
  border-color: rgba(255,255,255,.06) !important;
}

/* ── misc text colors overrides ── */
body[data-theme="dark"] .text-brand-primary.text-sm{ color: #60a5fa !important; }
body[data-theme="dark"] .uppercase.tracking-widest{ color: inherit; }

/* Fix inline style with bg-brand-dark in payment page */
body[data-theme="dark"] div.rounded-xl.bg-brand-dark{
  background: rgba(59,130,246,.12) !important;
  border: 1px solid rgba(59,130,246,.2) !important;
}

/* ── Skeleton / loading spinner on payment ── */
body[data-theme="dark"] .bg-white\/85{ background: rgba(5,8,22,.85) !important; }
body[data-theme="dark"] .border-brand-primary{ border-color: #3b82f6 !important; }

/* ── Input-wrap search ── */
body[data-theme="dark"] .input-wrap input{ color: #fff !important; }

/* Suppress leftover white backgrounds on small elements */
body[data-theme="dark"] [class*="bg-brand-surface"]{ background: rgba(255,255,255,.03) !important; }
body[data-theme="dark"] [class*="bg-brand-muted"]{ background: rgba(255,255,255,.04) !important; }

/* ── OR divider in auth ── */
body[data-theme="dark"] .my-6.flex.items-center.gap-3 .flex-1{ background: rgba(255,255,255,.08) !important; }

/* Checkout summary divider line */
body[data-theme="dark"] .pb-4.border-b{ border-bottom-color: rgba(255,255,255,.08) !important; }

/* ── QR image container stays white for readability ── */
body[data-theme="dark"] .aspect-square.max-w-xs.rounded-xl{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] .aspect-square.max-w-xs.rounded-xl img{
  background: #fff; padding: 4px; border-radius: 8px;
}

/* =====================================================================
   PREMIUM LIGHT THEME
   Applied via body[data-theme="light"]
===================================================================== */

/* Add smooth transitions for theme switching */
body {
  transition: background-color 300ms ease, color 300ms ease;
}
.brutal-card, .header-glass, .bottom-nav, .admin-sidebar, .admin-topbar,
.product-card, .flash-item, .flash-section, input, textarea, select, button {
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

/* ── Light Theme Base ── */
body[data-theme="light"] {
  background: #F8FAFC;
  color: #0F172A;
}
body[data-theme="light"] p { color: #64748b; }
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] h4 { color: #0F172A; }

body[data-theme="light"] .bg-gradient {
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(59,130,246,.08), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 5%, rgba(99,102,241,.06), transparent 55%);
}

/* ── Light Header ── */
body[data-theme="light"] .header-glass {
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
}
body[data-theme="light"] .header-glass a { color: #0F172A !important; }
body[data-theme="light"] .header-glass .text-brand-primary { color: #2563EB !important; }
body[data-theme="light"] .header-glass .text-white { color: #0F172A !important; }
body[data-theme="light"] .header-glass .text-white\/70 { color: #64748b !important; }
body[data-theme="light"] .header-glass .hover\:text-white:hover { color: #0F172A !important; }

/* ── Light Banner ── */
body[data-theme="light"] .banner-wrap {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(15,23,42,.08);
}

/* ── Light Flash Section ── */
body[data-theme="light"] .flash-section {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
  border: 1px solid #BFDBFE;
  box-shadow: 0 8px 24px rgba(37,99,235,.12);
}
body[data-theme="light"] .flash-title { color: #0F172A; }
body[data-theme="light"] .flash-countdown .seg {
  background: #2563EB;
  color: #FFFFFF;
  border: 1px solid #1D4ED8;
}

/* ── Light Flash Countdown Boxes ── */
body[data-theme="light"] .flash-countdown-boxes .cbox {
  background: #2563EB;
  border: 1px solid #1D4ED8;
}
body[data-theme="light"] .flash-countdown-boxes .cbox .cnum { color: #FFFFFF; }
body[data-theme="light"] .flash-countdown-boxes .cbox .clabel { color: rgba(255,255,255,.8); }
body[data-theme="light"] .flash-countdown-boxes .csep { color: #2563EB; }

/* ── Light Flash Item Cards ── */
body[data-theme="light"] .flash-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  box-shadow: 0 4px 16px rgba(15,23,42,.08);
}
body[data-theme="light"] .flash-item:hover {
  background: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 12px 30px rgba(37,99,235,.15);
  transform: translateY(-4px);
}
body[data-theme="light"] .flash-item .img-wrap { background: #F8FAFC; }
body[data-theme="light"] .flash-item .name { color: #0F172A; }
body[data-theme="light"] .flash-item .price-now { color: #2563EB; }
body[data-theme="light"] .flash-item .price-old { color: #94A3B8; }
body[data-theme="light"] .flash-item .flash-stock {
  background: #DBEAFE;
  color: #1D4ED8;
}

/* ── Light Section Headers ── */
body[data-theme="light"] .section-head h2 { color: #0F172A; }
body[data-theme="light"] .section-head a { color: #2563EB !important; }
body[data-theme="light"] .eyebrow { color: #2563EB; }

/* ── Light Category Cards ── */
body[data-theme="light"] .cat-card-dark {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  box-shadow: 0 2px 8px rgba(15,23,42,.06);
}
body[data-theme="light"] .cat-card-dark:hover {
  background: #EFF6FF;
  border-color: #2563EB;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,.12);
}

/* ── Light Product Horizontal Scroll ── */
body[data-theme="light"] .prod-card-h {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  box-shadow: 0 4px 16px rgba(15,23,42,.08);
}
body[data-theme="light"] .prod-card-h:hover {
  background: #FFFFFF;
  border-color: #2563EB;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(37,99,235,.15);
}
body[data-theme="light"] .prod-card-h .ph-img { background: #F8FAFC; }
body[data-theme="light"] .prod-card-h .ph-name { color: #0F172A; }
body[data-theme="light"] .prod-card-h .ph-cat { color: #64748B; }
body[data-theme="light"] .prod-card-h .ph-price { color: #2563EB; }
body[data-theme="light"] .prod-card-h .ph-old { color: #94A3B8; }
body[data-theme="light"] .prod-card-h .ph-stock {
  background: #DBEAFE;
  color: #1D4ED8;
}

/* ── Light Product Grid Cards ── */
body[data-theme="light"] .product-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  box-shadow: 0 4px 16px rgba(15,23,42,.08);
}
body[data-theme="light"] .product-card:hover {
  background: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 12px 30px rgba(37,99,235,.15);
  transform: translateY(-4px);
}
body[data-theme="light"] .product-img { background: #F8FAFC; border-bottom: 1px solid #E2E8F0; }
body[data-theme="light"] .product-img::after { background: linear-gradient(180deg, transparent, rgba(248,250,252,.7)); }
body[data-theme="light"] .product-title { color: #0F172A; }
body[data-theme="light"] .product-cat { color: #64748B; }
body[data-theme="light"] .price-main { color: #2563EB; }
body[data-theme="light"] .price-old { color: #94A3B8; }
body[data-theme="light"] .glass-info {
  background: rgba(255,255,255,.9);
  border-color: #E2E8F0;
}
body[data-theme="light"] .glass-info .brand { color: #2563EB; }

/* ── Light Buttons ── */
body[data-theme="light"] .brutal-btn {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #E2E8F0;
}
body[data-theme="light"] .brutal-btn:hover {
  background: #F8FAFC;
  border-color: #2563EB;
}
body[data-theme="light"] .brutal-btn.cta-neon {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
}
body[data-theme="light"] .brutal-btn.cta-neon:hover {
  background: linear-gradient(135deg, #1D4ED8, #2563EB);
  box-shadow: 0 6px 20px rgba(37,99,235,.45);
}

/* ── Light Bottom Nav ── */
body[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid #E2E8F0 !important;
  box-shadow: 0 -4px 20px rgba(15,23,42,.08) !important;
}
body[data-theme="light"] .bottom-nav .nav-item { color: #64748B; }
body[data-theme="light"] .bottom-nav .nav-item.is-active { color: #2563EB; }
body[data-theme="light"] .bottom-nav .nav-label { color: inherit; }

/* ── Light Cards ── */
body[data-theme="light"] .brutal-card,
body[data-theme="light"] .glass-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
}

/* ── Light Forms ── */
body[data-theme="light"] input[type=text],
body[data-theme="light"] input[type=email],
body[data-theme="light"] input[type=password],
body[data-theme="light"] input[type=tel],
body[data-theme="light"] input[type=number],
body[data-theme="light"] input[type=search],
body[data-theme="light"] textarea,
body[data-theme="light"] select,
body[data-theme="light"] .brutal-input {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder { color: #94A3B8 !important; }
body[data-theme="light"] input:focus,
body[data-theme="light"] textarea:focus,
body[data-theme="light"] select:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
  background: #F8FAFC !important;
}
body[data-theme="light"] label,
body[data-theme="light"] .field-label { color: #0F172A !important; }
body[data-theme="light"] .field-hint { color: #64748B !important; }

/* ── Light Badges ── */
body[data-theme="light"] .badge {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}
body[data-theme="light"] .badge-green,
body[data-theme="light"] .badge-success {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
body[data-theme="light"] .badge-red,
body[data-theme="light"] .badge-danger {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
body[data-theme="light"] .badge-yellow,
body[data-theme="light"] .badge-warn {
  background: #FED7AA !important;
  color: #C2410C !important;
}
body[data-theme="light"] .badge-blue,
body[data-theme="light"] .badge-info {
  background: #CFFAFE !important;
  color: #0E7490 !important;
}
body[data-theme="light"] .badge-neon {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}
body[data-theme="light"] .badge-grey,
body[data-theme="light"] .badge-muted {
  background: #F1F5F9 !important;
  color: #64748B !important;
}

/* ── Light Alert Blocks ── */
body[data-theme="light"] .brutal-red {
  background: #FEE2E2 !important;
  border-left-color: #DC2626 !important;
  color: #991B1B !important;
}
body[data-theme="light"] .brutal-yellow {
  background: #FED7AA !important;
  border-left-color: #EA580C !important;
  color: #9A3412 !important;
}
body[data-theme="light"] .brutal-green {
  background: #DCFCE7 !important;
  border-left-color: #16A34A !important;
  color: #166534 !important;
}
body[data-theme="light"] .brutal-blue {
  background: #DBEAFE !important;
  border-left-color: #2563EB !important;
  color: #1E40AF !important;
}

/* ── Light Empty State ── */
body[data-theme="light"] .empty-state {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}
body[data-theme="light"] .empty-state h3 { color: #0F172A !important; }
body[data-theme="light"] .empty-state p { color: #64748B !important; }

/* ── Light Admin Sidebar ── */
body[data-theme="light"] .admin-sidebar {
  background: #FFFFFF;
  border-right: 1px solid #E2E8F0;
}
body[data-theme="light"] .sidebar-brand { color: #0F172A; }
body[data-theme="light"] .sidebar-section-label { color: #94A3B8; }
body[data-theme="light"] .admin-sidebar .nav-link,
body[data-theme="light"] .admin-sidebar a { color: #64748B; }
body[data-theme="light"] .admin-sidebar .nav-link:hover,
body[data-theme="light"] .admin-sidebar a:hover {
  background: #F1F5F9;
  color: #0F172A;
}
body[data-theme="light"] .admin-sidebar .nav-link.is-active,
body[data-theme="light"] .admin-sidebar a.is-active {
  background: #EFF6FF;
  color: #2563EB;
  box-shadow: none;
}
body[data-theme="light"] .sidebar-footer { border-top: 1px solid #E2E8F0; }
body[data-theme="light"] .sidebar-footer .meta .name { color: #0F172A; }
body[data-theme="light"] .sidebar-footer .meta .role { color: #64748B; }
body[data-theme="light"] .admin-sidebar-drawer .panel {
  background: #FFFFFF;
}
body[data-theme="light"] .admin-sidebar-drawer .panel .nav-link { color: #64748B; }
body[data-theme="light"] .admin-sidebar-drawer .panel .nav-link.is-active {
  background: #EFF6FF;
  color: #2563EB;
}
body[data-theme="light"] .drawer-close {
  background: #F1F5F9;
  color: #0F172A;
  border-color: #E2E8F0;
}
body[data-theme="light"] .drawer-close:hover { background: #E2E8F0; }
body[data-theme="light"] .avatar {
  background: #DBEAFE;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

/* ── Light Admin Topbar ── */
body[data-theme="light"] .admin-topbar {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #E2E8F0;
}

/* ── Light Admin Stats ── */
body[data-theme="light"] .admin-stat {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
}
body[data-theme="light"] .admin-stat:hover {
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
}
body[data-theme="light"] .admin-stat .label { color: #64748B; }
body[data-theme="light"] .admin-stat .value { color: #0F172A; }
body[data-theme="light"] .admin-stat .sub { color: #94A3B8; }

/* ── Light Admin Bottom Nav ── */
body[data-theme="light"] .admin-bottom-nav {
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
}
body[data-theme="light"] .admin-bottom-nav a { color: #64748B; }
body[data-theme="light"] .admin-bottom-nav a.is-active { color: #2563EB; }

/* ── Light Status Dots ── */
body[data-theme="light"] .status-dot { background: #CBD5E1; }
body[data-theme="light"] .status-dot.green,
body[data-theme="light"] .status-dot.success { background: #22C55E; }
body[data-theme="light"] .status-dot.red,
body[data-theme="light"] .status-dot.danger { background: #EF4444; }
body[data-theme="light"] .status-dot.yellow { background: #F59E0B; }
body[data-theme="light"] .status-dot.blue { background: #3B82F6; }
body[data-theme="light"] .status-dot.grey { background: #94A3B8; }

/* ── Light Typography Overrides ── */
body[data-theme="light"] .text-slate-500,
body[data-theme="light"] .text-slate-600 { color: #64748B !important; }
body[data-theme="light"] .text-slate-400 { color: #94A3B8 !important; }
body[data-theme="light"] .text-slate-800,
body[data-theme="light"] .text-slate-900 { color: #0F172A !important; }
body[data-theme="light"] .text-brand-primary { color: #2563EB !important; }

/* ── Light Links ── */
body[data-theme="light"] a { color: inherit; }
body[data-theme="light"] a.text-brand-primary,
body[data-theme="light"] a.font-semibold.text-brand-primary { color: #2563EB !important; }
body[data-theme="light"] a:hover.text-brand-primary { color: #1D4ED8 !important; }

/* ── Light Dividers ── */
body[data-theme="light"] hr,
body[data-theme="light"] .border-brand-border { border-color: #E2E8F0 !important; }
body[data-theme="light"] .divide-y > * { border-top-color: #E2E8F0 !important; }

/* ── Light Category Grid ── */
body[data-theme="light"] .cat-grid-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 2px 12px rgba(15,23,42,.06) !important;
}
body[data-theme="light"] .cat-grid-card:hover {
  background: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.15) !important;
  transform: translateY(-2px);
}
body[data-theme="light"] .cat-grid-card h3 { color: #0F172A !important; }

/* ── Light Flash Alerts ── */
body[data-theme="light"] .flash-alert-success {
  background: #DCFCE7 !important;
  border-color: #22C55E !important;
  color: #166534 !important;
}
body[data-theme="light"] .flash-alert-error,
body[data-theme="light"] .flash-alert-danger {
  background: #FEE2E2 !important;
  border-color: #EF4444 !important;
  color: #991B1B !important;
}
body[data-theme="light"] .flash-alert-info {
  background: #DBEAFE !important;
  border-color: #3B82F6 !important;
  color: #1E40AF !important;
}

/* ── Light Body Padding ── */
body[data-theme="light"] { padding-bottom: 80px; }
@media(min-width:1024px) { body[data-theme="light"] { padding-bottom: 0; } }

/* ── Light Misc ── */
body[data-theme="light"] .font-mono { color: #1D4ED8 !important; }
body[data-theme="light"] td.font-mono { color: #2563EB !important; }
body[data-theme="light"] .bg-brand-dark {
  background: linear-gradient(135deg, #EFF6FF, #DBEAFE) !important;
  border: 1px solid #BFDBFE !important;
}
body[data-theme="light"] .bg-brand-dark p,
body[data-theme="light"] .bg-brand-dark .text-3xl,
body[data-theme="light"] .bg-brand-dark .text-4xl,
body[data-theme="light"] .bg-brand-dark .text-5xl { color: #0F172A !important; }

/* Keep QR code background white in both themes */
body[data-theme="light"] .aspect-square.max-w-xs.rounded-xl img {
  background: #fff;
  padding: 4px;
  border-radius: 8px;
}