/* ════════════════════════════════════════════════════════════
   AI PHOTO BOOTH — App-Mode Restyle (overrides ki-fotobox styles.css)
   ════════════════════════════════════════════════════════════ */

@import url("/fonts.css");

:root {
  --apb-pink: #ff2d92;
  --apb-cyan: #00d4ff;
  --apb-purple: #7c3aff;
  --apb-bg: #050508;
  --apb-bg2: #0a0a12;
  --apb-fg: #ffffff;
  --apb-fg-dim: #a0a0b0;
  --apb-border: rgba(255,255,255,0.08);
  --apb-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --apb-body: 'Barlow', system-ui, sans-serif;
  --apb-mono: 'IBM Plex Mono', 'Menlo', monospace;
}

/* Hide #landing-screen completely — it only contains legacy DE stubs for app.js */
#landing-screen {
  display: none !important;
}

/* Base background — gradient + grid behind app sections */
body.app-mode,
body.gallery-mode,
body.admin-mode,
body.checkout-success-mode {
  background: radial-gradient(circle at 20% 0%, rgba(124,58,255,0.18) 0%, transparent 45%),
              radial-gradient(circle at 80% 100%, rgba(255,45,146,0.15) 0%, transparent 45%),
              var(--apb-bg) !important;
  color: var(--apb-fg) !important;
}

body.app-mode::before,
body.gallery-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

body.app-mode .shell,
body.gallery-mode .shell {
  position: relative;
  z-index: 1;
}

/* HERO — App-Header */
body.app-mode .hero,
body.gallery-mode .hero {
  background: linear-gradient(180deg, rgba(255,45,146,0.04), rgba(0,212,255,0.02)) !important;
  border-color: var(--apb-border) !important;
}

/* TOP-LEFT BRAND — replace KI FOTOBOX wordmark SVG with APB text */
body.app-mode .stage-header__logo,
body.gallery-mode .stage-header__logo,
body.admin-mode .stage-header__logo,
body.app-mode .gx-brand__logo,
body.gallery-mode .gx-brand__logo {
  display: none !important;
}

/* Gallery view central wordmark */
body.gallery-mode .gx-brand,
body.app-mode .gx-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.gallery-mode .gx-brand::before,
body.app-mode .gx-brand::before {
  content: "AI PHOTOBOOTH";
  font-family: var(--apb-display) !important;
  font-size: 28px !important;
  letter-spacing: 0.12em !important;
  color: var(--apb-fg) !important;
  text-transform: uppercase;
}

body.app-mode .stage-header__mark,
body.gallery-mode .stage-header__mark,
body.admin-mode .stage-header__mark {
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
}

body.app-mode .stage-header__mark::before,
body.gallery-mode .stage-header__mark::before,
body.admin-mode .stage-header__mark::before {
  content: "AI PHOTOBOOTH";
  font-family: var(--apb-display) !important;
  font-size: 22px !important;
  letter-spacing: 0.12em !important;
  color: var(--apb-fg) !important;
  text-transform: uppercase;
  line-height: 1;
}

/* Hide other ki-fotobox brand bits */
body.app-mode .brand-logo,
body.gallery-mode .brand-logo {
  display: none !important;
}

body.app-mode .brand-submark,
body.gallery-mode .brand-submark {
  display: none !important;
}

/* Hero badge */
body.app-mode .hero__badge {
  font-family: var(--apb-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--apb-pink) !important;
  background: rgba(255,45,146,0.08) !important;
  border: 1px solid rgba(255,45,146,0.3) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

/* HERO HEADING "Wähle deinen Look." / "Choose your look." → Bebas Neue solid+outline */
body.app-mode .ns-hero__title,
body.gallery-mode .ns-hero__title,
body.app-mode .ns-h2-stage,
body.gallery-mode .ns-h2-stage,
body.app-mode .hero h1,
body.gallery-mode .hero h1 {
  font-family: var(--apb-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(56px, 8vw, 128px) !important;
  letter-spacing: 0.02em !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  color: var(--apb-fg) !important;
  background: none !important;
  -webkit-text-fill-color: var(--apb-fg) !important;
}

/* Akzent-Wort (em inside ns-hero__title — z.B. "Look.") → Cyan glow + outline-Style */
body.app-mode .ns-hero__title em,
body.gallery-mode .ns-hero__title em {
  font-family: var(--apb-display) !important;
  font-style: normal !important;
  -webkit-text-stroke: 2px var(--apb-pink) !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 30px rgba(255,45,146,0.4) !important;
  letter-spacing: 0.02em !important;
}

body.app-mode .ns-h2-stage::after,
body.gallery-mode .ns-h2-stage::after {
  display: none;
}

body.app-mode .hero__copy {
  font-family: var(--apb-body) !important;
  color: var(--apb-fg-dim) !important;
  font-size: 14px !important;
}

/* Chips */
body.app-mode .hero-chip {
  font-family: var(--apb-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: rgba(0,212,255,0.06) !important;
  border: 1px solid rgba(0,212,255,0.2) !important;
  color: var(--apb-cyan) !important;
}

/* Primary buttons */
body.app-mode .button--primary,
body.gallery-mode .button--primary {
  background: var(--apb-pink) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--apb-mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.app-mode .button--primary:hover {
  background: #ff4fa1 !important;
  box-shadow: 0 0 20px rgba(255,45,146,0.4) !important;
}

/* Style card hover/selected */
body.app-mode .style-card:hover,
body.gallery-mode .style-card:hover {
  border-color: var(--apb-cyan) !important;
  box-shadow: 0 0 24px rgba(0,212,255,0.25) !important;
}

body.app-mode .style-card.is-selected,
body.gallery-mode .style-card.is-selected {
  border-color: var(--apb-pink) !important;
  box-shadow: 0 0 24px rgba(255,45,146,0.3) !important;
}

/* Topbar */
body.app-mode .topbar {
  background: rgba(10,10,18,0.85) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--apb-border) !important;
}

/* Random Look button */
body.app-mode .random-pick,
body.gallery-mode .random-pick {
  background: linear-gradient(90deg, rgba(124,58,255,0.1), rgba(0,212,255,0.08)) !important;
  border: 1px solid rgba(0,212,255,0.25) !important;
  color: var(--apb-cyan) !important;
  font-family: var(--apb-mono) !important;
  letter-spacing: 0.08em !important;
}

/* Stats indicator top-right */
body.app-mode .topbar > div:first-child,
body.gallery-mode .topbar > div:first-child {
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--apb-fg-dim) !important;
  text-transform: uppercase;
}

/* Old ki-fotobox brand wordmark override */
body.app-mode [class*="ns-brand"],
body.gallery-mode [class*="ns-brand"] {
  font-family: var(--apb-display) !important;
  font-style: normal !important;
  font-size: 22px !important;
  letter-spacing: 0.1em !important;
}

/* Booth-waiting screen — pink/cyan instead of orange */
.booth-waiting__ring {
  border: 4px solid rgba(0, 212, 255, 0.12) !important;
  border-top-color: var(--apb-pink) !important;
  border-right-color: var(--apb-cyan) !important;
  box-shadow: 0 0 50px rgba(255, 45, 146, 0.35) !important;
}
.booth-waiting__eyebrow {
  color: var(--apb-cyan) !important;
  font-family: var(--apb-mono) !important;
}
.booth-waiting__title {
  font-family: var(--apb-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--apb-fg) !important;
}
.booth-waiting__copy {
  color: var(--apb-fg-dim) !important;
  font-family: var(--apb-body) !important;
}
.booth-waiting__progress-bar {
  background: linear-gradient(90deg, var(--apb-pink), var(--apb-cyan)) !important;
}
.booth-waiting__status {
  color: var(--apb-fg-dim) !important;
  font-family: var(--apb-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
}

/* CSS pseudo-content overrides (where JS can't reach) */
body.gallery-mode .gx-compare:not(.is-touched) .gx-compare__handle::before,
body.app-mode .gx-compare:not(.is-touched) .gx-compare__handle::before {
  content: "← drag" !important;
}

/* "KI-generiert" badge inside compare slider */
body.gallery-mode .gx-compare__after-label,
body.app-mode .gx-compare__after-label {
  font-size: 0;
}
body.gallery-mode .gx-compare__after-label::before,
body.app-mode .gx-compare__after-label::before {
  content: "AI-generated";
  font-size: 10px;
  letter-spacing: 0.1em;
}

/* ════════════════════════════════════════════════════════════
   LANDING PAGE HERO — restore 2-col grid
   styles.css has .hero { display: flex } which loads after inline
   style and overrides the grid. Fix here since app-restyle.css
   loads AFTER styles.css.
   ════════════════════════════════════════════════════════════ */
body:not(.app-mode):not(.admin-mode):not(.gallery-mode):not(.checkout-success-mode) .hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 4rem !important;
  padding: 7rem 5vw 5rem !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: none !important;
  border: none !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

body:not(.app-mode):not(.admin-mode):not(.gallery-mode):not(.checkout-success-mode) .hero .hero-text {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.app-mode):not(.admin-mode):not(.gallery-mode):not(.checkout-success-mode) .hero .hero-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 960px) {
  body:not(.app-mode):not(.admin-mode):not(.gallery-mode):not(.checkout-success-mode) .hero {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 3rem !important;
    padding: 8rem 5vw 5rem !important;
  }
  body:not(.app-mode):not(.admin-mode):not(.gallery-mode):not(.checkout-success-mode) .hero .hero-visual {
    order: -1 !important;
  }
}

@media (max-width: 680px) {
  body:not(.app-mode):not(.admin-mode):not(.gallery-mode):not(.checkout-success-mode) .hero {
    padding: 6rem 1.4rem 4rem !important;
    gap: 2rem !important;
  }
}

/* ════════════════════════════════════════════════════════════
   AI-VISUAL MOCKUPS — Inhalt für die leeren How-It-Works Frames
   ════════════════════════════════════════════════════════════ */

/* ── Frame 1: Dashboard Mockup ── */
.dash-mock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 60px;
  gap: 10px;
  pointer-events: none;
}
.dash-mock__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--apb-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-transform: uppercase;
}
.dash-mock__live {
  color: var(--apb-pink, #ff2d92);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.dash-mock__live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--apb-pink, #ff2d92);
  box-shadow: 0 0 6px var(--apb-pink, #ff2d92);
  animation: dashLivePulse 1.4s ease-in-out infinite;
}
@keyframes dashLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.dash-mock__styles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.dash-mock__tile {
  aspect-ratio: 1;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(255,45,146,0.55), rgba(124,58,255,0.35));
  border: 1px solid transparent;
  position: relative;
}
.dash-mock__tile:nth-child(4n+2) {
  background: linear-gradient(135deg, rgba(0,212,255,0.55), rgba(124,58,255,0.35));
}
.dash-mock__tile:nth-child(4n+3) {
  background: linear-gradient(135deg, rgba(255,45,146,0.45), rgba(0,212,255,0.35));
}
.dash-mock__tile:nth-child(4n+4) {
  background: linear-gradient(135deg, rgba(124,58,255,0.55), rgba(0,212,255,0.35));
}
.dash-mock__tile.sel {
  border-color: var(--apb-cyan, #00d4ff);
  box-shadow: 0 0 8px rgba(0,212,255,0.55), inset 0 0 4px rgba(0,212,255,0.3);
}
.dash-mock__tile.sel::after {
  content: '✓';
  position: absolute;
  top: 0px; right: 3px;
  font-size: 8px;
  color: var(--apb-cyan, #00d4ff);
  font-weight: 900;
  text-shadow: 0 0 4px rgba(0,212,255,0.8);
}
.dash-mock__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dash-mock__qr {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.95);
  padding: 3px;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(0,212,255,0.4);
}
.dash-mock__qr svg { display: block; width: 100%; height: 100%; }
.dash-mock__meta {
  font-family: var(--apb-mono, monospace);
  font-size: 8px;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
}
.dash-mock__meta b { color: var(--apb-cyan, #00d4ff); font-weight: 600; }

/* ── Frame 2: Processing Mockup ── */
.proc-mock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 14px 60px;
  pointer-events: none;
}
.proc-mock__viz {
  position: relative;
  width: 62%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.proc-mock__ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,212,255,0.3);
  border-radius: 50%;
}
.proc-mock__ring--mid {
  inset: 12%;
  border-color: rgba(255,45,146,0.4);
  animation: procRing 2.4s ease-in-out infinite;
}
.proc-mock__ring--inner {
  inset: 26%;
  border: 1px dashed rgba(0,212,255,0.55);
  animation: procRingSpin 8s linear infinite;
}
@keyframes procRing {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes procRingSpin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.proc-mock__face {
  width: 48%;
  fill: none;
  stroke: var(--apb-pink, #ff2d92);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 6px rgba(255,45,146,0.7));
  position: relative;
  z-index: 2;
}
.proc-mock__bar {
  width: 78%;
  height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.proc-mock__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 73%;
  background: linear-gradient(90deg, var(--apb-pink, #ff2d92), var(--apb-cyan, #00d4ff));
  box-shadow: 0 0 10px rgba(255,45,146,0.55);
  animation: procFill 4s ease-in-out infinite;
}
@keyframes procFill {
  0%, 100% { width: 60%; }
  50%      { width: 88%; }
}
.proc-mock__pct {
  margin-top: 8px;
  font-family: var(--apb-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--apb-cyan, #00d4ff);
  text-shadow: 0 0 8px rgba(0,212,255,0.5);
  font-weight: 700;
}

/* Mobile — leichte Anpassungen */
@media (max-width: 480px) {
  .dash-mock { padding: 12px 12px 48px; gap: 7px; }
  .dash-mock__header { font-size: 8px; }
  .dash-mock__qr { width: 46px; height: 46px; }
  .dash-mock__meta { font-size: 7px; }
  .proc-mock { padding: 12px 12px 48px; }
  .proc-mock__pct { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   ADMIN BOARD RESTYLE — Pink/Cyan/Bebas Neue Cyber-Theme
   ════════════════════════════════════════════════════════════ */

/* Layout container & shells */
body.admin-mode .admin-shell,
body.admin-mode .admin-main,
body.admin-mode .admin-workspace,
body.admin-mode .admin-event-workspace {
  background: transparent !important;
  color: var(--apb-fg) !important;
  font-family: var(--apb-body) !important;
}

body.admin-mode .admin-topbar {
  background: rgba(10,10,18,0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--apb-border) !important;
  color: var(--apb-fg) !important;
}

body.admin-mode .admin-sidebar,
body.admin-mode .admin-event-list-side,
body.admin-mode .admin-event-detail-side {
  background: rgba(10,10,18,0.6) !important;
  border-right: 1px solid var(--apb-border) !important;
  backdrop-filter: blur(12px);
}

body.admin-mode .admin-sidebar-backdrop {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(4px);
}

/* Page titles → Bebas Neue */
body.admin-mode .admin-page-title,
body.admin-mode .admin-page-head-dashboard,
body.admin-mode .admin-event-list-side__title {
  font-family: var(--apb-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
  color: var(--apb-fg) !important;
  text-transform: uppercase !important;
}

/* Cards / panels */
body.admin-mode .admin-create,
body.admin-mode .admin-package,
body.admin-mode .admin-chart-card,
body.admin-mode .admin-insights,
body.admin-mode .admin-pane,
body.admin-mode .admin-editor,
body.admin-mode .admin-funnel-table,
body.admin-mode .admin-action-inbox,
body.admin-mode .admin-activity-feed,
body.admin-mode .admin-system-status,
body.admin-mode .admin-mini-charts,
body.admin-mode .admin-live-cards,
body.admin-mode .admin-dashboard-recent {
  background: linear-gradient(180deg, rgba(10,10,18,0.85), rgba(10,10,18,0.7)) !important;
  border: 1px solid var(--apb-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 24px rgba(255,45,146,0.06), 0 0 60px rgba(0,212,255,0.04) !important;
  color: var(--apb-fg) !important;
}

/* Mini-stat headers (chart-card head, total) */
body.admin-mode .admin-chart-card__head {
  font-family: var(--apb-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--apb-cyan) !important;
}

body.admin-mode .admin-chart-card__total,
body.admin-mode .admin-revenue-total,
body.admin-mode .admin-styles-total,
body.admin-mode .admin-traffic-total,
body.admin-mode .admin-funnel-overall,
body.admin-mode .admin-sessions-total {
  font-family: var(--apb-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--apb-fg) !important;
  font-size: clamp(1.6rem, 3vw, 2.8rem) !important;
  line-height: 1 !important;
}

/* Health indicator + dots */
body.admin-mode .admin-health-strip {
  background: rgba(10,10,18,0.6) !important;
  border: 1px solid var(--apb-border) !important;
}
body.admin-mode .admin-health-dot {
  background: var(--apb-pink) !important;
  box-shadow: 0 0 8px var(--apb-pink) !important;
  animation: adminDotPulse 1.6s ease-in-out infinite;
}
@keyframes adminDotPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Navigation items */
body.admin-mode .admin-nav-item {
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--apb-fg-dim) !important;
  border: 1px solid transparent !important;
  transition: all 0.18s ease;
}
body.admin-mode .admin-nav-item:hover,
body.admin-mode .admin-nav-item.is-active,
body.admin-mode .admin-nav-item[aria-current="page"] {
  color: var(--apb-cyan) !important;
  background: rgba(0,212,255,0.08) !important;
  border-color: rgba(0,212,255,0.3) !important;
}
body.admin-mode .admin-nav-item__label {
  font-family: inherit !important;
}

/* Tabs */
body.admin-mode .admin-tabs {
  border-bottom: 1px solid var(--apb-border) !important;
}
body.admin-mode .admin-tab {
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--apb-fg-dim) !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
body.admin-mode .admin-tab:hover {
  color: var(--apb-cyan) !important;
}
body.admin-mode .admin-tab.is-active,
body.admin-mode .admin-tab[aria-selected="true"] {
  color: var(--apb-pink) !important;
  border-bottom-color: var(--apb-pink) !important;
  background: rgba(255,45,146,0.06) !important;
}

/* Pills (filter / status) */
body.admin-mode .admin-event-filter-pills .admin-pill-btn,
body.admin-mode .admin-pill-btn {
  font-family: var(--apb-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--apb-fg-dim) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  transition: all 0.18s ease;
}
body.admin-mode .admin-pill-btn:hover {
  border-color: rgba(0,212,255,0.4) !important;
  color: var(--apb-cyan) !important;
}
body.admin-mode .admin-pill-btn.is-active,
body.admin-mode .admin-pill-btn[aria-pressed="true"] {
  background: rgba(255,45,146,0.15) !important;
  border-color: var(--apb-pink) !important;
  color: var(--apb-pink) !important;
}

/* Buttons — login / logout / refresh / pill action */
body.admin-mode .admin-login-button,
body.admin-mode .admin-logout-button,
body.admin-mode .admin-refresh-button,
body.admin-mode .admin-event-back-btn,
body.admin-mode .admin-event-detail-back__btn,
body.admin-mode .admin-abandoned-refresh,
body.admin-mode .admin-shipping-refresh,
body.admin-mode .admin-trials-refresh,
body.admin-mode .admin-aff-create,
body.admin-mode .admin-voucher-create {
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 10px 18px !important;
  transition: all 0.18s ease !important;
  cursor: pointer;
}
body.admin-mode .admin-login-button,
body.admin-mode .admin-aff-create,
body.admin-mode .admin-voucher-create {
  background: var(--apb-pink) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(255,45,146,0.4) !important;
}
body.admin-mode .admin-login-button:hover,
body.admin-mode .admin-aff-create:hover,
body.admin-mode .admin-voucher-create:hover {
  background: #ff4fa1 !important;
  box-shadow: 0 0 30px rgba(255,45,146,0.6) !important;
  transform: translateY(-1px);
}
body.admin-mode .admin-logout-button,
body.admin-mode .admin-refresh-button,
body.admin-mode .admin-event-back-btn,
body.admin-mode .admin-event-detail-back__btn,
body.admin-mode .admin-abandoned-refresh,
body.admin-mode .admin-shipping-refresh,
body.admin-mode .admin-trials-refresh {
  background: transparent !important;
  color: var(--apb-cyan) !important;
  border: 1px solid var(--apb-cyan) !important;
}
body.admin-mode .admin-logout-button:hover,
body.admin-mode .admin-refresh-button:hover,
body.admin-mode .admin-event-back-btn:hover,
body.admin-mode .admin-event-detail-back__btn:hover {
  background: rgba(0,212,255,0.08) !important;
  box-shadow: 0 0 16px rgba(0,212,255,0.3) !important;
}

/* Inputs / search / password */
body.admin-mode .admin-password,
body.admin-mode .admin-event-search,
body.admin-mode .admin-orders-search,
body.admin-mode .admin-sessions-search,
body.admin-mode .admin-looks-search,
body.admin-mode .admin-aff-name,
body.admin-mode .admin-aff-email,
body.admin-mode .admin-aff-code,
body.admin-mode .admin-aff-pct,
body.admin-mode .admin-voucher-email,
body.admin-mode .admin-voucher-value,
body.admin-mode .admin-voucher-note,
body.admin-mode .admin-event-name,
body.admin-mode .admin-image-limit,
body.admin-mode .admin-orders-status,
body.admin-mode .admin-sessions-status,
body.admin-mode .admin-looks-sort,
body.admin-mode .admin-settings-content input,
body.admin-mode .admin-settings-content select,
body.admin-mode .admin-settings-content textarea {
  background: rgba(10,10,18,0.6) !important;
  border: 1px solid var(--apb-border) !important;
  border-radius: 4px !important;
  color: var(--apb-fg) !important;
  font-family: var(--apb-body) !important;
  padding: 10px 14px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
body.admin-mode .admin-password:focus,
body.admin-mode .admin-event-search:focus,
body.admin-mode .admin-orders-search:focus,
body.admin-mode .admin-sessions-search:focus,
body.admin-mode .admin-looks-search:focus,
body.admin-mode .admin-aff-name:focus,
body.admin-mode .admin-aff-email:focus,
body.admin-mode .admin-aff-code:focus,
body.admin-mode .admin-aff-pct:focus,
body.admin-mode .admin-voucher-email:focus,
body.admin-mode .admin-voucher-value:focus,
body.admin-mode .admin-voucher-note:focus,
body.admin-mode .admin-event-name:focus,
body.admin-mode .admin-image-limit:focus {
  outline: none !important;
  border-color: var(--apb-cyan) !important;
  box-shadow: 0 0 16px rgba(0,212,255,0.25) !important;
}

/* Tables */
body.admin-mode .admin-table,
body.admin-mode .admin-funnel-table table {
  background: transparent !important;
  color: var(--apb-fg) !important;
  border-collapse: collapse !important;
}
body.admin-mode .admin-table th,
body.admin-mode .admin-funnel-table th {
  font-family: var(--apb-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--apb-cyan) !important;
  border-bottom: 1px solid rgba(0,212,255,0.25) !important;
  padding: 12px 10px !important;
  background: rgba(0,212,255,0.04) !important;
}
body.admin-mode .admin-table td,
body.admin-mode .admin-funnel-table td {
  border-bottom: 1px solid var(--apb-border) !important;
  padding: 10px !important;
  font-family: var(--apb-body) !important;
}
body.admin-mode .admin-table tr:hover,
body.admin-mode .admin-funnel-table tr:hover {
  background: rgba(255,45,146,0.04) !important;
}

/* Looks-Grid (style picker) */
body.admin-mode .admin-looks-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}
body.admin-mode .admin-looks-grid > * {
  border: 1px solid var(--apb-border) !important;
  border-radius: 4px !important;
  overflow: hidden;
  background: rgba(10,10,18,0.5) !important;
  transition: all 0.2s ease;
}
body.admin-mode .admin-looks-grid > *:hover {
  border-color: var(--apb-cyan) !important;
  box-shadow: 0 0 16px rgba(0,212,255,0.3) !important;
  transform: translateY(-2px);
}
body.admin-mode .admin-looks-grid > *.is-selected,
body.admin-mode .admin-looks-grid > *[data-selected="true"] {
  border-color: var(--apb-pink) !important;
  box-shadow: 0 0 18px rgba(255,45,146,0.4) !important;
}
body.admin-mode .admin-looks-count {
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--apb-cyan) !important;
}

/* Mini stat boxes (abandoned, shipping, sessions, trials, duration) */
body.admin-mode .admin-abandoned-stats,
body.admin-mode .admin-shipping-stats,
body.admin-mode .admin-trials-stats,
body.admin-mode .admin-duration-stats {
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--apb-fg-dim) !important;
}
body.admin-mode .admin-abandoned-stats strong,
body.admin-mode .admin-shipping-stats strong,
body.admin-mode .admin-trials-stats strong {
  color: var(--apb-cyan) !important;
  font-family: var(--apb-display) !important;
  font-weight: 400 !important;
  font-size: 1.4em !important;
  letter-spacing: 0.02em !important;
}

/* Toast / drawer */
body.admin-mode .admin-toast-host > * {
  background: rgba(10,10,18,0.95) !important;
  border: 1px solid var(--apb-cyan) !important;
  border-radius: 4px !important;
  color: var(--apb-fg) !important;
  font-family: var(--apb-mono) !important;
  font-size: 12px !important;
  box-shadow: 0 0 28px rgba(0,212,255,0.3) !important;
}
body.admin-mode .admin-drawer-host > * {
  background: linear-gradient(180deg, rgba(10,10,18,0.97), rgba(5,5,12,0.97)) !important;
  border-left: 1px solid var(--apb-border) !important;
  color: var(--apb-fg) !important;
  backdrop-filter: blur(20px);
}

/* Login screen */
body.admin-mode .admin-login {
  background: rgba(10,10,18,0.9) !important;
  border: 1px solid var(--apb-border) !important;
  border-radius: 4px !important;
  padding: 32px !important;
  box-shadow: 0 0 50px rgba(255,45,146,0.15), 0 0 100px rgba(0,212,255,0.08) !important;
}
body.admin-mode .admin-login-feedback {
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--apb-fg-dim) !important;
}

/* Dashboard grid spacing */
body.admin-mode .admin-dashboard-grid,
body.admin-mode .admin-grid,
body.admin-mode .admin-insights__grid {
  gap: 16px !important;
}

/* Mobile menu toggle */
body.admin-mode .admin-mobile-menu {
  background: transparent !important;
  border: 1px solid var(--apb-border) !important;
  color: var(--apb-cyan) !important;
}

/* Filter bar */
body.admin-mode .admin-filterbar {
  background: rgba(10,10,18,0.5) !important;
  border: 1px solid var(--apb-border) !important;
  border-radius: 4px !important;
  padding: 12px !important;
}

/* Price / cents display */
body.admin-mode .admin-price {
  font-family: var(--apb-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--apb-pink) !important;
}

/* Empty states */
body.admin-mode .admin-events.empty,
body.admin-mode .admin-editor.empty {
  color: var(--apb-fg-dim) !important;
  font-family: var(--apb-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}