/* ═══════════════════════════════════════════════════════════════════════
   admin.css — Owner Console
   Phase map inside this file:
     [Phase 19 ✅] — Admin Login (Focus Shell)         .al-*
     [Phase 20 ✅] — Admin Shell (sidebar + topbar)    .ad-*  .cmd-*
     [Phase 21 ✅] — Orders Board (kanban)             .ok-*
     [Legacy]     — Old CSS retained for Phase 22-27  .spreadsheet-* .customizer-* .theme-swatch etc.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ok-blue:     var(--color-accent);
  --ok-emerald:  var(--color-success);
  /* [Phase 6 ✅] Stays a fixed violet ON PURPOSE. This is the *shipping* order
     status (`.ok-lane[data-status="shipping"]`, `.pt-status-pill.tease`).
     Order state is encoded by hue, so if it followed the merchant's accent
     every lane would turn the same colour and the board would stop
     communicating. Decorative violet is NOT exempt — see .ok-kpi-violet. */
  --ok-violet:   #7C3AED;
  --ok-amber:    var(--color-warning);
  --ok-rose:     var(--color-destructive);
  --ok-cyan:     var(--color-accent);
  --ok-sky:      var(--color-accent);

  --ad-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ad-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ad-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
}
html[data-theme="light"] {
  --ok-blue:     var(--color-accent);
  --ok-emerald:  var(--color-success);
  /* [Phase 6 ✅] Stays a fixed violet ON PURPOSE. This is the *shipping* order
     status (`.ok-lane[data-status="shipping"]`, `.pt-status-pill.tease`).
     Order state is encoded by hue, so if it followed the merchant's accent
     every lane would turn the same colour and the board would stop
     communicating. Decorative violet is NOT exempt — see .ok-kpi-violet. */
  --ok-violet:   #7C3AED;
  --ok-amber:    var(--color-warning);
  --ok-rose:     var(--color-destructive);
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 19 ✅] Admin Login — Focus Shell
   Utilitarian yet premium: aurora backdrop, orbital shield, spring inputs
   ══════════════════════════════════════════════════════════════════════ */
.al-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #04091A;
  display: flex;   /* show by default; admin.js flips to none after successful auth check */
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow: hidden;
  isolation: isolate;
  transition: opacity 320ms var(--ad-ease-out);
}
html[data-theme="light"] .al-overlay {
  /* Even in light mode session the admin login stays intentionally dark */
  background: #0A1226;
  color: #ECF1FF;
}

/* Aurora backdrop */
.al-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.al-mesh {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  filter: blur(24px) saturate(115%);
}
.al-mesh-1 { transform-origin: 30% 20%; animation: al-drift-1 22s ease-in-out infinite alternate; }
.al-mesh-2 { transform-origin: 80% 85%; animation: al-drift-2 28s ease-in-out infinite alternate; }
.al-mesh-3 { transform-origin: 65% 10%; animation: al-drift-3 34s ease-in-out infinite alternate; }
@keyframes al-drift-1 { 0% { transform: translate(0,0)   scale(1);    } 100% { transform: translate(6%, 4%)  scale(1.15); } }
@keyframes al-drift-2 { 0% { transform: translate(0,0)   scale(1.05); } 100% { transform: translate(-5%,-6%) scale(1.2);  } }
@keyframes al-drift-3 { 0% { transform: translate(0,0)   scale(1);    } 100% { transform: translate(-8%, 4%) scale(1.1);  } }

/* Faint grid overlay for depth */
.al-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(96, 165, 250, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
  opacity: 0.9;
}

/* Card */
.al-card {
  position: relative;
  width: min(460px, 100%);
  padding: 40px 34px 30px;
  background: linear-gradient(180deg, rgba(14, 29, 62, 0.72) 0%, rgba(8, 18, 42, 0.85) 100%);
  border: var(--border-thin) solid rgba(148, 163, 184, 0.12);
  border-radius: 24px;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 30px 60px -20px rgba(2, 6, 23, 0.55),
    0 20px 40px -10px rgba(15, 30, 70, 0.4),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
  color: #ECF1FF;
  animation: al-card-in 620ms var(--ad-ease-spring) both;
}
.al-card-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(94, 106, 210, 0.28), rgba(34, 211, 238, 0.16) 60%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.6;
  filter: blur(0.5px);
}
@keyframes al-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Brand hero */
.al-brand { text-align: center; margin-bottom: 26px; }
.al-shield-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
}
.al-shield-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.al-shield-ring-1 { animation: al-ring-spin 18s linear infinite; }
.al-shield-ring-2 { animation: al-ring-spin 14s linear infinite reverse; }
@keyframes al-ring-spin { to { transform: rotate(360deg); } }

.al-shield-core {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #C7D6FF;
  background: radial-gradient(circle at 30% 30%, rgba(94, 106, 210, 0.6) 0%, rgba(59, 130, 246, 0.35) 40%, rgba(15, 30, 70, 0.9) 100%);
  border: var(--border-thin) solid rgba(140, 165, 255, 0.35);
  box-shadow:
    0 0 24px rgba(94, 106, 210, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: al-shield-breath 4.2s ease-in-out infinite;
}
@keyframes al-shield-breath {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 24px rgba(94, 106, 210, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  50%      { transform: scale(1.04); box-shadow: 0 0 34px rgba(94, 106, 210, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
}

.al-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(94, 106, 210, 0.14);
  border: var(--border-thin) solid rgba(140, 165, 255, 0.2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6562rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #A5B4FC;
  margin-bottom: 14px;
}
.al-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px #22D3EE;
  animation: al-eye-pulse 1.6s ease-in-out infinite;
}
@keyframes al-eye-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.al-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #F8FAFF;
  margin: 0 0 8px;
  line-height: 1.15;
}
.al-sub {
  font-size: 0.875rem;
  font-weight: 500;
  color: #94A3B8;
  line-height: 1.55;
  max-width: 34ch;
  margin: 0 auto;
}

/* Form fields */
.al-form { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.al-field { display: flex; flex-direction: column; gap: 8px; }
.al-field > label {
  font-size: 0.7812rem;
  font-weight: 700;
  color: #A5B4FC;
  letter-spacing: 0.02em;
  margin-inline-start: 2px;
}
.al-field-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(4, 9, 26, 0.55);
  border: 1.5px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  transition:
    border-color 220ms var(--ad-ease-out),
    background-color 220ms var(--ad-ease-out),
    transform 220ms var(--ad-ease-out);
}
.al-field-shell:hover  { border-color: rgba(148, 163, 184, 0.3); }
.al-field-shell:focus-within {
  border-color: var(--color-accent);
  background: rgba(4, 9, 26, 0.75);
  transform: translateY(-1px);
}
.al-field-shell:focus-within .al-field-icon { color: #A5B4FC; transform: scale(1.08); }
.al-field-shell:focus-within .al-field-ring { opacity: 1; transform: scale(1); }

.al-field-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #7090B5;
  transition: color 220ms var(--ad-ease-out), transform 320ms var(--ad-ease-spring);
}
.al-field-shell input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #F8FAFF;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.al-field-shell input::placeholder { color: #486080; font-weight: 500; }
/* [Phase 28] The admin login scene is deliberately dark even in a light-mode
   session (Phase 19), so it can't use the theme-derived autofill colours from
   common.css — those resolve to #FFFFFF here and Chrome painted a white box of
   black text inside the dark field. Pinned to the login card's own palette. */
.al-field-shell input:-webkit-autofill,
.al-field-shell input:-webkit-autofill:hover,
.al-field-shell input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F8FAFF;
  -webkit-box-shadow: 0 0 0 1000px #0A1024 inset;
  box-shadow: 0 0 0 1000px #0A1024 inset;
  caret-color: #F8FAFF;
}
.al-field-ring {
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(94, 106, 210, 0.22);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 240ms var(--ad-ease-out), transform 240ms var(--ad-ease-out);
}

.al-eye {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #7090B5;
  cursor: pointer;
  transition: color 180ms, background 180ms;
}
.al-eye:hover { color: #A5B4FC; background: rgba(94, 106, 210, 0.12); }
.al-eye .al-eye-hide { display: none; }
.al-eye.is-showing .al-eye-show { display: none; }
.al-eye.is-showing .al-eye-hide { display: block; }
.al-eye svg { width: 18px; height: 18px; }

/* Submit */
.al-submit {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 22px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 55%, var(--color-accent) 130%);
  border: none;
  border-radius: 14px;
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow:
    0 12px 24px -8px rgba(94, 106, 210, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition:
    transform 220ms var(--ad-ease-spring),
    box-shadow 220ms var(--ad-ease-out),
    filter 220ms var(--ad-ease-out);
}
.al-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 18px 32px -8px rgba(94, 106, 210, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.al-submit:active { transform: translateY(0); filter: brightness(0.96); }
.al-submit-fx {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
}
.al-submit:hover .al-submit-fx { animation: al-shine 900ms var(--ad-ease-out); }
@keyframes al-shine { to { transform: translateX(100%); } }
.al-submit-arrow {
  width: 18px;
  height: 18px;
  transition: transform 240ms var(--ad-ease-spring);
}
.al-submit:hover .al-submit-arrow { transform: translateX(4px); }

.al-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: var(--border-thin) dashed rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  font-size: 0.7812rem;
  color: #7090B5;
  background: rgba(4, 9, 26, 0.35);
  width: 100%;
  justify-content: center;
}
.al-hint strong { color: #A5B4FC; font-weight: 700; letter-spacing: 0.03em; }
.al-hint svg { color: var(--color-accent); flex-shrink: 0; }

/* Phone tweak */
@media (max-width: 480px) {
  .al-card { padding: 32px 22px 22px; border-radius: 22px; }
  .al-title { font-size: 1.35rem; }
  .al-sub { font-size: 0.82rem; }
}

/* Reduced motion — kill the aurora */
@media (prefers-reduced-motion: reduce) {
  .al-mesh-1, .al-mesh-2, .al-mesh-3,
  .al-shield-ring-1, .al-shield-ring-2,
  .al-shield-core, .al-eyebrow-dot,
  .al-submit-fx { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 20 ✅] Admin Shell — Sidebar + Topbar + Command Palette
   ══════════════════════════════════════════════════════════════════════ */
.ad-shell {
  --ad-sidebar-w: 264px;
  --ad-sidebar-rail-w: 76px;
  --ad-topbar-h: 64px;
  --ad-collapse-dur: 380ms;
  /* Admin-only: borders across the console were reading as invisible — strengthen
     the shared token here so every panel/table/toolbar that reads var(--card-border)
     picks it up, without touching the customer storefront's theme-driven border. */
  --card-border: color-mix(in srgb, var(--color-border-strong) 42%, transparent);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--ad-sidebar-w) 1fr;
  background: var(--color-background);
  color: var(--color-text-default);
  transition: grid-template-columns var(--ad-collapse-dur) var(--ad-ease-spring);
}
html[data-collapsed="1"] .ad-shell { grid-template-columns: var(--ad-sidebar-rail-w) 1fr; }
html[data-theme="light"] .ad-shell { --card-border: color-mix(in srgb, var(--color-border-strong) 32%, transparent); }

/* Admin-only bolder baseline: body copy 500→600, form labels 700, no change to storefront. */
.ad-shell p, .ad-shell li, .ad-shell td, .ad-shell span, .ad-shell input, .ad-shell textarea, .ad-shell button {
  font-weight: 700;
}
.ad-shell label, .ad-shell th, .ad-shell .phase-kicker {
  font-weight: 700;
}
.ad-shell h1, .ad-shell h2, .ad-shell h3, .ad-shell h4 {
  font-weight: 800;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.ad-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-background) 80%, var(--color-surface)) 100%);
  border-inline-end: var(--border-thin) solid var(--color-border-subtle);
  overflow: hidden;
  z-index: 50;
}

.ad-sidebar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 16px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  transition:
    flex-direction var(--ad-collapse-dur) var(--ad-ease-spring),
    padding var(--ad-collapse-dur) var(--ad-ease-spring),
    gap var(--ad-collapse-dur) var(--ad-ease-spring);
}
/* Collapsed: stack head vertically so the collapse button doesn't crowd the brand glyph */
html[data-collapsed="1"] .ad-sidebar-head {
  flex-direction: column;
  gap: 8px;
  padding: 14px 8px 12px;
}
.ad-brand-mark {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
html[data-collapsed="1"] .ad-brand-mark { flex: 0 0 auto; }
.ad-brand-glyph {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 22%, transparent);
  border-radius: 12px;
}
.ad-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 200px;
  overflow: hidden;
  transition:
    max-width var(--ad-collapse-dur) var(--ad-ease-spring),
    opacity 200ms var(--ad-ease-out);
}
.ad-brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--color-foreground);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-brand-role {
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}
html[data-collapsed="1"] .ad-brand-text { opacity: 0; pointer-events: none; max-width: 0; }

.ad-collapse-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 8px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    color 200ms var(--ad-ease-out),
    border-color 200ms var(--ad-ease-out),
    background-color 200ms var(--ad-ease-out);
}
.ad-collapse-btn:hover {
  color: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  background: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
}
.ad-collapse-btn svg { transition: transform 380ms var(--ad-ease-spring); }
html[data-collapsed="1"] .ad-collapse-btn svg { transform: rotate(180deg); }
html[dir="rtl"] .ad-collapse-btn svg { transform: rotate(180deg); }
html[dir="rtl"][data-collapsed="1"] .ad-collapse-btn svg { transform: rotate(0deg); }
/* Collapsed: give the button breathing room in the vertical stack */
html[data-collapsed="1"] .ad-collapse-btn { width: 34px; height: 30px; }

/* Nav */
.ad-nav {
  flex: 1;
  /* A flex item defaults to min-height:auto, which refuses to shrink below its
     content — so overflow-y:auto never engaged and the nav was clipped by the
     sidebar's overflow:hidden instead of scrolling. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 8px;
}
.ad-nav::-webkit-scrollbar { width: 6px; }
.ad-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-foreground) 22%, transparent); border-radius: 999px; }
.ad-nav::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-foreground) 38%, transparent); }
.ad-nav-group-label {
  padding: 14px 12px 6px;
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  max-height: 28px;
  transition:
    max-height var(--ad-collapse-dur) var(--ad-ease-spring),
    padding var(--ad-collapse-dur) var(--ad-ease-spring),
    opacity 180ms var(--ad-ease-out);
}
html[data-collapsed="1"] .ad-nav-group-label { opacity: 0; max-height: 12px; padding: 8px 0 0; }

.ad-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-align: start;
  transition:
    background-color 200ms var(--ad-ease-out),
    color 200ms var(--ad-ease-out),
    padding var(--ad-collapse-dur) var(--ad-ease-spring),
    justify-content 0ms;
}
.ad-nav-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-brand-accent);
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 280ms var(--ad-ease-spring), opacity 200ms;
}
.ad-nav-item:hover { color: var(--color-text-default); background: color-mix(in srgb, var(--color-brand-accent) 4%, transparent); }
.ad-nav-item:hover .ad-nav-icon { color: var(--color-brand-accent); }
.ad-nav-item.active {
  color: var(--color-foreground);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-brand-accent) 14%, transparent) 0%, color-mix(in srgb, var(--color-brand-accent) 2%, transparent) 100%);
}
.ad-nav-item.active::before { transform: scaleY(1); opacity: 1; }
.ad-nav-item.active .ad-nav-icon { color: var(--color-brand-accent); }

/* External-link nav item — never activates, hosts a subtle arrow indicator */
.ad-nav-item-external { text-decoration: none; margin-top: 6px; }
.ad-nav-item-external::before { display: none; }
.ad-nav-external {
  margin-inline-start: auto;
  color: var(--color-text-subtle);
  transition: transform 220ms var(--ad-ease-spring), color 200ms;
}
.ad-nav-item-external:hover .ad-nav-external { color: var(--color-brand-accent); transform: translate(2px, -2px); }
html[data-collapsed="1"] .ad-nav-external { display: none; }

.ad-nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  transition: color 200ms;
}
.ad-nav-icon svg { width: 20px; height: 20px; }
.ad-nav-label {
  flex: 1;
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition:
    max-width var(--ad-collapse-dur) var(--ad-ease-spring),
    opacity 180ms var(--ad-ease-out);
}
html[data-collapsed="1"] .ad-nav-label { opacity: 0; max-width: 0; }
html[data-collapsed="1"] .ad-nav-item { justify-content: center; padding: 12px 8px; }

.ad-nav-badge {
  flex-shrink: 0;
  min-width: 22px;
  max-width: 80px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand-accent) 20%, transparent);
  color: var(--color-brand-accent);
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  overflow: hidden;
  transition:
    max-width var(--ad-collapse-dur) var(--ad-ease-spring),
    padding var(--ad-collapse-dur) var(--ad-ease-spring),
    opacity 180ms var(--ad-ease-out);
}
.ad-nav-item.active .ad-nav-badge {
  background: var(--color-brand-accent);
  color: var(--color-on-accent);
}
html[data-collapsed="1"] .ad-nav-badge { opacity: 0; max-width: 0; min-width: 0; padding: 0; margin: 0; }

/* Collapsed tooltip */
html[data-collapsed="1"] .ad-nav-item:hover::after {
  content: attr(title);
  position: absolute;
  inset-inline-start: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 8px;
  color: var(--color-foreground);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-3);
  pointer-events: none;
  z-index: 100;
}

/* Sidebar foot */
.ad-sidebar-foot {
  border-top: var(--border-thin) solid var(--color-border-subtle);
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ad-side-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-brand-accent) 4%, transparent);
  border: var(--border-thin) dashed color-mix(in srgb, var(--color-brand-accent) 25%, transparent);
  border-radius: 10px;
  color: var(--color-text-muted);
  font-size: 0.7188rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 180ms, background 180ms, color 180ms,
    padding var(--ad-collapse-dur) var(--ad-ease-spring);
}
.ad-side-tip:hover { color: var(--color-foreground); border-style: solid; border-color: var(--color-brand-accent); }
.ad-side-tip svg { color: var(--color-brand-accent); flex-shrink: 0; }
.ad-side-tip-label {
  overflow: hidden;
  white-space: nowrap;
  max-width: 240px;
  opacity: 1;
  transition:
    max-width var(--ad-collapse-dur) var(--ad-ease-spring),
    opacity 180ms var(--ad-ease-out);
}
html[data-collapsed="1"] .ad-side-tip-label { max-width: 0; opacity: 0; }
.ad-side-tip kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin: 0 2px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-foreground);
}
html[data-collapsed="1"] .ad-side-tip { justify-content: center; padding: 10px 6px; gap: 0; }

.ad-side-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 180ms, color 180ms,
    padding var(--ad-collapse-dur) var(--ad-ease-spring);
}
.ad-side-btn svg { flex-shrink: 0; width: 18px; height: 18px; }
.ad-side-btn:hover { background: color-mix(in srgb, var(--color-destructive) 6%, transparent); color: var(--color-destructive); }
.ad-side-btn-danger:hover svg { color: var(--color-destructive); }
.ad-side-btn span {
  max-width: 240px;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width var(--ad-collapse-dur) var(--ad-ease-spring),
    opacity 180ms var(--ad-ease-out);
}
html[data-collapsed="1"] .ad-side-btn span { max-width: 0; opacity: 0; }
html[data-collapsed="1"] .ad-side-btn { justify-content: center; padding: 12px 8px; gap: 0; }

/* Off-canvas backdrop (phone only) */
.ad-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ad-ease-out);
  z-index: 45;
}
.ad-sidebar-backdrop.active { opacity: 1; pointer-events: auto; }

/* ── Main + Topbar ─────────────────────────────────────────────────── */
.ad-main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.ad-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--ad-topbar-h);
  padding: 0 clamp(16px, 2.5vw, 28px);
  display: flex;
  align-items: center;
  gap: 16px;
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}
.ad-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 10px;
  color: var(--color-text-default);
  cursor: pointer;
  place-items: center;
}
.ad-menu-btn svg { width: 20px; height: 20px; }

.ad-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ad-crumb-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 0.7812rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 180ms, color 180ms;
}
.ad-crumb-home:hover { background: color-mix(in srgb, var(--color-brand-accent) 6%, transparent); color: var(--color-brand-accent); }
.ad-crumb-sep { color: var(--color-text-subtle); flex-shrink: 0; }
.ad-crumb-current {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-foreground);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-search-trigger {
  flex: 1;
  max-width: 420px;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--color-brand-accent) 4%, transparent);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 10px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: text;
  transition: all 200ms var(--ad-ease-out);
}
.ad-search-trigger:hover {
  border-color: color-mix(in srgb, var(--color-brand-accent) 40%, transparent);
  color: var(--color-text-default);
  background: color-mix(in srgb, var(--color-brand-accent) 7%, transparent);
}
.ad-search-trigger > svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-text-muted); }
.ad-search-hint { flex: 1; text-align: start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ad-search-kbd { display: inline-flex; gap: 2px; flex-shrink: 0; }
.ad-search-kbd kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  color: var(--color-foreground);
}

/* Topbar actions */
.ad-topbar-actions { display: flex; align-items: center; gap: 10px; }
.ad-clock-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--ok-emerald) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--ok-emerald) 20%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ok-emerald);
  letter-spacing: 0.02em;
}
.ad-clock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok-emerald);
  box-shadow: 0 0 6px var(--ok-emerald);
  animation: ad-pulse 2s ease-in-out infinite;
}
@keyframes ad-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.ad-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 10px;
  color: var(--color-text-default);
  cursor: pointer;
  transition: all 200ms var(--ad-ease-out);
}
.ad-icon-btn:hover { border-color: var(--color-brand-accent); color: var(--color-brand-accent); background: color-mix(in srgb, var(--color-brand-accent) 6%, transparent); }
.ad-icon-btn svg { width: 18px; height: 18px; }
/* ─── [Phase 11 ✅] Language toggle ───────────────────────────────────────
   Labelled rather than icon-only (skill §9 `nav-label-icon`): a globe glyph
   alone does not say which language you are about to get. The label always
   renders in the target script, so it is legible to whoever needs it. */
.ad-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  background: transparent;
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 10px;
  color: var(--color-text-default);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: var(--weight-label, 700);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 200ms var(--ad-ease-out);
}
.ad-lang-btn:hover {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
  background: color-mix(in srgb, var(--color-brand-accent) 6%, transparent);
}
.ad-lang-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* The label is the one string on the page that is deliberately NOT in the
   active language, so it must carry its own script's font rather than
   inheriting the other one's stack. */
.ad-lang-text { font-family: var(--font-ui, inherit); }

.ad-notif-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok-rose);
  border: 2px solid var(--color-background);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ok-rose) 60%, transparent);
}

.ad-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  background: color-mix(in srgb, var(--color-brand-accent) 6%, transparent);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 999px;
  transition: all 200ms;
}
.ad-user-chip:hover { border-color: color-mix(in srgb, var(--color-brand-accent) 40%, transparent); }
.ad-user-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 100%);
  color: var(--color-on-accent);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.ad-user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.ad-user-name { font-size: 0.7812rem; font-weight: 800; color: var(--color-foreground); }
.ad-user-role { font-family: var(--font-mono); font-size: 0.5938rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }

/* Content */
.ad-content {
  flex: 1;
  padding: clamp(16px, 2.5vw, 32px);
  min-width: 0;
}
/* [Phase 13 ✅] Canonical visually-hidden: 1px, not 0. A zero-sized box is
   dropped from the accessibility tree by some engines, which would take the
   console's only <h1> ("Dashboard", hydrated with the shop name) with it. */
.ad-hidden-hydration { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tab-content.ad-tab { display: none; animation: ad-tab-in 340ms var(--ad-ease-out) both; }
.tab-content.ad-tab.active { display: block; }
@keyframes ad-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Responsive: sidebar off-canvas on tablet & phone */
@media (max-width: 1023.98px) {
  .ad-shell { grid-template-columns: 1fr; }
  html[data-collapsed="1"] .ad-shell { grid-template-columns: 1fr; }
  .ad-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 288px;
    transform: translateX(-104%);
    box-shadow: 24px 0 48px -12px rgba(2, 6, 23, 0.4);
    transition: transform 320ms var(--ad-ease-spring);
  }
  /* [Phase 12] The open state MUST match the closed state's specificity.
     `html[dir="rtl"] .ad-sidebar` scores 0-2-1 and `.ad-sidebar.active`
     only 0-2-0, so under RTL the closed transform kept winning and the
     navigation drawer never slid in — an Arabic merchant on a phone could
     not reach any section of their own dashboard. Both directions are now
     stated symmetrically at equal weight.
     A logical translation would be neater, but `translateX` is physical by
     definition; the pair below is the honest way to express it. */
  html[dir="ltr"] .ad-sidebar { transform: translateX(-104%); }
  html[dir="rtl"] .ad-sidebar { transform: translateX(104%); }
  html[dir="ltr"] .ad-sidebar.active,
  html[dir="rtl"] .ad-sidebar.active { transform: translateX(0); }
  .ad-menu-btn { display: grid; }
  .ad-collapse-btn { display: none; }
  .ad-search-trigger { max-width: none; }
}
/* [Phase 13 ✅] The `(pointer: coarse)` clause is the landscape-phone case:
   at 812px wide the width clause stops matching, the user chip's name+role
   block reappears, and the topbar action row ran 14px past the right edge.
   Capped at 950px so a real tablet in landscape keeps the meta. */
@media (max-width: 767.98px), (pointer: coarse) and (max-width: 950px) {
  .ad-search-hint { display: none; }
  .ad-search-trigger { max-width: 200px; }
  .ad-user-meta { display: none; }
  .ad-clock-chip { display: none; }
}
@media (max-width: 480px) {
  /* [Phase 13 ✅] Raising every topbar control to the 44px touch floor made the
     row 360px wide — fine at 375, 40px past the edge at 320. Nothing is
     dropped: the gutter and the gaps give instead, so a merchant on a small
     phone keeps the menu, search, language, theme, notifications and account
     controls, all still thumb-sized. */
  .ad-topbar {
    padding-inline-start: max(8px, env(safe-area-inset-left));
    padding-inline-end: max(8px, env(safe-area-inset-right));
    gap: 6px;
  }
  .ad-topbar-actions { gap: 4px; }
  .ad-search-trigger { max-width: 44px; padding: 8px; }
  .ad-search-kbd { display: none; }
  .ad-crumb-current { font-size: 0.9rem; }
  .ad-crumb-home span { display: none; }
  /* [Phase 11] Drop to the glyph on the narrowest phones, but keep the control
     itself — language is not an advanced setting to bury behind a menu. The
     accessible name survives in aria-label. */
  .ad-lang-btn { padding: 0 10px; gap: 0; }
  .ad-lang-text { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 20 ✅] Command Palette
   Native <dialog> with fuzzy search, spring open, list nav
   ══════════════════════════════════════════════════════════════════════ */
.cmd-dialog {
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  max-width: min(600px, 92vw);
  width: 100%;
  margin: auto;
  top: 12vh;
  color: var(--color-text-default);
}
.cmd-dialog::backdrop {
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: cmd-back-in 260ms var(--ad-ease-out) both;
}
@keyframes cmd-back-in { from { opacity: 0; } to { opacity: 1; } }
.cmd-dialog[open] .cmd-form { animation: cmd-form-in 360ms var(--ad-ease-spring) both; }
@keyframes cmd-form-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

.cmd-form {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 18px;
  box-shadow: 0 32px 64px -16px rgba(2, 6, 23, 0.55), 0 20px 40px -12px rgba(2, 6, 23, 0.4);
  overflow: hidden;
}
.cmd-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}
.cmd-search svg { color: var(--color-brand-accent); flex-shrink: 0; }
.cmd-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
}
.cmd-search input::placeholder { color: var(--color-text-muted); }
.cmd-esc {
  display: inline-grid;
  place-items: center;
  padding: 3px 8px;
  background: var(--color-surface-pop);
  border: var(--border-thin) solid var(--color-border-default);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.cmd-list {
  list-style: none;
  padding: 8px;
  margin: 0;
  max-height: 52vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms, transform 200ms var(--ad-ease-out);
}
.cmd-item.is-active { background: color-mix(in srgb, var(--color-brand-accent) 14%, transparent); }
.cmd-item.is-active .cmd-item-arrow { opacity: 1; transform: translateX(0); }
.cmd-item-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-brand-accent) 8%, transparent);
  border-radius: 8px;
  color: var(--color-brand-accent);
}
.cmd-item-icon svg { width: 16px; height: 16px; }
.cmd-item-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cmd-item-label { font-weight: 600; font-size: 0.92rem; color: var(--color-foreground); }
.cmd-item-hint { font-size: 0.7188rem; color: var(--color-text-muted); }
.cmd-item-kbd {
  display: inline-grid;
  place-items: center;
  padding: 2px 7px;
  background: var(--color-surface-pop);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  color: var(--color-text-muted);
}
.cmd-item-arrow {
  opacity: 0;
  transform: translateX(-4px);
  color: var(--color-brand-accent);
  transition: all 200ms var(--ad-ease-spring);
}

.cmd-group-label {
  padding: 12px 12px 4px;
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.cmd-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.cmd-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: var(--border-thin) solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  font-size: 0.7188rem;
  color: var(--color-text-muted);
}
.cmd-hint { display: inline-flex; align-items: center; gap: 6px; }
.cmd-hint kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-surface-pop);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-foreground);
}
.cmd-hint-brand { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0.1em; color: var(--color-text-subtle); }

/* ══════════════════════════════════════════════════════════════════════
   [Phase 21 ✅] Orders Board — Kanban
   5 lanes with distinct accents, draggable cards, spring drops
   ══════════════════════════════════════════════════════════════════════ */

/* Section header */
.ok-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 22px;
}
.ok-title-wrap { flex: 1; min-width: 260px; }
.ok-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 22%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-brand-accent);
  margin-bottom: 10px;
}
.ok-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok-emerald);
  box-shadow: 0 0 8px var(--ok-emerald);
  animation: ad-pulse 1.6s ease-in-out infinite;
}
.ok-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 800;
  color: var(--color-foreground);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.ok-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.ok-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Filter chip group with sliding indicator */
.ok-filter-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 10px;
}
.ok-filter-chip {
  position: relative;
  z-index: 2;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 0.7812rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 200ms var(--ad-ease-out);
}
.ok-filter-chip:hover { color: var(--color-text-default); }
.ok-filter-chip.active { color: var(--color-foreground); }
.ok-filter-slider {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  left: 0;
  background: color-mix(in srgb, var(--color-brand-accent) 16%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 30%, transparent);
  border-radius: 7px;
  transition: transform 320ms var(--ad-ease-spring), width 320ms var(--ad-ease-spring);
  pointer-events: none;
}

.ok-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.7812rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms var(--ad-ease-out);
}
.ok-btn svg { flex-shrink: 0; }
.ok-btn-outline {
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  color: var(--color-text-default);
}
.ok-btn-outline:hover {
  border-color: var(--color-brand-accent);
  color: var(--color-brand-accent);
  background: color-mix(in srgb, var(--color-brand-accent) 6%, transparent);
}
.ok-btn-ghost {
  background: color-mix(in srgb, var(--ok-amber) 6%, transparent);
  border: var(--border-thin) dashed color-mix(in srgb, var(--ok-amber) 40%, transparent);
  color: var(--ok-amber);
}
.ok-btn-ghost:hover { background: color-mix(in srgb, var(--ok-amber) 12%, transparent); border-style: solid; }
.ok-btn-ghost svg { animation: ok-refresh-spin-hover 0ms; }
.ok-btn-ghost:hover svg { animation: ok-refresh-spin-hover 800ms var(--ad-ease-spring); }
@keyframes ok-refresh-spin-hover { to { transform: rotate(360deg); } }

/* KPI row */
.ok-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 14px;
  margin-bottom: 26px;
}
.ok-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 14px;
  transition: transform 260ms var(--ad-ease-out), border-color 200ms, box-shadow 200ms;
}
.ok-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 40%;
  background: var(--kpi-accent, var(--color-brand-accent));
  border-radius: 0 3px 3px 0;
  transition: width 280ms var(--ad-ease-spring);
}
.ok-kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kpi-accent, var(--color-brand-accent)) 30%, transparent); box-shadow: var(--shadow-2); }
.ok-kpi:hover::before { width: 100%; }
.ok-kpi-blue    { --kpi-accent: var(--ok-blue); }
.ok-kpi-emerald { --kpi-accent: var(--ok-emerald); }
.ok-kpi-violet  { --kpi-accent: var(--color-info); }   /* [Phase 6] variety, not status — follows the theme */

.ok-kpi-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--kpi-accent) 12%, transparent);
  color: var(--kpi-accent);
}
.ok-kpi-icon svg { width: 24px; height: 24px; }
.ok-kpi-body { flex: 1; min-width: 0; }
.ok-kpi-label {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ok-kpi-value {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--color-foreground);
  margin-top: 4px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.ok-kpi-spark {
  flex-shrink: 0;
  width: 64px;
  height: 22px;
  color: var(--kpi-accent);
  opacity: 0.7;
}
@media (max-width: 1439.98px) {
  .ok-kpi-spark { display: none; }        /* tight desktop: prioritise the number over sparkline */
}
.ok-kpi-mini {
  padding: 18px 20px;
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border: var(--border-thin) dashed var(--color-border-default);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.ok-mini-head { display: inline-flex; align-items: center; gap: 6px; }
.ok-mini-label { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-text-subtle); }
.ok-mini-icon { width: 13px; height: 13px; color: var(--color-text-subtle); flex-shrink: 0; }
.ok-mini-value { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--color-foreground); letter-spacing: 0.02em; }

@media (max-width: 1279.98px) {
  .ok-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .ok-kpi-mini { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .ok-kpi-row { grid-template-columns: 1fr; }
  .ok-kpi-spark { display: none; }
}

/* Kanban board — at xl (≥1280) all 5 lanes fit as a grid; below xl each lane
   snap-scrolls one at a time so lane content stays legible. Sidebar remains
   visible from lg upward per PLAN §4.5.5. */
.ok-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  min-height: 60vh;
}
@media (max-width: 1279.98px) {
  .ok-board {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    scrollbar-color: var(--color-border-default) transparent;
    gap: 12px;
  }
  .ok-lane {
    flex: 0 0 min(300px, 82vw);
    scroll-snap-align: start;
  }
}

/* Lane */
.ok-lane {
  --lane-accent: var(--color-brand-accent);
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: calc(100dvh - 200px);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 200ms var(--ad-ease-out), background 200ms;
}
.ok-lane[data-status="pending"]   { --lane-accent: var(--ok-blue); }
.ok-lane[data-status="shipping"]  { --lane-accent: var(--ok-violet); }
.ok-lane[data-status="completed"] { --lane-accent: var(--ok-emerald); }
.ok-lane[data-status="stalled"]   { --lane-accent: var(--ok-amber); }
.ok-lane[data-status="cancelled"] { --lane-accent: var(--ok-rose); }

.ok-lane.is-drop-target {
  border-color: var(--lane-accent);
  background: color-mix(in srgb, var(--lane-accent) 8%, transparent);
}
.ok-lane.is-drop-target .ok-lane-head { background: color-mix(in srgb, var(--lane-accent) 20%, transparent); }

/* Lane header — 2 rows at narrow widths: [icon + title + count] / [total pill] */
.ok-lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--lane-accent) 10%, transparent);
  position: relative;
  flex-wrap: wrap;
  row-gap: 4px;
}
.ok-lane-head::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  right: 0;
  height: 3px;
  background: var(--lane-accent);
  opacity: 0.85;
}
.ok-lane-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--lane-accent) 20%, transparent);
  color: var(--lane-accent);
}
.ok-lane-icon svg { width: 16px; height: 16px; }
.ok-lane-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-foreground);
  letter-spacing: -0.01em;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ok-lane-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--lane-accent);
  color: var(--color-on-accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ok-lane-total {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 3px 8px;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 999px;
  flex-basis: 100%;                 /* wrap to its own row when the header runs out of horizontal space */
  text-align: center;
  order: 5;
}
@media (min-width: 1600px) {
  .ok-lane-total { flex-basis: auto; text-align: start; }   /* enough room for inline */
}

.ok-lane-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
/* When a lane has only an empty state, center it vertically */
.ok-lane-body:has(> .ok-lane-empty:only-child) { justify-content: center; align-items: stretch; }

/* Empty state */
.ok-lane-empty {
  margin: 10px;
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-subtle);
  border: 1.5px dashed var(--color-border-default);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-background) 30%, transparent);
}
.ok-lane-empty svg {
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  color: color-mix(in srgb, var(--lane-accent) 60%, transparent);
  opacity: 0.85;
}
.ok-lane-empty-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* Order card */
.ok-card {
  --card-accent: var(--lane-accent);
  position: relative;
  padding: 12px 12px 12px 16px;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 12px;
  cursor: grab;
  overflow: hidden;
  flex-shrink: 0;                        /* prevent flex-column shrink; overflow:hidden would otherwise collapse min-height:auto to 0 and squash the card */
  animation: ok-card-in 320ms var(--ad-ease-spring) both;
  transition:
    transform 200ms var(--ad-ease-out),
    border-color 200ms,
    box-shadow 200ms var(--ad-ease-out);
}
.ok-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--card-accent);
  border-radius: 0 3px 3px 0;
}
.ok-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--card-accent) 40%, transparent);
  box-shadow: var(--shadow-2);
}
.ok-card:active { cursor: grabbing; }
.ok-card.is-dragging {
  opacity: 0.42;
  transform: rotate(2deg);
  box-shadow: var(--shadow-4);
}
@keyframes ok-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.ok-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ok-card-id {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  padding: 2px 6px;
  background: color-mix(in srgb, var(--color-brand-accent) 6%, transparent);
  border-radius: 5px;
  cursor: pointer;
  transition: color 160ms;
}
.ok-card-id:hover { color: var(--color-brand-accent); }
.ok-card-time {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.ok-card-menu-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.ok-card-menu-btn:hover { background: color-mix(in srgb, var(--card-accent) 12%, transparent); color: var(--card-accent); }
.ok-card-menu-btn svg { width: 14px; height: 14px; }

.ok-card-customer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ok-card-platform {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--color-surface-raised) 100%, transparent);
  border: var(--border-thin) solid var(--color-border-subtle);
}
.ok-card-platform svg { width: 14px; height: 14px; }
.ok-card-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--color-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ok-card-phone {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.ok-card-items {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--color-background) 55%, transparent);
  border-radius: 8px;
  border: var(--border-thin) solid var(--color-border-subtle);
}
.ok-card-items svg { flex-shrink: 0; color: var(--card-accent); }
.ok-card-items-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-default);
}
.ok-card-items-list {
  flex: 1;
  min-width: 0;
  font-size: 0.7188rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ok-card-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: var(--border-thin) dashed var(--color-border-subtle);
}
.ok-card-total {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--card-accent);
  letter-spacing: 0.01em;
}
.ok-card-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ok-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ok-card-badge svg { width: 10px; height: 10px; }
.ok-card-badge-gift     { background: color-mix(in srgb, var(--ok-rose) 12%, transparent); color: var(--ok-rose); }
.ok-card-badge-discount { background: color-mix(in srgb, var(--ok-emerald) 12%, transparent); color: var(--ok-emerald); }

.ok-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.ok-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--color-surface-raised) 100%, transparent);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: default;
}
.ok-card-tag-del {
  padding: 0;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--color-text-subtle);
  cursor: pointer;
  border-radius: 3px;
}
.ok-card-tag-del:hover { color: var(--ok-rose); }
.ok-card-tag-add {
  padding: 2px 8px;
  background: transparent;
  border: var(--border-thin) dashed var(--color-border-default);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.ok-card-tag-add:hover { color: var(--color-brand-accent); border-color: var(--color-brand-accent); }

.ok-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ok-card-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--color-background) 55%, transparent);
  border: var(--border-thin) solid var(--color-border-subtle);
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-default);
  text-decoration: none;
  cursor: pointer;
  transition: all 180ms var(--ad-ease-out);
}
.ok-card-action:hover { border-color: var(--card-accent); color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 6%, transparent); }
.ok-card-action svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Quick actions popover */
.ok-quick-menu {
  position: fixed;
  z-index: 200;
  min-width: 200px;
  padding: 6px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(2, 6, 23, 0.4);
  opacity: 0;
  transform: scale(0.94) translateY(-4px);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 180ms var(--ad-ease-out), transform 220ms var(--ad-ease-spring);
}
.ok-quick-menu.active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.ok-quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--color-text-default);
  cursor: pointer;
  text-align: start;
  transition: background 140ms;
}
.ok-quick-item:hover { background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent); color: var(--color-brand-accent); }
.ok-quick-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.ok-quick-item.is-danger:hover { background: color-mix(in srgb, var(--ok-rose) 12%, transparent); color: var(--ok-rose); }
.ok-quick-sep { height: 1px; background: var(--color-border-subtle); margin: 4px 0; }

/* Skeleton state (initial load) */
.ok-lane-skel .ok-card-skel {
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-surface) 70%, var(--color-surface-raised)) 50%, var(--color-surface) 100%);
  background-size: 200% 100%;
  animation: ok-skel 1.4s linear infinite;
  margin-bottom: 10px;
}
@keyframes ok-skel { to { background-position: -200% 0; } }

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ok-kpi, .ok-card, .ok-lane { transition: none; }
  .ok-card { animation: none; }
  .ok-btn-ghost:hover svg { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   [Legacy] Old shell styles kept for Phase 22-27 tab-content sections
   These will be replaced when each phase gets its own rebuild
   ══════════════════════════════════════════════════════════════════════ */

/* Old admin-container (kept for tab-content children only, no longer wraps) */
.admin-container { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.admin-header { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 0; border-bottom: 1.5px solid var(--card-border); margin-bottom: 2rem; }
@media (min-width: 768px) { .admin-header { flex-direction: row; justify-content: space-between; align-items: center; } }
.admin-title-area h1 { font-size: 2.25rem; }
.admin-actions { display: flex; gap: 0.75rem; align-items: center; }

/* stats-grid (used by Phase 27 newsletter still) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { padding: 1.5rem; border-radius: var(--radius-md); }
.stat-val { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 800; color: var(--accent-color, var(--color-brand-accent)); margin-top: 0.5rem; }

/* Customizer split */
.customizer-split { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 992px) { .customizer-split { grid-template-columns: 1fr 380px; } }
.customizer-form { padding: 2rem; border-radius: var(--radius-lg); }
.preset-preview-box { padding: 2rem; border-radius: var(--radius-lg); display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1.5px dashed var(--card-border); position: sticky; top: 2rem; }

/* Spreadsheet tables */
.spreadsheet-container { overflow-x: auto; border-radius: var(--radius-md); border: 1.5px solid var(--card-border); background: var(--card-bg); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; }
.spreadsheet-table { width: 100%; border-collapse: collapse; text-align: start; font-size: 0.9rem; }
.spreadsheet-table th { background: var(--bg-tertiary); color: var(--text-primary); font-weight: 700; padding: 1rem; border-bottom: 2px solid var(--card-border); font-family: var(--font-heading); }
.spreadsheet-table td { padding: 1rem; border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 4%, transparent); color: var(--text-secondary); vertical-align: middle; }
.spreadsheet-table tbody tr:hover { background: color-mix(in srgb, var(--color-foreground) 2%, transparent); }

/* Status pills (still used elsewhere) */
.status-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.status-pill.pending   { background: rgba(147, 51, 234, 0.15); color: #c084fc; }
.status-pill.shipping  { background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-accent); }
.status-pill.completed { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.status-pill.stalled   { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }

/* Preset grid */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.preset-img-btn { background: var(--bg-tertiary); border: 2px solid transparent; border-radius: var(--radius-md); padding: 0.25rem; cursor: pointer; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: all var(--transition-fast, 150ms); }
.preset-img-btn svg { width: 100%; height: 100%; }
.preset-img-btn:hover { border-color: var(--card-border); }
.preset-img-btn.active { border-color: var(--accent-color); background: rgba(var(--accent-color-rgb), 0.05); }

/* Contact links */
.contact-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-primary); text-decoration: none; font-weight: 700; transition: color var(--transition-fast, 150ms); }
.contact-link:hover { color: var(--accent-color); }

/* Order tag badges (used by admin.js still — legacy renderer path) */
.order-tags-list { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.order-tag-badge { background: color-mix(in srgb, var(--color-foreground) 6%, transparent); color: var(--text-secondary); font-size: 0.7rem; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 0.25rem; }
.order-tag-badge button { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; line-height: 1; }
.order-tag-badge button:hover { color: var(--color-destructive); }

/* Dev card */
.dev-card { border: var(--border-thin) dashed var(--accent-color); background: rgba(var(--accent-color-rgb), 0.02); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* Theme picker */

/* ══════════════════════════════════════════════════════════════════════
   [Phase 22 ✅] Products Console — pt-* toolbar/table, pe-* editor drawer, pm-* media
   Match: Modern Dark (Cinema Mobile) — spring physics var(--ad-ease-spring)
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --pt-row-h: 76px;
  --pt-thumb: 56px;
  --pe-drawer-w: 520px;
}

/* ─── Section shell ─── */
#products-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px 0 40px;
  animation: pt-fade-in 380ms var(--ad-ease-spring) both;
}
@keyframes pt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Header ─── */
.pt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.pt-header-copy { display: flex; flex-direction: column; gap: 10px; }
.pt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding: 6px 12px;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-radius: 999px;
  width: max-content;
}
.pt-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.9);
  animation: pt-eyebrow-pulse 2s ease-in-out infinite;
}
@keyframes pt-eyebrow-pulse {
  50% { opacity: 0.4; transform: scale(0.85); }
}
.pt-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2vw + 0.8rem, 1.9rem);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
.pt-sub {
  font-size: 0.8438rem;
  color: var(--text-muted);
  font-weight: 500;
  margin: 0;
}
.pt-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8438rem;
  border-radius: 12px;
  border: var(--border-thin) solid transparent;
  cursor: pointer;
  transition: all 220ms var(--ad-ease-spring);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.pt-btn > svg { width: 16px; height: 16px; flex-shrink: 0; }
.pt-btn-ghost {
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  color: var(--text-secondary);
  border-color: var(--card-border);
}
.pt-btn-ghost:hover {
  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--color-border-strong) 24%, transparent);
  transform: translateY(-1px);
}
.pt-btn-primary {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 55%, var(--color-accent) 100%);
  color: var(--color-on-accent);
  padding-inline-end: 22px;
  box-shadow:
    0 6px 18px -6px rgba(59, 130, 246, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.pt-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--color-foreground) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ad-ease-spring);
}
.pt-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px -8px rgba(59, 130, 246, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pt-btn-primary:hover::after { transform: translateX(120%); }
.pt-btn-danger {
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  color: var(--color-destructive);
  border-color: color-mix(in srgb, var(--color-destructive) 28%, transparent);
}
.pt-btn-danger:hover {
  background: color-mix(in srgb, var(--color-destructive) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-destructive) 42%, transparent);
}

/* ─── KPI strip ─── */
.pt-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pt-kpi {
  position: relative;
  padding: 16px 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-foreground) 2%, transparent), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  transition: border-color 260ms var(--ad-ease-spring), transform 260ms var(--ad-ease-spring);
}
.pt-kpi:hover {
  border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
  transform: translateY(-2px);
}
.pt-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--kpi-accent, var(--ok-blue));
  opacity: 0.5;
  transform-origin: bottom;
  transition: transform 260ms var(--ad-ease-spring), opacity 260ms;
}
.pt-kpi:hover::before { opacity: 1; transform: scaleY(1.08); }
.pt-kpi-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--kpi-accent) 14%, transparent);
  color: var(--kpi-accent);
  border-radius: 12px;
  flex-shrink: 0;
}
.pt-kpi-icon svg { width: 20px; height: 20px; }
.pt-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-kpi-val {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pt-kpi-label {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pt-kpi-blue     { --kpi-accent: var(--ok-blue); }
.pt-kpi-emerald  { --kpi-accent: var(--ok-emerald); }
.pt-kpi-amber    { --kpi-accent: var(--ok-amber); }
.pt-kpi-violet   { --kpi-accent: var(--color-info); }   /* [Phase 6] variety, not status — follows the theme */

/* ─── Search + filter toolbar ─── */
.pt-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px 10px 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-foreground) 2%, transparent), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  flex-wrap: wrap;
}
.pt-search {
  flex: 1 1 300px;
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 8px;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  border: var(--border-thin) solid transparent;
  border-radius: 12px;
  transition: all 220ms var(--ad-ease-spring);
}
.pt-search:focus-within {
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}
.pt-search svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.pt-search:focus-within svg { color: var(--ok-blue); }
.pt-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.8438rem;
  color: var(--text-primary);
  padding: 10px 0;
  min-width: 0;
}
.pt-search input::placeholder { color: var(--text-muted); font-weight: 500; }
.pt-search kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 600;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  border-radius: 6px;
}

.pt-chip-group {
  display: inline-flex;
  padding: 3px;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  position: relative;
}
.pt-chip {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7812rem;
  cursor: pointer;
  border-radius: 9px;
  transition: color 220ms var(--ad-ease-spring);
  white-space: nowrap;
}
.pt-chip:hover { color: var(--text-secondary); }
.pt-chip.is-active { color: var(--text-primary); }
.pt-chip-slider {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px;
  left: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 18%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  border-radius: 9px;
  transition: transform 380ms var(--ad-ease-spring), width 380ms var(--ad-ease-spring);
  pointer-events: none;
}

.pt-sort-wrap { position: relative; }
.pt-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7812rem;
  cursor: pointer;
  transition: all 220ms var(--ad-ease-spring);
}
.pt-sort-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-border-strong) 24%, transparent);
}
.pt-sort-btn svg { width: 14px; height: 14px; }
.pt-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 200px;
  padding: 6px;
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 18%, transparent);
  border-radius: 12px;
  box-shadow: 0 20px 40px -10px rgba(2, 6, 23, 0.6);
  z-index: 40;
  display: none;
  animation: pt-menu-in 220ms var(--ad-ease-spring);
}
html[data-theme="light"] .pt-sort-menu { background: var(--color-surface); }
.pt-sort-menu.is-open { display: block; }
@keyframes pt-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.pt-sort-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7812rem;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
  text-align: start;
  transition: background 180ms, color 180ms;
}
html[data-theme="light"] .pt-sort-opt { color: var(--color-text-muted); }
.pt-sort-opt svg { width: 14px; height: 14px; color: color-mix(in srgb, var(--color-text-muted) 80%, transparent); flex-shrink: 0; }
.pt-sort-opt:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-foreground); }
.pt-sort-opt.is-active { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.pt-sort-opt.is-active svg { color: var(--color-accent); }

/* ─── Table ─── */
.pt-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-foreground) 2%, transparent), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
}
.pt-table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}
.pt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}
.pt-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--color-background) 60%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  padding: 14px 18px;
  text-align: start;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--card-border);
  white-space: nowrap;
  user-select: none;
}
html[data-theme="light"] .pt-table thead th { background: color-mix(in srgb, var(--color-surface) 85%, transparent); }
.pt-table thead th.is-sortable { cursor: pointer; transition: color 200ms; }
.pt-table thead th.is-sortable:hover { color: var(--text-secondary); }
.pt-table thead th.is-sorted { color: var(--ok-blue); }
.pt-table thead th .pt-sort-arrow { display: inline-block; width: 10px; margin-inline-start: 4px; opacity: 0.4; transition: opacity 200ms, transform 200ms; }
.pt-table thead th.is-sorted .pt-sort-arrow { opacity: 1; }
.pt-table thead th.is-sorted-desc .pt-sort-arrow { transform: rotate(180deg); }

.pt-row {
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 8%, transparent);
  transition: background 220ms var(--ad-ease-spring), transform 220ms var(--ad-ease-spring);
  cursor: pointer;
  animation: pt-row-in 320ms var(--ad-ease-spring) both;
}
@keyframes pt-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pt-row:last-child { border-bottom: 0; }
.pt-row:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 60%);
}
.pt-row.is-editing {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%);
  box-shadow: inset 3px 0 0 0 var(--ok-violet);
}
.pt-row td { padding: 14px 18px; vertical-align: middle; }

.pt-thumb {
  width: var(--pt-thumb);
  height: var(--pt-thumb);
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-tertiary);
  border: 1.5px solid var(--card-border);
  transition: transform 320ms var(--ad-ease-spring);
  display: block;
}
.pt-row:hover .pt-thumb { transform: scale(1.06); }
.pt-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 200px;
}
.pt-name-txt {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9062rem;
  color: var(--text-primary);
  line-height: 1.25;
}
.pt-name-sub {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.pt-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ok-emerald);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pt-stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7188rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: all 220ms var(--ad-ease-spring);
}
.pt-stock .pt-stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.pt-stock.is-in     { background: color-mix(in srgb, var(--color-success) 10%, transparent);  color: var(--color-success); border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 24%, transparent); }
.pt-stock.is-in .pt-stock-dot     { background: var(--color-success); box-shadow: 0 0 6px #10B981; animation: pt-stock-pulse 2.4s ease-in-out infinite; }
.pt-stock.is-low    { background: color-mix(in srgb, var(--color-warning) 12%, transparent); color: var(--color-warning); border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 28%, transparent); }
.pt-stock.is-low .pt-stock-dot    { background: var(--color-warning); box-shadow: 0 0 6px #F59E0B; animation: pt-stock-pulse 1.4s ease-in-out infinite; }
.pt-stock.is-out    { background: color-mix(in srgb, var(--color-destructive) 10%, transparent);   color: var(--color-destructive); border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 28%, transparent); }
.pt-stock.is-out .pt-stock-dot    { background: var(--color-destructive); }
@keyframes pt-stock-pulse {
  50% { transform: scale(1.6); opacity: 0.6; }
}
.pt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pt-status-pill.avail { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--ok-blue); border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 22%, transparent); }
.pt-status-pill.tease { background: rgba(124, 58, 237, 0.1); color: var(--ok-violet); border: var(--border-thin) solid rgba(124, 58, 237, 0.22); }

.pt-tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.pt-tag {
  padding: 3px 8px;
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  color: var(--text-secondary);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  border-radius: 6px;
  font-size: 0.6562rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pt-tag-more {
  padding: 3px 8px;
  color: var(--text-muted);
  font-size: 0.6562rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.pt-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pt-icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  border: 1.5px solid var(--card-border);
  color: var(--text-muted);
  border-radius: 10px;
  cursor: pointer;
  transition: all 200ms var(--ad-ease-spring);
}
.pt-icon-btn svg { width: 15px; height: 15px; }
.pt-icon-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-border-strong) 24%, transparent);
  transform: translateY(-1px);
}
.pt-icon-btn.pt-icon-edit:hover { color: var(--ok-blue); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.pt-icon-btn.pt-icon-del:hover  { color: var(--color-destructive);      border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent); background: color-mix(in srgb, var(--color-destructive) 8%, transparent); }

/* ─── Card list (mobile) ─── */
.pt-cards { display: none; padding: 12px; }
.pt-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-foreground) 2%, transparent), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 240ms var(--ad-ease-spring);
  animation: pt-row-in 320ms var(--ad-ease-spring) both;
}
.pt-card:hover {
  border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
  transform: translateY(-1px);
}
.pt-card .pt-thumb { width: 72px; height: 72px; }
.pt-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pt-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pt-card-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9062rem;
  color: var(--text-primary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ─── Empty state ─── */
.pt-empty {
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.pt-empty-art {
  position: relative;
  width: 132px;
  height: 132px;
}
.pt-empty-art .pt-orbit-ring {
  position: absolute;
  inset: 0;
  border: 1.5px dashed color-mix(in srgb, var(--color-border-strong) 18%, transparent);
  border-radius: 999px;
  animation: pt-orbit-spin 24s linear infinite;
}
.pt-empty-art .pt-orbit-inner {
  position: absolute;
  inset: 22px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 999px;
  animation: pt-orbit-spin 18s linear infinite reverse;
}
.pt-empty-art .pt-orbit-satellites {
  position: absolute;
  inset: 0;
  animation: pt-orbit-spin 20s linear infinite;
}
.pt-empty-art .pt-orbit-satellite {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
}
.pt-empty-art .pt-orbit-satellite:nth-child(1) { top: -4px; left: 50%; margin-left: -5px; }
.pt-empty-art .pt-orbit-satellite:nth-child(2) { top: 50%; right: -4px; margin-top: -5px; background: linear-gradient(135deg, var(--color-warning), var(--color-destructive)); box-shadow: 0 0 12px rgba(244, 63, 94, 0.5); }
.pt-empty-art .pt-orbit-satellite:nth-child(3) { bottom: -4px; left: 50%; margin-left: -5px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent)); box-shadow: 0 0 12px rgba(124, 58, 237, 0.5); }
.pt-empty-art .pt-orbit-satellite:nth-child(4) { top: 50%; left: -4px; margin-top: -5px; background: linear-gradient(135deg, var(--color-success), var(--color-accent)); box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); }
@keyframes pt-orbit-spin {
  to { transform: rotate(360deg); }
}
.pt-empty-art .pt-orbit-core {
  position: absolute;
  inset: 40px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: radial-gradient(circle at center, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 70%);
  border-radius: 999px;
}
.pt-empty-art .pt-orbit-core svg { width: 44px; height: 44px; }
.pt-empty-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--text-primary); margin: 0; }
.pt-empty-sub { font-size: 0.8125rem; color: var(--text-muted); max-width: 300px; margin: 0; }

/* ─── Skeleton row ─── */
.pt-skel-row td { padding: 16px 18px; }
.pt-skel {
  height: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-foreground) 6%, transparent), color-mix(in srgb, var(--color-foreground) 14%, transparent), color-mix(in srgb, var(--color-foreground) 6%, transparent));
  background-size: 200% 100%;
  border-radius: 6px;
  animation: pt-shimmer 1.4s ease-in-out infinite;
}
.pt-skel.pt-skel-thumb { width: var(--pt-thumb); height: var(--pt-thumb); border-radius: 10px; }
@keyframes pt-shimmer {
  to { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   Product Editor Drawer (pe-*)
   ══════════════════════════════════════════════════════════════════════ */
.pe-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(2, 6, 23, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  /* visibility keeps the blur layer from compositing at all while closed */
  visibility: hidden;
  transition: background 320ms var(--ad-ease-spring), backdrop-filter 320ms var(--ad-ease-spring), -webkit-backdrop-filter 320ms var(--ad-ease-spring), visibility 0s linear 320ms;
  pointer-events: none;
}
.pe-backdrop.is-open {
  pointer-events: auto;
  background: rgba(2, 6, 23, 0.5);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  visibility: visible;
  transition: background 320ms var(--ad-ease-spring), backdrop-filter 320ms var(--ad-ease-spring), -webkit-backdrop-filter 320ms var(--ad-ease-spring), visibility 0s;
}

#product-modal.pe-drawer-shell {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex !important;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  background: transparent;
  padding: 0;
}
.pe-drawer {
  position: relative;
  pointer-events: auto;
  width: min(var(--pe-drawer-w), 96vw);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 94%, transparent) 0%, var(--color-surface) 100%);
  color: var(--color-foreground);
  border-inline-start: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  box-shadow: -30px 0 60px -20px rgba(2, 6, 23, 0.65);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  /* Closed drawers sit off-screen but their leftward box-shadow would still smear
     a dark band down the viewport edge — visibility stops them painting entirely. */
  visibility: hidden;
  transition: transform 420ms var(--ad-ease-spring), visibility 0s linear 420ms;
}
html[dir="rtl"] .pe-drawer { transform: translateX(-100%); }
html[data-theme="light"] .pe-drawer {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 100%);
  color: var(--color-foreground);
  border-inline-start-color: color-mix(in srgb, var(--color-border-strong) 8%, transparent);
  box-shadow: -30px 0 60px -20px rgba(15, 23, 42, 0.15);
}
#product-modal.pe-drawer-shell.is-open .pe-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform 420ms var(--ad-ease-spring), visibility 0s;
}

.pe-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 20px 26px 0;
  background: inherit;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent);
}
.pe-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.pe-head-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pe-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 80%, transparent);
}
#product-modal-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: inherit;
  margin: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.pe-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 10px;
  color: color-mix(in srgb, var(--color-text-muted) 80%, transparent);
  cursor: pointer;
  transition: all 220ms var(--ad-ease-spring);
}
.pe-close svg { width: 16px; height: 16px; }
.pe-close:hover {
  color: var(--color-destructive);
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-destructive) 28%, transparent);
  transform: rotate(90deg);
}

.pe-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pe-tabs::-webkit-scrollbar { display: none; }
.pe-tab {
  position: relative;
  padding: 12px 4px;
  margin-inline-end: 16px;
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 220ms var(--ad-ease-spring);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pe-tab svg { width: 14px; height: 14px; opacity: 0.7; }
.pe-tab:hover { color: inherit; }
.pe-tab.is-active { color: inherit; }
.pe-tab.is-active svg { opacity: 1; color: var(--color-accent); }
.pe-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms var(--ad-ease-spring);
  border-radius: 2px;
}
.pe-tab.is-active::after { transform: scaleX(1); }

.pe-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 26px 100px;
  scrollbar-width: thin;
}
.pe-body::-webkit-scrollbar { width: 6px; }
.pe-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 999px; }
.pe-panel { display: none; animation: pe-panel-in 320ms var(--ad-ease-spring) both; }
.pe-panel.is-active { display: block; }
@keyframes pe-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pe-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.pe-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pe-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7812rem;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html[data-theme="light"] .pe-label { color: var(--color-text-muted); }
.pe-label-hint { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 500; color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); text-transform: none; letter-spacing: 0; }
.pe-input,
.pe-select,
.pe-textarea {
  width: 100%;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 10px;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.8438rem;
  font-weight: 500;
  transition: all 220ms var(--ad-ease-spring);
  outline: none;
}
html[data-theme="light"] .pe-input,
html[data-theme="light"] .pe-select,
html[data-theme="light"] .pe-textarea {
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent);
}
.pe-input:focus,
.pe-select:focus,
.pe-textarea:focus {
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  background: color-mix(in srgb, var(--color-background) 55%, transparent);
}
.pe-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.pe-input.pe-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Tag chip input */
.pe-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 10px;
  min-height: 46px;
  transition: all 220ms var(--ad-ease-spring);
  cursor: text;
}
html[data-theme="light"] .pe-tag-input { background: color-mix(in srgb, var(--color-foreground) 4%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent); }
.pe-tag-input:focus-within {
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
.pe-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 18%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
  color: var(--color-foreground);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  animation: pe-tag-in 260ms var(--ad-ease-spring) both;
}
html[data-theme="light"] .pe-tag-chip { color: var(--color-accent); }
@keyframes pe-tag-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.pe-tag-remove {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: 0;
  color: inherit;
  border-radius: 999px;
  cursor: pointer;
  transition: all 200ms;
}
.pe-tag-remove svg { width: 10px; height: 10px; }
.pe-tag-remove:hover {
  background: color-mix(in srgb, var(--color-destructive) 25%, transparent);
  color: var(--color-destructive);
}
.pe-tag-input input {
  flex: 1;
  min-width: 90px;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding: 4px 0;
}

/* ─── Media panel ─── */
#product-media-gallery-section { display: none; border-top: 0; padding-top: 0; margin-top: 0; }
#product-media-gallery-section.is-visible { display: block; }
.pm-cover-block {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 14px;
  margin-bottom: 18px;
}
html[data-theme="light"] .pm-cover-block { background: color-mix(in srgb, var(--color-foreground) 4%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent); }
.pm-cover-preview {
  width: 108px;
  height: 108px;
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
  border: var(--border-thin) dashed color-mix(in srgb, var(--color-border-strong) 20%, transparent);
}
.pm-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.pm-cover-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pm-cover-title { font-family: var(--font-heading); font-weight: 800; font-size: 0.8438rem; color: inherit; }
.pm-cover-sub { font-size: 0.7188rem; color: color-mix(in srgb, var(--color-text-muted) 85%, transparent); }

/* Override the legacy .preset-grid + .preset-img-btn styles from earlier in this file */
#product-modal .pm-preset-grid,
#product-modal .preset-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
#product-modal .preset-img-btn,
#product-modal .pm-preset-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 4px;
  aspect-ratio: auto;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: all 220ms var(--ad-ease-spring);
  color: inherit;
  overflow: hidden;
  height: auto;
}
#product-modal .preset-img-btn:hover,
#product-modal .pm-preset-btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
#product-modal .preset-img-btn.active,
#product-modal .pm-preset-btn.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 18%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent));
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
#product-modal .preset-img-btn > svg,
#product-modal .pm-preset-btn > svg { width: 22px; height: 22px; }
#product-modal .preset-img-btn > span,
#product-modal .pm-preset-btn > span {
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
}
html[data-theme="light"] #product-modal .preset-img-btn > span,
html[data-theme="light"] #product-modal .pm-preset-btn > span { color: var(--color-text-muted); }

/* Dropzone */
.custom-file-upload { display: block; }
#product-image-file-trigger,
.pm-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 20px;
  background: color-mix(in srgb, var(--color-background) 35%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--color-border-strong) 25%, transparent);
  border-radius: 14px;
  cursor: pointer;
  transition: all 240ms var(--ad-ease-spring);
  overflow: hidden;
}
html[data-theme="light"] #product-image-file-trigger,
html[data-theme="light"] .pm-dropzone { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 14%, transparent); }
#product-image-file-trigger:hover,
.pm-dropzone:hover,
.pm-dropzone.is-drag {
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  transform: translateY(-1px);
}
#product-image-file-trigger::before,
.pm-dropzone::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 260ms;
  pointer-events: none;
}
#product-image-file-trigger:hover::before,
.pm-dropzone:hover::before,
.pm-dropzone.is-drag::before { opacity: 1; }
.pm-drop-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: 999px;
  position: relative;
}
.pm-drop-icon svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.pm-drop-icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 260ms, transform 260ms;
}
#product-image-file-trigger:hover .pm-drop-icon::after,
.pm-dropzone:hover .pm-drop-icon::after,
.pm-dropzone.is-drag .pm-drop-icon::after {
  opacity: 1;
  transform: scale(1.12);
  animation: pm-drop-pulse 1.6s ease-out infinite;
}
@keyframes pm-drop-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.pm-drop-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#product-image-file-label,
.pm-drop-title { font-family: var(--font-heading); font-weight: 800; font-size: 0.8438rem; color: inherit; }
.pm-drop-sub { font-size: 0.6875rem; color: color-mix(in srgb, var(--color-text-muted) 85%, transparent); }

/* Gallery list */
.pm-gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 10px;
}
.pm-gallery-title { font-family: var(--font-heading); font-weight: 800; font-size: 0.8438rem; color: inherit; margin: 0; }
.pm-gallery-sub { font-size: 0.7188rem; color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); margin: 2px 0 0; }
#show-add-media-btn,
.pm-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent) !important;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent) !important;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 220ms var(--ad-ease-spring);
}
#show-add-media-btn:hover,
.pm-add-btn:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent) !important;
  color: var(--color-accent) !important;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important;
}
#show-add-media-btn svg,
.pm-add-btn svg { width: 12px; height: 12px; }

#admin-media-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.pm-media-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 6px;
  background: color-mix(in srgb, var(--color-background) 35%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 12px;
  transition: all 260ms var(--ad-ease-spring);
  cursor: grab;
}
html[data-theme="light"] .pm-media-item { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent); }
.pm-media-item:hover {
  border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
  transform: translateY(-1px);
}
.pm-media-item.is-dragging {
  opacity: 0.85;
  transform: scale(1.02) rotate(-0.6deg);
  box-shadow: 0 12px 30px -8px rgba(2, 6, 23, 0.6);
  cursor: grabbing;
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  z-index: 5;
}
.pm-media-item.is-drop-target { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.pm-drag-handle {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
  cursor: grab;
}
.pm-drag-handle svg { width: 14px; height: 14px; }
.pm-thumb-wrap {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
  position: relative;
}
.pm-thumb-wrap img,
.pm-thumb-wrap video { width: 100%; height: 100%; object-fit: cover; }
.pm-thumb-wrap .pm-vid-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}
.pm-thumb-wrap .pm-vid-play svg { width: 16px; height: 16px; }

.pm-media-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-media-name { font-family: var(--font-body); font-weight: 800; font-size: 0.7812rem; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-media-meta { display: flex; align-items: center; gap: 6px; }
.pm-media-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.pm-media-type-pill.is-image { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 24%, transparent); }
.pm-media-type-pill.is-video { background: color-mix(in srgb, var(--color-destructive) 12%, transparent); color: var(--color-destructive); border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 24%, transparent); }
.pm-media-type-pill svg { width: 10px; height: 10px; }
.pm-default-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 24%, transparent);
}
.pm-default-pill svg { width: 10px; height: 10px; }

.pm-media-actions { display: flex; gap: 4px; }
.pm-media-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: var(--border-thin) solid transparent;
  color: color-mix(in srgb, var(--color-text-muted) 70%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms var(--ad-ease-spring);
}
.pm-media-btn svg { width: 14px; height: 14px; }
.pm-media-btn:hover {
  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
  color: inherit;
}
.pm-media-btn.pm-star:hover { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.pm-media-btn.pm-del:hover  { color: var(--color-destructive); background: color-mix(in srgb, var(--color-destructive) 10%, transparent); }

#add-media-form {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 12px;
}
#add-media-form.is-visible { display: flex; }
#add-media-form .amf-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
}
#add-media-form .amf-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 8px;
}
#add-media-form .amf-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent);
}
.amf-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); cursor: pointer;
}
html[data-theme="light"] .amf-checkbox { color: var(--color-text-muted); }
.amf-checkbox input { width: 14px; height: 14px; accent-color: var(--color-accent); }
#add-media-btn {
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent));
  color: var(--color-on-accent);
  border: 0;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7812rem;
  cursor: pointer;
  transition: all 220ms;
}
#add-media-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(59, 130, 246, 0.4); }

/* ─── Sticky footer ─── */
.pe-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-surface) 90%, transparent) 40%);
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="light"] .pe-footer {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-surface) 94%, transparent) 40%);
}
.pe-footer-side { display: flex; gap: 10px; align-items: center; }
.pe-cancel {
  padding: 11px 18px;
  background: transparent;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 20%, transparent);
  color: inherit;
  border-radius: 11px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 220ms;
}
.pe-cancel:hover { background: color-mix(in srgb, var(--color-foreground) 8%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 32%, transparent); }
.pe-save {
  position: relative;
  overflow: hidden;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 55%, var(--color-accent) 100%);
  color: var(--color-on-accent);
  border: 0;
  border-radius: 11px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8125rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px -6px rgba(59, 130, 246, 0.5);
  transition: all 220ms var(--ad-ease-spring);
}
.pe-save::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--color-foreground) 24%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ad-ease-spring);
}
.pe-save:hover::after { transform: translateX(120%); }
.pe-save:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(59, 130, 246, 0.7); }
.pe-save svg { width: 14px; height: 14px; }
.pe-danger-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  color: color-mix(in srgb, var(--color-destructive) 85%, transparent);
  font-family: var(--font-body); font-weight: 700; font-size: 0.7812rem;
  cursor: pointer; padding: 6px 10px; border-radius: 8px;
  transition: all 200ms;
}
.pe-danger-link:hover { background: color-mix(in srgb, var(--color-destructive) 10%, transparent); color: var(--color-destructive); }
.pe-danger-link svg { width: 13px; height: 13px; }

/* ══════════════════════════════════════════════════════════════════════
   Confirm dialog (pc-*)
   ══════════════════════════════════════════════════════════════════════ */
.pc-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(2, 6, 23, 0.6);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.pc-overlay.is-open { display: flex; animation: pc-fade 220ms var(--ad-ease-spring); }
@keyframes pc-fade { from { opacity: 0; } to { opacity: 1; } }
.pc-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 94%, transparent), var(--color-surface));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 24%, transparent);
  border-radius: 18px;
  padding: 24px;
  color: var(--color-foreground);
  box-shadow: 0 30px 60px -20px rgba(2, 6, 23, 0.6);
  animation: pc-card-in 380ms var(--ad-ease-spring);
}
@keyframes pc-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
html[data-theme="light"] .pc-card { background: linear-gradient(180deg, var(--color-surface), var(--color-surface)); color: var(--color-foreground); }
.pc-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-destructive) 14%, transparent);
  color: var(--color-destructive);
  border-radius: 16px;
}
.pc-icon svg { width: 26px; height: 26px; }
.pc-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.pc-body { text-align: center; font-size: 0.8438rem; color: color-mix(in srgb, var(--color-text-muted) 95%, transparent); margin: 0 0 22px; }
html[data-theme="light"] .pc-body { color: var(--color-text-muted); }
.pc-actions { display: flex; gap: 10px; justify-content: center; }
.pc-actions .pe-cancel { flex: 1; }
.pc-actions .pc-confirm {
  flex: 1;
  padding: 11px 18px;
  background: linear-gradient(135deg, var(--color-destructive), var(--color-destructive));
  color: var(--color-on-destructive);
  border: 0;
  border-radius: 11px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem;
  cursor: pointer;
  transition: all 220ms;
  box-shadow: 0 6px 18px -6px rgba(244, 63, 94, 0.5);
}
.pc-actions .pc-confirm:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(244, 63, 94, 0.7); }

/* ══════════════════════════════════════════════════════════════════════
   Responsive — mobile card list + full-screen editor
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .pt-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pt-header { align-items: flex-start; }
  .pt-header-actions { width: 100%; }
  .pt-header-actions .pt-btn { flex: 1; justify-content: center; }
  .pt-table-wrap { display: none; }
  .pt-cards { display: block; }
  .pe-drawer { width: 100vw !important; max-width: 100vw !important; }
  #product-modal.pe-drawer-shell { justify-content: stretch; }
  .pt-toolbar { padding: 10px 12px; }
  .pt-search { flex-basis: 100%; order: -1; }
}
@media (max-width: 640px) {
  .pt-kpi-row { grid-template-columns: 1fr 1fr; }
  .pt-kpi { padding: 12px 14px; gap: 10px; }
  .pt-kpi-icon { width: 36px; height: 36px; }
  .pt-kpi-val { font-size: 1.2rem; }
  .pe-body { padding: 20px 18px 100px; }
  .pe-head { padding: 16px 18px 0; }
  .pe-footer { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .pe-field-row { grid-template-columns: 1fr; gap: 14px; }
  #product-modal .pm-preset-grid,
  #product-modal .preset-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 23 ✅] Discounts Console — Split-Panel Shell (list + wizard)
   dc-* = discount list · dw-* = wizard
   ══════════════════════════════════════════════════════════════════════ */

#discounts-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0 40px;
  animation: pt-fade-in 380ms var(--ad-ease-spring) both;
}

.dc-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1023px) { .dc-split { grid-template-columns: 1fr; } }

/* ─── List (left) ─── */
.dc-list-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-foreground) 2%, transparent), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  min-height: 300px;
}
.dc-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--color-background) 35%, transparent);
  border-bottom: 1.5px solid var(--card-border);
}
html[data-theme="light"] .dc-list-head { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); }
.dc-list-head-copy { display: flex; align-items: baseline; gap: 8px; }
.dc-list-head-title { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.dc-list-count { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 700; color: var(--ok-blue); background: color-mix(in srgb, var(--color-accent) 10%, transparent); padding: 2px 8px; border-radius: 999px; }
.dc-list-scroll { max-height: calc(100dvh - 260px); overflow-y: auto; scrollbar-width: thin; }
.dc-list-scroll::-webkit-scrollbar { width: 6px; }
.dc-list-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 999px; }

.dc-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 8%, transparent);
  transition: background 220ms var(--ad-ease-spring);
  animation: pt-row-in 320ms var(--ad-ease-spring) both;
}
.dc-card:last-child { border-bottom: 0; }
.dc-card:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 60%); }
.dc-card.is-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%);
  box-shadow: inset 3px 0 0 0 var(--ok-violet);
}
.dc-card-glyph {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 18%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  display: grid;
  place-items: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.dc-card-glyph svg { width: 20px; height: 20px; }
.dc-card-body { min-width: 0; }
.dc-card-code {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.dc-card-pct { color: var(--color-success); font-family: var(--font-mono); font-size: 0.6875rem; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--color-success) 10%, transparent); border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 24%, transparent); }
.dc-card-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
  font-size: 0.7188rem; font-family: var(--font-mono);
  color: var(--text-muted);
}
.dc-card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.dc-card-meta svg { width: 12px; height: 12px; opacity: 0.7; }
.dc-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 200ms; }
.dc-card:hover .dc-card-actions, .dc-card:focus-within .dc-card-actions { opacity: 1; }
@media (hover: none) { .dc-card-actions { opacity: 1; } }

.dc-empty-list {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7812rem;
}

/* ─── Wizard (right) ─── */
.dw-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 72%, transparent) 0%, color-mix(in srgb, var(--color-surface) 86%, transparent) 100%);
  color: var(--color-foreground);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 20px;
  position: sticky;
  top: calc(var(--header-h, 60px) + 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 120px);
}
html[data-theme="light"] .dw-panel { background: linear-gradient(180deg, var(--color-surface), var(--color-surface)); color: var(--color-foreground); border-color: color-mix(in srgb, var(--color-border-strong) 8%, transparent); }
.dw-panel[data-state="empty"] .dw-body,
.dw-panel[data-state="empty"] .dw-footer { display: none; }
.dw-panel[data-state="empty"] .dw-empty  { display: flex; }
.dw-panel[data-state="edit"] .dw-empty   { display: none; }

.dw-empty {
  padding: 60px 30px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  min-height: 380px;
  justify-content: center;
}
.dw-empty-art {
  width: 88px; height: 88px;
  display: grid; place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 14%, transparent), color-mix(in srgb, var(--color-accent) 14%, transparent));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  color: var(--color-accent);
  position: relative;
}
.dw-empty-art svg { width: 42px; height: 42px; }
.dw-empty-art::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1.5px dashed color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: 30px;
  animation: dw-orbit-spin 20s linear infinite;
}
@keyframes dw-orbit-spin { to { transform: rotate(360deg); } }
.dw-empty-title { font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; margin: 0; }
.dw-empty-sub   { font-size: 0.7812rem; color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); max-width: 260px; margin: 0; }

.dw-head {
  padding: 16px 20px 0;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent);
}
.dw-head-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.dw-head-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; margin: 0; }
.dw-head-sub   { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-muted) 85%, transparent); }

/* Step chip bar */
.dw-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dw-steps::-webkit-scrollbar { display: none; }
.dw-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 6px;
  background: transparent;
  border: 0;
  color: color-mix(in srgb, var(--color-text-muted) 75%, transparent);
  font-family: var(--font-body); font-weight: 600; font-size: 0.7188rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 220ms var(--ad-ease-spring);
}
.dw-step-num {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-foreground) 14%, transparent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  color: inherit;
  transition: all 220ms var(--ad-ease-spring);
}
.dw-step.is-done  .dw-step-num { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: var(--color-success); }
.dw-step.is-done  .dw-step-num svg { width: 12px; height: 12px; }
.dw-step.is-active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-foreground);
}
.dw-step.is-active .dw-step-num {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent));
  color: var(--color-on-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.dw-step-sep {
  width: 14px; height: 2px;
  background: color-mix(in srgb, var(--color-foreground) 16%, transparent);
  border-radius: 2px;
  flex-shrink: 0;
}
.dw-step.is-done + .dw-step-sep { background: linear-gradient(90deg, var(--color-success), color-mix(in srgb, var(--color-foreground) 16%, transparent)); }

.dw-body {
  padding: 20px 20px 20px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
.dw-body::-webkit-scrollbar { width: 6px; }
.dw-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 999px; }

.dw-panel-step { display: none; animation: pe-panel-in 320ms var(--ad-ease-spring); }
.dw-panel-step.is-active { display: block; }

.dw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dw-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dw-label {
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.7812rem;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
html[data-theme="light"] .dw-label { color: var(--color-text-muted); }
.dw-label-hint { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 500; color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); text-transform: none; letter-spacing: 0; }
.dw-input, .dw-select {
  width: 100%;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 10px;
  color: inherit;
  font-family: var(--font-body); font-size: 0.8438rem; font-weight: 500;
  transition: all 220ms var(--ad-ease-spring);
  outline: none;
}
html[data-theme="light"] .dw-input, html[data-theme="light"] .dw-select { background: color-mix(in srgb, var(--color-foreground) 4%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent); }
.dw-input:focus, .dw-select:focus {
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
.dw-input.dw-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; text-transform: uppercase; }

/* Discount type radio card */
.dw-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dw-type-card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: all 220ms var(--ad-ease-spring);
  overflow: hidden;
}
html[data-theme="light"] .dw-type-card { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent); }
.dw-type-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}
.dw-type-card.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 15%, transparent), color-mix(in srgb, var(--color-accent) 8%, transparent));
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.dw-type-card::after {
  content: "";
  position: absolute;
  top: 12px; inset-inline-end: 12px;
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--color-border-strong) 30%, transparent);
  transition: all 200ms;
}
.dw-type-card.is-active::after {
  border-color: var(--color-accent);
  background: radial-gradient(circle at center, var(--color-accent) 40%, transparent 42%);
}
.dw-type-card-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8125rem;
}
.dw-type-card-head svg { width: 18px; height: 18px; color: var(--color-accent); }
.dw-type-card-sub { font-size: 0.6875rem; color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); }

/* Live preview */
.dw-preview {
  margin-top: 8px;
  padding: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-background) 40%, transparent), color-mix(in srgb, var(--color-foreground) 20%, transparent));
  border: var(--border-thin) dashed color-mix(in srgb, var(--color-border-strong) 24%, transparent);
  border-radius: 14px;
}
html[data-theme="light"] .dw-preview { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 14%, transparent); }
.dw-preview-eyebrow {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.dw-preview-eyebrow::before {
  content: ""; width: 6px; height: 6px;
  background: var(--color-accent); border-radius: 999px;
  animation: pt-eyebrow-pulse 2s ease-in-out infinite;
}
.dw-preview-checkout {
  display: flex; align-items: center; gap: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--color-background) 50%, transparent);
  border-radius: 10px;
}
html[data-theme="light"] .dw-preview-checkout { background: var(--color-surface); border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 6%, transparent); }
.dw-preview-input {
  flex: 1;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 8px;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.7812rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dw-preview-apply {
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent));
  color: var(--color-on-accent);
  border-radius: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.75rem;
  border: 0; cursor: pointer;
}
.dw-preview-result {
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 24%, transparent);
  color: var(--color-success);
  border-radius: 10px;
  font-size: 0.7812rem;
  font-family: var(--font-mono);
  display: flex; align-items: center; gap: 8px;
}
.dw-preview-result svg { width: 14px; height: 14px; }
.dw-preview-result.is-error { background: color-mix(in srgb, var(--color-destructive) 10%, transparent); border-color: color-mix(in srgb, var(--color-destructive) 24%, transparent); color: var(--color-destructive); }

.dw-footer {
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-surface) 70%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .dw-footer { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-surface) 90%, transparent)); }
.dw-footer-side { display: flex; gap: 8px; align-items: center; }
.dw-back-btn, .dw-next-btn, .dw-save-btn, .dw-cancel-btn {
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.7812rem;
  cursor: pointer;
  transition: all 220ms;
  display: inline-flex; align-items: center; gap: 6px;
  border: var(--border-thin) solid transparent;
}
.dw-back-btn, .dw-cancel-btn {
  background: transparent;
  color: inherit;
  border-color: color-mix(in srgb, var(--color-border-strong) 20%, transparent);
}
.dw-back-btn:hover, .dw-cancel-btn:hover { background: color-mix(in srgb, var(--color-foreground) 8%, transparent); }
.dw-back-btn svg, .dw-next-btn svg, .dw-save-btn svg { width: 14px; height: 14px; }
.dw-next-btn, .dw-save-btn {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent), var(--color-accent));
  color: var(--color-on-accent);
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(59, 130, 246, 0.5);
  position: relative; overflow: hidden;
}
.dw-next-btn::after, .dw-save-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--color-foreground) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 900ms var(--ad-ease-spring);
}
.dw-next-btn:hover::after, .dw-save-btn:hover::after { transform: translateX(120%); }
.dw-next-btn:hover, .dw-save-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(59, 130, 246, 0.7); }

.dw-footer-hint {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ─── Mobile: wizard becomes full-screen overlay ─── */
@media (max-width: 1023px) {
  .dw-panel {
    position: fixed;
    inset: 0;
    z-index: 1200;
    max-height: 100dvh;
    border-radius: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 380ms var(--ad-ease-spring), visibility 0s linear 380ms;
    display: flex !important;
  }
  html[dir="rtl"] .dw-panel { transform: translateX(-100%); }
  .dw-panel.is-mobile-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 380ms var(--ad-ease-spring), visibility 0s;
  }
  .dw-panel[data-state="empty"] { display: none !important; }
  .dw-close-mobile {
    display: grid !important;
    position: absolute; top: 14px; inset-inline-end: 14px;
    width: 34px; height: 34px;
    place-items: center;
    background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
    border: 0; border-radius: 10px;
    color: inherit;
    z-index: 5;
    cursor: pointer;
  }
  .dw-close-mobile svg { width: 16px; height: 16px; }
  .dc-list-panel { max-height: none; }
  .dc-list-scroll { max-height: none; }
}
.dw-close-mobile { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   [Phase 24 ✅] Bundles + Wholesale + FAQs — bwf-* list · shared drawer
   ══════════════════════════════════════════════════════════════════════ */
#bundles-section, #wholesale-section, #faqs-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0 40px;
  animation: pt-fade-in 380ms var(--ad-ease-spring) both;
}
.bwf-panel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-foreground) 2%, transparent), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
}
.bwf-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--color-background) 35%, transparent);
  border-bottom: 1.5px solid var(--card-border);
}
html[data-theme="light"] .bwf-panel-head { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); }
.bwf-head-copy { display: flex; align-items: baseline; gap: 8px; }
.bwf-head-title { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.bwf-head-count { font-family: var(--font-mono); font-size: 0.6562rem; font-weight: 700; color: var(--ok-emerald); background: color-mix(in srgb, var(--color-success) 10%, transparent); padding: 2px 8px; border-radius: 999px; }

.bwf-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 14px;
}
@media (max-width: 640px) { .bwf-list { grid-template-columns: 1fr; padding: 12px; } }

.bwf-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-foreground) 2%, transparent), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 240ms var(--ad-ease-spring);
  animation: pt-row-in 320ms var(--ad-ease-spring) both;
  overflow: hidden;
}
.bwf-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: var(--bwf-accent, var(--ok-emerald));
  transform: scaleY(0.5);
  transform-origin: center;
  opacity: 0.6;
  transition: transform 260ms var(--ad-ease-spring), opacity 260ms;
}
.bwf-card:hover {
  border-color: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(2, 6, 23, 0.4);
}
.bwf-card:hover::before { transform: scaleY(1); opacity: 1; }

.bwf-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.bwf-card-title {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 0.9062rem;
  color: var(--text-primary);
  line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.bwf-card-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 0.6562rem; font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 24%, transparent);
}
.bwf-card-body {
  font-size: 0.7812rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.bwf-card-items {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.bwf-card-item-pill {
  padding: 3px 8px;
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
  white-space: nowrap;
}
.bwf-card-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 8%, transparent);
}
.bwf-card-meta svg { width: 12px; height: 12px; opacity: 0.7; }
.bwf-card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.bwf-card-actions {
  display: flex; gap: 4px;
  opacity: 0; transition: opacity 200ms;
}
.bwf-card:hover .bwf-card-actions, .bwf-card:focus-within .bwf-card-actions { opacity: 1; }
/* Touch devices have no hover — actions must stay reachable without it. */
@media (hover: none) { .bwf-card-actions { opacity: 1; } }

.bwf-card.type-bundle    { --bwf-accent: var(--ok-emerald); }
.bwf-card.type-bundle    .bwf-card-badge { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success);  border-color: color-mix(in srgb, var(--color-success) 24%, transparent); }
.bwf-card.type-wholesale { --bwf-accent: var(--ok-blue); }
.bwf-card.type-wholesale .bwf-card-badge { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--ok-blue); border-color: color-mix(in srgb, var(--color-accent) 24%, transparent); }
.bwf-card.type-faq       { --bwf-accent: var(--ok-violet); }
.bwf-card.type-faq       .bwf-card-badge { background: rgba(124, 58, 237, 0.12); color: var(--ok-violet); border-color: rgba(124, 58, 237, 0.24); }

/* FAQ section — richer Q&A card (was a plain text card) */
#faqs-section .bwf-panel { border-width: 1.5px; border-color: var(--premium-border); }
#faqs-section .bwf-panel-head { padding: 15px 18px; }
#faqs-section .bwf-head-title { font-size: 0.6875rem; color: var(--text-secondary); }
.faq-qa-card { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; align-items: start; padding: 16px; cursor: default; border-width: 1.5px; border-color: var(--premium-border); }
.faq-qa-card::before { opacity: .85; }
.faq-qa-glyph { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--ok-violet); background: linear-gradient(145deg,rgba(124,58,237,.22),rgba(124,58,237,.08)); border: 1.5px solid rgba(124,58,237,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.faq-qa-glyph svg { width: 21px; height: 21px; }
.faq-qa-main { min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.faq-qa-card .bwf-card-head { align-items: flex-start; }
.faq-qa-card .bwf-card-title { font-size: 0.9375rem; font-weight: 800; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
.faq-scope-badge { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.faq-scope-badge svg { width: 12px; height: 12px; }
.faq-scope-badge.is-storewide { background: color-mix(in srgb, var(--color-foreground) 10%, transparent); color: var(--text-secondary); border-color: color-mix(in srgb, var(--color-border-strong) 20%, transparent); }
.faq-qa-answer { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: start; padding: 11px 13px; border-radius: 11px; background: color-mix(in srgb, var(--color-accent) 6%, transparent); border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 14%, transparent); }
html[data-theme="light"] .faq-qa-answer { background: color-mix(in srgb, var(--color-accent) 5%, transparent); border-color: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.faq-qa-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--ok-violet); background: rgba(124,58,237,.16); font: 800 11px/1 var(--font-mono); }
.faq-qa-answer p { margin: 0; font-size: 0.7969rem; font-weight: 500; line-height: 1.55; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.faq-qa-card .bwf-card-meta { color: var(--text-muted); font-weight: 600; }
.faq-qa-card .bwf-card-actions { opacity: 0; }
.faq-qa-card:hover .bwf-card-actions, .faq-qa-card:focus-within .bwf-card-actions { opacity: 1; }
@media (hover: none) { .faq-qa-card .bwf-card-actions { opacity: 1; } }

.bwf-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
}
.bwf-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  border: var(--border-thin) dashed color-mix(in srgb, var(--color-border-strong) 20%, transparent);
  border-radius: 20px;
  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
}
.bwf-empty-icon svg { width: 26px; height: 26px; }

/* ─── Shared drawer (bundle-modal / wholesale-modal / faq-modal) ─── */
#bundle-modal, #wholesale-modal, #faq-modal {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex !important;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: none;
  background: transparent;
  padding: 0;
}
#bundle-modal .bwf-drawer,
#wholesale-modal .bwf-drawer,
#faq-modal .bwf-drawer {
  position: relative;
  pointer-events: auto;
  width: min(var(--pe-drawer-w), 96vw);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 94%, transparent) 0%, var(--color-surface) 100%);
  color: var(--color-foreground);
  border-inline-start: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  box-shadow: -30px 0 60px -20px rgba(2, 6, 23, 0.65);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  /* NOTE: visibility is deliberately NOT set here — the parent modal owns it.
     Setting it on the child would override the closed parent's `visibility:hidden`,
     leaving the closed dialog's form controls focusable and letting native <select>
     popups (which render in an OS layer that ignores the parent's opacity:0) float
     over whichever modal is actually open. */
  transition: transform 420ms var(--ad-ease-spring);
}
html[dir="rtl"] #bundle-modal .bwf-drawer,
html[dir="rtl"] #wholesale-modal .bwf-drawer,
html[dir="rtl"] #faq-modal .bwf-drawer { transform: translateX(-100%); }
html[data-theme="light"] #bundle-modal .bwf-drawer,
html[data-theme="light"] #wholesale-modal .bwf-drawer,
html[data-theme="light"] #faq-modal .bwf-drawer {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface) 100%);
  color: var(--color-foreground);
  border-inline-start-color: color-mix(in srgb, var(--color-border-strong) 8%, transparent);
}
#bundle-modal.is-open .bwf-drawer,
#wholesale-modal.is-open .bwf-drawer,
#faq-modal.is-open .bwf-drawer {
  transform: translateX(0);
  transition: transform 420ms var(--ad-ease-spring);
}

.bwf-drawer-head {
  padding: 20px 26px 16px;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.bwf-drawer-head-copy { display: flex; flex-direction: column; gap: 3px; }
.bwf-drawer-eyebrow { font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text-muted) 80%, transparent); }
.bwf-drawer-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; margin: 0; }

.bwf-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 26px 100px;
  scrollbar-width: thin;
}
.bwf-drawer-body::-webkit-scrollbar { width: 6px; }
.bwf-drawer-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 999px; }

/* Reuse .pe-* form field styles inside these drawers */
#bundle-modal .form-group,
#wholesale-modal .form-group,
#faq-modal .form-group {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
#bundle-modal .form-group label,
#wholesale-modal .form-group label,
#faq-modal .form-group label {
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.7812rem;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
}
html[data-theme="light"] #bundle-modal .form-group label,
html[data-theme="light"] #wholesale-modal .form-group label,
html[data-theme="light"] #faq-modal .form-group label { color: var(--color-text-muted); }
#bundle-modal .form-input,
#wholesale-modal .form-input,
#faq-modal .form-input {
  width: 100%;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 10px;
  color: inherit;
  font-family: var(--font-body); font-size: 0.8438rem; font-weight: 500;
  transition: all 220ms var(--ad-ease-spring);
  outline: none;
}
html[data-theme="light"] #bundle-modal .form-input,
html[data-theme="light"] #wholesale-modal .form-input,
html[data-theme="light"] #faq-modal .form-input {
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent);
}
#bundle-modal .form-input:focus,
#wholesale-modal .form-input:focus,
#faq-modal .form-input:focus {
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}
#bundle-modal select.form-input[multiple] { min-height: 160px; }

.bwf-drawer-foot {
  position: sticky; bottom: 0; z-index: 3;
  padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-surface) 90%, transparent) 40%);
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="light"] .bwf-drawer-foot { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-surface) 94%, transparent) 40%); }
.bwf-drawer-foot button[type="button"] {
  padding: 11px 18px;
  background: transparent;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 20%, transparent);
  color: inherit;
  border-radius: 11px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem;
  cursor: pointer;
  transition: all 220ms;
}
.bwf-drawer-foot button[type="button"]:hover { background: color-mix(in srgb, var(--color-foreground) 8%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 32%, transparent); }
.bwf-drawer-foot button[type="submit"] {
  position: relative; overflow: hidden;
  padding: 11px 22px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent) 55%, var(--color-accent) 100%);
  color: var(--color-on-accent);
  border: 0;
  border-radius: 11px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(59, 130, 246, 0.5);
  transition: all 220ms var(--ad-ease-spring);
}
.bwf-drawer-foot button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(59, 130, 246, 0.7); }

@media (max-width: 720px) {
  #bundle-modal .bwf-drawer,
  #wholesale-modal .bwf-drawer,
  #faq-modal .bwf-drawer { width: 100vw !important; max-width: 100vw !important; }
  #bundle-modal, #wholesale-modal, #faq-modal { justify-content: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════
   [Fix pass] One-page scroll layout
   Every admin section is permanently rendered and stacked; the sidebar
   smooth-scrolls between them and a scroll-spy tracks the active one.
   (Previously `.tab-content.ad-tab { display:none }` was silently beaten
   by the ID-level `display:flex` rules in the Phase 22-24 blocks, so some
   sections showed and others vanished after the first nav click.)
   ══════════════════════════════════════════════════════════════════════ */
.tab-content.ad-tab,
.tab-content.ad-tab.active { display: block; }

#orders-section, #products-section, #discounts-section, #bundles-section,
#wholesale-section, #faqs-section, #loyalty-section, #customizer-section,
#newsletter-section {
  scroll-margin-top: calc(var(--ad-topbar-h, 64px) + 20px);
}

/* Separator between stacked sections. Margin (not padding) carries the gap so
   it isn't beaten by the ID-level `padding` shorthands in the phase blocks. */
.tab-content.ad-tab + .tab-content.ad-tab {
  margin-top: clamp(30px, 4vw, 56px);
  border-top: 1.5px solid var(--card-border);
}

/* Restate inner spacing at ID weight (these rules are last in the file, so they
   win over the `padding:` shorthands declared in the Phase 22-24 blocks). */
#products-section, #discounts-section, #bundles-section, #wholesale-section,
#faqs-section, #loyalty-section, #customizer-section, #newsletter-section {
  padding-top: clamp(28px, 3.5vw, 52px);
  padding-bottom: clamp(18px, 2.5vw, 36px);
}
#orders-section { padding-top: 0; }

/* ══════════════════════════════════════════════════════════════════════
   [Fix pass] Discounts — scope toggle (my codes vs loyalty) + value suffix
   ══════════════════════════════════════════════════════════════════════ */
.dc-scope {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  border: 1.5px solid var(--card-border);
  border-radius: 11px;
}
.dc-scope-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 220ms var(--ad-ease-spring);
}
.dc-scope-btn svg { width: 13px; height: 13px; }
.dc-scope-btn:hover { color: var(--text-secondary); }
.dc-scope-btn.is-active { color: var(--text-primary); }
.dc-scope-count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground) 14%, transparent);
  color: inherit;
}
.dc-scope-btn.is-active .dc-scope-count {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
}
html[data-theme="light"] .dc-scope-btn.is-active .dc-scope-count { color: var(--color-accent); }
.dc-scope-slider {
  position: absolute;
  left: 0;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 18%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  border-radius: 9px;
  transition: transform 380ms var(--ad-ease-spring), width 380ms var(--ad-ease-spring);
  pointer-events: none;
}

/* Loyalty coupons are system-generated — visually distinct + read-only feel */
.dc-card.is-loyalty { --dc-accent: var(--ok-amber); }
.dc-card.is-loyalty .dc-card-glyph {
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-warning) 18%, transparent), color-mix(in srgb, var(--color-destructive) 10%, transparent));
  border-color: color-mix(in srgb, var(--color-warning) 26%, transparent);
  color: var(--color-warning);
}
.dc-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 24%, transparent);
  color: var(--color-warning);
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dc-card-pct.is-flat {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 26%, transparent);
  color: var(--color-accent);
}
html[data-theme="light"] .dc-card-pct.is-flat { color: var(--color-accent); }

/* Value input with a live unit suffix (% or currency) */
.dw-value-wrap { position: relative; display: block; }
.dw-value-wrap .dw-input { padding-inline-end: 58px; }
.dw-value-suffix {
  position: absolute;
  top: 50%;
  inset-inline-end: 12px;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.7188rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
  pointer-events: none;
  transition: color 200ms;
}
.dw-value-wrap:focus-within .dw-value-suffix { color: var(--color-accent); }

/* Empty state inside the list when a scope has nothing */
.dc-empty-list svg {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   [Fix pass] Bundles / Wholesale / FAQ — centered modal window
   Overrides the Phase 24 side-drawer treatment. Declared after those rules
   so equal-specificity selectors win by source order.
   ══════════════════════════════════════════════════════════════════════ */
#bundle-modal, #wholesale-modal, #faq-modal {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 36px);
  background: color-mix(in srgb, var(--color-background) 62%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms var(--ad-ease-out), visibility 0s linear 260ms;
}
#bundle-modal.is-open, #wholesale-modal.is-open, #faq-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms var(--ad-ease-out), visibility 0s;
}

#bundle-modal .bwf-drawer,
#wholesale-modal .bwf-drawer,
#faq-modal .bwf-drawer {
  position: relative;
  width: min(760px, 100%);
  max-height: min(90dvh, 940px);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 22px;
  box-shadow: 0 40px 80px -24px rgba(2, 6, 23, 0.7);
  transform: translateY(18px) scale(0.965);
  opacity: 0;
  /* visibility intentionally inherited from the parent modal — see note above */
  transition: transform 420ms var(--ad-ease-spring), opacity 300ms var(--ad-ease-out);
}
#wholesale-modal .bwf-drawer { width: min(680px, 100%); }
#faq-modal .bwf-drawer { width: min(620px, 100%); }
/* Neutralise the Phase 24 RTL side-drawer transform — these are centered now. */
html[dir="rtl"] #bundle-modal .bwf-drawer,
html[dir="rtl"] #wholesale-modal .bwf-drawer,
html[dir="rtl"] #faq-modal .bwf-drawer { transform: translateY(18px) scale(0.965); }
html[dir="rtl"] #bundle-modal.is-open .bwf-drawer,
html[dir="rtl"] #wholesale-modal.is-open .bwf-drawer,
html[dir="rtl"] #faq-modal.is-open .bwf-drawer { transform: translateY(0) scale(1); }
html[data-theme="light"] #bundle-modal .bwf-drawer,
html[data-theme="light"] #wholesale-modal .bwf-drawer,
html[data-theme="light"] #faq-modal .bwf-drawer {
  border-color: color-mix(in srgb, var(--color-border-strong) 8%, transparent);
  box-shadow: 0 40px 80px -24px rgba(15, 23, 42, 0.28);
}
#bundle-modal.is-open .bwf-drawer,
#wholesale-modal.is-open .bwf-drawer,
#faq-modal.is-open .bwf-drawer {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#bundle-modal .bwf-drawer-head,
#wholesale-modal .bwf-drawer-head,
#faq-modal .bwf-drawer-head { border-radius: 22px 22px 0 0; }
#bundle-modal .bwf-drawer-foot,
#wholesale-modal .bwf-drawer-foot,
#faq-modal .bwf-drawer-foot { border-radius: 0 0 22px 22px; }
#bundle-modal .bwf-drawer-body,
#wholesale-modal .bwf-drawer-body,
#faq-modal .bwf-drawer-body { padding: 20px 24px 24px; }

@media (max-width: 720px) {
  #bundle-modal .bwf-drawer,
  #wholesale-modal .bwf-drawer,
  #faq-modal .bwf-drawer { width: 100%; max-height: 92dvh; }
  #bundle-modal, #wholesale-modal, #faq-modal {
    align-items: flex-end;
    padding: 0;
  }
  #bundle-modal .bwf-drawer,
  #wholesale-modal .bwf-drawer,
  #faq-modal .bwf-drawer {
    border-radius: 22px 22px 0 0;
    transform: translateY(100%);
  }
  #bundle-modal.is-open .bwf-drawer,
  #wholesale-modal.is-open .bwf-drawer,
  #faq-modal.is-open .bwf-drawer { transform: translateY(0); }
  #bundle-modal .bwf-drawer-foot,
  #wholesale-modal .bwf-drawer-foot,
  #faq-modal .bwf-drawer-foot { border-radius: 0; }
}

/* ─── Visual product picker (pp-*) ─────────────────────────────────── */
.pp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .pp-field-row { grid-template-columns: 1fr; } }

.pp-picker {
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-background) 28%, transparent);
  overflow: hidden;
  transition: border-color 220ms var(--ad-ease-spring), box-shadow 220ms var(--ad-ease-spring);
}
html[data-theme="light"] .pp-picker { background: color-mix(in srgb, var(--color-foreground) 2%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent); }
.pp-picker:focus-within {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.pp-search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
}
.pp-search > svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--color-text-muted) 80%, transparent); flex-shrink: 0; }
.pp-search:focus-within > svg { color: var(--color-accent); }
.pp-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 2px 0;
}
.pp-search-input::placeholder { color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); }
.pp-count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
  color: color-mix(in srgb, var(--color-text-muted) 95%, transparent);
  white-space: nowrap;
  transition: all 240ms var(--ad-ease-spring);
}
.pp-count.is-ready {
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 28%, transparent);
  color: var(--color-success);
}

/* Selected chips */
.pp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 300ms var(--ad-ease-spring), opacity 220ms, padding 300ms var(--ad-ease-spring);
}
.pp-chips.has-items {
  max-height: 140px;
  opacity: 1;
  padding: 10px 12px;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  overflow-y: auto;
}
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 32%, transparent);
  border-radius: 999px;
  font-size: 0.7188rem;
  font-weight: 700;
  color: var(--color-foreground);
  animation: pe-tag-in 260ms var(--ad-ease-spring) both;
  max-width: 220px;
}
html[data-theme="light"] .pp-chip { color: var(--color-accent); }
.pp-chip img {
  width: 20px; height: 20px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.pp-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-chip button {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-background) 35%, transparent);
  border: 0; border-radius: 999px;
  color: inherit; cursor: pointer;
  flex-shrink: 0;
  transition: all 180ms;
}
.pp-chip button svg { width: 10px; height: 10px; }
.pp-chip button:hover { background: color-mix(in srgb, var(--color-destructive) 30%, transparent); color: var(--color-destructive); }

/* Product grid */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  padding: 12px;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.pp-grid::-webkit-scrollbar { width: 6px; }
.pp-grid::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--color-foreground) 20%, transparent); border-radius: 999px; }
@media (max-width: 560px) {
  .pp-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: 260px; }
}

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: inherit;
  transition: all 240ms var(--ad-ease-spring);
  animation: pt-row-in 300ms var(--ad-ease-spring) both;
}
.pp-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  box-shadow: 0 8px 18px -10px rgba(2, 6, 23, 0.6);
}
.pp-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22);
}
.pp-card.is-selected {
  border-color: color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent));
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}
.pp-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-background) 35%, transparent);
}
.pp-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 340ms var(--ad-ease-spring);
}
.pp-card:hover .pp-card-media img { transform: scale(1.07); }
.pp-check {
  position: absolute;
  top: 5px; inset-inline-end: 5px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent));
  color: var(--color-on-accent);
  border-radius: 999px;
  box-shadow: 0 3px 10px -2px rgba(34, 211, 238, 0.7);
  transform: scale(0);
  transition: transform 300ms var(--ad-ease-spring);
}
.pp-check svg { width: 12px; height: 12px; }
.pp-card.is-selected .pp-check { transform: scale(1); }
.pp-card-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.7188rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp-card-price {
  font-family: var(--font-mono);
  font-size: 0.6562rem;
  font-weight: 700;
  color: var(--color-success);
}
.pp-empty {
  grid-column: 1 / -1;
  padding: 26px 12px;
  text-align: center;
  font-size: 0.7812rem;
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
}

/* Live totals summary */
.pp-summary {
  margin-top: 16px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--color-background) 30%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
html[data-theme="light"] .pp-summary { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 9%, transparent); }
.pp-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.7812rem;
}
.pp-summary-row.is-final {
  padding-top: 9px;
  border-top: var(--border-thin) dashed color-mix(in srgb, var(--color-border-strong) 24%, transparent);
}
.pp-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--color-text-muted) 95%, transparent);
  font-weight: 500;
}
html[data-theme="light"] .pp-summary-label { color: var(--color-text-muted); }
.pp-summary-label svg { width: 13px; height: 13px; opacity: 0.85; }
.pp-summary-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.7812rem;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.pp-summary-val.is-save  { color: var(--color-success); }
.pp-summary-val.is-final { color: var(--color-accent); font-size: 0.9375rem; }
html[data-theme="light"] .pp-summary-val.is-final { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════
   [Mobile hardening] Phones — Phases 19-24 audit pass
   Philosophy: the phone gets a genuinely phone-shaped version, not a
   shrunk desktop. This block only contains phone-specific corrections.
   ══════════════════════════════════════════════════════════════════════ */

/* Off-screen mobile sidebar was painting its shadow back across the viewport
   (same class of bug as the drawers) — stop it compositing while closed. */
@media (max-width: 1023.98px) {
  .ad-sidebar {
    visibility: hidden;
    transition: transform 320ms var(--ad-ease-spring), visibility 0s linear 320ms;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ad-sidebar.active {
    visibility: visible;
    transition: transform 320ms var(--ad-ease-spring), visibility 0s;
  }
  /* Sticky top bar must clear the notch / status bar. */
  .ad-topbar {
    height: auto;
    min-height: var(--ad-topbar-h);
    padding-top: env(safe-area-inset-top);
  }
  .ad-content {
    padding-left: max(clamp(16px, 2.5vw, 32px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 2.5vw, 32px), env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 768px) {
  /* iOS Safari zooms the whole page when focusing a control under 16px.
     Every admin input is 12-14px by design, so bump them on phones only. */
  input, textarea, select,
  .pe-input, .pe-select, .pe-textarea,
  .dw-input, .dw-select,
  .form-input,
  .pt-search input,
  .pp-search-input,
  .pe-tag-input input,
  .cmd-search input {
    font-size: 1rem !important;
  }
  /* Keep touch height comfortable now that the text is larger. */
  .pe-input, .pe-select, .dw-input, .dw-select, .form-input { min-height: 46px; }
  .pe-textarea { min-height: 110px; }

  /* Remove the 300ms tap delay across interactive admin chrome. */
  button, a, .pt-card, .pp-card, .bwf-card, .dc-card, .ok-card, .pt-row,
  .pe-tab, .dw-step, .pt-chip, .dc-scope-btn, .pm-media-item {
    touch-action: manipulation;
  }

  /* ── Touch targets: 44×44 minimum (Apple HIG / skill §2) ── */
  .pt-icon-btn,
  .pm-media-btn,
  .pe-close,
  .ad-icon-btn,
  .ok-card-menu-btn,
  .copy-btn,
  /* [Phase 12] The topbar controls were all below the floor on a phone —
     the language button 40×38, the theme and notification buttons 38×38,
     the menu button 22×40, search 36×36 and the breadcrumb link 34×26.
     These are the controls a merchant reaches for first on arrival. */
  .ad-lang-btn,
  .ad-menu-btn,
  .ad-search-trigger,
  .ad-collapse-btn,
  .ok-filter-chip,
  .pt-chip,
  .ly-stepper-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* An inline link cannot grow without a box to grow into. */
  .ad-crumb-home {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
  .pt-actions { gap: 8px; }
  .pm-media-actions { gap: 8px; }

  /* Small "×" affordances get a padded hit area without growing visually. */
  .pe-tag-remove, .pp-chip button {
    position: relative;
  }
  .pe-tag-remove::after, .pp-chip button::after {
    content: "";
    position: absolute;
    inset: -13px;
  }
  .pe-tag-chip, .pp-chip { min-height: 34px; }

  .pe-tab { padding: 14px 4px; min-height: 46px; }
  .dw-step { min-height: 44px; padding: 8px 12px 8px 6px; }
  .pt-chip { min-height: 42px; }
  .dc-scope-btn { min-height: 44px; }
  .pt-sort-btn, .pt-btn { min-height: 46px; }
  .pt-sort-opt { min-height: 44px; }
  .cmd-item { min-height: 48px; }

  /* Product picker: bigger tap area + roomier grid on a narrow screen. */
  .pp-card { padding: 10px; }
  .pp-grid { gap: 12px; padding: 12px; }
}

@media (max-width: 560px) {
  /* Section headers stack; action buttons go full-width and thumb-reachable. */
  .pt-header { flex-direction: column; align-items: stretch; gap: 14px; }
  .pt-header-actions { width: 100%; }
  .pt-header-actions .pt-btn { flex: 1; justify-content: center; }

  /* Toolbar becomes a vertical stack so nothing is cramped. */
  .pt-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .pt-search { flex-basis: auto; width: 100%; }
  .pt-chip-group { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pt-chip-group::-webkit-scrollbar { display: none; }
  .pt-sort-wrap { width: 100%; }
  .pt-sort-btn { width: 100%; justify-content: center; }
  .pt-sort-menu { inset-inline: 0; min-width: 0; }

  /* Discounts: scope toggle full width, count chip on its own line. */
  .dc-list-head { flex-wrap: wrap; gap: 10px; }
  .dc-scope { width: 100%; }
  .dc-scope-btn { flex: 1; justify-content: center; }

  /* KPI strip reads better as a 2-up on a phone. */
  .pt-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* Bundle/wholesale picker: 2 columns at 375px without crushing the labels. */
  .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 46dvh; }

  /* Summary rows wrap instead of squashing the numbers. */
  .pp-summary-row { flex-wrap: wrap; gap: 4px 12px; }
}

/* Nothing may cause a sideways scroll on a phone. */
@media (max-width: 1023.98px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .ad-shell, .ad-main, .ad-content { min-width: 0; max-width: 100%; }
  .pt-panel, .bwf-panel, .dc-list-panel, .dw-panel { max-width: 100%; }
  /* Long codes / URLs must wrap rather than push the layout wide. */
  .dc-card-code span:first-child,
  .pm-media-name,
  .pt-name-txt { overflow-wrap: anywhere; }
}

/* Search-as-you-type must not restage the grid on every keystroke — typing fast
   made matches strobe. JS adds .pp-no-anim for keystroke renders and removes it
   for arrival moments (picker opened, Enter pressed). */
.pp-grid.pp-no-anim .pp-card {
  animation: none;
  opacity: 1;
  transform: none;
}

/* ─── "General / all products" row for the FAQ scope picker ───────────── */
.pp-general {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  background: transparent;
  border: 0;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 220ms var(--ad-ease-spring);
}
.pp-general:hover { background: color-mix(in srgb, var(--color-foreground) 6%, transparent); }
.pp-general.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 75%); }
.pp-general-ic {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
  color: color-mix(in srgb, var(--color-text-muted) 90%, transparent);
  transition: all 240ms var(--ad-ease-spring);
}
.pp-general-ic svg { width: 17px; height: 17px; }
.pp-general.is-active .pp-general-ic {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 26%, transparent), color-mix(in srgb, var(--color-accent) 18%, transparent));
  color: var(--color-accent);
}
.pp-general-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pp-general-title { font-weight: 800; font-size: 0.7812rem; }
.pp-general-sub { font-size: 0.6875rem; color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); }
.pp-general-check {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent));
  color: var(--color-on-accent);
  transform: scale(0);
  transition: transform 300ms var(--ad-ease-spring);
}
.pp-general-check svg { width: 12px; height: 12px; }
.pp-general.is-active .pp-general-check { transform: scale(1); }
@media (max-width: 768px) { .pp-general { min-height: 56px; } }

/* ══════════════════════════════════════════════════════════════════════
   [Product editor v2] Side drawer → centered window
   Declared last, so equal-specificity selectors override the Phase 22 drawer.
   Desktop: centered card, vertical tab rail + panel.  Phone: full-height sheet
   rising from the bottom with a horizontal chip rail.
   ══════════════════════════════════════════════════════════════════════ */
#product-modal.pe-drawer-shell {
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}

#product-modal .pe-drawer {
  width: min(980px, 100%);
  /* Fixed height, not max-height: panels differ a lot in length and letting the
     window resize per tab made it visibly jump. Panels scroll inside instead. */
  height: min(86dvh, 720px);
  max-height: 86dvh;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 24px;
  border-inline-start: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  box-shadow:
    0 48px 90px -28px rgba(2, 6, 23, 0.75),
    0 0 0 1px rgba(148, 163, 184, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  /* Rises and settles — a window appearing, not a panel sliding in. */
  transform: translateY(20px) scale(0.965);
  opacity: 0;
  transition: transform 460ms var(--ad-ease-spring), opacity 300ms var(--ad-ease-out);
}
html[dir="rtl"] #product-modal .pe-drawer { transform: translateY(20px) scale(0.965); }
html[data-theme="light"] #product-modal .pe-drawer {
  border-color: color-mix(in srgb, var(--color-border-strong) 8%, transparent);
  box-shadow: 0 48px 90px -28px rgba(15, 23, 42, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#product-modal.pe-drawer-shell.is-open .pe-drawer,
html[dir="rtl"] #product-modal.pe-drawer-shell.is-open .pe-drawer {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── Header: live cover thumb + title ── */
#product-modal .pe-head {
  position: static;
  padding: 20px 22px 18px;
  border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-foreground) 5%, transparent), transparent);
}
#product-modal .pe-head-row { margin-bottom: 0; align-items: flex-start; }
.pe-head-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pe-head-thumb {
  position: relative;
  width: 54px; height: 54px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
  transition: border-color 300ms var(--ad-ease-spring);
}
.pe-head-thumb svg { width: 22px; height: 22px; }
.pe-head-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pe-head-thumb::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
#product-modal.pe-drawer-shell.is-open .pe-head-thumb { border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.pe-head-sub { font-size: 0.7188rem; color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); }
html[data-theme="light"] .pe-head-sub { color: var(--color-text-muted); }

/* ── Two-column body: tab rail + panel ── */
.pe-main {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
#product-modal .pe-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-inline-end: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  background: color-mix(in srgb, var(--color-foreground) 22%, transparent);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-theme="light"] #product-modal .pe-tabs { background: color-mix(in srgb, var(--color-foreground) 2%, transparent); }

/* Sliding pill that follows the active tab */
/* The active tab paints its own highlight. A separately-positioned pill needed
   offsetTop math that could drift out of alignment with the row it highlights;
   letting the tab own its background makes misalignment structurally impossible. */
.pe-tab-indicator { display: none; }

#product-modal .pe-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-text-muted) 95%, transparent);
  white-space: nowrap;
  transition: color 240ms var(--ad-ease-spring), background 240ms var(--ad-ease-spring);
}
html[data-theme="light"] #product-modal .pe-tab { color: var(--color-text-muted); }
#product-modal .pe-tab::after { display: none; }   /* kill the drawer's underline */
#product-modal .pe-tab svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 240ms, transform 300ms var(--ad-ease-spring), color 240ms;
}
#product-modal .pe-tab:hover { color: inherit; background: color-mix(in srgb, var(--color-foreground) 6%, transparent); }
#product-modal .pe-tab.is-active {
  color: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  /* Border would add 2px and nudge the row; trim the padding to compensate. */
  padding: 9px 11px;
}
#product-modal .pe-tab.is-active svg { opacity: 1; color: var(--color-accent); transform: scale(1.1); }

#product-modal .pe-body {
  padding: 22px 24px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}

/* ── Footer ── */
#product-modal .pe-footer {
  position: static;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-foreground) 5%, transparent));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Media panel gets more room in a wider window */
#product-modal .pm-preset-grid,
#product-modal .preset-grid { grid-template-columns: repeat(5, 1fr); }
#product-modal .pe-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ══════════════════════════════════════════════════════════════════════
   Phone: bottom sheet with a horizontal chip rail
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #product-modal.pe-drawer-shell {
    align-items: flex-end;
    padding: 0;
  }
  #product-modal .pe-drawer {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94dvh;
    border-radius: 22px 22px 0 0;
    border-inline-start: 0;
    transform: translateY(100%);
  }
  html[dir="rtl"] #product-modal .pe-drawer { transform: translateY(100%); }
  #product-modal.pe-drawer-shell.is-open .pe-drawer,
  html[dir="rtl"] #product-modal.pe-drawer-shell.is-open .pe-drawer {
    transform: translateY(0);
  }

  /* Grab handle so it reads as a sheet */
  #product-modal .pe-head::before {
    content: "";
    display: block;
    width: 42px; height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-foreground) 34%, transparent);
  }
  #product-modal .pe-head { padding: 12px 18px 14px; }
  .pe-head-thumb { width: 46px; height: 46px; }

  /* Rail becomes a scrollable chip row above the panel */
  .pe-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  #product-modal .pe-tabs {
    flex-direction: row;
    gap: 8px;
    padding: 10px 14px;
    border-inline-end: 0;
    border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  #product-modal .pe-tabs::-webkit-scrollbar { display: none; }
  .pe-tab-indicator { display: none; }   /* chips carry their own active state */
  #product-modal .pe-tab {
    width: auto;
    min-height: 44px;
    padding: 10px 14px;
    border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
    background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
  }
  #product-modal .pe-tab.is-active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 12%, transparent));
    border-color: color-mix(in srgb, var(--color-accent) 34%, transparent);
  }
  #product-modal .pe-body { padding: 18px 16px 24px; }
  #product-modal .pe-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  #product-modal .pe-field-row { grid-template-columns: 1fr; }
  #product-modal .pm-preset-grid,
  #product-modal .preset-grid { grid-template-columns: repeat(3, 1fr); }
  #product-modal .pe-footer .pe-save { flex: 1; justify-content: center; }
}

@media (max-width: 420px) {
  #product-modal .pe-footer { flex-wrap: wrap; gap: 8px; }
  #product-modal .pe-footer-side:last-child { width: 100%; }
  #product-modal .pe-footer-side:last-child .pe-cancel { flex: 0 0 auto; }
}

/* ─── Live inventory read-out (Pricing panel) ─────────────────────────── */
.pe-stock-card {
  --stk: var(--ok-emerald);
  margin-top: 4px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--color-background) 32%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 320ms var(--ad-ease-spring), background 320ms var(--ad-ease-spring);
}
html[data-theme="light"] .pe-stock-card { background: color-mix(in srgb, var(--color-foreground) 3%, transparent); border-color: color-mix(in srgb, var(--color-border-strong) 9%, transparent); }
.pe-stock-card[data-state="low"] { --stk: var(--ok-amber); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.pe-stock-card[data-state="out"] { --stk: var(--ok-rose);  border-color: color-mix(in srgb, var(--color-destructive) 30%, transparent); }

.pe-stock-top { display: flex; align-items: center; gap: 13px; }
.pe-stock-ic {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--stk) 15%, transparent);
  color: var(--stk);
  transition: background 320ms var(--ad-ease-spring), color 320ms var(--ad-ease-spring);
}
.pe-stock-ic svg { width: 19px; height: 19px; }
.pe-stock-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pe-stock-label {
  font-family: var(--font-mono);
  font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 85%, transparent);
}
.pe-stock-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--stk);
  transition: color 320ms var(--ad-ease-spring);
}
.pe-stock-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--stk);
  box-shadow: 0 0 8px var(--stk);
  animation: pe-stock-pulse 2.4s ease-in-out infinite;
}
.pe-stock-card[data-state="low"] .pe-stock-dot { animation-duration: 1.3s; }
.pe-stock-card[data-state="out"] .pe-stock-dot { animation: none; box-shadow: none; }
@keyframes pe-stock-pulse { 50% { transform: scale(1.55); opacity: 0.55; } }

.pe-stock-count {
  font-family: var(--font-mono);
  font-size: 1.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--stk);
  transition: color 320ms var(--ad-ease-spring);
}
.pe-stock-track {
  height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground) 14%, transparent);
  overflow: hidden;
}
.pe-stock-fill {
  display: block; height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--stk) 55%, transparent), var(--stk));
  transition: width 460ms var(--ad-ease-spring), background 320ms var(--ad-ease-spring);
}
.pe-stock-hint { margin: 0; font-size: 0.7188rem; color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); line-height: 1.5; }
html[data-theme="light"] .pe-stock-hint { color: var(--color-text-muted); }

/* ─── Quiet contextual footnote so short panels don't end in dead space ── */
.pe-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: var(--border-thin) dashed color-mix(in srgb, var(--color-border-strong) 18%, transparent);
  font-size: 0.7188rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}
html[data-theme="light"] .pe-note { color: var(--color-text-subtle); }
.pe-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; opacity: 0.75; }
@media (max-width: 768px) { .pe-stock-count { font-size: 1.45rem; } }

/* ══════════════════════════════════════════════
   [Phases 25–27 ✅] Loyalty · Customizer · Newsletter
   Shared admin language extends Phase 22–24 without changing its shell.
   ══════════════════════════════════════════════ */
.phase-admin-header { margin-bottom: 18px; }
.phase-eyebrow-violet { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, transparent); border-color: color-mix(in srgb, var(--color-accent) 20%, transparent); }
.phase-eyebrow-cyan { color: var(--ok-cyan); background: color-mix(in srgb, var(--color-accent) 8%, transparent); border-color: color-mix(in srgb, var(--color-accent) 20%, transparent); }
.phase-eyebrow-amber { color: var(--ok-amber); background: color-mix(in srgb, var(--color-warning) 8%, transparent); border-color: color-mix(in srgb, var(--color-warning) 20%, transparent); }
.phase-kicker { font: 700 10px/1.2 var(--font-mono); letter-spacing: .14em; color: color-mix(in srgb, var(--color-text-muted) 86%, transparent); }
html[data-theme="light"] .phase-kicker { color: var(--color-text-muted); }
.phase-panel {
  min-width: 0;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-foreground) 3%, transparent), color-mix(in srgb, var(--color-foreground) 1%, transparent));
  box-shadow: 0 16px 40px -34px rgba(2,6,23,.9);
}
html[data-theme="light"] .phase-panel { background: linear-gradient(145deg,var(--color-surface),var(--color-surface)); border-color: color-mix(in srgb, var(--color-border-strong) 10%, transparent); box-shadow: 0 16px 34px -28px rgba(15,23,42,.32); }
.phase-panel-head { min-height: 82px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); }
.phase-panel-head > div:first-child { min-width: 0; }
.phase-panel-head h3, .cu-form-head h3 { margin: 3px 0 2px; font: 700 17px/1.3 var(--font-heading); color: var(--text-primary); }
.phase-panel-head p, .cu-form-head p { margin: 0; max-width: 58ch; font-size: 0.7812rem; line-height: 1.5; color: color-mix(in srgb, var(--color-text-muted) 92%, transparent); }
html[data-theme="light"] .phase-panel-head p, html[data-theme="light"] .cu-form-head p { color: var(--color-text-muted); }
.phase-panel-actions, .cu-preview-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.phase-count { min-width: 30px; height: 25px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--color-accent) 11%, transparent); color: var(--color-accent); font: 700 11px/1 var(--font-mono); }
.phase-icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; flex-shrink: 0; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--color-foreground) 6%, transparent); color: color-mix(in srgb, var(--color-text-muted) 90%, transparent); cursor: pointer; text-decoration: none; transition: transform 180ms var(--ad-ease-spring), border-color 180ms, color 180ms, background 180ms; }
.phase-icon-btn:hover { color: var(--ok-cyan); border-color: color-mix(in srgb, var(--color-accent) 32%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); transform: translateY(-1px); }
.phase-icon-btn:focus-visible, .phase-input:focus-visible, .phase-search-row input:focus-visible, .phase-mobile-tab:focus-visible, .cu-device-toggle button:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 38%, transparent); outline-offset: 2px; }
.phase-icon-btn svg, .phase-icon-tile svg { width: 18px; height: 18px; }
.phase-add-btn { color: var(--color-on-accent); border-color: transparent; background: linear-gradient(135deg,var(--accent-color),var(--ok-cyan)); box-shadow: 0 8px 22px -10px rgba(var(--accent-color-rgb),.75); }
.phase-add-btn:hover { color: var(--color-on-accent); background: linear-gradient(135deg,var(--accent-color),var(--ok-cyan)); }
.phase-icon-tile { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; border-radius: 13px; color: var(--nw-accent,var(--ok-cyan)); background: color-mix(in oklab,var(--nw-accent,var(--ok-cyan)) 14%,transparent); }
.phase-icon-violet { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 13%, transparent); }
.phase-status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 22%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-success) 8%, transparent); color: var(--color-success); font: 700 11px/1 var(--font-mono); }
.phase-status-pill.is-muted { border-color: color-mix(in srgb, var(--color-border-strong) 20%, transparent); background: color-mix(in srgb, var(--color-foreground) 7%, transparent); color: var(--color-text-subtle); }
.phase-status-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.phase-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.phase-field > label, .nw-filter-group legend { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
.phase-field label span { color: var(--ok-rose); }
.phase-field-help, .cu-field-note { font-size: 0.6875rem; line-height: 1.45; color: color-mix(in srgb, var(--color-text-muted) 82%, transparent); }
html[data-theme="light"] .phase-field-help, html[data-theme="light"] .cu-field-note { color: var(--color-text-muted); }
.phase-input, .phase-search-row input { width: 100%; min-height: 45px; padding: 0 13px; border: 1.5px solid color-mix(in srgb, var(--color-border-strong) 30%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--color-background) 34%, transparent); color: var(--text-primary); font: 640 13.5px/1.4 var(--font-body); transition: border-color 180ms, background 180ms, box-shadow 180ms; }
textarea.phase-input { padding-block: 11px; }
.phase-input:hover, .phase-search-row:hover { border-color: color-mix(in srgb, var(--color-border-strong) 34%, transparent); }
.phase-input:focus, .phase-search-row:focus-within { border-color: rgba(var(--accent-color-rgb),.55); box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb),.1); outline: none; }
html[data-theme="light"] .phase-input, html[data-theme="light"] .phase-search-row input { background: var(--color-surface); border-color: color-mix(in srgb, var(--color-border-strong) 22%, transparent); color: var(--color-foreground); }
.phase-input-unit { position: relative; min-width: 0; }
.phase-input-unit .phase-input { padding-inline-end: 54px; }
.phase-input-unit > span { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); font: 700 10px/1 var(--font-mono); color: var(--color-text-subtle); pointer-events: none; }
.phase-search-row { min-height: 44px; margin: 14px 18px 8px; display: flex; align-items: center; gap: 8px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 17%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--color-foreground) 24%, transparent); padding-inline: 12px; }
html[data-theme="light"] .phase-search-row { background: var(--color-surface); border-color: color-mix(in srgb, var(--color-border-strong) 14%, transparent); }
.phase-search-row svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-subtle); }
.phase-search-row input { flex: 1; width: auto; min-width: 0; min-height: 40px; padding: 0; border: 0; background: transparent; box-shadow: none; }
html[data-theme="light"] .phase-search-row input { background: transparent; border-color: transparent; }
.phase-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.phase-form-error { min-height: 18px; margin: 0; color: var(--color-destructive); font-size: 0.75rem; font-weight: 600; }
.phase-mobile-tabs { display: none; }

/* Phase 25 — Loyalty */
.ly-config-strip { display: grid; grid-template-columns: minmax(260px,1.25fr) minmax(190px,.8fr) minmax(210px,.85fr) auto; align-items: end; gap: 18px; padding: 18px; margin-bottom: 18px; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 20%, transparent); border-radius: 20px; background: linear-gradient(120deg,color-mix(in srgb, var(--color-accent) 10%, transparent),color-mix(in srgb, var(--color-accent) 4%, transparent) 55%,color-mix(in srgb, var(--color-foreground) 2%, transparent)); }
html[data-theme="light"] .ly-config-strip { background: linear-gradient(120deg,color-mix(in srgb, var(--color-accent) 6%, transparent),var(--color-surface) 58%,color-mix(in srgb, var(--color-accent) 4%, transparent)); }
.ly-config-intro { display: flex; align-items: center; gap: 13px; min-width: 0; align-self: center; }
.ly-config-intro h3 { margin: 3px 0 2px; font: 700 17px/1.25 var(--font-heading); color: var(--text-primary); }
.ly-config-intro p { margin: 0; font-size: 0.75rem; line-height: 1.45; color: var(--color-text-subtle); }
.ly-config-save { min-height: 44px; white-space: nowrap; }
.ly-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: stretch; }
.ly-panel { display: flex; flex-direction: column; height: 560px; overflow: hidden; }
.ly-panel > .phase-panel-head { flex: 0 0 auto; }
.ly-panel > .phase-search-row { flex: 0 0 auto; }
.ly-ticket-list, .ly-override-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.ly-ticket-row { --ly-color:var(--color-accent);  /* [Phase 6] decoration, not status */ position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: var(--border-thin) solid transparent; border-radius: 13px; background: color-mix(in srgb, var(--color-foreground) 4%, transparent); transition: transform 190ms var(--ad-ease-spring), border-color 190ms, background 190ms; animation: phase-row-in 280ms var(--ad-ease-spring) both; }
.ly-ticket-row:hover { transform: translateY(-1px); border-color: color-mix(in oklab,var(--ly-color) 28%,transparent); background: color-mix(in oklab,var(--ly-color) 6%,transparent); }
.ly-ticket-row.is-inactive { opacity: .66; }
.ly-ticket-glyph { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--ly-color); background: color-mix(in oklab,var(--ly-color) 13%,transparent); }
.ly-ticket-glyph svg { width: 19px; height: 19px; }
.ly-ticket-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ly-ticket-copy strong { overflow-wrap: anywhere; font: 700 13.5px/1.3 var(--font-heading); color: var(--text-primary); }
.ly-ticket-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--color-text-subtle); font-size: 0.7188rem; }
.ly-ticket-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ly-ticket-meta b { color: var(--ly-color); font: 700 11px/1 var(--font-mono); }
.ly-ticket-actions { display: flex; align-items: center; gap: 4px; }
.ly-mini-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--color-text-subtle); cursor: pointer; transition: color 160ms,background 160ms; }
.ly-mini-btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--color-foreground) 11%, transparent); }
.ly-mini-btn.is-danger:hover { color: var(--color-destructive); background: color-mix(in srgb, var(--color-destructive) 9%, transparent); }
.ly-mini-btn svg { width: 16px; height: 16px; }
.phase-switch { position: relative; width: 42px; height: 24px; display: inline-flex; cursor: pointer; }
.phase-switch input, .phase-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.phase-switch span, .phase-switch-track { width: 42px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--color-foreground) 22%, transparent); transition: background 180ms; }
.phase-switch span::after, .phase-switch-track::after { content:""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 2px 8px rgba(2,6,23,.35); transition: transform 220ms var(--ad-ease-spring); }
.phase-switch input:checked + span, .phase-switch-row input:checked + .phase-switch-track { background: var(--accent-color); }
.phase-switch input:checked + span::after, .phase-switch-row input:checked + .phase-switch-track::after { transform: translateX(18px); }
html[dir="rtl"] .phase-switch input:checked + span::after, html[dir="rtl"] .phase-switch-row input:checked + .phase-switch-track::after { transform: translateX(-18px); }
.ly-override-row { width: 100%; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--premium-border, color-mix(in srgb, var(--color-border-strong) 24%, transparent)); border-radius: 13px; background: color-mix(in srgb, var(--color-foreground) 3%, transparent); color: inherit; text-align: start; cursor: pointer; transition: border-color 180ms,background 180ms,transform 180ms var(--ad-ease-spring); animation: phase-row-in 280ms var(--ad-ease-spring) both; }
.ly-override-row:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.ly-override-row img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; background: color-mix(in srgb, var(--color-foreground) 8%, transparent); }
.ly-override-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ly-override-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; color: var(--text-primary); }
.ly-override-copy span { font: 600 10.5px/1.2 var(--font-mono); color: var(--color-text-subtle); }
.ly-points-value { min-width: 76px; text-align: end; }
.ly-points-value strong { display: block; color: var(--ok-cyan); font: 700 14px/1.2 var(--font-mono); }
.ly-points-value span { font-size: 0.625rem; color: var(--color-text-subtle); }
.ly-points-value.is-global strong { color: var(--color-text-subtle); font-size: 0.6875rem; }
.phase-empty { min-height: 270px; padding: 28px; display: grid; place-items: center; text-align: center; color: var(--color-text-subtle); }
.phase-empty > div { max-width: 300px; }
.phase-empty svg { width: 38px; height: 38px; margin-bottom: 12px; color: color-mix(in srgb, var(--color-text-muted) 70%, transparent); }
.phase-empty strong { display: block; margin-bottom: 5px; color: var(--text-primary); font: 700 14px/1.3 var(--font-heading); }
.phase-empty p { margin: 0; font-size: 0.75rem; line-height: 1.55; }

/* Shared centered editor; full-screen editor on phones */
.phase-modal-shell { position: fixed; inset: 0; z-index: 720; display: grid; place-items: center; padding: 24px; visibility: hidden; pointer-events: none; }
.phase-modal-shell.is-open { visibility: visible; pointer-events: auto; }
.phase-modal-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.7); opacity: 0; backdrop-filter: blur(9px); transition: opacity 220ms var(--ease-standard); }
.phase-modal-shell.is-open .phase-modal-backdrop { opacity: 1; }
.phase-modal { position: relative; width: min(620px,100%); max-height: min(760px,calc(100dvh - 48px)); overflow: hidden; display: flex; flex-direction: column; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 20%, transparent); border-radius: 20px; background: var(--bg-secondary); box-shadow: var(--shadow-4); opacity: 0; transform: translateY(16px) scale(.97); transition: transform 320ms var(--ad-ease-spring),opacity 220ms var(--ease-standard); }
.phase-modal-shell.is-open .phase-modal { opacity: 1; transform: translateY(0) scale(1); }
.phase-modal-compact { width: min(500px,100%); }
.phase-modal-head { padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent); }
.phase-modal-head h2 { margin: 4px 0 3px; color: var(--text-primary); font: 700 20px/1.25 var(--font-heading); }
.phase-modal-head p { margin: 0; color: var(--color-text-subtle); font-size: 0.7812rem; }
.phase-modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 17px; overflow-y: auto; }
.phase-modal-foot { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent); background: color-mix(in oklab,var(--bg-secondary) 92%,transparent); }
.phase-switch-row { position: relative; min-height: 64px; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent); border-radius: 12px; cursor: pointer; }
.phase-switch-row > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.phase-switch-row strong { font-size: 0.7812rem; color: var(--text-primary); }
.phase-switch-row small { font-size: 0.6562rem; line-height: 1.4; color: var(--color-text-subtle); }
.phase-switch-track { position: relative; flex-shrink: 0; }
.ly-ticket-preview { padding: 16px; border: var(--border-thin) dashed color-mix(in srgb, var(--color-accent) 30%, transparent); border-radius: 14px; background: linear-gradient(135deg,color-mix(in srgb, var(--color-accent) 10%, transparent),color-mix(in srgb, var(--color-accent) 4%, transparent)); }
.ly-ticket-preview > div { margin-top: 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 14px; align-items: baseline; }
.ly-ticket-preview strong { color: var(--text-primary); font: 700 15px/1.3 var(--font-heading); }
.ly-ticket-preview span { color: var(--color-accent); font: 700 14px/1.3 var(--font-mono); }
.ly-ticket-preview small { grid-column: 1/-1; color: var(--color-text-subtle); font-size: 0.6875rem; }
.ly-override-product { padding: 12px; display: flex; align-items: center; gap: 12px; border-radius: 13px; background: color-mix(in srgb, var(--color-foreground) 6%, transparent); }
.ly-override-product img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; }
.ly-override-product div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ly-override-product strong { color: var(--text-primary); font: 700 14px/1.3 var(--font-heading); }
.ly-override-product span { color: var(--color-text-subtle); font: 600 11px/1.3 var(--font-mono); }

/* Phase 26 — real storefront preview */
.cu-workspace { display: grid; grid-template-columns: minmax(340px,2fr) minmax(0,3fr); gap: 18px; align-items: start; }
.cu-form { padding: 18px; display: flex; flex-direction: column; gap: 15px; }
.cu-form-head { padding-bottom: 15px; border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); }
.cu-form .form-group { margin: 0; }
.cu-form .form-group label { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
.cu-form .form-input { min-height: 44px; border-radius: 11px; font-weight: 600; }
.cu-form textarea.form-input { min-height: 92px; }
.cu-form h3:not(.cu-form-head h3) { margin: 12px -18px 0; padding: 18px 18px 10px; border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); border-bottom: 0; font: 700 14px/1.3 var(--font-heading); }
.cu-form .form-group-row { gap: 12px; }
.cu-accent-field { padding: 13px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 15%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--color-foreground) 4%, transparent); }
.cu-color-row { display: grid; grid-template-columns: 44px minmax(0,1fr) 38px; gap: 8px; align-items: center; }
#config-accent { width: 44px; height: 44px; padding: 3px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 20%, transparent); border-radius: 11px; background: transparent; cursor: pointer; }
.cu-save-bar { position: sticky; bottom: 0; z-index: 4; margin: 8px -18px -18px; padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 15%, transparent); background: color-mix(in oklab,var(--bg-secondary) 92%,transparent); backdrop-filter: blur(14px); }
.cu-save-bar .pt-btn { width: 100%; justify-content: center; min-height: 46px; }
.phase-unsaved { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-radius: 999px; color: var(--color-success); background: color-mix(in srgb, var(--color-success) 8%, transparent); border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 18%, transparent); font: 700 10px/1 var(--font-mono); }
/* [Phase 12] `> span` also matched the LABEL, forcing it into a 6×6 box. A
   single English word simply overflowed the box and stayed readable, so the
   bug was invisible until Arabic — which broke across the 6px width and
   rendered "محفوظ" as a vertical stack of letters. Target the dot only. */
.phase-unsaved > span:first-child { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.phase-unsaved > span:last-child { white-space: nowrap; }
.phase-unsaved.is-dirty { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 8%, transparent); border-color: color-mix(in srgb, var(--color-warning) 20%, transparent); }
.cu-preview-panel { position: sticky; top: calc(var(--ad-topbar-h,64px) + 16px); height: calc(100dvh - var(--ad-topbar-h,64px) - 32px); min-height: 620px; display: flex; flex-direction: column; overflow: hidden; }
.cu-preview-toolbar { min-height: 66px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 12px; border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent); }
.cu-preview-title { display: flex; align-items: center; gap: 9px; margin-inline-end: auto; }
.cu-preview-title > div { display: flex; flex-direction: column; gap: 2px; }
.cu-preview-title strong { color: var(--text-primary); font: 700 11px/1.2 var(--font-mono); }
.cu-device-toggle { display: inline-flex; gap: 3px; padding: 3px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 15%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--color-foreground) 24%, transparent); }
.cu-device-toggle button { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-subtle); font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
.cu-device-toggle button.is-active { color: var(--color-on-accent); background: var(--accent-color); box-shadow: 0 5px 13px -8px rgba(var(--accent-color-rgb),.8); }
.cu-device-toggle svg { width: 15px; height: 15px; }
.cu-preview-close { display: none; }
/* [Phase 13.1 ✅] The stage was a flat slab of raw `--color-accent` with the
   browser floating in the middle of it. On desktop that left an 87px band of
   pure brand colour above and below the preview (211px on a phone) — Mustafa
   reported it as "this big color around the PC preview".

   The desktop browser now fills the stage: `updateCustomizerPreviewScale()`
   fits it to WIDTH and gives it whatever pixel height the remaining space
   implies, so the gap is an even 10px mount instead of a colour field. The
   phone device keeps its 390×844 letterbox — a phone frame has to look like a
   phone, and the surround there is doing real work.

   What is left of the surround is treated as a mount rather than a fill: a
   three-stop diagonal in the shop's own accent, lit from the top-left and
   deepened at the bottom-right. `color-mix` with `--color-foreground` /
   `--color-background` rather than white/black, so it lightens on a dark theme
   and darkens on a light one from one declaration (SUMMARY note 7). */
.cu-preview-stage {
  position: relative; min-height: 0; flex: 1;
  padding: 10px;
  overflow: hidden;
  background:
    radial-gradient(128% 104% at 10% -18%, color-mix(in srgb, var(--color-foreground) 17%, transparent) 0%, transparent 56%),
    radial-gradient(96% 88% at 104% 116%, color-mix(in srgb, var(--color-background) 46%, transparent) 0%, transparent 58%),
    linear-gradient(152deg,
      color-mix(in srgb, var(--color-accent) 86%, var(--color-foreground)) 0%,
      var(--color-accent) 44%,
      color-mix(in srgb, var(--color-accent) 76%, var(--color-background)) 100%);
}
/* A fine dot grid, faded out towards the edges, so the mount reads as a design
   canvas rather than a painted rectangle. Masked, not uniform — a full-bleed
   grid fights the browser chrome sitting on top of it. */
.cu-preview-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--color-on-accent) 26%, transparent) 1px, transparent 1px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 46%, #000 18%, transparent 76%);
  mask-image: radial-gradient(120% 100% at 50% 46%, #000 18%, transparent 76%);
  opacity: .45;
}
.cu-preview-browser { --cu-preview-scale: .5; position: absolute; inset-inline-start: 50%; top: 50%; width: 1024px; height: 860px; display: flex; flex-direction: column; overflow: hidden; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 22%, transparent); border-radius: 14px; background: var(--color-surface); box-shadow: 0 30px 60px -30px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb, var(--color-on-accent) 16%, transparent); transform: translate(-50%,-50%) scale(var(--cu-preview-scale)); transform-origin: center; transition: transform 320ms var(--ad-ease-spring),border-radius 320ms var(--ad-ease-spring); }
html[dir="rtl"] .cu-preview-browser { transform: translate(50%,-50%) scale(var(--cu-preview-scale)); }
.cu-preview-stage[data-device="phone"] .cu-preview-browser { width: 390px; height: 844px; border-radius: 26px; }
.cu-browser-bar { min-height: 31px; padding: 0 9px; display: flex; align-items: center; gap: 5px; background: var(--color-surface); color: var(--color-text-subtle); }
.cu-browser-bar > span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-muted); }
.cu-browser-bar > span:first-child { background: var(--color-destructive); }.cu-browser-bar > span:nth-child(2){background:var(--color-warning)}.cu-browser-bar > span:nth-child(3){background:var(--color-success)}
.cu-browser-bar > div { flex: 1; margin-inline-start: 6px; text-align: center; font: 600 9px/1 var(--font-mono); }
#customizer-preview-frame { width: 100%; min-height: 0; flex: 1; border: 0; background: var(--color-surface); }
.cu-preview-note { margin: 0; padding: 10px 14px; border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); color: var(--color-text-subtle); font-size: 0.6562rem; line-height: 1.4; text-align: center; }
.cu-mobile-preview-btn { display: none; }

/* Phase 27 — Newsletter */
.nw-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.nw-stat { min-height: 112px; padding: 17px; display: flex; align-items: center; gap: 14px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 14%, transparent); border-radius: 17px; background: linear-gradient(145deg,color-mix(in oklab,var(--nw-accent) 7%,transparent),color-mix(in srgb, var(--color-foreground) 2%, transparent)); overflow: hidden; }
.nw-stat .phase-icon-tile { color: var(--nw-accent); background: color-mix(in oklab,var(--nw-accent) 14%,transparent); }
.nw-stat > div { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 2px; }
.nw-stat span { font-size: 0.6875rem; font-weight: 700; color: var(--color-text-subtle); }
.nw-stat strong { color: var(--text-primary); font: 700 clamp(20px,2vw,28px)/1.15 var(--font-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nw-stat small { color: color-mix(in oklab,var(--nw-accent) 72%,var(--color-text-subtle)); font-size: 0.6562rem; }
.nw-workspace { display: grid; grid-template-columns: minmax(0,1.85fr) minmax(250px,1fr); gap: 18px; align-items: stretch; }
.nw-subscriber-panel { display: flex; flex-direction: column; height: 560px; overflow: hidden; }
.nw-subscriber-panel > .phase-panel-head { flex: 0 0 auto; }
.nw-table-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: auto; }
.nw-table { width: 100%; border-collapse: collapse; font-size: 0.7812rem; }
.nw-table th { padding: 12px 16px; text-align: start; color: var(--color-text-subtle); background: color-mix(in srgb, var(--color-foreground) 4%, transparent); border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); font: 700 10px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.nw-table td { padding: 13px 16px; color: var(--text-secondary); border-bottom: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent); vertical-align: middle; }
.nw-table tbody tr { animation: phase-row-in 280ms var(--ad-ease-spring) both; transition: background 160ms; }
.nw-table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.nw-email { color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.nw-code { color: var(--ok-cyan); font: 700 11px/1.2 var(--font-mono); }
.nw-status { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 0 9px; border-radius: 999px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); font: 700 10px/1 var(--font-mono); }
.nw-status.is-redeemed { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.nw-status::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nw-card-list { display: none; }
.nw-filter-panel { display: flex; flex-direction: column; height: 560px; padding-bottom: 16px; overflow-y: auto; }
.nw-filter-panel > .phase-panel-head { flex: 0 0 auto; }
.nw-filter-panel > .phase-field { margin: 15px 18px 0; flex: 0 0 auto; }
.nw-filter-panel .phase-search-row { margin: 0; }
.nw-filter-panel fieldset.nw-filter-group { flex: 0 0 auto; }
.nw-filter-group { margin: 16px 18px 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.nw-filter-group legend { margin-bottom: 5px; }
.nw-filter-group label { min-height: 42px; padding: 0 11px; display: flex; align-items: center; gap: 9px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); border-radius: 10px; color: var(--text-secondary); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: border-color 160ms,background 160ms; }
.nw-filter-group label:has(input:checked) { border-color: rgba(var(--accent-color-rgb),.4); background: rgba(var(--accent-color-rgb),.07); color: var(--text-primary); }
.nw-filter-group input { accent-color: var(--accent-color); }
.nw-filter-actions { flex: 0 0 auto; margin: auto 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nw-filter-close,.nw-filter-trigger,.nw-sheet-handle { display: none; }
.nw-settings-panel { margin-top: 18px; overflow: hidden; }
.nw-settings-grid { padding: 18px 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.nw-conditional-group { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 16px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--color-foreground) 3%, transparent); }
.nw-conditional-group[hidden] { display: none; }

.nw-source-grid { margin-top: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nw-source-card {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 12px; border: 1.5px solid var(--premium-border); border-radius: 12px;
  background: color-mix(in srgb, var(--color-foreground) 3%, transparent); color: inherit; text-align: start; cursor: pointer;
  transition: border-color 180ms,background 180ms,transform 180ms var(--ad-ease-spring),box-shadow 180ms;
}
html[data-theme="light"] .nw-source-card { background: var(--color-surface); }
.nw-source-card:hover { border-color: color-mix(in srgb, var(--color-warning) 42%, transparent); background: color-mix(in srgb, var(--color-warning) 5%, transparent); transform: translateY(-1px); }
.nw-source-card.is-active { border-color: color-mix(in srgb, var(--color-warning) 60%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--color-warning) 15%, transparent), color-mix(in srgb, var(--color-accent) 5%, transparent)); box-shadow: 0 0 0 3px rgba(245,158,11,.13); }
.nw-source-card::after {
  content: ""; position: absolute; top: 12px; inset-inline-end: 12px;
  width: 15px; height: 15px; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--color-border-strong) 34%, transparent); transition: all 200ms;
}
.nw-source-card.is-active::after { border-color: var(--color-warning); background: radial-gradient(circle at center, var(--color-warning) 40%, transparent 42%); }
.nw-source-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 13%, transparent); transition: color 180ms,background 180ms; }
.nw-source-icon svg { width: 18px; height: 18px; }
.nw-source-card.is-active .nw-source-icon { color: var(--color-on-warning); background: var(--color-warning); }
.nw-source-copy strong { display: block; font-size: 0.7812rem; font-weight: 800; color: var(--text-primary); }
.nw-source-copy small { display: block; margin-top: 3px; font-size: 0.6562rem; line-height: 1.4; color: var(--color-text-subtle); }
@media (max-width: 480px) { .nw-source-grid { grid-template-columns: 1fr; } }
.nw-settings-footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); }
.nw-offer-preview { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nw-offer-preview span { color: var(--color-text-subtle); font-size: 0.6562rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.nw-offer-preview strong { color: var(--ok-amber); font: 700 13px/1.4 var(--font-mono); overflow-wrap: anywhere; }

@keyframes phase-row-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
  .ly-config-strip { grid-template-columns: 1fr 1fr; }
  .ly-config-intro { grid-column: 1/-1; }
  .ly-config-save { align-self: end; }
  .cu-workspace { grid-template-columns: minmax(330px,1fr) minmax(0,1.25fr); }
  .cu-preview-toolbar { flex-wrap: wrap; }
  .cu-device-toggle { order: 3; width: 100%; }
  .cu-device-toggle button { flex: 1; justify-content: center; }
}

@media (max-width: 768px) {
  .phase-admin-header { align-items: flex-start; }
  .phase-admin-header .pt-header-actions { width: 100%; }
  .phase-admin-header .pt-header-actions .pt-btn { flex: 1; justify-content: center; }
  .phase-icon-btn { width: 44px; height: 44px; }
  .phase-panel-head { padding: 16px; }
  .phase-mobile-tabs { position: sticky; top: calc(var(--ad-topbar-h,64px) + 8px); z-index: 20; margin-bottom: 12px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 15%, transparent); border-radius: 13px; background: color-mix(in oklab,var(--bg-primary) 88%,transparent); backdrop-filter: blur(14px); }
  .phase-mobile-tab { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text-subtle); font-size: 0.75rem; font-weight: 700; cursor: pointer; }
  .phase-mobile-tab.is-active { color: var(--color-on-accent); background: var(--accent-color); box-shadow: 0 6px 18px -10px rgba(var(--accent-color-rgb),.9); }
  .phase-form-grid { grid-template-columns: 1fr; }

  .ly-config-strip { grid-template-columns: 1fr; padding: 16px; }
  .ly-config-intro { grid-column: auto; }
  .ly-config-save { width: 100%; justify-content: center; }
  .ly-workspace { display: block; }
  .ly-panel { display: none; height: min(65dvh, 480px); }
  .ly-panel.is-mobile-active { display: flex; }
  .ly-ticket-row { grid-template-columns: 42px minmax(0,1fr); }
  .ly-ticket-actions { grid-column: 1/-1; justify-content: flex-end; border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 10%, transparent); padding-top: 8px; }
  .ly-ticket-actions .phase-switch { margin-inline-end: auto; }
  .ly-mini-btn { width: 44px; height: 44px; }
  .phase-switch { width: 44px; height: 44px; align-items: center; }
  .phase-switch span { position: relative; flex-shrink: 0; }
  .phase-modal-shell { padding: 0; place-items: stretch; }
  .phase-modal { width: 100%; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; transform: translateY(100%); }
  .phase-modal-shell.is-open .phase-modal { transform: translateY(0); }
  .phase-modal-head { padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
  .phase-modal-body { padding: 18px 16px; }
  .phase-modal-foot { margin-top: auto; padding-inline: 16px; }
  .phase-modal-foot .pt-btn { min-height: 46px; flex: 1; justify-content: center; }

  .cu-workspace { display: block; }
  .cu-form { padding: 16px; }
  .cu-form .form-group-row { display: grid; grid-template-columns: 1fr; }
  .cu-form h3:not(.cu-form-head h3) { margin-inline: -16px; padding-inline: 16px; }
  .cu-save-bar { margin-inline: -16px; margin-bottom: -16px; padding-inline: 16px; }
  .cu-mobile-preview-btn { display: inline-flex; }
  .cu-preview-panel { position: fixed; inset: 0; z-index: 760; height: 100dvh; min-height: 0; border: 0; border-radius: 0; visibility: hidden; opacity: 0; transform: translateY(22px); pointer-events: none; transition: opacity 180ms,transform 260ms var(--ad-ease-spring),visibility 0s linear 260ms; }
  .cu-preview-panel.is-mobile-open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 180ms,transform 260ms var(--ad-ease-spring); }
  .cu-preview-toolbar { min-height: calc(62px + env(safe-area-inset-top)); padding-top: calc(10px + env(safe-area-inset-top)); flex-wrap: nowrap; }
  .cu-preview-title { display: none; }
  .cu-device-toggle { order: 0; width: auto; flex: 1; }
  .cu-preview-actions > :not(.cu-preview-close) { display: none; }
  .cu-preview-close { display: inline-grid; }
  .cu-preview-stage { padding: 8px; }
  .cu-preview-browser { border-radius: 10px; }
  .cu-preview-stage[data-device="phone"] .cu-preview-browser { border-radius: 22px; }
  .cu-preview-note { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  .nw-stats { grid-template-columns: 1fr 1fr; }
  .nw-stat { min-height: 102px; padding: 14px; }
  .nw-stat:last-child { grid-column: 1/-1; }
  .nw-workspace { display: block; }
  .nw-subscriber-panel { height: auto; }
  .nw-table-wrap { display: none; }
  .nw-card-list { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
  .nw-card { padding: 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--color-foreground) 3%, transparent); }
  .nw-card .nw-email { grid-column: 1/-1; }
  .nw-card-meta { display: flex; flex-direction: column; gap: 5px; color: var(--color-text-subtle); font-size: 0.6875rem; }
  .nw-card > .nw-status { align-self: end; }
  .nw-filter-trigger { display: inline-flex; }
  .nw-filter-panel { position: fixed; inset: auto 0 0; z-index: 780; height: auto; max-height: min(82dvh,680px); padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--bg-secondary); visibility: hidden; opacity: 0; transform: translateY(100%); pointer-events: none; box-shadow: 0 -26px 70px -30px color-mix(in srgb, var(--color-background) 90%, transparent); transition: transform 280ms var(--ad-ease-spring),opacity 180ms,visibility 0s linear 280ms; overflow-y: auto; }
  .nw-filter-panel::before { content:""; position: fixed; inset: 0; z-index: -1; background: rgba(2,6,23,.66); opacity: 0; pointer-events: none; }
  .nw-filter-panel.is-open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition: transform 280ms var(--ad-ease-spring),opacity 180ms; }
  .nw-filter-panel.is-open::before { opacity: 1; pointer-events: auto; }
  .nw-sheet-handle { width: 42px; height: 4px; margin: 8px auto 0; display: block; border-radius: 999px; background: color-mix(in srgb, var(--color-foreground) 36%, transparent); }
  .nw-filter-close { display: inline-grid; }
  .nw-settings-panel { display: none; margin-top: 0; }
  #newsletter-section[data-mobile-view="settings"] .nw-workspace { display: none; }
  #newsletter-section[data-mobile-view="settings"] .nw-settings-panel { display: block; }
  .nw-settings-grid { grid-template-columns: 1fr; padding: 16px; }
  .nw-conditional-group { grid-template-columns: 1fr; padding: 13px; }
  .nw-settings-footer { position: sticky; bottom: 0; align-items: stretch; flex-direction: column; padding-inline: 16px; background: color-mix(in oklab,var(--bg-secondary) 94%,transparent); backdrop-filter: blur(14px); }
  .nw-settings-footer .pt-btn { width: 100%; justify-content: center; min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .ly-ticket-row,.ly-override-row,.nw-table tbody tr { animation: none; }
  .phase-modal,.phase-modal-backdrop,.cu-preview-panel,.nw-filter-panel,.cu-preview-browser { transition-duration: .01ms; }
}

/* ── Phases 25–27: post-ship visual refinement ─────────────────────── */
#loyalty-section .phase-admin-header { position: relative; isolation: isolate; overflow: hidden; }
.ly-header-orbit { position: absolute; z-index: -1; inset-inline-end: 4%; top: 5px; width: 156px; height: 66px; color: color-mix(in srgb, var(--color-accent) 42%, transparent); pointer-events: none; }
.ly-header-orbit circle { fill: color-mix(in oklab, currentColor 22%, transparent); stroke: currentColor; }

.ly-ticket-row { overflow: hidden; background: linear-gradient(102deg,color-mix(in srgb, var(--color-accent) 8%, transparent),color-mix(in srgb, var(--color-foreground) 2%, transparent) 48%,color-mix(in srgb, var(--color-accent) 2%, transparent)); }
.ly-ticket-row::before { content:""; position:absolute; inset-block: 11px; inset-inline-start: 64px; border-inline-start: var(--border-thin) dashed color-mix(in srgb, var(--color-accent) 28%, transparent); pointer-events:none; }
.ly-ticket-row:hover::before { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.ly-ticket-glyph { position:relative; overflow:hidden; background: linear-gradient(145deg,color-mix(in srgb, var(--color-accent) 28%, transparent),color-mix(in srgb, var(--color-accent) 8%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.ly-ticket-glyph::after { content:""; position:absolute; width:34px; height:34px; border:var(--border-thin) solid color-mix(in srgb, var(--color-accent) 24%, transparent); border-radius:50%; inset:50% auto auto 50%; transform:translate(-50%,-50%); }
.ly-ticket-glyph svg { position:relative; z-index:1; }
.ly-ticket-copy { padding-inline-start: 4px; }
.ly-ticket-meta span:last-child { padding-inline-start: 9px; border-inline-start: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 18%, transparent); }

.ly-ticket-preview { position:relative; min-height:104px; display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:12px; overflow:hidden; border-style:solid; border-color:color-mix(in srgb, var(--color-accent) 30%, transparent); background:linear-gradient(126deg,color-mix(in srgb, var(--color-accent) 28%, transparent),rgba(31,41,82,.28) 60%,rgba(6,182,212,.1)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.ly-ticket-preview::before { content:""; position:absolute; inset-inline-start:68px; inset-block:0; border-inline-start:var(--border-thin) dashed color-mix(in srgb, var(--color-accent) 25%, transparent); }
.ly-ticket-preview::after { content:"LOYALTY TICKET"; position:absolute; inset-inline-end:14px; inset-block-start:14px; color:color-mix(in srgb, var(--color-accent) 50%, transparent); font:700 8px/1 var(--font-mono); letter-spacing:.16em; }
.ly-ticket-preview-mark { grid-row:1 / -1; align-self:center; width:40px; height:40px; color:var(--color-accent); stroke:currentColor; stroke-width:1.6; filter:drop-shadow(0 5px 10px rgba(124,58,237,.28)); }
.ly-ticket-preview > .phase-kicker { position:relative; z-index:1; align-self:end; color:var(--color-accent); }
.ly-ticket-preview > div { position:relative; z-index:1; margin-top:6px; }
.ly-ticket-preview small { margin-top:2px; }

.cu-form-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cu-brand-fingerprint { min-width:68px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--accent-color); font:700 8px/1.1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.cu-brand-fingerprint svg { width:42px; height:42px; padding:7px; border:var(--border-thin) solid color-mix(in oklab,var(--accent-color) 32%,transparent); border-radius:15px; background:color-mix(in oklab,var(--accent-color) 10%,transparent); stroke:currentColor; stroke-width:1.6; }
.cu-preview-viewport { margin-inline-start:3px; padding:4px 6px; border:var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent); border-radius:6px; color:var(--color-text-subtle); font:700 8px/1 var(--font-mono); white-space:nowrap; }
.cu-preview-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 78% 17%,rgba(var(--accent-color-rgb),.13),transparent 22%),linear-gradient(180deg,color-mix(in srgb, var(--color-foreground) 2%, transparent),transparent 23%); }
.cu-preview-ambient { position:absolute; z-index:0; width:min(108%,900px); height:auto; inset-inline-start:-3%; bottom:1%; color:rgba(var(--accent-color-rgb),.3); pointer-events:none; }
.cu-preview-ambient path { stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-dasharray:2 8; }
.cu-preview-ambient circle { fill:currentColor; opacity:.75; }
.cu-preview-browser { z-index:1; }
.cu-preview-toolbar { background:linear-gradient(90deg,rgba(var(--accent-color-rgb),.055),transparent 40%); }
.cu-device-toggle button:active,.phase-icon-btn:active,.cu-theme-card:active,.cu-font-card:active,.cu-swatch:active,.cu-mode-toggle button:active,.ly-ticket-row:active,.ly-override-row:active,.nw-filter-group label:active { transform:scale(.98); }

.nw-stat { position:relative; isolation:isolate; }
.nw-stat-signal { position:absolute; z-index:-1; width:118px; height:64px; inset-inline-end:-5px; inset-block-end:2px; color:var(--nw-accent); opacity:.24; pointer-events:none; }
.nw-stat-signal path { stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.nw-stat-signal circle { fill:var(--bg-secondary); stroke:currentColor; stroke-width:1.8; }
.nw-stat strong { transition:color 180ms,transform 240ms var(--ad-ease-spring); }
.nw-stat strong.is-updated { color:var(--nw-accent); transform:translateY(-1px); }
.nw-filter-group label { position:relative; overflow:hidden; }
.nw-filter-group label::after { content:""; position:absolute; inset-inline-start:0; width:3px; height:100%; border-radius:0 4px 4px 0; background:var(--accent-color); transform:scaleY(0); transition:transform 180ms var(--ad-ease-spring); }
.nw-filter-group label:has(input:checked)::after { transform:scaleY(1); }
.nw-offer-preview { position:relative; flex-direction:row; align-items:center; gap:10px; }
.nw-offer-preview > svg { width:34px; height:34px; flex-shrink:0; padding:7px; border:var(--border-thin) solid color-mix(in srgb, var(--color-warning) 26%, transparent); border-radius:11px; color:var(--ok-amber); background:color-mix(in srgb, var(--color-warning) 10%, transparent); stroke:currentColor; stroke-width:1.7; }
.nw-offer-preview > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.nw-offer-preview strong { display:block; }
.nw-settings-panel { background:linear-gradient(132deg,color-mix(in srgb, var(--color-warning) 6%, transparent),color-mix(in srgb, var(--color-foreground) 2%, transparent) 44%,color-mix(in srgb, var(--color-accent) 2%, transparent)); }

@media (max-width:768px) {
  .ly-header-orbit { width:112px; height:48px; inset-inline-end:-12px; top:0; opacity:.68; }
  .ly-ticket-row::before { inset-inline-start:61px; }
  .ly-ticket-meta span:last-child { padding-inline-start:0; border-inline-start:0; }
  .cu-brand-fingerprint { min-width:56px; font-size:0.4375rem; }
  .cu-brand-fingerprint svg { width:36px; height:36px; border-radius:13px; }
  .cu-preview-viewport { display:none; }
  .cu-preview-ambient { width:150%; inset-inline-start:-27%; bottom:6%; opacity:.65; }
  .nw-stat-signal { inset-inline-end:-27px; opacity:.18; }
  .nw-offer-preview > svg { width:32px; height:32px; }
}

@media (prefers-reduced-motion: reduce) {
  .ly-ticket-row,.ly-override-row,.cu-theme-card,.cu-font-card,.nw-stat strong { transition-duration:.01ms; }
}

/* ── Premium refinement: Loyalty, FAQ, Newsletter ────────────────── */
/* Borders bumped to be genuinely visible (was .24/.38 — read as invisible). */
#loyalty-section,
#faqs-section,
#newsletter-section,
#faq-modal {
  --premium-border: color-mix(in srgb, var(--color-border-strong) 36%, transparent);
  --premium-border-strong: color-mix(in srgb, var(--color-border-strong) 54%, transparent);
  --premium-surface: rgba(15,23,42,.42);
  --premium-focus: rgba(var(--accent-color-rgb),.18);
}
html[data-theme="light"] #loyalty-section,
html[data-theme="light"] #faqs-section,
html[data-theme="light"] #newsletter-section,
html[data-theme="light"] #faq-modal {
  --premium-border: color-mix(in srgb, var(--color-border-strong) 28%, transparent);
  --premium-border-strong: color-mix(in srgb, var(--color-border-strong) 44%, transparent);
  --premium-surface: rgba(248,250,252,.92);
  --premium-focus: rgba(var(--accent-color-rgb),.13);
}

#loyalty-section .phase-panel,
#newsletter-section .phase-panel { border-width: 1.5px; border-color: var(--premium-border); }
#loyalty-section .phase-panel-head h3,
#newsletter-section .phase-panel-head h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
#loyalty-section .phase-panel-head p,
#newsletter-section .phase-panel-head p { margin-top: 4px; font-size: 0.8125rem; line-height: 1.55; }
#loyalty-section .phase-field > label,
#newsletter-section .phase-field > label { font-size: 0.8125rem; font-weight: 800; letter-spacing: -.005em; }
#loyalty-section .phase-input,
#newsletter-section .phase-input,
#loyalty-section .phase-search-row input,
#newsletter-section .phase-search-row input { font-size: 0.9062rem; font-weight: 700; }

/* The visual control owns focus; the native select remains the data source. */
.premium-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.premium-select { position: relative; z-index: 4; width: 100%; }
.premium-select:has(.premium-select-trigger:focus-visible),
.premium-select.is-open { z-index: 60; }
.premium-select-trigger {
  width: 100%; min-height: 48px; padding: 0 12px 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1.25px solid var(--premium-border); border-radius: 12px;
  color: var(--text-primary); background: color-mix(in srgb, var(--color-background) 32%, transparent);
  font: 650 14px/1.35 var(--font-body); text-align: start; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color 180ms,background 180ms,box-shadow 180ms,transform 160ms var(--ad-ease-spring);
}
html[data-theme="light"] .premium-select-trigger { background: var(--color-surface); box-shadow: 0 1px 2px rgba(15,23,42,.025); }
.premium-select-trigger:hover { border-color: var(--premium-border-strong); background: color-mix(in oklab,var(--premium-surface) 84%,var(--accent-color) 3%); }
.premium-select-trigger:active { transform: scale(.992); }
.premium-select-trigger:focus-visible { outline: 0; border-color: rgba(var(--accent-color-rgb),.48); box-shadow: 0 0 0 3px var(--premium-focus); }
.premium-select.is-open .premium-select-trigger { border-color: rgba(var(--accent-color-rgb),.52); box-shadow: 0 0 0 3px var(--premium-focus); }
.premium-select-chevron { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--color-text-subtle); background: color-mix(in srgb, var(--color-foreground) 8%, transparent); transition: transform 260ms var(--ad-ease-spring),color 180ms,background 180ms; }
.premium-select-chevron svg { width: 16px; height: 16px; }
.premium-select.is-open .premium-select-chevron { transform: rotate(180deg); color: var(--accent-color); background: rgba(var(--accent-color-rgb),.1); }
.premium-select-menu {
  position: absolute; inset: calc(100% + 7px) 0 auto; z-index: 90;
  max-height: 260px; padding: 6px; overflow-y: auto;
  border: 1.25px solid var(--premium-border-strong); border-radius: 13px;
  background: color-mix(in oklab,var(--bg-secondary) 96%,var(--color-surface) 4%);
  box-shadow: 0 18px 42px -18px rgba(2,6,23,.86),inset 0 1px 0 rgba(255,255,255,.04);
  visibility: hidden; opacity: 0; transform: translateY(-7px) scale(.985); transform-origin: top;
  pointer-events: none; transition: opacity 150ms,transform 220ms var(--ad-ease-spring),visibility 0s linear 220ms;
}
html[data-theme="light"] .premium-select-menu { background: var(--color-surface); box-shadow: 0 18px 42px -20px rgba(15,23,42,.32); }
.premium-select.is-open .premium-select-menu { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; transition: opacity 150ms,transform 220ms var(--ad-ease-spring); }
.premium-select-option { width: 100%; min-height: 42px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 9px; color: var(--text-secondary); background: transparent; font: 640 13.5px/1.3 var(--font-body); text-align: start; cursor: pointer; transition: color 150ms,background 150ms,transform 150ms; }
.premium-select-option + .premium-select-option { margin-top: 2px; }
.premium-select-option svg { width: 16px; height: 16px; color: var(--accent-color); opacity: 0; transform: scale(.65); transition: opacity 150ms,transform 200ms var(--ad-ease-spring); }
.premium-select-option:hover,.premium-select-option:focus-visible { outline: 0; color: var(--text-primary); background: rgba(var(--accent-color-rgb),.08); }
.premium-select-option:active { transform: scale(.985); }
.premium-select-option.is-selected { color: var(--text-primary); background: rgba(var(--accent-color-rgb),.11); font-weight: 800; }
.premium-select-option.is-selected svg { opacity: 1; transform: scale(1); }

/* Search focus belongs to the complete search field, not its inner input. */
.phase-search-row input:focus,
.phase-search-row input:focus-visible,
.pp-search-input:focus,
.pp-search-input:focus-visible { outline: 0 !important; box-shadow: none !important; border-color: transparent !important; }
.phase-search-row { min-height: 48px; border-width: 1.5px; border-color: var(--premium-border); transition: border-color 180ms,box-shadow 180ms,background 180ms; }
.phase-search-row:focus-within { border-color: rgba(var(--accent-color-rgb),.32); box-shadow: 0 0 0 3px rgba(var(--accent-color-rgb),.08); }
.phase-search-row:focus-within svg { color: var(--accent-color); }
.pp-picker:focus-within { border-color: var(--premium-border) !important; box-shadow: none !important; }
.pp-search { margin: 5px; border: 1.25px solid transparent; border-radius: 11px; transition: border-color 180ms,box-shadow 180ms,background 180ms; }
.pp-search:focus-within { border-color: rgba(var(--accent-color-rgb),.4); background: rgba(var(--accent-color-rgb),.035); box-shadow: 0 0 0 3px var(--premium-focus); }

/* Loyalty earning engine */
.ly-config-strip {
  grid-template-columns: minmax(280px,1.2fr) minmax(220px,.78fr) minmax(250px,.84fr);
  align-items: start; gap: 18px 22px; padding: 22px;
  border-width: 1.5px; border-color: color-mix(in srgb, var(--color-accent) 46%, transparent);
  background: linear-gradient(115deg,color-mix(in srgb, var(--color-accent) 14%, transparent),color-mix(in srgb, var(--color-accent) 4%, transparent) 54%,color-mix(in srgb, var(--color-accent) 6%, transparent));
  box-shadow: 0 18px 48px -34px rgba(91,33,182,.78),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="light"] .ly-config-strip { border-color: color-mix(in srgb, var(--color-accent) 32%, transparent); }
.ly-config-intro { min-height: 90px; align-items: center; }
.ly-config-intro .phase-icon-tile { width: 52px; height: 52px; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 25%, transparent); box-shadow: 0 10px 26px -16px rgba(124,58,237,.8),inset 0 1px 0 rgba(255,255,255,.08); }
.ly-config-intro h3 { margin-top: 4px; font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.ly-config-intro p { margin-top: 5px; font-size: 0.7812rem; line-height: 1.55; }
.ly-config-strip > .phase-field { min-height: 90px; justify-content: flex-start; }
.ly-rate-stepper { min-height: 56px; display: flex; align-items: center; gap: 4px; padding: 5px; border: 1.5px solid var(--premium-border); border-radius: 16px; background: color-mix(in srgb, var(--color-background) 30%, transparent); transition: border-color 180ms,box-shadow 180ms; }
html[data-theme="light"] .ly-rate-stepper { background: var(--color-surface); }
.ly-rate-stepper:focus-within { border-color: rgba(var(--accent-color-rgb),.46); box-shadow: 0 0 0 3px var(--premium-focus); }
.ly-stepper-btn {
  flex: 0 0 auto; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 11px;
  color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  cursor: pointer; transition: color 150ms,background 150ms,transform 150ms;
}
.ly-stepper-btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
.ly-stepper-btn:hover { color: #fff; background: color-mix(in srgb, var(--color-accent) 32%, transparent); }
html[data-theme="light"] .ly-stepper-btn { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
html[data-theme="light"] .ly-stepper-btn:hover { color: #fff; background: color-mix(in srgb, var(--color-accent) 62%, transparent); }
.ly-stepper-btn:focus-visible { outline: 2px solid rgba(var(--accent-color-rgb),.5); outline-offset: 1px; }
.ly-stepper-btn:active { transform: scale(.9); }
.ly-rate-value { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.ly-rate-value input { flex: 0 1 120px; min-width: 0; min-height: 46px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font: 760 16px/1 var(--font-mono) !important; appearance: textfield; }
.ly-rate-value input::-webkit-inner-spin-button,.ly-rate-value input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ly-rate-value span { color: var(--color-text-subtle); font: 760 10px/1 var(--font-mono); }
.ly-rate-value.is-bumping { animation: ly-rate-bump 240ms var(--ad-ease-spring); }
@keyframes ly-rate-bump { 45% { transform: translateY(-2px); color: var(--accent-color); } }
.ly-config-actions { grid-column: 1/-1; display: flex; justify-content: center; padding-top: 1px; }
.ly-config-save { min-width: 220px; justify-content: center; }

.ly-ticket-row { min-height: 94px; border: 1.5px solid var(--premium-border); border-radius: 15px; transition: border-color 180ms,background 180ms,transform 220ms var(--ad-ease-spring),box-shadow 180ms; }
.ly-ticket-row:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, transparent); transform: translateY(-1px); box-shadow: 0 14px 28px -26px rgba(124,58,237,.85); }
.ly-ticket-row::before { inset-inline-start: 72px; }
.ly-ticket-glyph { width: 54px; height: 54px; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 20%, transparent); border-radius: 17px; }
.ly-ticket-glyph::after { display: none; }
.ly-ticket-glyph svg { width: 34px; height: 34px; }
.ly-ticket-copy strong { font-size: 0.9375rem; font-weight: 800; letter-spacing: -.012em; }
.ly-ticket-meta { margin-top: 6px; font-size: 0.75rem; }

/* FAQ editor: structured authoring + live storefront preview */
#faq-modal { padding: 22px; }
#faq-modal .bwf-drawer { width: min(1120px,100%); max-height: min(92dvh,880px); border: 1.25px solid var(--premium-border-strong); border-radius: 24px; box-shadow: 0 32px 90px -30px rgba(2,6,23,.92),inset 0 1px 0 rgba(255,255,255,.045); }
#faq-modal .faq-editor-head { min-height: 104px; padding: 20px 24px; border-bottom: 1.25px solid var(--premium-border); background: linear-gradient(105deg,color-mix(in srgb, var(--color-accent) 8%, transparent),transparent 46%,color-mix(in srgb, var(--color-accent) 4%, transparent)); }
.faq-editor-identity { min-width: 0; display: flex; align-items: center; gap: 15px; }
.faq-editor-mark { width: 54px; height: 54px; display: grid; place-items: center; flex: 0 0 auto; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 25%, transparent); border-radius: 17px; color: var(--color-accent); background: linear-gradient(145deg,color-mix(in srgb, var(--color-accent) 17%, transparent),color-mix(in srgb, var(--color-accent) 6%, transparent)); box-shadow: 0 14px 30px -20px rgba(59,130,246,.8),inset 0 1px 0 rgba(255,255,255,.07); }
.faq-editor-mark svg { width: 35px; height: 35px; }
#faq-modal .bwf-drawer-title { font-size: 1.3125rem; font-weight: 800; letter-spacing: -.025em; }
.faq-editor-head .bwf-drawer-head-copy > p { margin: 3px 0 0; color: var(--color-text-subtle); font-size: 0.7812rem; line-height: 1.45; }
#faq-modal form { min-height: 0; display: flex; flex: 1; flex-direction: column; }
#faq-modal .faq-editor-body { min-height: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1.58fr) minmax(285px,.82fr); overflow-y: auto; }
.faq-editor-main { min-width: 0; padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 22px; }
.faq-editor-section { padding: 18px; border: 1.25px solid var(--premium-border); border-radius: 17px; background: color-mix(in srgb, var(--color-foreground) 2%, transparent); transition: border-color 180ms,background 180ms; }
html[data-theme="light"] .faq-editor-section { background: color-mix(in srgb, var(--color-surface) 82%, transparent); }
.faq-editor-section.is-refreshed { animation: faq-section-refresh 440ms var(--ad-ease-spring); }
@keyframes faq-section-refresh { 45% { border-color: rgba(var(--accent-color-rgb),.42); background: rgba(var(--accent-color-rgb),.055); } }
.faq-section-heading { margin-bottom: 15px; display: flex; align-items: flex-start; gap: 11px; }
.faq-section-number { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 24%, transparent); border-radius: 9px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); font: 760 10px/1 var(--font-mono); }
.faq-section-heading h3 { margin: 0; color: var(--text-primary); font: 780 15px/1.25 var(--font-heading); letter-spacing: -.01em; }
.faq-section-heading p { margin: 4px 0 0; color: var(--color-text-subtle); font-size: 0.7188rem; line-height: 1.45; }
#faq-modal .pp-picker { border-width: 1.25px; border-color: var(--premium-border); border-radius: 14px; }
#faq-modal .pp-grid { max-height: 230px; grid-template-columns: repeat(3,minmax(0,1fr)); }
#faq-modal .pp-card { border-width: 1.25px; }
.faq-template-row { margin-bottom: 15px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.faq-template { min-height: 46px; padding: 0 11px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.25px solid var(--premium-border); border-radius: 11px; color: var(--text-secondary); background: color-mix(in srgb, var(--color-foreground) 2%, transparent); font: 700 12px/1 var(--font-body); cursor: pointer; transition: color 160ms,border-color 160ms,background 160ms,transform 180ms var(--ad-ease-spring); }
.faq-template svg { width: 18px; height: 18px; color: var(--color-accent); }
.faq-template:hover,.faq-template.is-active { color: var(--text-primary); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.faq-template:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--premium-focus); }
.faq-template:active { transform: scale(.975); }
#faq-modal .faq-field { margin: 0; }
#faq-modal .faq-field + .faq-field { margin-top: 13px; }
#faq-modal .faq-field label { margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; color: var(--text-primary); font-size: 0.7812rem; font-weight: 800; }
#faq-modal .faq-field label small { color: var(--color-text-subtle); font: 650 9.5px/1 var(--font-mono); }
.faq-input-shell { min-height: 50px; display: grid; grid-template-columns: 43px minmax(0,1fr); align-items: center; border: 1.25px solid var(--premium-border); border-radius: 12px; background: color-mix(in srgb, var(--color-background) 28%, transparent); transition: border-color 180ms,box-shadow 180ms,background 180ms; }
html[data-theme="light"] .faq-input-shell { background: var(--color-surface); }
.faq-input-shell:focus-within { border-color: rgba(var(--accent-color-rgb),.46); box-shadow: 0 0 0 3px var(--premium-focus); }
.faq-input-shell > svg { width: 18px; height: 18px; justify-self: center; color: var(--color-text-muted); transition: color 180ms; }
.faq-input-shell:focus-within > svg { color: var(--accent-color); }
#faq-modal .faq-input-shell .form-input { min-height: 48px; padding: 0 13px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-primary); font-size: 0.875rem; font-weight: 700; }
.faq-textarea-shell { align-items: start; }
.faq-textarea-shell > svg { margin-top: 15px; }
#faq-modal .faq-textarea-shell textarea.form-input { min-height: 128px; padding-top: 13px; line-height: 1.6; resize: vertical; }
#faq-modal .phase-form-error { min-height: 16px; margin: 10px 0 0; }
.faq-editor-aside { min-width: 0; padding: 22px; border-inline-start: 1.25px solid var(--premium-border); background: linear-gradient(155deg,color-mix(in srgb, var(--color-accent) 8%, transparent),color-mix(in srgb, var(--color-foreground) 8%, transparent) 48%,color-mix(in srgb, var(--color-accent) 4%, transparent)); }
html[data-theme="light"] .faq-editor-aside { background: linear-gradient(155deg,color-mix(in srgb, var(--color-accent) 6%, transparent),color-mix(in srgb, var(--color-surface) 96%, transparent) 48%,color-mix(in srgb, var(--color-accent) 5%, transparent)); }
.faq-aside-label { display: flex; align-items: center; gap: 7px; color: var(--color-text-subtle); font: 760 9.5px/1 var(--font-mono); letter-spacing: .12em; }
.faq-aside-label .phase-status-dot { background: var(--color-accent); box-shadow: 0 0 0 4px rgba(34,211,238,.09); animation: faq-live-pulse 2.8s ease-in-out infinite; }
@keyframes faq-live-pulse { 50% { box-shadow: 0 0 0 7px rgba(34,211,238,0); } }
.faq-preview-card { position: relative; margin-top: 15px; padding: 18px; overflow: hidden; border: 1.25px solid color-mix(in srgb, var(--color-accent) 26%, transparent); border-radius: 18px; background: color-mix(in oklab,var(--bg-secondary) 92%,#0f3c70 8%); box-shadow: 0 18px 45px -34px rgba(37,99,235,.75),inset 0 1px 0 rgba(255,255,255,.05); }
html[data-theme="light"] .faq-preview-card { background: var(--color-surface); }
.faq-preview-card::after { content:""; position: absolute; width: 150px; height: 150px; inset: auto -75px -88px auto; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 12%, transparent); border-radius: 50%; box-shadow: 0 0 0 24px rgba(96,165,250,.025); pointer-events: none; }
.faq-preview-product { position: relative; z-index: 1; padding-bottom: 15px; display: flex; align-items: center; gap: 10px; border-bottom: var(--border-thin) solid var(--premium-border); }
.faq-preview-product-mark { width: 38px; height: 38px; display: grid; place-items: center; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 22%, transparent); border-radius: 11px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.faq-preview-product-mark svg { width: 20px; height: 20px; }
.faq-preview-product div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.faq-preview-product small,.faq-preview-kicker { color: var(--color-text-muted); font: 740 8.5px/1 var(--font-mono); letter-spacing: .12em; }
.faq-preview-product strong { color: var(--text-primary); font-size: 0.7188rem; overflow-wrap: anywhere; }
.faq-preview-kicker { position: relative; z-index: 1; display: block; margin-top: 17px; color: var(--color-accent); }
.faq-preview-question { position: relative; z-index: 1; margin-top: 9px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.faq-preview-question strong { color: var(--text-primary); font-size: 0.9375rem; line-height: 1.42; letter-spacing: -.01em; overflow-wrap: anywhere; }
.faq-preview-question span { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.faq-preview-question svg { width: 15px; height: 15px; }
.faq-preview-card > p { position: relative; z-index: 1; margin: 12px 0 0; color: var(--color-text-subtle); font-size: 0.75rem; line-height: 1.65; overflow-wrap: anywhere; }
.faq-writing-note { margin-top: 15px; padding: 14px; display: flex; align-items: flex-start; gap: 10px; border: var(--border-thin) solid var(--premium-border); border-radius: 13px; background: color-mix(in srgb, var(--color-foreground) 2%, transparent); }
.faq-writing-note > svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--color-warning); }
.faq-writing-note strong { display: block; color: var(--text-primary); font-size: 0.7188rem; }
.faq-writing-note p { margin: 4px 0 0; color: var(--color-text-subtle); font-size: 0.6562rem; line-height: 1.55; }
#faq-modal .bwf-drawer-foot { min-height: 76px; padding: 13px 24px calc(13px + env(safe-area-inset-bottom)); border-top: 1.25px solid var(--premium-border); }
#faq-modal .bwf-drawer-foot button { min-height: 46px; padding-inline: 20px; font-size: 0.8125rem; font-weight: 800; }

/* Newsletter: real trend signals, a richer directory, and customer preview. */
.nw-stat { border-width: 1.5px; border-color: var(--premium-border); }
.nw-stat-signal { width: 128px; height: 70px; inset-inline-end: -2px; opacity: .28; }
.nw-stat-signal .nw-trend-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nw-stat-signal .nw-trend-area { fill: color-mix(in oklab,currentColor 12%,transparent); stroke: none; }
.nw-stat-signal circle { fill: color-mix(in oklab,var(--bg-secondary) 88%,currentColor 12%); stroke: currentColor; stroke-width: 1.4; }
.nw-stat-signal.is-drawn .nw-trend-line { stroke-dasharray: 220; stroke-dashoffset: 0; animation: nw-trend-draw 700ms var(--ad-ease-spring) both; }
.nw-stat-signal.is-drawn .nw-trend-area { animation: nw-trend-fade 520ms ease both; }
@keyframes nw-trend-draw { from { stroke-dashoffset: 220; } }
@keyframes nw-trend-fade { from { opacity: 0; } }
.nw-stat > div > span { font-size: 0.75rem; font-weight: 800; }
.nw-stat small { font-size: 0.6562rem; font-weight: 700; }
.nw-subscriber-panel { overflow: hidden; }
.nw-table { font-size: 0.8125rem; }
.nw-table th { padding: 13px 17px; border-bottom: 1.25px solid var(--premium-border); background: color-mix(in srgb, var(--color-foreground) 6%, transparent); }
.nw-th-label { display: inline-flex; align-items: center; gap: 7px; }
.nw-th-label svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.nw-table td { height: 74px; padding: 12px 17px; border-bottom: var(--border-thin) solid var(--premium-border); }
.nw-table tbody tr { position: relative; }
.nw-table tbody tr::after { content:""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; border-radius: 0 4px 4px 0; background: var(--color-accent); opacity: 0; transform: scaleY(.4); transition: opacity 180ms,transform 200ms var(--ad-ease-spring); }
.nw-table tbody tr.is-redeemed::after { background: var(--color-success); }
.nw-table tbody tr:hover::after { opacity: 1; transform: scaleY(1); }
.nw-person { min-width: 0; display: flex; align-items: center; gap: 10px; }
.nw-person-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 20%, transparent); border-radius: 11px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.nw-person-mark svg { width: 19px; height: 19px; }
.nw-avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; font: 800 15px/1 var(--font-heading);
  color: hsl(var(--nw-av-h,220) 70% 82%);
  background: linear-gradient(150deg, hsl(var(--nw-av-h,220) 62% 48% / .34), hsl(var(--nw-av-h,220) 62% 38% / .14));
  border: 1.5px solid hsl(var(--nw-av-h,220) 62% 60% / .34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
html[data-theme="light"] .nw-avatar { color: hsl(var(--nw-av-h,220) 68% 34%); background: linear-gradient(150deg, hsl(var(--nw-av-h,220) 70% 62% / .26), hsl(var(--nw-av-h,220) 70% 60% / .1)); border-color: hsl(var(--nw-av-h,220) 60% 52% / .32); }
.nw-person > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nw-person small { color: var(--color-text-muted); font: 650 9px/1 var(--font-mono); letter-spacing: .04em; }
.nw-email { color: var(--text-primary); font-size: 0.8125rem; font-weight: 800; overflow-wrap: anywhere; }
.nw-code-wrap { display: flex; align-items: center; gap: 6px; }
.nw-code { min-height: 30px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 18%, transparent); border-radius: 9px; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); font: 720 10.5px/1 var(--font-mono); letter-spacing: .025em; }
.nw-code svg { width: 14px; height: 14px; }
.nw-copy-code { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: var(--border-thin) solid var(--premium-border); border-radius: 9px; color: var(--color-text-subtle); background: transparent; cursor: pointer; transition: color 150ms,border-color 150ms,background 150ms,transform 180ms var(--ad-ease-spring); }
.nw-copy-code svg { width: 15px; height: 15px; }
.nw-copy-code:hover,.nw-copy-code.is-copied { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.nw-copy-code:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--premium-focus); }
.nw-copy-code:active { transform: scale(.9); }
.nw-date { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
.nw-date svg { width: 15px; height: 15px; color: var(--color-text-muted); }
.nw-status { min-height: 29px; padding: 0 10px; border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 18%, transparent); font-size: 0.6562rem; font-weight: 800; }
.nw-status::before { display: none; }
.nw-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in oklab,currentColor 10%,transparent); }
.nw-status.is-redeemed { border-color: color-mix(in srgb, var(--color-success) 20%, transparent); }
.nw-filter-panel { border-width: 1.5px; }
.nw-filter-group label { min-height: 46px; border-width: 1.5px; border-color: var(--premium-border); font-size: 0.7812rem; font-weight: 700; }
.nw-settings-panel { overflow: visible; border-width: 1.5px; border-color: color-mix(in srgb, var(--color-warning) 36%, transparent); }
html[data-theme="light"] .nw-settings-panel { border-color: color-mix(in srgb, var(--color-warning) 32%, transparent); }
.nw-offer-workspace { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); }
.nw-settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; padding: 22px; }
.nw-conditional-group { border-width: 1.5px; border-color: var(--premium-border); }
.nw-campaign-preview { position: relative; min-width: 0; padding: 24px; overflow: hidden; border-inline-start: 1.5px solid color-mix(in srgb, var(--color-warning) 28%, transparent); background: linear-gradient(145deg,color-mix(in srgb, var(--color-warning) 11%, transparent),color-mix(in srgb, var(--color-accent) 6%, transparent) 55%,color-mix(in srgb, var(--color-accent) 6%, transparent)); }
.nw-campaign-preview::after { content:""; position: absolute; width: 190px; height: 190px; inset: auto -95px -100px auto; border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 11%, transparent); border-radius: 50%; box-shadow: 0 0 0 28px rgba(245,158,11,.025); pointer-events: none; }
.nw-preview-orb { width: 52px; height: 52px; margin-bottom: 18px; display: grid; place-items: center; border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 25%, transparent); border-radius: 17px; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); box-shadow: 0 14px 28px -20px rgba(245,158,11,.9),inset 0 1px 0 rgba(255,255,255,.07); }
.nw-preview-orb svg { width: 34px; height: 34px; }
.nw-campaign-preview h4 { position: relative; z-index: 1; max-width: 330px; margin: 8px 0 0; color: var(--text-primary); font: 790 18px/1.3 var(--font-heading); letter-spacing: -.02em; }
.nw-campaign-preview > p { position: relative; z-index: 1; margin: 8px 0 0; color: var(--color-text-subtle); font-size: 0.75rem; line-height: 1.6; }
.nw-preview-ticket { position: relative; z-index: 1; margin-top: 20px; min-height: 78px; padding: 13px; display: flex; align-items: center; gap: 12px; border: 1.5px solid color-mix(in srgb, var(--color-warning) 34%, transparent); border-radius: 15px; background: color-mix(in oklab,var(--bg-secondary) 90%,#78350f 10%); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: opacity 180ms,filter 180ms; }
html[data-theme="light"] .nw-preview-ticket { background: color-mix(in srgb, var(--color-surface) 84%, transparent); }
.nw-preview-ticket-mark { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.nw-preview-ticket-mark svg { width: 29px; height: 29px; }
.nw-preview-ticket > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nw-preview-ticket span { color: var(--color-text-subtle); font: 740 8.5px/1 var(--font-mono); letter-spacing: .11em; }
.nw-preview-ticket strong { color: var(--color-warning); font: 760 12px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.nw-preview-flow { position: relative; z-index: 1; margin-top: 16px; display: flex; align-items: center; gap: 8px; color: var(--color-text-subtle); font-size: 0.625rem; font-weight: 700; }
.nw-preview-flow span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.nw-preview-flow b { width: 20px; height: 20px; display: grid; place-items: center; border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 25%, transparent); border-radius: 50%; color: var(--color-warning); font: 750 9px/1 var(--font-mono); }
.nw-preview-flow i { height: 1px; flex: 1; background: linear-gradient(90deg,color-mix(in srgb, var(--color-warning) 25%, transparent),color-mix(in srgb, var(--color-accent) 22%, transparent)); }
.nw-campaign-preview.is-disabled .nw-preview-ticket { opacity: .46; filter: grayscale(.55); }
.nw-settings-footer { min-height: 76px; border-top-width: 1.25px; border-color: var(--premium-border); }
.nw-publish-note { display: flex; align-items: center; gap: 10px; }
.nw-publish-note > svg { width: 34px; height: 34px; padding: 7px; flex: 0 0 auto; border: var(--border-thin) solid color-mix(in srgb, var(--color-success) 20%, transparent); border-radius: 10px; color: var(--color-success); background: color-mix(in srgb, var(--color-success) 8%, transparent); }
.nw-publish-note > div { display: flex; flex-direction: column; gap: 3px; }
.nw-publish-note strong { color: var(--text-primary); font-size: 0.75rem; }
.nw-publish-note span { color: var(--color-text-subtle); font-size: 0.6562rem; }

@media (max-width: 1180px) {
  .ly-config-strip { grid-template-columns: 1fr 1fr; }
  .ly-config-intro { grid-column: 1/-1; }
  .ly-config-actions { grid-column: 1/-1; }
  .nw-offer-workspace { grid-template-columns: minmax(0,1.1fr) minmax(270px,.9fr); }
  .nw-settings-grid { grid-template-columns: 1fr; }
  .nw-conditional-group { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  #faq-modal { padding: 0; place-items: stretch; }
  #faq-modal .bwf-drawer { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  #faq-modal .faq-editor-head { min-height: 88px; padding: calc(14px + env(safe-area-inset-top)) 16px 14px; border-radius: 0; }
  .faq-editor-mark { width: 46px; height: 46px; border-radius: 14px; }
  .faq-editor-mark svg { width: 29px; height: 29px; }
  .faq-editor-head .bwf-drawer-head-copy > p { display: none; }
  #faq-modal .faq-editor-body { display: block; }
  .faq-editor-main { padding: 15px; gap: 14px; }
  .faq-editor-section { padding: 14px; }
  #faq-modal .pp-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 205px; }
  .faq-editor-aside { padding: 17px 15px 20px; border-inline-start: 0; border-top: 1.25px solid var(--premium-border); }
  .faq-writing-note { display: none; }
  #faq-modal .bwf-drawer-foot { position: sticky; bottom: 0; min-height: 72px; padding-inline: 15px; border-radius: 0; background: color-mix(in oklab,var(--bg-secondary) 94%,transparent); backdrop-filter: blur(16px); }
  #faq-modal .bwf-drawer-foot button { flex: 1; }
}

@media (max-width: 768px) {
  .ly-config-strip { grid-template-columns: 1fr; padding: 17px; }
  .ly-config-intro { grid-column: auto; }
  .ly-config-strip > .phase-field { min-height: 0; }
  .ly-config-actions { grid-column: auto; padding-top: 3px; }
  .ly-config-save { width: 100%; min-width: 0; }
  .ly-ticket-row { min-height: 0; }
  .ly-ticket-row::before { inset-inline-start: 67px; }
  .ly-ticket-glyph { width: 50px; height: 50px; }
  .nw-offer-workspace { display: block; }
  .nw-settings-grid { padding: 16px; }
  .nw-campaign-preview { padding: 20px 16px; border-inline-start: 0; border-top: 1.25px solid var(--premium-border); }
  .nw-publish-note { display: none; }
  .nw-card { border-width: 1.25px; }
  .nw-card .nw-person { grid-column: 1/-1; }
  .nw-card .nw-person small { display: block; }
  .nw-card-meta { flex-direction: row; align-items: center; }
  .nw-card > .nw-status { align-self: center; }
}

@media (max-width: 520px) {
  .faq-editor-identity { gap: 10px; }
  #faq-modal .bwf-drawer-title { font-size: 1.125rem; }
  .faq-template-row { gap: 6px; }
  .faq-template { padding-inline: 7px; font-size: 0.6875rem; }
  .faq-template svg { width: 16px; height: 16px; }
  .nw-stat { min-height: 112px; }
  .nw-stat-signal { opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-select-trigger,.premium-select-chevron,.premium-select-menu,.premium-select-option,
  .ly-stepper-btn,.ly-rate-value,.faq-editor-section,.faq-template,.faq-aside-label .phase-status-dot,
  .nw-stat-signal .nw-trend-line,.nw-stat-signal .nw-trend-area,.nw-copy-code { animation: none !important; transition-duration: .01ms !important; }
}



/* ── Form hints [Phase 8 ✅] ───────────────────────────────────────────────
   Persistent helper text under a control, not a placeholder — the merchant
   needs the reasoning available while they choose, not only before they do.
   Used by the phone-density controls and the mobile-hover explanation. */
.form-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: var(--weight-body);
  color: var(--color-text-muted);
}
.form-hint strong {
  color: var(--color-text-default);
  font-weight: var(--weight-label);
}

/* ══════════════════════════════════════════════════════════════════════════
   [Phase 9 ✅] Appearance Panel Rebuild I — visual colour & typography
   ══════════════════════════════════════════════════════════════════════════
   Replaces the dot-swatch theme grid and the font-name <select>. Everything
   here obeys the standing rules: colour only through tokens, no raw white or
   black wash on a themeable surface (state layers via color-mix on
   --color-foreground, which lightens on dark themes and darkens on light ones
   from one declaration), borders at --border-thin / --border-strong, icon
   strokes ≥ 2, and every interactive target ≥ 44px at phone width.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Disclosure groups ──────────────────────────────────────────────────── */
.cu-group {
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 15%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-foreground) 3%, transparent);
  overflow: hidden;
}
.cu-group + .cu-group { margin-top: 2px; }
.cu-group-head {
  min-height: 56px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 180ms;
}
.cu-group-head::-webkit-details-marker { display: none; }
.cu-group-head:hover { background: color-mix(in srgb, var(--color-foreground) 5%, transparent); }
.cu-group-head:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent-color) 38%, transparent);
  outline-offset: -3px;
}
.cu-group-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--color-accent);
}
.cu-group-title {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
  font: var(--weight-subheading, 700) 0.9062rem/1.25 var(--font-heading);
  color: var(--text-primary);
}
.cu-group-title small {
  font: var(--weight-body, 500) 0.75rem/1.4 var(--font-primary);
  color: var(--color-text-muted);
}
.cu-group-chevron {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--color-text-subtle);
  transition: transform 200ms var(--ad-ease-spring, ease);
}
.cu-group[open] > .cu-group-head > .cu-group-chevron { transform: rotate(180deg); }
.cu-group-body {
  padding: 4px 14px 16px;
  display: flex; flex-direction: column; gap: 15px;
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
  padding-top: 15px;
}

/* Field header row: label on the left, a control on the right. */
.cu-field-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cu-field-bar > label { margin: 0; }

/* ── Light / dark preview toggle ────────────────────────────────────────── */
.cu-mode-toggle {
  display: inline-flex; gap: 3px; padding: 3px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 15%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
}
.cu-mode-toggle button {
  min-height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--color-text-subtle);
  font-size: 0.7188rem; font-weight: var(--weight-label, 600);
  cursor: pointer;
  transition: background 180ms, color 180ms;
}
.cu-mode-toggle button.is-active {
  color: var(--color-on-accent);
  background: var(--accent-color);
  box-shadow: 0 5px 13px -8px rgba(var(--accent-color-rgb), .8);
}
.cu-mode-toggle button:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent-color) 38%, transparent);
  outline-offset: 2px;
}
.cu-mode-toggle svg { width: 15px; height: 15px; }

/* ── Theme picker ───────────────────────────────────────────────────────── */
.cu-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cu-theme-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 14px;
  background: var(--color-surface);
  cursor: pointer;
  text-align: start;
  transition: border-color 180ms, box-shadow 180ms, transform 180ms var(--ad-ease-spring, ease);
}
.cu-theme-card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-2px); }
.cu-theme-card:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent-color) 42%, transparent);
  outline-offset: 2px;
}
.cu-theme-card.is-active {
  border-width: var(--border-strong);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.cu-theme-mini-wrap { position: relative; display: block; }
.cu-theme-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 2px 2px; }
/* Two lines rather than an ellipsis: truncation puts the ellipsis at the
   logical start under RTL, so "NextGen Electronics" became "…tGen Electronics"
   — the half that identifies the theme is the half that got cut. */
.cu-theme-meta strong {
  font-size: 0.7812rem; font-weight: var(--weight-subheading, 700);
  color: var(--text-primary); line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.cu-theme-meta small {
  font-size: 0.6875rem; font-weight: var(--weight-body, 500);
  color: var(--color-text-muted); line-height: 1.3;
}
.cu-theme-tick {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 22px; height: 22px; padding: 3px;
  border-radius: 50%;
  color: var(--color-on-accent);
  background: var(--accent-color);
  opacity: 0; transform: scale(.6);
  transition: opacity 160ms, transform 200ms var(--ad-ease-spring, ease);
  pointer-events: none;
}
.cu-theme-card.is-active .cu-theme-tick,
.cu-font-card.is-active .cu-theme-tick { opacity: 1; transform: scale(1); }

/* The miniature storefront. Every colour here comes from the theme's own
   buildThemeTokens() output, written as inline --m-* custom properties — one
   rule block serves all thirteen palettes. */
.cu-mini {
  display: flex; flex-direction: column;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: var(--m-bg);
  border: var(--border-thin) solid var(--m-border);
}
.cu-mini-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 6px;
  background: var(--m-surface);
  border-bottom: var(--border-thin) solid var(--m-border);
}
.cu-mini-logo { width: 30%; height: 5px; border-radius: 3px; background: var(--m-fg); }
.cu-mini-nav { display: flex; gap: 3px; margin-inline-start: auto; }
.cu-mini-nav i { width: 9px; height: 3px; border-radius: 2px; background: var(--m-sub); }
.cu-mini-cart { width: 9px; height: 9px; border-radius: 50%; background: var(--m-accent); flex-shrink: 0; }
.cu-mini-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px; }
.cu-mini-card {
  display: flex; flex-direction: column; gap: 3px;
  min-height: 0; padding: 4px;
  border-radius: 6px;
  background: var(--m-raised);
  /* The stronger border step, not the subtle one: at this scale a light
     palette's subtle border is invisible and the two product cards dissolve
     into the page. The real storefront card carries a visible edge too. */
  border: var(--border-thin) solid var(--m-border-2);
}
.cu-mini-img { flex: 1; min-height: 8px; border-radius: 4px; background: var(--m-muted); }
.cu-mini-title { height: 4px; width: 78%; border-radius: 2px; background: var(--m-text); }
.cu-mini-foot { display: flex; align-items: center; gap: 4px; }
.cu-mini-price { height: 5px; width: 32%; border-radius: 2px; background: var(--m-fg); flex-shrink: 0; }
.cu-mini-btn {
  margin-inline-start: auto;
  height: 11px; width: 46%;
  border-radius: 4px;
  background: var(--m-accent);
  display: grid; place-items: center;
}
/* The button's own label, drawn in the measured on-accent ink — so the tile
   shows whether text will actually read on this palette's accent, which is the
   single most common way a shop becomes unreadable. */
.cu-mini-btn::after {
  content: ""; display: block;
  width: 62%; height: 3px; border-radius: 2px;
  background: var(--m-on-accent);
}
/* Same palette in the mode the tile is not showing. */
.cu-mini-alt {
  position: absolute; inset-block-end: -5px; inset-inline-start: -5px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: var(--border-strong) solid var(--color-surface);
  background: linear-gradient(135deg, var(--a-bg) 0 50%, var(--a-accent) 50% 100%);
  pointer-events: none;
}

/* ── Accent ─────────────────────────────────────────────────────────────── */
.cu-accent-field { display: flex; flex-direction: column; gap: 11px; }
.cu-accent-field > label { margin: 0; }
.cu-accent-field .cu-field-note { margin: -6px 0 0; }

.cu-accent-suggest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.cu-swatch {
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  cursor: pointer;
  transition: border-color 160ms, transform 160ms var(--ad-ease-spring, ease);
}
.cu-swatch:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); transform: translateY(-1px); }
.cu-swatch:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 42%, transparent); outline-offset: 2px; }
.cu-swatch.is-active { border-width: var(--border-strong); border-color: var(--accent-color); }
.cu-swatch-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--s-color);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
}
.cu-swatch-name {
  font-size: 0.5938rem; font-weight: var(--weight-label, 600);
  letter-spacing: .02em;
  color: var(--color-text-muted);
}

.cu-scale { display: flex; height: 30px; border-radius: 9px; overflow: hidden; border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent); }
.cu-scale-step { flex: 1; min-width: 0; }
.cu-scale-caption { margin-top: -6px; font-size: 0.6875rem; font-weight: var(--weight-body, 500); color: var(--color-text-subtle); }

.cu-contrast { display: flex; flex-direction: column; gap: 7px; }
.cu-contrast-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cu-contrast-mode {
  min-width: 74px;
  font-size: 0.6875rem; font-weight: var(--weight-label, 600);
  color: var(--color-text-muted);
}
.cu-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: var(--border-thin) solid transparent;
  font-size: 0.6875rem; font-weight: var(--weight-label, 600);
  font-variant-numeric: tabular-nums;
}
.cu-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.cu-chip.is-pass {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}
.cu-chip.is-fail {
  color: var(--color-destructive);
  border-color: color-mix(in srgb, var(--color-destructive) 45%, transparent);
  background: color-mix(in srgb, var(--color-destructive) 12%, transparent);
}
.cu-contrast-warn {
  margin: 0;
  padding: 10px 12px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-destructive) 45%, transparent);
  border-inline-start-width: var(--border-strong);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  color: var(--color-destructive);
  font-size: 0.75rem; font-weight: var(--weight-body, 500); line-height: 1.5;
}
.cu-contrast-warn[hidden] { display: none; }

/* ── Typography picker ──────────────────────────────────────────────────── */
.cu-font-picker { display: flex; flex-direction: column; gap: 8px; }
.cu-fontgroup {
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 13%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.cu-fontgroup-head {
  min-height: 48px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; list-style: none; user-select: none;
  font-size: 0.75rem; font-weight: var(--weight-label, 600);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}
.cu-fontgroup-head::-webkit-details-marker { display: none; }
.cu-fontgroup-head:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 38%, transparent); outline-offset: -3px; }
.cu-fontgroup-head > span:first-child { flex: 1; min-width: 0; }
.cu-fontgroup-count {
  min-width: 22px; padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground) 9%, transparent);
  color: var(--color-text-subtle);
  font-size: 0.6562rem; font-weight: var(--weight-label, 600);
  text-align: center;
}
.cu-fontgroup[open] > .cu-fontgroup-head > .cu-group-chevron { transform: rotate(180deg); }
.cu-fontgroup-body { padding: 9px; display: flex; flex-direction: column; gap: 8px; }

.cu-font-card {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  padding: 12px 13px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 12px;
  background: var(--color-surface);
  text-align: start;
  cursor: pointer;
  transition: border-color 180ms, box-shadow 180ms;
}
.cu-font-card:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.cu-font-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 42%, transparent); outline-offset: 2px; }
.cu-font-card.is-active {
  border-width: var(--border-strong);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.cu-font-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-inline-end: 26px; }
.cu-font-name { font-size: 0.75rem; font-weight: var(--weight-subheading, 700); color: var(--text-primary); }
.cu-font-tagline { font-size: 0.6875rem; font-weight: var(--weight-body, 500); color: var(--color-text-muted); }
.cu-font-badge {
  padding: 2px 7px;
  border-radius: 999px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  font-size: 0.5938rem; font-weight: var(--weight-label, 600); letter-spacing: .02em;
  text-transform: uppercase;
}
.cu-font-specimens {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 9px;
  border-top: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 12%, transparent);
}
.cu-spec { display: block; color: var(--text-primary); }
/* Specimens fall back to the console font until the observer promotes the real
   family, so a card is never blank while its WOFF2 is in flight. */
.cu-spec-latin-display { font-size: 1.0625rem; line-height: 1.25; }
.cu-spec-latin-body    { font-size: 0.8125rem; line-height: 1.45; color: var(--color-text-muted); }
/* PLAN §3.2: Arabic is a connected script — tracking breaks the letterforms.
   Size and line-height come from the pairing's own metrics, set inline. */
.cu-spec-ar-display,
.cu-spec-ar-body { letter-spacing: 0; margin-top: 3px; }
.cu-spec-ar-body { color: var(--color-text-muted); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cu-group-head { min-height: 60px; padding: 14px; }
  .cu-group-body { padding: 15px 13px 18px; }
  .cu-mode-toggle button { min-height: 44px; padding: 0 14px; }
  .cu-theme-grid { gap: 9px; }
  .cu-theme-card { padding: 7px; }
  .cu-theme-tick { width: 24px; height: 24px; }
  /* Four suggestion columns at 375px would be 44px wide with no gutter left
     over; three keeps every swatch a comfortable target. */
  .cu-accent-suggest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cu-swatch { min-height: 62px; }
  .cu-scale { height: 34px; }
  .cu-contrast-mode { min-width: 100%; }
  .cu-fontgroup-head { min-height: 52px; }
  .cu-font-card { padding: 13px; }
  /* The mobile tab strip replaces the old header preview button. */
  .cu-mobile-tabs { display: grid; }
  /* The desktop/phone toggle inside the preview panel sat at 34px — the last
     sub-44px target in this section once the pickers were rebuilt. */
  .cu-device-toggle button { min-height: 44px; }
}
@media (min-width: 769px) {
  .cu-mobile-tabs { display: none; }
}
/* The form column is narrow next to the preview; two theme tiles is the most
   that stays legible until the workspace is genuinely wide. */
@media (min-width: 1500px) {
  .cu-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .cu-group-chevron, .cu-theme-card, .cu-theme-tick, .cu-swatch,
  .cu-mode-toggle button, .cu-font-card {
    transition-duration: .01ms;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   [Phase 10 ✅] Visual motion, layout and phone controls
   ══════════════════════════════════════════════════════════════════════════
   The demo cards deliberately carry the storefront's own classes
   (`product-card`, `hover-*`, `load-*`, `nav-transition-*`). Only common.css is
   loaded here, and it holds every one of those animations, so a preview runs
   the real thing. What this file supplies is the SHAPE those classes act on —
   nothing here restates a duration, an easing or a transform.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Option cards ───────────────────────────────────────────────────────── */
.cu-demo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 8px;
}
.cu-demo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cu-opt {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 9px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 13px;
  background: var(--color-surface);
  cursor: pointer; text-align: start;
  transition: border-color 180ms, box-shadow 180ms;
}
.cu-opt:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.cu-opt:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 42%, transparent); outline-offset: 2px; }
.cu-opt.is-active {
  border-width: var(--border-strong);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.cu-opt.is-active .cu-theme-tick { opacity: 1; transform: scale(1); }

/* The stage clips the demo. `overflow: hidden` is load-bearing: lift, tilt and
   slide-details all move outside their own box by design. */
.cu-opt-stage {
  position: relative;
  display: block;
  height: 92px;
  padding: 11px 9px;
  border-radius: 9px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
}
/* [Phase 13.1 ✅] The load and nav demos now hold a whole miniature page, so
   they need more room than a single hover card does. `load-parallax-slide`
   travels 6% of the tile's own height — the taller the honest tile, the more
   truthfully "a slower, longer rise" reads against "each slides up into place".
   The stage padding also drops: the panel IS the frame now, so the old inset
   just shrank the thing being demonstrated. */
.cu-opt[data-opt-kind="load"] .cu-opt-stage,
.cu-opt[data-opt-kind="nav"] .cu-opt-stage {
  height: 112px;
  padding: 7px;
}
.cu-opt-meta { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 2px; min-width: 0; }
.cu-opt-meta strong { font-size: 0.75rem; font-weight: var(--weight-subheading, 700); color: var(--text-primary); line-height: 1.25; }
.cu-opt-meta small { font-size: 0.6875rem; font-weight: var(--weight-body, 500); color: var(--color-text-muted); line-height: 1.35; }

/* ── The miniature product card the demos animate ───────────────────────── */
.cu-dcard {
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px;
  border-radius: 7px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
}
.cu-dcard .product-img-wrapper { display: block; height: 34px; border-radius: 5px; overflow: hidden; }
.cu-dcard .product-img {
  display: block; width: 100%; height: 100%;
  border-radius: 5px;
  /* A flat --color-muted block sits within a few percent of --color-surface on
     most palettes and reads as an empty box rather than a photo. The state
     layer gives it an edge in both modes from one declaration. */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-foreground) 9%, transparent) 0%,
      transparent 55%),
    var(--color-muted);
  /* The storefront gives .product-img its own longer transition; mirror only
     the fact that it transitions, not the value. */
  transition: transform var(--transition-slow);
}
.cu-dcard-body { display: flex; flex-direction: column; gap: 3px; }
.cu-dline { display: block; height: 4px; border-radius: 2px; background: var(--color-text-default); opacity: .75; }
.cu-dline.is-short { width: 58%; opacity: .45; }
.cu-dbtn { display: block; height: 9px; width: 40%; border-radius: 4px; background: var(--accent-color); }
.cu-dcard .product-actions { display: flex; justify-content: flex-end; }

/* ── Demo tempo [Phase 13.2 ✅] ────────────────────────────────────────────
   A preview is watched deliberately; the shop is glanced at. At 1× an entrance
   is over in 250ms — about a sixth of the loop — and every option reads as "it
   was already there". The demos run at 1.7×, which is the SAME animation with
   the personality dial turned up, not a different one.

   The four tokens are re-declared here because a custom property resolves its
   own `var()`s on the element that declares it: `--motion-base` was baked
   against :root's scale, so overriding `--motion-scale` alone changes nothing.
   The raw constants come from common.css, so there is still one source of
   truth for "the default is 250ms" — see the block around `--mo-unit-base`. */
.cu-opt[data-opt-kind="load"],
.cu-opt[data-opt-kind="nav"] {
  --motion-scale: 1.7;
}
/* The pace tiles set their own --motion-scale inline (0.7 / 1 / 1.35) — that
   is the whole point of the control, and it was inert until this re-derivation
   existed. Three tiles, three genuinely different speeds. */
.cu-opt[data-opt-kind="load"],
.cu-opt[data-opt-kind="nav"],
.cu-opt[data-opt-kind="motion"] {
  --motion-instant:  calc(var(--mo-unit-instant)  * var(--motion-scale));
  --motion-fast:     calc(var(--mo-unit-fast)     * var(--motion-scale));
  --motion-base:     calc(var(--mo-unit-base)     * var(--motion-scale));
  --motion-emphasis: calc(var(--mo-unit-emphasis) * var(--motion-scale));
  --motion-exit:     calc(var(--mo-unit-exit)     * var(--motion-scale));
  --stagger-step:    calc(var(--mo-unit-stagger)  * var(--motion-scale));
  --transition-normal: var(--motion-base) var(--ease-standard);
  --transition-slow:   var(--motion-emphasis) var(--ease-standard);
}

/* ── The snap [Phase 13.1 ✅] ──────────────────────────────────────────────
   One frame of "put everything back where it started" without the audience
   watching it reverse. Specificity 0-3-0 beats the `transition` shorthand on
   `.load-*` / `.nav-transition-*` (0-1-0) in common.css, and this file loads
   after it — both are needed. No `!important`: the reduced-motion backstop must
   still be able to win over this. */
.cu-opt-stage.is-snap .cu-lt,
.cu-opt-stage.is-snap .cu-dpage,
.cu-opt-stage.is-snap .cu-dcard,
.cu-opt-stage.is-snap .cu-dcard .product-img,
.cu-opt-stage.is-snap .cu-dcard .product-actions,
.cu-opt-stage.is-snap .cu-pace-dot {
  transition: none;
}

/* ── The load demo: a miniature shop [Phase 13.1 ✅] ───────────────────────
   The panel is the constant; only its products animate. That is what stops the
   option reading as an empty box during the entrance, and it matches the
   layout wireframes the merchant has already learned to read two groups up. */
.cu-dpanel {
  display: flex; flex-direction: column; gap: 5px;
  height: 100%;
  padding: 5px;
  border-radius: 7px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  overflow: hidden;
}
.cu-dpanel-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 1px 1px; flex: 0 0 auto; }
.cu-dpanel-brand { display: block; width: 34%; height: 4px; border-radius: 2px; background: var(--color-foreground); opacity: .6; }
.cu-dpanel-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); }
/* Six tiles over two rows, the second one deliberately running off the bottom
   of the panel — which is what a real shop looks like, and what makes a STAGGER
   legible (with one row you cannot tell "one after another" from "all at once").

   The rows are a FIXED 58px rather than `1fr`, and that is the whole reason the
   height is stated at all: `load-parallax-slide` travels 6% of its own tile.
   Divide the stage evenly and the tile lands around 32px, where 6% is 1.9px and
   "a slower, longer rise" is indistinguishable from a plain fade. At 58px it is
   ~3.5px and the option is telling the truth about itself. A miniature can
   never be fully faithful here — `stagger-slide`'s flat 18px is a third of a
   58px tile and a twentieth of a real product card — so the tile is sized to
   the option that degrades, not to the one that exaggerates. */
.cu-dpanel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 58px);
  align-content: start;
  gap: 4px;
  flex: 1; min-height: 0;
}
/* 38px, not the old 12px stack row: `load-parallax-slide` travels 6% of its own
   height, which on a 12px tile is 0.7px — the option was indistinguishable from
   a plain fade for as long as the demo was that small. */
.cu-lt {
  display: flex; flex-direction: column; gap: 3px;
  padding: 3px;
  min-height: 0;
  border-radius: 5px;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  /* [Phase 13.2 ✅] Scaled like everything else, and widened from a flat 75ms.
     The gap between tiles is what "one after another" *is* — too tight and the
     six tiles read as arriving together, which made Fade / Rise / Zoom look
     like one option. */
  transition-delay: calc(var(--d-step, 0) * var(--stagger-step) * 1.6);
}
.cu-lt-img {
  display: block; flex: 1; min-height: 16px; border-radius: 3px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-foreground) 9%, transparent) 0%, transparent 55%), var(--color-muted);
}
.cu-lt-txt { display: block; height: 3px; width: 76%; border-radius: 2px; background: var(--color-text-default); opacity: .55; }

/* ── Page-transition demo ───────────────────────────────────────────────── */
/* [Phase 13.1 ✅] A browser chrome that never moves, wrapping the page that
   does. `slide` and `drawer` enter from outside the viewport, so without a
   fixed frame the whole tile was empty until the page landed. */
.cu-dframe {
  display: flex; flex-direction: column;
  height: 100%;
  border-radius: 7px;
  background: var(--color-surface-raised);
  border: var(--border-thin) solid var(--color-border-default);
  overflow: hidden;
}
.cu-dframe-bar {
  display: flex; align-items: center; gap: 3px;
  flex: 0 0 auto; padding: 4px 5px;
  border-block-end: var(--border-thin) solid var(--color-border-default);
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
}
.cu-dframe-bar i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-muted); opacity: .55; }
/* The clip is what makes "from the side" and "like a panel" legible; without it
   the incoming page just overlaps the option card's own padding. */
.cu-dframe-view { position: relative; flex: 1; min-height: 0; padding: 5px; overflow: hidden; }

.cu-dpage {
  display: flex; flex-direction: column; gap: 5px;
  height: 100%;
  padding: 6px;
  border-radius: 5px;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
}
.cu-dpage-bar { display: block; height: 7px; border-radius: 3px; background: var(--accent-color); opacity: .8; }
.cu-dpage-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; flex: 1; min-height: 0; }
.cu-dpage-row span { display: block; border-radius: 5px; background: var(--color-muted); }
/* Ties on specificity with `.cu-dpage.nav-transition-*` in common.css and wins
   on source order, which is what lands the demo. The nav classes are FROM
   states — the storefront lands them by removing the class; a preview has to
   loop, so it lands them by adding this one. */
.cu-dpage.is-nav-landed { opacity: 1; transform: none; }

/* ── Layout wireframes ──────────────────────────────────────────────────── */
.cu-wire-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 8px; }
.cu-wire { display: grid; grid-template-columns: repeat(var(--w-cols, 3), minmax(0, 1fr)); gap: 4px; }
.cu-wire.is-list { grid-template-columns: 1fr; gap: 5px; }
.cu-wt { display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 5px; background: var(--color-surface-raised); border: var(--border-thin) solid var(--color-border-default); }
.cu-wt-img { display: block; height: 18px; border-radius: 3px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-foreground) 9%, transparent) 0%, transparent 55%), var(--color-muted); }
.cu-wt-txt { display: block; height: 4px; width: 72%; border-radius: 2px; background: var(--color-text-default); opacity: .55; }
.cu-wt.is-tight .cu-wt-img { height: 12px; }
.cu-wt.is-tight .cu-wt-txt { height: 3px; }
.cu-wt.is-row { flex-direction: row; align-items: center; gap: 5px; }
.cu-wt.is-row .cu-wt-img { width: 26px; height: 20px; flex-shrink: 0; }
.cu-wt.is-row .cu-wt-txt { flex: 1; }

/* ── Chip controls ──────────────────────────────────────────────────────── */
.cu-chipset { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.cu-chip-opt {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 13px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 16%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  color: var(--color-text-muted);
  font-size: 0.75rem; font-weight: var(--weight-label, 600);
  cursor: pointer;
  transition: border-color 160ms, color 160ms, background 160ms;
}
.cu-chip-opt:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.cu-chip-opt:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 42%, transparent); outline-offset: 2px; }
.cu-chip-opt.is-active {
  border-width: var(--border-strong);
  border-color: var(--accent-color);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
/* The aspect chips SHOW the ratio rather than naming it. */
.cu-chip-ratio { display: block; width: 16px; border-radius: 3px; background: var(--color-muted); border: var(--border-thin) solid var(--color-border-default); flex-shrink: 0; }
.cu-chip-opt.is-active .cu-chip-ratio { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }

/* ── Phone sketch ───────────────────────────────────────────────────────── */
.cu-phone-stage { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.cu-phone-frame {
  position: relative;
  width: 178px;
  aspect-ratio: 9 / 17;
  padding: 8px 7px;
  border: 3px solid color-mix(in srgb, var(--color-border-strong) 40%, transparent);
  border-radius: 24px;
  background: var(--color-background);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .8);
}
.cu-phone-notch {
  position: absolute; top: 3px; inset-inline-start: 50%; transform: translateX(-50%);
  width: 46px; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--color-border-strong) 40%, transparent);
}
.cu-phone-screen { display: flex; flex-direction: column; gap: 5px; height: 100%; overflow: hidden; border-radius: 16px; }
.cu-ps-bar { display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 5px; }
.cu-ps-bar > span:first-child { display: block; width: 42%; height: 5px; border-radius: 3px; background: var(--color-foreground); }
.cu-ps-cart { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); }
.cu-ps-grid { display: grid; grid-template-columns: repeat(var(--ps-cols, 2), minmax(0, 1fr)); gap: 5px; }
.cu-phone-screen.is-compact .cu-ps-grid { gap: 3px; }
.cu-ps-card { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 6px; background: var(--color-surface); border: var(--border-thin) solid var(--color-border-default); }
.cu-phone-screen.is-compact .cu-ps-card { padding: 3px; gap: 2px; }
.cu-phone-screen.is-list .cu-ps-card { flex-direction: row; align-items: center; gap: 5px; }
.cu-phone-screen.is-list .cu-ps-img { width: 34px; flex-shrink: 0; }
.cu-phone-screen.is-list .cu-ps-txt { flex: 1; }
.cu-ps-img { display: block; width: 100%; border-radius: 4px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-foreground) 9%, transparent) 0%, transparent 55%), var(--color-muted); }
.cu-ps-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cu-ps-tag { display: block; width: 40%; height: 3px; border-radius: 2px; background: var(--color-accent); opacity: .55; }
.cu-ps-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 1px; }
.cu-ps-price { display: block; width: 34%; height: 4px; border-radius: 2px; background: var(--color-foreground); }
.cu-ps-foot .cu-dbtn { width: 34%; height: 7px; }
.cu-phone-caption { margin: 0; max-width: 34ch; text-align: center; font-size: 0.6875rem; line-height: 1.45; font-weight: var(--weight-body, 500); color: var(--color-text-muted); }

/* ── Reduced-motion note ────────────────────────────────────────────────── */
.cu-reduced-note {
  margin: 0;
  padding: 10px 12px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-info) 42%, transparent);
  border-inline-start-width: var(--border-strong);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-info) 10%, transparent);
  color: var(--color-info);
  font-size: 0.75rem; line-height: 1.5; font-weight: var(--weight-body, 500);
}
.cu-reduced-note[hidden] { display: none; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cu-demo-grid { gap: 8px; }
  .cu-opt-stage { height: 78px; }
  /* The stage keeps its desktop height on a phone. Shrinking it to 96px left
     only a 12px sliver of the second row, and a stagger you can only see one
     row of is not a stagger — this section is FOR the phone (rule 9), so it is
     the tile that gives, not the row count. */
  .cu-opt[data-opt-kind="load"] .cu-opt-stage,
  .cu-opt[data-opt-kind="nav"] .cu-opt-stage { height: 112px; padding: 6px; }
  .cu-dpanel-grid { grid-template-rows: repeat(2, 46px); }
  .cu-wire-grid { grid-template-columns: 1fr; }
  .cu-wire-grid .cu-opt { flex-direction: row; align-items: center; gap: 11px; }
  .cu-wire-grid .cu-opt-stage { width: 104px; flex-shrink: 0; height: 68px; }
  .cu-wire-grid .cu-opt-meta { flex: 1; }
  .cu-chip-opt { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* The demos are held in their landed state by the ticker refusing to start,
     and common.css already neutralises the load/nav from-states. This only
     stops the option card's own affordances from moving. */
  .cu-opt, .cu-chip-opt { transition-duration: .01ms; }
}

/* ── Publish bar [Phase 10 ✅] ────────────────────────────────────────────── */
.cu-save-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cu-save-status {
  margin: 0; min-width: 0; flex: 1;
  font-size: 0.75rem; line-height: 1.45; font-weight: var(--weight-body, 500);
  color: var(--color-text-muted);
}
.cu-save-status.is-dirty { color: var(--color-warning); font-weight: var(--weight-label, 600); }
.cu-save-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cu-save-actions .pt-btn { min-height: 44px; }
.cu-save-actions .pt-btn:disabled { opacity: .42; cursor: not-allowed; }
@media (max-width: 768px) {
  .cu-save-actions { flex-direction: column-reverse; }
  .cu-save-actions .pt-btn { width: 100%; justify-content: center; }
}

/* ── Pace preview [Phase 10 ✅] ────────────────────────────────────────────
   Three dots crossing a track. Their transition uses --motion-base, the same
   token every animation in the shop derives from, and each option card sets
   --motion-scale inline — so the tiles differ ONLY in speed, which is exactly
   what "overall pace" means. Staggered starts make the difference legible at a
   glance rather than requiring you to watch one tile at a time. */
.cu-pace { display: flex; flex-direction: column; justify-content: center; gap: 10px; height: 100%; }
.cu-pace-track {
  position: relative; display: block; height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  /* Makes 100cqw below resolve to this track's own width, so the dot travels
     exactly to the far edge at every card size — no magic pixel constant that
     would under-shoot on desktop and overflow on a phone. */
  container-type: inline-size;
}
.cu-pace-dot {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 22px; height: 8px; border-radius: 4px;
  background: var(--accent-color);
  transition: transform var(--motion-base) var(--ease-standard);
}
/* [Phase 13.3 ✅] The pace demo runs at 3.4× the real thing. At true speed the
   three dots cross in 175 / 250 / 337ms — Mustafa's words were "the points
   travelling is still fast, I really can't catch them", and he is right: a
   quarter-second is below the threshold at which a person can compare two
   durations side by side. Stretching all three by the same factor preserves the
   RATIO, which is the only thing this control is asking you to judge. It is
   also why the multiplier lives on the track and not in `--motion-scale` — the
   scale is the merchant's actual setting and must keep reporting its real value
   to the rest of the panel. */
.cu-opt[data-opt-kind="motion"] .cu-pace-dot {
  transition-duration: calc(var(--mo-unit-base) * var(--motion-scale) * 3.4);
}
.cu-pace-dot.is-far { transform: translateX(calc(100cqw - 22px)); }
html[dir="rtl"] .cu-pace-dot.is-far { transform: translateX(calc(-100cqw + 22px)); }
.cu-pace-track.is-delayed .cu-pace-dot { transition-delay: 70ms; }
.cu-pace-track.is-delayed-more .cu-pace-dot { transition-delay: 140ms; }

@media (prefers-reduced-motion: reduce) {
  .cu-pace-dot { transition-duration: .01ms; }
}

/* ── Accent-override notice [Phase 9.1 ✅] ─────────────────────────────────
   Sits directly above the palette grid because that is where the symptom
   shows: a fixed brand colour makes several palettes look alike, which reads
   as broken themes unless something says otherwise. */
.cu-accent-override {
  display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap;
  margin: 0 0 11px;
  padding: 12px 13px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 45%, transparent);
  border-inline-start-width: var(--border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}
.cu-accent-override[hidden] { display: none; }
.cu-ovr-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-foreground) 22%, transparent);
}
.cu-ovr-text {
  flex: 1; min-width: 12ch;
  font-size: 0.75rem; line-height: 1.5; font-weight: var(--weight-body, 500);
  color: var(--color-text-default);
}
.cu-ovr-text strong { display: block; color: var(--color-warning); font-weight: var(--weight-subheading, 700); }
.cu-ovr-btn {
  min-height: 44px; width: 100%;
  padding: 0 14px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-warning) 50%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
  color: var(--color-text-default);
  font-size: 0.75rem; font-weight: var(--weight-label, 600);
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.cu-ovr-btn:hover { background: color-mix(in srgb, var(--color-warning) 16%, transparent); }
.cu-ovr-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 42%, transparent); outline-offset: 2px; }

/* ── Extended palette library [Phase 10.1 ✅] ──────────────────────────────── */
.cu-more-btn {
  min-height: 46px; width: 100%;
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 20%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
  color: var(--color-text-default);
  font-size: 0.78rem; font-weight: var(--weight-label, 600);
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.cu-more-btn:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.cu-more-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent-color) 42%, transparent); outline-offset: 2px; }
.cu-more-btn[hidden] { display: none; }
.cu-more-btn svg { width: 17px; height: 17px; transition: transform 200ms var(--ad-ease-spring, ease); }
.cu-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Family separator. Spans the grid so the tiles stay in one radiogroup. */
.cu-theme-family {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px;
  margin: 9px 0 1px;
  font-size: 0.6875rem; font-weight: var(--weight-label, 600);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-subtle);
}
.cu-theme-family::after {
  content: ""; flex: 1; height: var(--border-thin);
  background: color-mix(in srgb, var(--color-border-strong) 20%, transparent);
}
.cu-theme-family i {
  order: 3;
  font-style: normal; padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-foreground) 9%, transparent);
  font-size: 0.625rem;
}
@media (prefers-reduced-motion: reduce) { .cu-more-btn svg { transition-duration: .01ms; } }

/* The adapted accent for a mode [Phase 10.2 ✅] — shown so the merchant can see
   what their colour becomes on that background, instead of a reading that
   appears to describe a different colour from the one in the field. */
.cu-contrast-shift {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-border-strong) 20%, transparent);
  border-radius: 999px;
  font-size: 0.6562rem; font-weight: var(--weight-label, 600);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.cu-contrast-shift span {
  width: 12px; height: 12px; border-radius: 50%;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-foreground) 20%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 13 ✅] Touch-target floor — 44×44, measured not assumed
   ~99% of merchants run this console on a phone, so a 32px control in a
   dense card row is a real miss, not a desktop nicety. Two treatments,
   chosen per control:

   1. GROW to 44px where the height is only padding and nothing else moves
      (chips, toolbar buttons, section tabs).
   2. EXPAND THE HIT AREA with a centred ::after where growing the visual
      box would break a tight card row. This is the web equivalent of
      hitSlop — the button still LOOKS 32px, but the tappable region is
      44×44. Used only for icon-only buttons that sit inside a card whose
      own height the button does not drive.

   Native checkboxes and radios are absent on purpose: their hit area is
   the wrapping <label>, which already clears 44px. That is the accepted
   pattern and a checker that does not model it flags every one of them.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Grow ─────────────────────────────────────────────────────────── */
.pt-chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The group pads 3px around the chips, so the pill has to grow with them
   or the slider track no longer matches the chip it is tracking. */
.pt-chip-group { min-height: 50px; align-items: stretch; }

#export-csv-btn,
.phase-mobile-tab {
  min-height: 44px;
}

.al-eye {
  width: 44px;
  height: 44px;
}

/* ── 2. Expand the hit area, keep the visual ─────────────────────────── */
.nw-copy-code,
.ly-mini-btn {
  position: relative;
}
.nw-copy-code::after,
.ly-mini-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ≥8px between adjacent targets. The ticket row's edit/delete pair sat at
   4px, which on a phone is one thumb covering both. */
.ly-ticket-actions { gap: 8px; }
.phase-mobile-tabs { gap: 8px; }


/* ══════════════════════════════════════════════════════════════════════
   [Phase 13 ✅] Touch-target floor for the console — keyed on the FINGER
   The admin's own breakpoints are width-based, so a merchant who turns the
   phone sideways (812px) gets the full desktop density on the same device
   that needed 44px a second earlier: 34px row icons, 31px filter chips, a
   38px topbar. `(pointer: coarse)` asks the right question. A mouse-driven
   desktop is untouched — the density there is deliberate.

   Two treatments, as elsewhere in this pass:
     GROW where the height is only padding;
     EXPAND THE HIT AREA with a centred ::after where growing the visual box
     would re-flow a dense table row (the web equivalent of hitSlop).
   ══════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Grow — chrome and section controls have room. */
  .ad-menu-btn,
  .ad-search-trigger,
  .ad-icon-btn,
  .ad-collapse-btn,
  .ok-filter-chip,
  .dc-scope-btn,
  .ly-stepper-btn,
  .phase-icon-btn,
  .phase-mobile-tab,
  .cu-opt,
  .cu-chip-opt,
  .cu-mode-toggle > button,
  .cu-device-toggle > button,
  .ad-crumb-home,
  #ad-menu-btn,
  #lang-toggle-btn,
  #theme-toggle-btn,
  #pt-sort-btn,
  #add-loyalty-ticket-btn,
  #refresh-loyalty-overrides-btn,
  #config-accent-reset,
  #customizer-preview-refresh {
    min-height: 44px;
    min-width: 44px;
  }

  /* Expand — these sit inside table rows and cards whose height they must not
     drive. The visual stays 34px; the tappable region is 44x44. */
  .pt-icon-btn,
  .ly-mini-btn,
  .nw-copy-code,
  .pm-media-btn {
    position: relative;
  }
  .pt-icon-btn::after,
  .ly-mini-btn::after,
  .nw-copy-code::after,
  .pm-media-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* With the hit areas expanded to 44px they would otherwise overlap; the row
     needs the 8px separation the guideline asks for. */
  .pt-actions,
  .dc-card-actions,
  .bwf-card-actions { gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   [Phase 13 ✅] Adjacent-target separation (≥8px, Apple HIG / Material)
   Measured sibling pairs only — two controls are only mistakable for one
   another if they sit next to each other. Most of the console already
   cleared this; these sat at 6–7px. The edit/delete pair matters most:
   one of the two is destructive, and 6px is inside a fingertip.
   ══════════════════════════════════════════════════════════════════════ */
.pt-actions { gap: 8px; }
.cu-accent-suggest,
.cu-chip-row,
#cu-mcols-picker,
#cu-maspect-picker,
#cu-mdensity-picker,
#cu-mdesc-picker,
#cu-mtags-picker { gap: 8px; }
.ad-topbar-actions { gap: 8px; }

/* The admin login fields were 23px tall with a mouse — the coarse-pointer
   floor does not reach a desktop. A password field is not dense-table
   chrome; it gets a comfortable height in both modes. */
.al-field-shell input { min-height: 40px; }

/* ══════════════════════════════════════════════════════════════════════
   [Phase 15 ✅] MEDIA STUDIO
   ──────────────────────────────────────────────────────────────────────
   Replaces #crop-modal, which was a dark-only `.modal-content.glass` panel
   with `color:#fff` written straight into the markup — it predated the
   token system and looked like a different product on a light theme.

   Everything here is token-driven, logical-property-only (so RTL needs no
   mirror rules), and sized mobile-first: below 900px the modal becomes a
   full-screen sheet with the stage on top and a sticky action bar, because
   a merchant photographing stock is holding a phone.
   ══════════════════════════════════════════════════════════════════════ */
.ms-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(2, 6, 23, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  visibility: hidden;
  pointer-events: none;
  transition:
    background 300ms var(--ad-ease-spring),
    backdrop-filter 300ms var(--ad-ease-spring),
    -webkit-backdrop-filter 300ms var(--ad-ease-spring),
    visibility 0s linear 300ms;
}
.ms-backdrop.is-open {
  pointer-events: auto;
  visibility: visible;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  transition:
    background 300ms var(--ad-ease-spring),
    backdrop-filter 300ms var(--ad-ease-spring),
    -webkit-backdrop-filter 300ms var(--ad-ease-spring),
    visibility 0s;
}

.ms-modal {
  position: fixed;
  z-index: 1450;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: min(1080px, calc(100vw - 40px));
  max-height: min(880px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-foreground);
  border: var(--border-strong) solid var(--color-border-subtle);
  border-radius: 22px;
  box-shadow: 0 40px 90px -30px rgba(2, 6, 23, 0.7);
  overflow: hidden;
  opacity: 0;
  scale: 0.96;
  visibility: hidden;
  transition:
    opacity 260ms var(--ad-ease-out),
    scale 320ms var(--ad-ease-spring),
    visibility 0s linear 320ms;
}
html[dir="rtl"] .ms-modal { translate: 50% -50%; }
.ms-modal.is-open {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition:
    opacity 260ms var(--ad-ease-out),
    scale 320ms var(--ad-ease-spring),
    visibility 0s;
}

/* ── Head ───────────────────────────────────────────────────────────── */
.ms-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px 16px;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-brand-accent) 5%, transparent), transparent);
}
.ms-head-copy { flex: 1; min-width: 0; }
.ms-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brand-accent);
}
.ms-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.18rem;
  margin: 3px 0 0;
  color: var(--color-foreground);
}
.ms-sub {
  margin: 3px 0 0;
  font-size: 0.7812rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.ms-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 10px;
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 180ms, border-color 180ms, background-color 180ms;
}
.ms-close svg { width: 18px; height: 18px; }
.ms-close:hover {
  color: var(--color-danger, #ef4444);
  border-color: color-mix(in srgb, var(--color-danger, #ef4444) 50%, transparent);
  background: color-mix(in srgb, var(--color-danger, #ef4444) 8%, transparent);
}
.ms-close:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* ── Body ───────────────────────────────────────────────────────────── */
.ms-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 0;
  overflow: hidden;
}
.ms-stage-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--color-foreground) 4%, transparent), color-mix(in srgb, var(--color-foreground) 4%, transparent)),
    var(--color-background);
}

/* The stage itself. `touch-action: none` is required, not cosmetic: without
   it the browser claims the drag as a page scroll and the crop never moves
   on a phone. */
.ms-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--color-foreground) 6%, transparent) 0% 25%, transparent 0% 50%)
    50% / 20px 20px;
  border: var(--border-thin) solid var(--color-border-default);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: grid;
  place-items: center;
}
.ms-stage.is-grabbing { cursor: grabbing; }
.ms-stage[data-locked="true"] { cursor: default; }

/* The media sits inside a frame box that carries the OUTPUT aspect. Anything
   outside the frame is dimmed by the guide's ring shadow rather than clipped,
   so the merchant can see what they are cutting off. */
.ms-canvas {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.ms-canvas img,
.ms-canvas video {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform-origin: 0 0;
  max-width: none;
  max-height: none;
  display: block;
  will-change: transform;
}
/* An RTL page flips the inline axis, which would mirror the pan maths against
   the pointer. The stage is a pixel canvas, not text — pin it to LTR. */
.ms-stage, .ms-canvas, .ms-guide { direction: ltr; }

/* [Phase 15.1] The blurred backdrop. Sits at the frame rect, under .ms-canvas,
   and mirrors what sharp/ffmpeg composite server-side: a cover-scaled, blurred,
   darkened copy of the media filling whatever the photo does not reach. The
   1.25 overscan hides the transparent halo a blur leaves at its own edges. */
.ms-fill {
  position: absolute;
  overflow: hidden;
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
  background: #10131c;
}
.ms-fill[hidden] { display: none; }
.ms-fill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(22px) brightness(0.5);
  transform: scale(1.25);
}
.ms-fill-img[hidden] { display: none; }
.ms-canvas { z-index: 1; }

.ms-guide {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border: var(--border-strong) solid color-mix(in srgb, var(--color-brand-accent) 85%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.58);
  transition: opacity 200ms var(--ad-ease-out);
}
.ms-guide[hidden] { display: none; }
.ms-safe {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  border: var(--border-thin) dashed color-mix(in srgb, #fff 70%, transparent);
  border-radius: 3px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.ms-safe-tag {
  /* Lifted out of the square and into the letterbox band above it. Inside, it
     covered the top-centre of the photo — exactly where a product usually is. */
  transform: translateY(-100%);
  margin-block-start: -1px;
  padding: 2px 8px;
  border-radius: 7px 7px 0 0;
  background: color-mix(in srgb, var(--color-brand-accent) 92%, transparent);
  color: var(--color-on-accent);
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ms-safe[hidden] { display: none; }

.ms-stage-busy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 23, 0.55);
  z-index: 3;
}
.ms-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: ms-spin 700ms linear infinite;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* ── Zoom bar ───────────────────────────────────────────────────────── */
.ms-zoom {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ms-zoom[hidden] { display: none; }
.ms-zoom-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 10px;
  color: var(--color-text-default);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 180ms, border-color 180ms, background-color 180ms;
}
.ms-zoom-btn svg { width: 16px; height: 16px; }
.ms-zoom-btn:hover { color: var(--color-brand-accent); border-color: var(--color-brand-accent); }
.ms-zoom-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.ms-zoom-range {
  flex: 1 1 90px;
  min-width: 0;
  height: 36px;
  accent-color: var(--color-brand-accent);
  cursor: pointer;
  touch-action: manipulation;
}
/* Fill frame / Show all of it. Accent-tinted because it is the only control in
   the studio that discards pixels — the merchant should be able to see that it
   is a different kind of action from Recentre. */
.ms-fit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--color-brand-accent) 10%, transparent);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 40%, transparent);
  border-radius: 10px;
  color: var(--color-brand-accent);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  transition: background-color 180ms, border-color 180ms;
}
.ms-fit-btn[hidden] { display: none; }
.ms-fit-btn svg { width: 14px; height: 14px; }
.ms-fit-btn:hover { background: color-mix(in srgb, var(--color-brand-accent) 18%, transparent); border-color: var(--color-brand-accent); }
.ms-fit-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.ms-fit-btn[data-state="filled"] svg { transform: rotate(180deg); }

.ms-prev-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) brightness(0.5);
  transform: scale(1.3);
  z-index: 0;
}
.ms-prev-fill[hidden] { display: none; }
.ms-prev-box > img:not(.ms-prev-fill),
.ms-prev-box > video { z-index: 1; }

.ms-reset-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 180ms, border-color 180ms;
}
.ms-reset-btn svg { width: 14px; height: 14px; }
.ms-reset-btn:hover { color: var(--color-brand-accent); border-color: var(--color-brand-accent); }
.ms-reset-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* ── Side panel ─────────────────────────────────────────────────────── */
.ms-side {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-inline-start: var(--border-thin) solid var(--color-border-subtle);
}
.ms-group { display: flex; flex-direction: column; gap: 8px; }
.ms-group-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.ms-group-hint {
  margin: -2px 0 2px;
  font-size: 0.7188rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* One column, not two. In a 320px side panel a two-up grid leaves ~74px for
   the label and "Instagram post" ellipsised to "Instagram …" — which defeats
   the point of naming the platform. */
.ms-presets {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.ms-preset {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 10px;
  background: var(--color-surface-raised, var(--color-surface));
  border: var(--border-strong) solid var(--color-border-subtle);
  border-radius: 12px;
  color: var(--color-text-default);
  cursor: pointer;
  text-align: start;
  touch-action: manipulation;
  transition: border-color 180ms, background-color 180ms, transform 180ms var(--ad-ease-spring);
}
.ms-preset:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.ms-preset:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.ms-preset[aria-checked="true"] {
  border-color: var(--color-brand-accent);
  background: color-mix(in srgb, var(--color-brand-accent) 10%, var(--color-surface));
}
.ms-preset-ic {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  transition: color 180ms;
}
.ms-preset-ic svg { width: 20px; height: 20px; }
/* Third-party brand colours — a sanctioned exception to the token rule, and
   only on the selected chip so an unselected row stays visually quiet. */
.ms-preset[data-preset="instagram"][aria-checked="true"] .ms-preset-ic { color: #E1306C; }
.ms-preset[data-preset="facebook"][aria-checked="true"]  .ms-preset-ic { color: #1877F2; }
.ms-preset[data-preset="tiktok"][aria-checked="true"]    .ms-preset-ic { color: #22D3EE; }
.ms-preset[data-preset="original"][aria-checked="true"]  .ms-preset-ic { color: var(--color-brand-accent); }
.ms-preset-copy { display: flex; flex-direction: column; min-width: 0; }
.ms-preset-name {
  font-family: var(--font-body);
  font-size: 0.7812rem;
  font-weight: 800;
  color: var(--color-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-preset-meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* ── Live previews ──────────────────────────────────────────────────── */
.ms-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ms-prev { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-prev-box {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: var(--border-thin) solid var(--color-border-default);
  background: var(--color-background);
  direction: ltr;
}
.ms-prev-card   { aspect-ratio: 4 / 5; }
.ms-prev-detail { aspect-ratio: 1 / 1; }
.ms-prev-box img,
.ms-prev-box video {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  max-width: none;
  max-height: none;
  display: block;
}
.ms-prev-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text-subtle);
}
.ms-prev figcaption {
  font-size: 0.6562rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Output summary ─────────────────────────────────────────────────── */
.ms-out {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: var(--border-thin) solid color-mix(in srgb, var(--color-brand-accent) 26%, transparent);
  background: color-mix(in srgb, var(--color-brand-accent) 7%, transparent);
}
.ms-out-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-brand-accent) 16%, transparent);
  color: var(--color-brand-accent);
}
.ms-out-ic svg { width: 16px; height: 16px; }
.ms-out-copy { display: flex; flex-direction: column; min-width: 0; }
.ms-out-title {
  font-family: var(--font-mono);
  font-size: 0.7188rem;
  font-weight: 800;
  color: var(--color-foreground);
}
.ms-out-sub {
  font-size: 0.6562rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ── Foot ───────────────────────────────────────────────────────────── */
.ms-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: var(--border-thin) solid var(--color-border-subtle);
  background: var(--color-surface);
}
.ms-status {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.7188rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.ms-status[data-tone="error"] { color: var(--color-danger, #ef4444); }
.ms-status[data-tone="success"] { color: var(--color-success, #16a34a); }
.ms-actions { display: flex; gap: 10px; flex-shrink: 0; }
.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms, border-color 180ms, color 180ms, transform 160ms var(--ad-ease-spring);
}
.ms-btn svg { width: 15px; height: 15px; }
.ms-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.ms-btn-ghost {
  background: transparent;
  border: var(--border-strong) solid var(--color-border-default);
  color: var(--color-text-default);
}
.ms-btn-ghost:hover { border-color: var(--color-border-strong); color: var(--color-foreground); }
.ms-btn-primary {
  background: var(--color-brand-accent);
  border: var(--border-strong) solid var(--color-brand-accent);
  color: var(--color-on-accent);
}
.ms-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.ms-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Phone: full-screen sheet ───────────────────────────────────────── */
/* The height condition is load-bearing, not defensive. A phone in landscape is
   812×375 — narrow enough to match `max-width: 899.98px`, but stacking the
   stage above the side panel in 375px of height left the crop frame 32px wide
   and pushed the presets on top of it. Narrow AND tall gets the sheet; short
   viewports fall through to the short-viewport block below, which keeps the
   two-column layout and drops what does not fit. (Note 40's lesson in a
   different shape: the width alone was the wrong thing to key on.) */
@media (max-width: 899.98px) and (min-height: 560px) {
  .ms-modal {
    inset: 0;
    translate: none;
    width: 100vw;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
    border: none;
    scale: 1;
    transform: translateY(100%);
    transition: transform 340ms var(--ad-ease-spring), opacity 200ms, visibility 0s linear 340ms;
  }
  html[dir="rtl"] .ms-modal { translate: none; }
  .ms-modal.is-open { transform: translateY(0); transition: transform 340ms var(--ad-ease-spring), opacity 200ms, visibility 0s; }

  /* NOT a grid here. `grid-template-rows: minmax(0,1fr) auto` inside an
     `overflow-y: auto` box gives the 1fr row whatever is LEFT OVER, and the
     side panel's `auto` row is taller than the whole modal — so the first row
     resolved to 0px, the stage column overflowed out of its own row, and the
     presets painted directly on top of the crop stage. A scrolling flex column
     is the right primitive when the content is deliberately taller than the
     box. */
  .ms-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ms-stage-col { padding: 12px; flex: 0 0 auto; height: 46dvh; min-height: 260px; }
  .ms-side { flex: 0 0 auto; }
  /* Four controls wrapped raggedly and left Recentre alone on its own line.
     An explicit 2x2 grid: zoom on top, the two framing actions below, each
     filling its half. */
  .ms-zoom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "out slider in" "fit fit reset";
    gap: 8px;
  }
  #ms-zoom-out  { grid-area: out; }
  #ms-zoom-range { grid-area: slider; }
  #ms-zoom-in   { grid-area: in; }
  .ms-fit-btn   { grid-area: fit; justify-content: center; }
  .ms-reset-btn { grid-area: reset; justify-content: center; }
  /* With the button hidden (source already the right shape) the row must not
     leave a gap where it was. */
  .ms-fit-btn[hidden] + .ms-reset-btn { grid-column: 1 / -1; }
  .ms-side {
    border-inline-start: none;
    border-top: var(--border-thin) solid var(--color-border-subtle);
    overflow: visible;
    padding: 14px 14px 18px;
  }
  /* On a phone the side panel is full width, so two chips per row fit their
     labels comfortably and keep the sheet short enough to reach the actions. */
  .ms-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-head { padding: 14px 16px 12px; padding-top: max(14px, env(safe-area-inset-top)); }
  .ms-foot {
    position: sticky;
    inset-block-end: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .ms-status { flex-basis: 100%; }
  .ms-actions { flex: 1; }
  .ms-btn { flex: 1; }
}
@media (max-width: 380px) and (min-height: 560px) {
  .ms-presets { grid-template-columns: minmax(0, 1fr); }
}

/* ── Short viewport (phone landscape, small laptop) ──────────────────── */
/* Full-bleed, still two columns, and the parts that cannot earn their height
   are dropped rather than squeezed: the previews go (the stage IS the preview
   at this size) and the head collapses to a single line. */
@media (max-height: 559.98px) {
  .ms-modal {
    inset: 0;
    translate: none;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    scale: 1;
  }
  html[dir="rtl"] .ms-modal { translate: none; }
  .ms-head { padding: 8px 14px; align-items: center; }
  .ms-head .ms-kicker { display: none; }
  .ms-title { font-size: 0.95rem; }
  .ms-sub { font-size: 0.6875rem; }
  .ms-body { grid-template-columns: minmax(0, 1fr) clamp(210px, 32vw, 280px); grid-template-rows: minmax(0, 1fr); }
  .ms-stage-col { padding: 10px; gap: 8px; }
  .ms-side { padding: 10px 12px; gap: 10px; }
  .ms-group-hint { display: none; }
  .ms-group-preview { display: none; }
  .ms-out { display: none; }
  .ms-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ms-preset { min-height: 46px; padding: 6px 8px; }
  .ms-preset-meta { display: none; }
  .ms-foot { padding: 8px 14px; }
  .ms-btn { min-height: 40px; }
  /* The zoom row is the only chrome between the stage and the foot; the label
     it drops goes straight into the crop frame. The BUTTONS keep their size —
     shrinking a finger target to buy 8px of frame is the wrong trade, and a
     landscape phone is still a finger (note 40). */
  /* Label hidden, so the button becomes an icon square — it needs an explicit
     min-width or the padding alone leaves it 36px across. */
  .ms-reset-btn { padding: 0; min-width: 44px; justify-content: center; }
  .ms-reset-btn span { display: none; }
  .ms-fit-btn { padding: 0 10px; }
  .ms-status { display: none; }
}
/* A mouse does not need the 44px floor, so a small laptop window gets the
   extra height back. */
@media (max-height: 559.98px) and (pointer: fine) {
  .ms-zoom-btn { width: 34px; height: 34px; }
  .ms-zoom-range { height: 30px; }
  .ms-reset-btn { min-height: 34px; }
  .ms-fit-btn { min-height: 34px; }
}

/* Coarse pointers get finger-sized controls regardless of viewport width —
   note 40: a phone in landscape is 812px wide and is still a finger. */
@media (max-width: 899.98px), (pointer: coarse) {
  .ms-close { width: 44px; height: 44px; }
  .ms-zoom-btn { width: 44px; height: 44px; }
  .ms-zoom-range { height: 44px; }
  .ms-reset-btn { min-height: 44px; }
  .ms-fit-btn { min-height: 44px; }
  .ms-btn { min-height: 48px; }
  .ms-preset { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-modal, .ms-backdrop, .ms-preset, .ms-btn { transition-duration: 1ms !important; }
  .ms-spinner { animation-duration: 2s; }
}

/* [Phase 15] Cover block additions — the note used to carry an inline
   `color:#22D3EE`, a hardcoded cyan that ignored the theme entirely. */
.pm-cover-note {
  margin-block-start: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-brand-accent);
}
.pm-reframe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  background: transparent;
  border: var(--border-strong) solid var(--color-border-default);
  border-radius: 11px;
  color: var(--color-text-default);
  font-family: var(--font-body);
  font-size: 0.7812rem;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 180ms, border-color 180ms, background-color 180ms;
}
.pm-reframe-btn svg { width: 15px; height: 15px; }
.pm-reframe-btn:hover {
  color: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  background: color-mix(in srgb, var(--color-brand-accent) 7%, transparent);
}
.pm-reframe-btn:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
@media (max-width: 768px), (pointer: coarse) { .pm-reframe-btn { min-height: 44px; } }

/* The dropzone is a real button now (role + tabindex from attachDropzone), so
   it needs a focus ring — it had none, because nothing could focus it. */
.pm-dropzone:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }

/* Reduced mode: the browser could not decode the source (a .mov, typically). */
.ms-nopreview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background: var(--color-surface);
}
.ms-nopreview-ic {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-brand-accent) 12%, transparent);
  color: var(--color-brand-accent);
}
.ms-nopreview-ic svg { width: 24px; height: 24px; }
.ms-nopreview-title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--color-foreground);
}
.ms-nopreview-sub {
  max-width: 34ch;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-muted);
}