/* ============================================
   EXECUTABLES — Cyberpunk product shop
   ============================================ */

:root {
  --bg: #0a0a0f;
  --bg-2: #0e0e16;
  --surface: #12121c;
  --surface-2: #181826;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #e8e8f0;
  --text-dim: #9090a8;
  --text-mute: #5a5a72;
  --accent: #00ffd1;
  --accent-2: #ff2bd6;
  --warn: #ffea00;
  --danger: #ff4060;
  --grid-cols: 3;
  --density: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 80%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 60%),
    var(--bg);
  min-height: 100vh;
  position: relative;
}

/* Scanline overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.012) 2px,
    rgba(255, 255, 255, 0.012) 3px
  );
}
body.no-scanlines::before { display: none; }

/* Noise overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
body.no-noise::after { display: none; }

::selection { background: var(--accent); color: var(--bg); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================
   DISPLAY TYPE — used for big numerals & callouts
   ============================================ */
.display, .hero-title, .sec-title, .modal-title, .sl-name {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body.mono-all .display,
body.mono-all .hero-title,
body.mono-all .sec-title,
body.mono-all .modal-title,
body.mono-all .sl-name {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0;
}

/* ============================================
   CORNER CUTS — decorative L-brackets
   ============================================ */
.cc {
  position: absolute;
  width: var(--cc, 10px);
  height: var(--cc, 10px);
  pointer-events: none;
  border-color: var(--cco, var(--accent));
  z-index: 2;
}
.cc.tl { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; }
.cc.tr { top: -1px; right: -1px; border-top: 1.5px solid; border-right: 1.5px solid; }
.cc.bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.cc.br { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
body.no-cuts .cc { display: none; }

/* ============================================
   DOTS / STATUS
   ============================================ */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-mute);
  box-shadow: 0 0 0 0 transparent;
}
.dot.live {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.8s infinite;
}
.dot.pulse {
  background: var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent), 0 8px 24px -8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.btn.primary:hover {
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  color: var(--bg);
  box-shadow: 0 0 24px -2px color-mix(in oklab, var(--accent) 60%, transparent);
  transform: translateY(-1px);
}
.btn.primary:disabled {
  background: var(--surface-2);
  color: var(--text-dim);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.btn.ghost { background: transparent; }
.btn.big { padding: 14px 20px; font-size: 12px; width: 100%; justify-content: center; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.12s ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================
   NAV
   ============================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 14px 36px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { justify-self: start; }
.nav-right { justify-self: end; }
.nav-logo {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
}
.nl-b { color: var(--accent); letter-spacing: 0.04em; margin-right: -0.04em; }
.nl-r { color: var(--text); letter-spacing: 0.04em; }
.nl-v { color: var(--text-mute); font-size: 10px; margin-left: 8px; letter-spacing: 0.1em; }

.nav-links { display: flex; gap: 28px; justify-content: center; }
.nav-links a {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  transition: color 0.12s;
}
.nav-links a:hover { color: var(--accent); }
.nav-status { display: inline-flex; align-items: center; gap: 6px; }

.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  position: relative;
  transition: all 0.12s;
}
.nav-cart:hover { border-color: var(--accent); color: var(--accent); }
.nav-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  margin-left: 4px;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 47.8vw;
  min-height: 560px;
  padding: 0 2.09vw 0.77vw;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-characters {
  position: absolute;
  inset: 0;
  background-image: url('../images/hero/character-group.png');
  background-repeat: no-repeat;
  background-position: center 20%;
  background-size: cover;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, transparent 38%),
    linear-gradient(to bottom, transparent 0%, transparent calc(100% - 320px), rgba(8, 12, 14, 0.6) calc(100% - 192px), var(--bg) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; max-width: 920px; }
.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.341vw;
  padding: 0.22vw 0.385vw;
  border: 1px solid var(--border);
  font-size: 0.544vw;
  letter-spacing: 0.15em;
  color: var(--text);
  margin-bottom: 1.155vw;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
.hero-meta .sep { color: var(--text-mute); }

.hero-title {
  margin: 0 0 0.726vw;
  font-size: 5.247vw;
  line-height: 0.92;
  letter-spacing: -0.04em;
  position: relative;
  color: var(--text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.hero-title.glitch::before,
.hero-title.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-title.glitch::before {
  color: var(--accent);
  transform: translate(-2px, 0);
  mix-blend-mode: screen;
  animation: glitchA 4s infinite linear alternate-reverse;
}
.hero-title.glitch::after {
  color: var(--accent-2);
  transform: translate(2px, 0);
  mix-blend-mode: screen;
  animation: glitchB 4.5s infinite linear alternate-reverse;
}
@keyframes glitchA {
  0%, 100% { clip-path: inset(0 0 90% 0); transform: translate(-1px, 0); }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 1px); }
  40% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, -1px); }
  60% { clip-path: inset(70% 0 10% 0); transform: translate(-1px, 0); }
  80% { clip-path: inset(85% 0 5% 0); transform: translate(-2px, 1px); }
}
@keyframes glitchB {
  0%, 100% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 0); }
  25% { clip-path: inset(50% 0 30% 0); transform: translate(3px, -1px); }
  50% { clip-path: inset(20% 0 60% 0); transform: translate(2px, 0); }
  75% { clip-path: inset(10% 0 70% 0); transform: translate(1px, 1px); }
}

.hero-sub {
  max-width: 28vw;
  margin: 0 0 1.287vw;
  font-size: 0.784vw;
  line-height: 1.55;
  color: var(--text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
.hero-actions { display: flex; gap: 0.429vw; margin-bottom: 2.057vw; flex-wrap: wrap; }
.hero .btn {
  gap: 0.341vw;
  padding: 0.473vw 0.693vw;
  font-size: 0.473vw;
  clip-path: polygon(0 0, calc(100% - 0.341vw) 0, 100% 0.341vw, 100% 100%, 0.341vw 100%, 0 calc(100% - 0.341vw));
}
.hero .btn svg { width: 0.605vw; height: 0.605vw; }

.boot {
  font-size: 0.605vw;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding: 0.341vw 0 0.341vw 0.693vw;
  background: linear-gradient(to right, color-mix(in oklab, var(--accent) 6%, transparent), transparent);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}
.boot-line { padding: 0.088vw 0; letter-spacing: 0.04em; }
.boot-cursor {
  display: inline-block;
  color: var(--accent);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: end;
}
.hero-stat {
  position: relative;
  padding: 16px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
}
.hs-k { font-size: 10px; letter-spacing: 0.18em; color: var(--text-mute); margin-bottom: 8px; }
.hs-v {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.hs-v span { color: var(--text-dim); font-size: 18px; }
.hs-v.live { color: var(--accent); font-size: 24px; }

/* ============================================
   SECTION HEADERS
   ============================================ */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 0 48px;
  margin: 80px 0 24px;
}
.sec-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.sec-title {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.01em;
}
.sec-title .muted { color: var(--text-mute); font-weight: 400; font-size: 22px; }
.sec-side {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}
.sec-side button {
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  padding: 0 4px;
}
.sec-side button:hover { color: var(--accent); }

/* ============================================
   SPOTLIGHT
   ============================================ */
.spotlight {
  margin: 32px 48px 0;
  position: relative;
  border: 1px solid var(--border-strong);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 6%, transparent),
    color-mix(in oklab, var(--accent-2) 4%, transparent),
    var(--surface) 80%
  );
}
.sl-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.sl-pos {
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  letter-spacing: 0.1em;
}
.sl-pos span { color: var(--text-mute); }
.sl-paused {
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  color: var(--warn);
  letter-spacing: 0.2em;
  font-size: 9px;
}
.sl-progress {
  position: relative;
  height: 2px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.sl-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--accent-2) 40%));
  box-shadow: 0 0 8px var(--accent);
  transition: width 60ms linear;
}
.sl-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
}
.sl-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.12s;
}
.sl-arrow:hover { color: var(--accent); border-color: var(--accent); }
.sl-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sl-dot {
  width: 22px;
  height: 4px;
  border: none;
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, transform 0.12s;
}
.sl-dot:hover { background: var(--text-dim); }
.sl-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  transform: scaleY(1.4);
}
.sl-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  min-height: 360px;
}
.sl-left { padding: 36px 36px 32px; display: flex; flex-direction: column; }
.sl-name {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  margin: 8px 0 16px;
  background: linear-gradient(90deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sl-blurb {
  font-size: 15px;
  color: var(--text-dim);
  margin-bottom: 24px;
  max-width: 480px;
}
.sl-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: auto; }
.sl-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.04em;
}
.sl-feat svg { color: var(--accent); flex-shrink: 0; }
.sl-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.sl-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-right: 12px;
  margin-right: 4px;
  border-right: 1px solid var(--border);
}
.sl-amt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
}
.sl-cur { font-size: 10px; letter-spacing: 0.18em; color: var(--text-mute); }

.sl-right {
  position: relative;
  border-left: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-2);
}
.sl-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, color-mix(in oklab, var(--bg) 92%, transparent), transparent);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.sl-ov-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.sl-ov-row span:first-child { color: var(--text-mute); }
.sl-ov-row .status { color: var(--accent); }
.sl-ov-row .status.online { color: var(--accent); }
.sl-ov-row .status.updating { color: var(--warn); }
.sl-ov-row .status.offline { color: var(--danger); }

/* ============================================
   FILTERS
   ============================================ */
.filters {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 48px 24px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.filter-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.12s;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.tab-count {
  font-size: 9px;
  padding: 1px 5px;
  background: color-mix(in oklab, currentColor 18%, transparent);
  border-radius: 2px;
  letter-spacing: 0;
}
.tab.active .tab-count {
  background: color-mix(in oklab, var(--bg) 18%, transparent);
}

.filter-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  min-width: 260px;
}
.search svg { color: var(--text-mute); }
.search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.search input::placeholder { color: var(--text-mute); }
.search:focus-within { border-color: var(--accent); }
.search-clear {
  background: none;
  border: none;
  color: var(--text-mute);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
}
.search-clear:hover { color: var(--accent); }

.result-count { font-size: 10px; letter-spacing: 0.18em; color: var(--text-mute); }

/* ============================================
   PRODUCT GRID
   ============================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: 16px;
  padding: 0 48px 64px;
}
.grid-item.wide { grid-column: 1 / -1; }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.15s, transform 0.15s;
  overflow: hidden;
  height: 100%;
}
.card:hover {
  border-color: var(--accent);
}
.card:hover .cc { border-color: var(--accent); }
.card.expanded { border-color: var(--accent); }
.card.expanded .cc { border-color: var(--accent); }

.card-main {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events: none;
  z-index: 1;
}
.card-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 4px 8px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.card-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 4px 8px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border: 1px solid var(--border);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.card-status.online   { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.card-status.updating { color: var(--warn);   border-color: color-mix(in oklab, var(--warn)   40%, var(--border)); }
.card-status.offline  { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); }

.card-body {
  padding: calc(18px * var(--density)) calc(18px * var(--density)) calc(16px * var(--density));
}
.card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: calc(18px * var(--density));
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
body.mono-all .card-name { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; }
.card-blurb {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 14px;
  min-height: 34px;
}
.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.card-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
}
.card-cat { font-size: 10px; color: var(--text-mute); letter-spacing: 0.14em; }

/* ============================================
   CATEGORY BANNER
   Decorative title-card tile shown in the first
   catalog slot when a single category is selected.
   Three coordinated effects:
     1. Conic-gradient beam tracing the image edges,
        alternating accent ↔ accent-2 across laps.
     2. Continuous difference-blended ghost drift on
        a duplicate <img> — the constant "doubled" look.
     3. Rapid clip-path slice flurry on that same
        ghost every ~4.5s for the glitch flash.
   ============================================ */
/* @property registration enables smooth interpolation
   of the angle and color variables — without this,
   browsers treat custom properties as plain strings
   and can't tween between keyframe values. */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --beam-color {
  syntax: '<color>';
  initial-value: #00ffd1;
  inherits: false;
}
.category-banner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}
.category-banner-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
}
.category-banner-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.category-banner-frame .cb-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0.6;
  animation:
    cb-drift 4.5s infinite ease-in-out,
    cb-slice 4.5s infinite steps(1, end);
}
@keyframes cb-drift {
  0%, 100% { transform: translate(4px, 0); }
  50%      { transform: translate(-4px, 0); }
}
@keyframes cb-slice {
  0%, 60%, 94%, 100% { clip-path: inset(0 0 0 0); }
  61% { clip-path: inset(20% 0 65% 0); }
  63% { clip-path: inset(0 0 0 0); }
  65% { clip-path: inset(55% 0 25% 0); }
  67% { clip-path: inset(10% 0 75% 0); }
  69% { clip-path: inset(0 0 0 0); }
  71% { clip-path: inset(40% 0 45% 0); }
  73% { clip-path: inset(70% 0 15% 0); }
  75% { clip-path: inset(0 0 0 0); }
  77% { clip-path: inset(25% 0 60% 0); }
  79% { clip-path: inset(60% 0 30% 0); }
  81% { clip-path: inset(0 0 0 0); }
  83% { clip-path: inset(15% 0 75% 0); }
  85% { clip-path: inset(45% 0 35% 0); }
  87% { clip-path: inset(0 0 0 0); }
  89% { clip-path: inset(70% 0 15% 0); }
  91% { clip-path: inset(30% 0 55% 0); }
  93% { clip-path: inset(0 0 0 0); }
}
.category-banner-frame::before {
  content: '';
  position: absolute;
  inset: -3px;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0deg,
    transparent 270deg,
    var(--beam-color) 360deg
  );
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
          mask-composite: exclude;
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--beam-color));
  animation: beam-travel 4.8s linear infinite;
}
@keyframes beam-travel {
  0%   { --beam-angle: 0deg;   --beam-color: var(--accent); }
  40%  { --beam-angle: 288deg; --beam-color: var(--accent); }
  50%  { --beam-angle: 360deg; --beam-color: var(--accent-2); }
  90%  { --beam-angle: 648deg; --beam-color: var(--accent-2); }
  100% { --beam-angle: 720deg; --beam-color: var(--accent); }
}

/* Expanded view */
.card.expanded .card-media { aspect-ratio: 21 / 6; }
.card.expanded .card-main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
}
.card.expanded .card-media { border-bottom: none; border-right: 1px solid var(--border); aspect-ratio: auto; }
.card.expanded .card-body { padding: 28px 32px 24px; }
.card.expanded .card-name { font-size: 32px; }
.card.expanded .card-blurb { font-size: 14px; min-height: 0; }
.card.expanded .card-foot { display: none; }

.card-expand {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-top: 1px solid var(--border);
}
.card-expand > .ce-section:first-child {
  grid-row: 1;
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--border);
  padding: 24px 32px;
}
.card-expand .ce-grid {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.card-expand .ce-grid .ce-section { padding: 24px 32px; }
.card-expand .ce-grid .ce-section + .ce-section { border-left: 1px solid var(--border); }

.ce-h {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 12px;
}
.ce-section p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; max-width: 720px; }
.ce-feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ce-feat li { display: flex; gap: 10px; font-size: 12px; color: var(--text); align-items: center; }
.ce-feat svg { color: var(--accent); flex-shrink: 0; }
.ce-spec { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; font-size: 12px; }
.ce-spec dt { color: var(--text-mute); letter-spacing: 0.12em; }
.ce-spec dd { margin: 0; color: var(--text); }

.ce-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
  flex-wrap: wrap;
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 0;
  color: var(--text-mute);
  letter-spacing: 0.15em;
}
.empty-art { font-size: 42px; color: var(--accent); margin-bottom: 12px; opacity: 0.5; }
.empty-sub { font-size: 11px; margin-top: 6px; }

/* ============================================
   CART DRAWER
   ============================================ */
.cart-scrim {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cart-scrim.open { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 92vw;
  z-index: 201;
  background: var(--surface);
  border-left: 1px solid var(--accent);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(.7,0,.2,1);
  box-shadow: -20px 0 60px -20px color-mix(in oklab, var(--accent) 30%, transparent);
}
.cart.open { transform: translateX(0); }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cart-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.cart-body { flex: 1; overflow-y: auto; padding: 8px 0; }
.cart-empty {
  padding: 80px 24px;
  text-align: center;
  color: var(--text-mute);
  letter-spacing: 0.15em;
}
.ce-art { font-size: 38px; color: var(--accent); opacity: 0.4; margin-bottom: 12px; }
.cart-empty .ce-sub { font-size: 10px; margin-top: 4px; }

.cart-line {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.cl-media { width: 60px; height: 60px; border: 1px solid var(--border); background: var(--bg-2); overflow: hidden; }
.cl-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
body.mono-all .cl-name { font-family: 'JetBrains Mono', monospace; }
.cl-tag { font-size: 10px; color: var(--text-mute); letter-spacing: 0.1em; margin-bottom: 8px; }
.cl-controls { display: flex; align-items: center; gap: 12px; }
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  height: 24px;
}
.qty button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.qty button:hover { color: var(--accent); }
.qty span {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--text);
}
.cl-remove {
  background: none;
  border: none;
  color: var(--text-mute);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.cl-remove:hover { color: var(--danger); }
.cl-price { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--accent); }
body.mono-all .cl-price { font-family: 'JetBrains Mono', monospace; }

.cart-foot {
  padding: 16px 20px 18px;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
}
.cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.cart-row.total {
  font-size: 16px;
  color: var(--text);
  border-top: 1px dashed var(--border);
  margin-top: 6px;
  padding-top: 10px;
  margin-bottom: 16px;
}
.cart-row.total span:last-child { color: var(--accent); font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
body.mono-all .cart-row.total span:last-child { font-family: 'JetBrains Mono', monospace; }

.cart-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
}

/* ============================================
   CHECKOUT MODAL
   ============================================ */
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 36px;
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: 0 0 60px -10px color-mix(in oklab, var(--accent) 40%, transparent);
  animation: rise 0.22s cubic-bezier(.6,0,.2,1);
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }
.modal-close { position: absolute; top: 14px; right: 14px; }
.modal-tag { font-size: 10px; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 8px; }
.modal-title { margin: 0 0 10px; font-size: 28px; }
.modal-sub { margin: 0 0 24px; font-size: 13px; color: var(--text-dim); }
.modal-sub strong { color: var(--accent); }

.checkout-stream {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12px;
}
.cs-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.cs-line.on { color: var(--text); }
.cs-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
}
.cs-line.on .cs-dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.cs-ok { margin-left: auto; color: var(--accent); font-size: 10px; letter-spacing: 0.18em; }
.cs-spin { margin-left: auto; color: var(--accent-2); animation: blink 0.8s steps(2) infinite; }

.checkout-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  margin-bottom: 24px;
  background: var(--bg);
}
.cc-k { font-size: 10px; letter-spacing: 0.18em; color: var(--text-mute); }
.cc-v { font-family: 'JetBrains Mono', monospace; color: var(--accent); letter-spacing: 0.15em; font-size: 13px; }

.modal-actions { display: flex; gap: 10px; }
.modal-fine { margin: 20px 0 0; font-size: 10px; color: var(--text-mute); letter-spacing: 0.1em; }

/* ============================================
   FAQ
   ============================================ */
.faq {
  padding: 0 48px 80px;
}
.faq-list {
  margin: 0 48px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 24px;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.faq-q:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.faq-n { font-size: 11px; color: var(--accent); letter-spacing: 0.14em; min-width: 24px; }
.faq-qt { flex: 1; font-size: 14px; letter-spacing: 0.01em; }
.faq-chev { color: var(--text-dim); transition: transform 0.18s; }
.faq-item.open .faq-chev { transform: rotate(180deg); color: var(--accent); }
.faq-a {
  padding: 0 24px 20px 64px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ============================================
   FOOTER
   ============================================ */
.foot {
  border-top: 1px solid var(--border);
  padding: 56px 48px 24px;
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--accent) 4%, transparent));
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.foot-logo { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.foot-logo span { color: var(--text); }
.foot-tag { font-size: 12px; color: var(--text-dim); margin: 0 0 18px; max-width: 420px; white-space: pre-line; }
.foot-socials { display: flex; gap: 10px; align-items: center; }
.foot-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: all 0.12s;
}
.foot-socials a svg { width: 32px; height: 32px; }
.foot-socials a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

.foot-h {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 14px;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-grid li a { font-size: 12px; color: var(--text-dim); }
.foot-grid li a:hover { color: var(--accent); }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
}

/* ============================================
   IMAGE-SLOT CUSTOMIZATION
   ============================================ */
image-slot {
  --slot-bg: var(--bg-2);
  --slot-border: var(--border);
  --slot-color: var(--text-mute);
  --slot-accent: var(--accent);
  display: block;
}

/* ============================================
   CARD HOVER CTA
   ============================================ */
.card { position: relative; }
.card-hover-cta {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--accent);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
  z-index: 4;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  box-shadow: 0 6px 22px -6px color-mix(in oklab, var(--accent) 60%, transparent);
}
.card:hover .card-hover-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   PRODUCT MODAL (frosted glass detail panel)
   ============================================ */
/* ============================================
   LIGHTBOX — full-size image viewer that pops
   above the product modal when a gallery image
   is clicked. Owns its own keyboard input via
   a capture-phase listener so Esc / arrows act
   on the lightbox first, not the modal beneath.
   ============================================ */
.lb-scrim {
  position: fixed;
  inset: 0;
  z-index: 500;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 80px;
  animation: lb-fade 0.15s ease-out;
}
@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Stage fills the available scrim area (viewport minus padding) so the
   img's max-width/max-height: 100% reliably collapses big images to fit
   without ever introducing a scrollbar. */
.lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lb-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 25%, transparent),
    0 30px 90px -15px rgba(0, 0, 0, 0.8);
}
/* No box — just an SVG icon floating over the dark backdrop. A subtle
   drop-shadow keeps the icon legible when an image's bright edge lands
   underneath it. The hit area is the padded button so it stays easy
   to click without showing a visible frame. */
.lb-close,
.lb-arrow {
  position: fixed;
  z-index: 510;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  transition: color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.85));
}
.lb-close { top: 18px; right: 18px; }
.lb-arrow { top: 50%; transform: translateY(-50%); }
.lb-arrow.left  { left: 18px; }
.lb-arrow.right { right: 18px; }
.lb-close:hover,
.lb-arrow:hover {
  color: var(--accent);
  filter:
    drop-shadow(0 0 10px var(--accent))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.85));
}
.lb-arrow.left:hover  { transform: translate(-2px, -50%); }
.lb-arrow.right:hover { transform: translate( 2px, -50%); }
.lb-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 510;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 14px;
  background: color-mix(in oklab, var(--bg) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lb-counter-sep { color: var(--text-mute); }
@media (max-width: 720px) {
  .lb-scrim { padding: 60px 12px; }
  .lb-arrow { width: 34px; height: 48px; }
  .lb-arrow.left  { left: 12px; }
  .lb-arrow.right { right: 12px; }
}

.pm-scrim {
  position: fixed;
  inset: 0;
  z-index: 250;
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 65%),
    color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 24px 24px;
  overflow-y: auto;
  opacity: 1;
}
.pm-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.pm {
  position: relative;
  width: 100%;
  max-width: 1180px;
  max-height: 88vh;
  margin: auto;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(155deg,
      color-mix(in oklab, var(--accent) 8%, transparent),
      color-mix(in oklab, var(--accent-2) 5%, transparent) 50%,
      transparent 100%),
    color-mix(in oklab, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border-strong));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent),
    0 30px 80px -20px color-mix(in oklab, var(--accent) 25%, transparent),
    0 60px 120px -40px rgba(0,0,0,0.7);
  overflow: hidden;
  z-index: 2;
}
.pm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.18s, border-color 0.12s, box-shadow 0.18s;
}
.pm-close:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 20px -4px var(--accent);
  transform: rotate(90deg);
}
.pm-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 60px 14px 22px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
  background: color-mix(in oklab, var(--bg) 40%, transparent);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.pm-strip-tag { color: var(--accent); font-weight: 700; }
.pm-strip-sep { color: var(--text-mute); }
.pm-strip-cat { color: var(--accent-2); font-weight: 600; }
.pm-strip-status {
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid currentColor;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: 0.18em;
}
.pm-strip-status.online   { color: var(--accent); }
.pm-strip-status.updating { color: var(--warn); }
.pm-strip-status.offline  { color: var(--danger); }
.pm-strip-v {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  letter-spacing: 0.1em;
}
.pm-hero {
  position: relative;
  aspect-ratio: 16 / 7;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.pm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, color-mix(in oklab, var(--bg) 90%, transparent));
  pointer-events: none;
}
.pm-body { padding: 28px 32px 24px; }
.pm-headline { margin-bottom: 28px; }
.pm-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  margin: 0 0 12px;
  background: linear-gradient(90deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.mono-all .pm-name { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; }
.pm-blurb {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  max-width: 720px;
}
.pm-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
.pm-h {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.pm-p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.65;
}
.pm-feat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.pm-feat li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: 0.01em;
}
.pm-feat svg { color: var(--accent); flex-shrink: 0; }
.pm-spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
}
.pm-spec-item {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-spec-item:last-child { border-right: none; }
.pm-spec-item span {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
}
.pm-spec-item strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.04em;
}
.pm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 32px;
  border-top: 1px solid color-mix(in oklab, var(--accent) 20%, var(--border));
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  flex-wrap: wrap;
}
.pm-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pm-amt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
body.mono-all .pm-amt { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; }
.pm-cur {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
}
.pm-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================
   PRODUCT MODAL — GALLERY + DETAIL GRID
   ============================================ */
.pm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.pm-gallery {
  border-right: 1px solid color-mix(in oklab, var(--accent) 14%, var(--border));
  background: color-mix(in oklab, var(--bg) 30%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pm-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.pm-stage image-slot {
  position: absolute;
  inset: 0;
}
.pm-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, color-mix(in oklab, var(--bg) 60%, transparent));
  pointer-events: none;
}
.pm-stage-meta {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text);
}
.pm-stage-meta span span { color: var(--text-mute); }
.pm-stage-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.18s, box-shadow 0.18s;
}
.pm-stage-arrow.left  { left: 14px; }
.pm-stage-arrow.right { right: 14px; }
.pm-stage-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 24px -4px var(--accent);
  transform: translateY(-50%) scale(1.05);
}

.pm-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
}
.pm-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  background: var(--bg-2);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.15s, transform 0.15s;
}
.pm-thumb:last-child { border-right: none; }
.pm-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.pm-thumb:hover { opacity: 0.9; }
.pm-thumb.active {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 24px -4px color-mix(in oklab, var(--accent) 50%, transparent);
}
.pm-thumb.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.pm-thumb-n {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 2px 5px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.pm-thumb.active .pm-thumb-n {
  color: var(--accent);
  border-color: var(--accent);
}

.pm-detail {
  padding: 28px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.pm-section { min-width: 0; }

/* Locked: headline + tier picker hold their natural height. */
.pm-headline { flex: 0 0 auto; }
/* margin-top: auto pushes the tier picker against the bottom of the detail
   column whenever the gallery side is taller than the detail content — so
   the price/tier card always sits flush above the footer. */
.pm-section--tiers { flex: 0 0 auto; margin-top: auto; }

/* The FEATURES section grows to fill all space between the headline and
   the tier picker, so the scrollable list reaches all the way down to
   the LICENSE strip — no wasted whitespace. align-content: start packs
   short lists at the top of that area so they don't visually spread. */
.pm-section--features {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pm-section--features .pm-feat {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--accent) 55%, transparent) transparent;
}
.pm-section--features .pm-feat::-webkit-scrollbar { width: 6px; }
.pm-section--features .pm-feat::-webkit-scrollbar-track { background: transparent; }
.pm-section--features .pm-feat::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--accent) 45%, transparent);
  border-radius: 3px;
}
.pm-section--features .pm-feat::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Tier picker */
.pm-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pm-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px 12px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.15s, box-shadow 0.18s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.pm-tier:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.pm-tier.active {
  background: color-mix(in oklab, var(--accent) 14%, var(--bg));
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px color-mix(in oklab, var(--accent) 60%, transparent);
}
.pm-tier-l {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
}
.pm-tier.active .pm-tier-l { color: var(--accent); }
.pm-tier-p {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--text);
}
.pm-tier-p small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  margin-left: 2px;
}
body.mono-all .pm-tier-p { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; }
.pm-tier-sub {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}
.pm-tier-rec {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 3px 7px;
  background: var(--accent);
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* Foot price suffix */
.pm-amt + .pm-cur { white-space: nowrap; }

@media (max-width: 880px) {
  .pm-grid { grid-template-columns: 1fr; }
  .pm-gallery { border-right: none; border-bottom: 1px solid var(--border); }
  .pm-detail { padding: 24px 22px; gap: 20px; }
  .pm-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pm-scrim { padding: 20px 12px; }
  .pm-detail { padding: 20px; }
  .pm-strip { padding-right: 56px; }
  .pm-foot { padding: 16px 20px; flex-direction: column; align-items: stretch; }
  .pm-actions { flex-direction: column; }
  .pm-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-side { flex-direction: row; gap: 12px; }
  .hero-stat { flex: 1; }
  .sl-grid { grid-template-columns: 1fr; }
  .sl-right { border-left: none; border-top: 1px solid var(--border); min-height: 240px; }
  .grid { --grid-cols: 2; }
  .card.expanded .card-main { grid-template-columns: 1fr; }
  .card.expanded .card-media { border-right: none; border-bottom: 1px solid var(--border); aspect-ratio: 16 / 9; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav { padding: 12px 20px; gap: 12px; grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
  .hero { padding: 64px 24px 48px; }
  .hero-side { flex-direction: column; }
  .sec-head, .spotlight, .filters, .grid, .faq, .faq-list, .foot { margin-left: 0; margin-right: 0; padding-left: 20px; padding-right: 20px; }
  .filters { margin: 0 20px 20px; }
  .spotlight { margin: 24px 20px 0; }
  .grid { --grid-cols: 1 !important; padding: 0 20px 48px; }
  .sl-left { padding: 24px; }
  .card-expand, .card-expand .ce-grid { grid-template-columns: 1fr; }
  .card-expand .ce-grid .ce-section + .ce-section { border-left: none; border-top: 1px solid var(--border); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-bottom { flex-direction: column; gap: 6px; }
}


/* ============================================
   ADMIN / EDIT MODE
   ============================================ */

/* ---- Admin top bar ---- */
.adm-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px;
  background: linear-gradient(180deg, rgba(8,10,16,0.97), rgba(8,10,16,0.88));
  border-bottom: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
}
body:has(.adm-bar) { padding-top: 38px; }
.adm-bar-l { display: flex; align-items: center; gap: 10px; color: var(--text-dim); }
.adm-bar-tag { color: var(--accent); font-weight: 600; }
.adm-bar-state { color: var(--text); }
.adm-bar-r { display: flex; align-items: center; gap: 8px; }
.adm-bar-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 6px 12px;
  font-family: inherit; font-size: 10px; letter-spacing: 0.16em;
  cursor: pointer; transition: all .15s;
}
.adm-bar-btn:hover { border-color: var(--accent); color: var(--accent); }
.adm-bar-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ---- Edit-mode body indicator ---- */
body.edit-mode .nav { top: 38px; }
body.edit-mode { outline: 1px dashed transparent; }

/* ---- Editable text inline ---- */
.editable {
  outline: none;
  border-radius: 2px;
  position: relative;
  transition: outline 0.12s, box-shadow .12s;
  cursor: text;
}
.editable:empty::before {
  content: attr(data-placeholder);
  color: var(--text-mute);
  font-style: italic;
}
body.edit-mode .editable {
  outline: 1px dashed rgba(0, 255, 209, 0.35);
  outline-offset: 2px;
}
body.edit-mode .editable:hover {
  outline-color: var(--accent);
  outline-style: solid;
}
body.edit-mode .editable:focus {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0,255,209,0.10);
}

/* ---- Editable URL pill (footer-style) ---- */
.editable-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px dashed rgba(0,255,209,0.35);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 8px;
  border-radius: 2px;
  cursor: pointer;
  transition: all .15s;
}
.editable-link:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,255,209,0.06); }

/* ---- Popover modal (for link / status edits) ---- */
.adm-pop-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  z-index: 2000;
  display: grid; place-items: center;
  padding: 24px;
}
.adm-pop {
  width: min(420px, 100%);
  background: rgba(14,16,22,0.95);
  border: 1px solid var(--border-strong);
  padding: 22px;
  position: relative;
}
.adm-pop-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 16px;
}
.adm-pop-f { display: block; margin-bottom: 12px; }
.adm-pop-f > span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em;
  color: var(--text-mute); margin-bottom: 4px;
}
.adm-pop-f input,
.adm-pop-f textarea,
.adm-pop-f select {
  width: 100%; box-sizing: border-box;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  padding: 9px 11px;
  outline: none;
}
.adm-pop-f input:focus,
.adm-pop-f textarea:focus,
.adm-pop-f select:focus { border-color: var(--accent); }
.adm-pop-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ---- "+ Add" tile ---- */
.adm-add {
  background: rgba(0,255,209,0.04);
  border: 1.5px dashed rgba(0,255,209,0.35);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; font-weight: 600;
  padding: 14px 18px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; transition: all .15s;
}
.adm-add:hover {
  background: rgba(0,255,209,0.10);
  border-color: var(--accent);
  border-style: solid;
}
/* Tile variant — fills product card slot */
.adm-add.tile {
  width: 100%;
  min-height: 280px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
}
.adm-add.tile svg { width: 32px; height: 32px; }

/* ---- Item hover overlay ---- */
.adm-ctl {
  position: absolute;
  top: 6px; right: 6px;
  display: none;
  gap: 4px;
  z-index: 5;
}
body.edit-mode .grid-item:hover .adm-ctl,
body.edit-mode .faq-item:hover .adm-ctl,
body.edit-mode .st-event:hover .adm-ctl,
body.edit-mode .pm-feat-item:hover .adm-ctl,
body.edit-mode .foot-grid li:hover .adm-ctl,
body.edit-mode .foot-grid .foot-col:hover .adm-ctl,
body.edit-mode .adm-ctl.always { display: flex; }
.adm-ctl-b {
  background: rgba(8,10,16,0.95);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  padding: 0;
  font-family: inherit; font-size: 12px;
  cursor: pointer; transition: all .15s;
}
.adm-ctl-b:hover { color: var(--accent); border-color: var(--accent); }
.adm-ctl-b.danger:hover { color: var(--danger); border-color: var(--danger); }
.faq-item, .st-event, .grid-item { position: relative; }

/* ---- Inline "edit features" list in modal ---- */
body.edit-mode .pm-feat li { position: relative; padding-right: 36px; }

/* ---- Status picker pill ---- */
.adm-statpick { position: relative; display: inline-block; }
.adm-statpick-cur {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.adm-statpick-cur:hover { border-color: var(--accent); }
.adm-statpick-cur .dot { width: 7px; height: 7px; border-radius: 50%; }
.adm-statpick-cur.online .dot   { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.adm-statpick-cur.offline .dot  { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.adm-statpick-cur.updating .dot { background: var(--warn);   box-shadow: 0 0 8px var(--warn); }
.adm-statpick-cur.online   { color: var(--accent); }
.adm-statpick-cur.offline  { color: var(--danger); }
.adm-statpick-cur.updating { color: var(--warn); }
.adm-statpick-chev { color: var(--text-mute); font-size: 9px; margin-left: 2px; }
.adm-statpick-menu {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  background: rgba(14,16,22,0.98);
  border: 1px solid var(--border-strong);
  z-index: 100;
  min-width: 140px;
  padding: 4px;
}
.adm-statpick-opt {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 7px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.16em; font-weight: 600;
  text-align: left; cursor: pointer; transition: background .15s;
}
.adm-statpick-opt:hover { background: rgba(255,255,255,0.06); }
.adm-statpick-opt.active { background: rgba(0,255,209,0.10); }
.adm-statpick-opt .dot { width: 7px; height: 7px; border-radius: 50%; }
.adm-statpick-opt.online .dot   { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.adm-statpick-opt.offline .dot  { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.adm-statpick-opt.updating .dot { background: var(--warn);   box-shadow: 0 0 6px var(--warn); }

/* ---- View-all events modal (status page) ---- */
.events-all-scrim {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 32px;
}
.events-all {
  width: min(820px, 100%);
  max-height: 80vh;
  background: rgba(14,16,22,0.96);
  border: 1px solid var(--border-strong);
  position: relative;
  display: flex; flex-direction: column;
}
.events-all-head {
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border);
}
.events-all-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 6px;
}
.events-all-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0;
}
.events-all-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-top: 4px;
}
.events-all-body {
  padding: 16px 28px 22px;
  overflow-y: auto;
  flex: 1;
}
.events-all-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  display: grid; place-items: center;
  cursor: pointer; transition: all .15s;
}
.events-all-close:hover { border-color: var(--danger); color: var(--danger); }

.events-view-all-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 20px auto 0;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  padding: 10px 22px;
  cursor: pointer; transition: all .15s;
}
.events-view-all-btn:hover { border-color: var(--accent); color: var(--accent); }
.events-view-all-wrap { display: flex; justify-content: center; }

/* ---- Hide tweaks panel when admin-editing to reduce noise ---- */
body.edit-mode .tweaks-toggle,
body.edit-mode .tweaks-panel { display: none !important; }

/* ---- Discord auth (nav button + account modal) ---- */
.nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.12s;
}
.nav-auth:hover { border-color: var(--accent); color: var(--accent); }
.nav-auth-login { padding: 8px 12px; }
.nav-auth-user { padding: 4px 10px 4px 4px; }
.nav-auth-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.nav-auth-avatar-fallback {
  border: 1px solid var(--border-strong);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}
.nav-auth-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-modal .acct-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 18px;
}
.account-modal .acct-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
}
.account-modal .acct-name { font-size: 16px; font-weight: 600; }
.account-modal .acct-handle { color: var(--text-dim); font-size: 12px; }

.account-modal .acct-section { margin-top: 14px; }
.account-modal .acct-section-tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.account-modal .acct-empty {
  border: 1px dashed var(--border-strong);
  padding: 22px 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.account-modal .acct-empty-art { font-size: 18px; margin-bottom: 6px; }
.account-modal .acct-empty-sub { font-size: 10px; margin-top: 4px; opacity: 0.7; }

/* ---- Account: tabs (admin sees both, regular users only see "MY ORDERS") ---- */
.acct-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 14px;
  border-bottom: 1px solid var(--border-strong);
}
.acct-tab {
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  cursor: pointer;
  margin-bottom: -1px;
}
.acct-tab:hover { color: var(--text); }
.acct-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.acct-loading {
  text-align: center;
  padding: 18px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ---- Account: order list ---- */
.acct-orders {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.acct-order {
  border: 1px solid var(--border-strong);
  padding: 10px;
  background: rgba(255,255,255,0.015);
}
.acct-order-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.acct-order-id { color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-order-total { font-weight: 600; }

.acct-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid currentColor;
  letter-spacing: 0.14em;
}
.acct-status-pending  { color: var(--warn,   #c8a83a); }
.acct-status-paid     { color: var(--accent, #58e09a); }
.acct-status-refunded { color: var(--text-dim); }
.acct-status-revoked  { color: var(--danger, #d24a4a); }

.acct-order-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acct-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.2);
  font-size: 12px;
}
.aoi-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aoi-tier { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; }
.aoi-pending { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; font-style: italic; }
.aoi-reveal { font-size: 10px; padding: 4px 8px; }
.aoi-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  user-select: all;
}
.aoi-key.copied::after { content: '  ✓'; }
.aoi-key.delivered { border-color: var(--border-strong); color: var(--text); cursor: text; }

.aoi-admin-set { display: flex; gap: 6px; }
.aoi-admin-set input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 220px;
}
.aoi-admin-set input:focus { outline: none; border-color: var(--accent); }
.aoi-admin-set button { font-size: 10px; padding: 4px 10px; }
.aoi-admin-set button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Payment return banner (Stripe redirect) ---- */
.pay-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  max-width: 90vw;
}
.pay-banner-ok     { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 18px rgba(88,224,154,0.25); }
.pay-banner-cancel { border-color: var(--text-dim); color: var(--text); }
.pay-banner-x { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 6px; }

/* ============================================================
   ACCOUNT + ADMIN PAGES (account.html / admin.html)
   Class prefix: .ap-* (account page) / .adm-* (admin extras)
   Matches storefront aesthetic: corner cuts, dot pulse, sec-head
   rhythm, neon accents, mono numerics.
   ============================================================ */

.ap-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.ap-main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 48px 80px;
  flex: 1;
}
@media (max-width: 700px) {
  .ap-main { padding: 24px 16px 64px; }
}

/* ---------- NAV ---------- */
.ap-nav {
  border-bottom: 1px solid var(--border);
}
.ap-nav-links a,
.ap-nav-links .ap-nav-current {
  position: relative;
  padding: 4px 2px;
}
.ap-nav-links .ap-nav-current {
  color: var(--accent);
}
.ap-nav-links .ap-nav-current::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.ap-nav-admin { color: var(--accent); font-weight: 600; }
.ap-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.12s;
}
.ap-logout:hover { border-color: var(--danger, #d24a4a); color: var(--danger, #d24a4a); }

/* ---------- HERO STRIP (spotlight-style) ---------- */
.ap-hero {
  position: relative;
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(120% 80% at 10% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 60%),
    var(--surface, rgba(255,255,255,0.02));
  padding: 0;
  margin-bottom: 36px;
}
.ap-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}
.ap-hero-body {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 28px;
  padding: 26px 32px 28px;
  align-items: center;
}
@media (max-width: 800px) {
  .ap-hero-body { grid-template-columns: 1fr; padding: 22px; }
}

.ap-hero-id {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.ap-hero-avatar-frame {
  position: relative;
  width: 88px;
  height: 88px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ap-hero-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ap-hero-avatar--placeholder {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  color: var(--text-dim);
}

.ap-hero-text { min-width: 0; }
.ap-hero-name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ap-hero-handle {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ap-admin-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--accent);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.ap-hero-meta {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute, var(--text-dim));
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.ap-hero-stats {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.ap-stat {
  padding: 8px 24px;
  border-left: 1px solid var(--border);
  text-align: right;
  min-width: 120px;
}
.ap-stat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 800px) {
  .ap-hero-stats { flex-wrap: wrap; gap: 16px 0; }
  .ap-stat { padding: 4px 16px; min-width: 100px; text-align: left; }
  .ap-stat:first-child { padding-left: 0; }
}
.ap-stat-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.ap-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 500;
  margin-top: 4px;
  line-height: 1;
}
.ap-stat--accent .ap-stat-value {
  color: var(--warn, #c8a83a);
  text-shadow: 0 0 12px color-mix(in oklab, var(--warn, #c8a83a) 50%, transparent);
}

/* ---------- SECTION HEADER (matches .sec-head on catalog) ---------- */
.ap-sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 32px 0 18px;
}
.ap-sec-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.ap-sec-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ap-sec-count {
  color: var(--text-mute, var(--text-dim));
  font-weight: 400;
  font-size: 16px;
  margin-left: 4px;
}
.ap-sec-side {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.ap-sec-link { color: var(--text-dim); }
.ap-sec-link:hover { color: var(--accent); }
.ap-icon-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 16px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}
.ap-icon-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- ORDER CARDS (used on both pages) ---------- */
.ap-orders {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ap-order {
  position: relative;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 30%),
    var(--surface, rgba(255,255,255,0.02));
  padding: 0;
}
.ap-order--paid    { border-color: color-mix(in oklab, var(--accent) 28%, var(--border-strong)); }
.ap-order--pending { border-color: color-mix(in oklab, var(--warn, #c8a83a) 22%, var(--border-strong)); }

.ap-order-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
@media (max-width: 600px) {
  .ap-order-head { grid-template-columns: auto auto; gap: 8px 12px; }
}

.ap-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.ap-status .dot { width: 6px; height: 6px; background: currentColor; box-shadow: 0 0 6px currentColor; }
.ap-status--paid     { color: var(--accent); }
.ap-status--pending  { color: var(--warn, #c8a83a); }
.ap-status--refunded { color: var(--text-dim); }
.ap-status--revoked  { color: var(--danger, #d24a4a); }

.ap-order-id    { color: var(--text-dim); }
.ap-order-date  { color: var(--text-dim); }
.ap-order-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.ap-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ap-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px dashed color-mix(in oklab, var(--border) 60%, transparent);
}
.ap-item:last-child { border-bottom: 0; }
.ap-item-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.ap-item-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.14em;
}
.ap-item-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ap-item-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.ap-item-await {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ap-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.12s;
}
.ap-reveal:hover {
  background: color-mix(in oklab, var(--accent) 15%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 35%, transparent);
}
.ap-reveal-arrow { font-size: 12px; }

/* When the action cell holds both REVEAL KEY + DOWNLOAD LOADER they sit
   side by side; wraps on narrow widths. */
.ap-item-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ap-loader-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.12s;
}
.ap-loader-btn:hover {
  color: var(--text);
  border-color: var(--text);
  background: color-mix(in oklab, var(--text) 8%, transparent);
}
.ap-loader-arrow { font-size: 12px; }

.ap-key {
  display: inline-block;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: all;
  position: relative;
  text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.ap-key--delivered {
  border-color: var(--border-strong);
  color: var(--text);
  text-shadow: none;
  cursor: text;
}
.ap-key--copied {
  background: color-mix(in oklab, var(--accent) 25%, var(--bg));
}
.ap-key--copied::after {
  content: 'COPIED';
  position: absolute;
  top: -10px;
  right: -8px;
  background: var(--accent);
  color: var(--bg);
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ---------- BANNER (post-Stripe redirect) ---------- */
.ap-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.ap-banner--ok     { color: var(--accent); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, transparent); }
.ap-banner--cancel { color: var(--text-dim); border-color: var(--border-strong); }
.ap-banner-text { flex: 1; }
.ap-banner-x {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

/* ---------- EMPTY / LOCKED / LOADING STATES ---------- */
.ap-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}
.ap-empty,
.ap-locked {
  position: relative;
  border: 1px dashed var(--border-strong);
  padding: 56px 28px;
  text-align: center;
  background: rgba(0,0,0,0.15);
}
.ap-empty-art,
.ap-locked-art {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.ap-empty-line,
.ap-locked-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--text);
}
.ap-empty-sub,
.ap-locked-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.ap-empty-cta,
.ap-locked .btn {
  margin-top: 22px;
  display: inline-flex;
}

/* ============================================================
   ADMIN-SPECIFIC
   ============================================================ */

/* Toolbar */
.adm-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface, rgba(255,255,255,0.02));
  margin-bottom: 20px;
}
.adm-search-wrap {
  flex: 1 1 280px;
  position: relative;
  display: flex;
  align-items: center;
}
.adm-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}
.adm-search {
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px 8px 30px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.adm-search::placeholder { color: var(--text-mute, var(--text-dim)); opacity: 0.7; }
.adm-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent);
}
.adm-filter {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
}
.adm-filter-label {
  padding: 8px 10px;
  background: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  border-right: 1px solid var(--border);
}
.adm-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 28px 8px 10px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.adm-select:focus { outline: none; color: var(--accent); }

.adm-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
}
.adm-view-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.12s;
}
.adm-view-btn:hover { color: var(--text); }
.adm-view-btn.on {
  color: var(--bg);
  background: var(--accent);
  text-shadow: none;
}

/* ============================================
   STATE PILL (online / updating / offline) — shared with status.css
   so it also renders on admin.html, which doesn't load status.css.
   ============================================ */
.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  position: relative;
}
.st-pill.online   { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.st-pill.updating { color: var(--warn);   background: color-mix(in oklab, var(--warn)   12%, transparent); }
.st-pill.offline  { color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, transparent); }
.st-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* ============================================
   ADMIN — sub-nav (ORDERS / WEBSITE) + per-product state editor
   ============================================ */
.adm-subnav {
  display: inline-flex;
  border: 1px solid var(--border);
  margin: 0 0 14px;
}
.adm-subnav-btn {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.12s;
}
.adm-subnav-btn:hover { color: var(--text); }
.adm-subnav-btn.on {
  color: var(--bg);
  background: var(--accent);
}
.adm-subnav-role {
  margin-left: 10px;
  align-self: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--warn);
  border: 1px solid currentColor;
  padding: 4px 8px;
}

.adm-toolbar-hint {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  align-self: center;
  text-align: right;
}

.adm-states {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-state-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr auto 1.4fr 110px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
}
.adm-state-row--offline  { border-color: color-mix(in oklab, var(--danger) 35%, var(--border)); }
.adm-state-row--updating { border-color: color-mix(in oklab, var(--warn) 35%, var(--border)); }

.adm-state-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.adm-state-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-state-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
}
.adm-state-prod {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-state-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.adm-state-note-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 7px 10px;
}
.adm-state-note-input:focus {
  outline: none;
  border-color: var(--accent);
}
.adm-state-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-align: right;
}
.adm-state-saving { color: var(--warn); }
.adm-state-ok     { color: var(--accent); }
.adm-state-err    { color: var(--danger); }

@media (max-width: 880px) {
  .adm-state-row {
    grid-template-columns: 60px 1fr;
    grid-auto-flow: row;
  }
  .adm-state-pick,
  .adm-state-note,
  .adm-state-meta { grid-column: 1 / -1; }
}

/* ============================================
   ADMIN — CATALOG tab (product CRUD)
   ============================================ */
.adm-cat-back {
  display: inline-flex;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  cursor: pointer;
  margin: 0 0 10px;
  padding: 6px 0;
}
.adm-cat-back:hover { color: var(--accent); }

.adm-cat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-cat-row {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto auto 80px;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.adm-cat-row:hover {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--border));
}
.adm-cat-thumb {
  width: 72px; height: 50px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
}
.adm-cat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-cat-thumb--ph {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--text-mute);
}
.adm-cat-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.adm-cat-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.adm-cat-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-cat-pin {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--warn);
  border: 1px solid currentColor;
  padding: 1px 6px;
}
.adm-cat-blurb {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-cat-prices {
  display: flex; flex-direction: column;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  text-align: right;
}
.adm-cat-prices .big { color: var(--accent); font-size: 13px; }
.adm-cat-edit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.adm-cat-row:hover .adm-cat-edit { color: var(--accent); }

.adm-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.adm-cat-card {
  position: relative;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
  padding: 0;
  display: flex; flex-direction: column;
}
.adm-cat-card--wide { grid-column: 1 / -1; }
.adm-cat-card-h {
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.adm-cat-h-sub {
  color: var(--text-mute);
  letter-spacing: 0.1em;
  font-weight: 400;
}
.adm-cat-h-btn {
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-left: 8px;
}
.adm-cat-card-body {
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
}
.adm-cat-field {
  display: flex; flex-direction: column;
  gap: 4px;
}
.adm-cat-field-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
}
.adm-cat-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 8px 10px;
  resize: vertical;
}
.adm-cat-input:focus { outline: none; border-color: var(--accent); }
.adm-cat-select { appearance: auto; }
.adm-cat-toggle-field { flex-direction: row; align-items: center; justify-content: space-between; }
.adm-cat-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.adm-cat-delete { color: var(--danger); }

.adm-feat-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.adm-feat-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto;
  gap: 6px;
  align-items: center;
}
.adm-feat-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
}
.adm-feat-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 6px 8px;
  cursor: pointer;
  min-width: 30px;
}
.adm-feat-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.adm-feat-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.adm-feat-btn.danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.adm-feat-add { align-self: flex-start; margin-top: 6px; }

.adm-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.adm-img-empty {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-mute);
  padding: 30px 14px;
  text-align: center;
  border: 1px dashed var(--border);
}
.adm-img-tile {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.adm-img-tile.cover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
.adm-img-tile img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: #000;
}
.adm-img-tile-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 8px;
  background: color-mix(in oklab, var(--bg) 85%, var(--text) 15%);
}
.adm-img-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
  flex: 1;
}
.adm-img-tile.cover .adm-img-idx { color: var(--accent); }

@media (max-width: 880px) {
  .adm-cat-grid { grid-template-columns: 1fr; }
  .adm-cat-row {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
  }
  .adm-cat-state, .adm-cat-prices, .adm-cat-edit {
    grid-column: 2;
    flex-direction: row;
    text-align: left;
  }
}

/* ============================================
   Inline operational-state picker
   - small pill on each catalog row
   - same widget reused at .adm-cat-state--lg size inside the editor STATUS card
   ============================================ */
.adm-cat-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border: 1px solid currentColor;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  background: color-mix(in oklab, currentColor 10%, transparent);
  cursor: pointer;
  min-width: 110px;
}
.adm-cat-state.busy { opacity: 0.6; }
.adm-cat-state--online   { color: var(--accent); }
.adm-cat-state--updating { color: var(--warn);   }
.adm-cat-state--offline  { color: var(--danger); }
.adm-cat-state-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}
.adm-cat-state--online   .adm-cat-state-dot { animation: pulse-soft 1.6s infinite; }
.adm-cat-state--updating .adm-cat-state-dot { animation: blink-fast 0.6s steps(2) infinite; }
.adm-cat-state--offline  .adm-cat-state-dot { animation: blink-fast 0.4s steps(2) infinite; }
.adm-cat-state-select {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 14px 0 0;
  color: currentColor;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 7px) 50%, calc(100% - 3px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.adm-cat-state-select:focus { outline: none; }
.adm-cat-state-select option { color: var(--text); background: var(--bg); }

.adm-cat-state--lg {
  padding: 8px 14px 8px 12px;
  font-size: 11px;
  min-width: 160px;
}

/* When the STATUS card is laid out in row mode (used in the draft editor
   where state and note live side by side) */
.adm-cat-card-body--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

/* LOADER card: row underneath the URL field with "TEST LINK" + CLEAR. Only
   shows when a URL is already saved. */
.adm-cat-loader-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.adm-cat-loader-test {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 4px 8px;
}
.adm-cat-loader-test:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Mirror the status-page pill animations so the state pill pulses in the
   admin panel too (status.css isn't loaded on admin.html). */
@keyframes pulse-soft {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
@keyframes blink-fast {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ============================================
   ADMIN — Draft editor (NEW PRODUCT) + shared with old modal styles
   The "+ NEW PRODUCT" button drops the user into ProductDraftEditor, which
   re-uses .adm-cat-grid / .adm-cat-card chrome from the live editor. Only
   the draft-specific bits live here.
   ============================================ */
.adm-cat-req {
  font-weight: 400;
  font-size: 9px;
  color: var(--text-mute);
  margin-left: 4px;
}

.adm-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}


.adm-new-modal {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, var(--text) 8%);
}
.adm-new-modal .adm-pop-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.adm-new-x {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}
.adm-new-x:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }

.adm-new-section {
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.adm-new-section:last-of-type { border-bottom: none; }

.adm-new-label {
  display: flex; gap: 8px; align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.adm-new-label > span:first-child { color: var(--accent); }
.adm-new-hint { letter-spacing: 0.08em; color: var(--text-mute); font-weight: 400; }

.adm-new-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 9px 11px;
}
.adm-new-input:focus { outline: none; border-color: var(--accent); }
.adm-new-textarea { resize: vertical; }
.adm-new-input--small { width: auto; flex: 1; padding: 6px 8px; }

.adm-new-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.adm-new-cat-wrap {
  position: relative;
  display: block;
}
.adm-new-cat-wrap .adm-new-cat { width: 100%; }
.adm-new-cat {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  padding: 14px 0;
  cursor: pointer;
  transition: all 0.12s;
}
.adm-new-cat:hover { color: var(--text); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); }
.adm-new-cat.on {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

/* "+ NEW" chip: dashed border + accent text to distinguish from categories */
.adm-new-cat--add {
  border-style: dashed;
  color: var(--accent-2);
  letter-spacing: 0.18em;
}
.adm-new-cat--add:hover {
  color: var(--accent);
  border-color: var(--accent);
  border-style: dashed;
}

/* "✎" edit affordance hung in the top-right of each category chip */
.adm-new-cat-edit {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-mute);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.adm-new-cat-wrap:hover .adm-new-cat-edit { opacity: 1; }
.adm-new-cat-edit:hover { color: var(--accent); }
.adm-new-cat-wrap .adm-new-cat.on + .adm-new-cat-edit { color: var(--bg); opacity: 1; }

/* Inline create form that expands under the chip row */
.adm-cat-create {
  position: relative;
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed color-mix(in oklab, var(--accent-2) 50%, var(--border));
  background: color-mix(in oklab, var(--accent-2) 6%, var(--bg));
}
.adm-cat-create-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.adm-cat-create-field { display: flex; flex-direction: column; gap: 4px; }
.adm-cat-create-actions { display: flex; gap: 8px; }
.adm-cat-create-hint {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}
.adm-cat-create-err {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #ff6b6b;
}

/* Manage-category modal */
.adm-cat-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
}
.adm-cat-modal {
  position: relative;
  width: min(520px, 100%);
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.adm-cat-modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--accent-2);
}
.adm-cat-modal-x {
  background: transparent; border: 0;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
}
.adm-cat-modal-x:hover { color: var(--accent); }
.adm-cat-modal-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.adm-cat-modal-id {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.adm-cat-modal-row {
  display: flex; gap: 8px; align-items: center;
}
.adm-cat-modal-row > .adm-cat-input { flex: 1; }
.adm-cat-modal-thumb {
  width: 72px; height: 48px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.adm-cat-modal-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-cat-modal-thumb-ph {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.adm-cat-modal-ok {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent-2);
}
.adm-cat-modal-foot {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.adm-new-id {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.adm-new-id > span:first-child { color: var(--accent-2); }
.adm-new-id-reset {
  background: transparent; border: 0;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  cursor: pointer;
  text-decoration: underline;
}

.adm-new-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.adm-new-price {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  padding: 4px 8px;
  background: var(--bg);
}
.adm-new-price > span:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
}
.adm-new-price-dollar { color: var(--accent); }
.adm-new-price .adm-new-input {
  border: 0;
  padding: 6px 0;
  background: transparent;
}

.adm-new-feat-preview {
  margin-top: 10px;
  border: 1px dashed var(--border);
  padding: 10px 12px;
  background: color-mix(in oklab, var(--bg) 96%, var(--accent) 4%);
}
.adm-new-feat-h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 6px;
}
.adm-new-feat-preview ul { list-style: none; margin: 0; padding: 0; }
.adm-new-feat-preview li {
  font-size: 12px; color: var(--text);
  padding: 3px 0;
  display: grid; grid-template-columns: 32px 1fr; gap: 6px;
}
.adm-new-feat-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
}

.adm-new-drop {
  border: 1px dashed var(--border);
  padding: 22px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.adm-new-drop:hover, .adm-new-drop.over {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.adm-new-img-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.adm-new-img-tile {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}
.adm-new-img-tile.cover { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); }
.adm-new-img-tile img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
}
.adm-new-img-x {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  width: 22px; height: 22px;
  cursor: pointer;
}
.adm-new-img-x:hover { color: var(--danger); border-color: var(--danger); }
.adm-new-img-flag {
  position: absolute; bottom: 4px; left: 4px;
  background: var(--accent);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 2px 6px;
}

.adm-new-error {
  margin: 0 18px 14px;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.adm-new-modal .adm-pop-acts {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}

@media (max-width: 720px) {
  .adm-new-cats   { grid-template-columns: repeat(3, 1fr); }
  .adm-new-prices { grid-template-columns: 1fr; }
  .adm-cat-create-row { grid-template-columns: 1fr; }
  .adm-cat-create-actions { justify-content: flex-end; }
}

/* Customer cards */
.adm-customers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-customer {
  position: relative;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 40%),
    var(--surface, rgba(255,255,255,0.02));
  transition: border-color 0.12s;
}
.adm-customer:hover  { border-color: color-mix(in oklab, var(--accent) 18%, var(--border-strong)); }
.adm-customer--open  { border-color: var(--accent); }

.adm-customer-head {
  display: grid;
  grid-template-columns: auto minmax(170px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 800px) {
  .adm-customer-head { grid-template-columns: auto 1fr auto; }
  .adm-customer-stats { grid-column: 1 / -1; padding-top: 6px; }
}
.adm-customer-head:hover { background: rgba(255,255,255,0.025); }

.adm-customer-avatar-frame {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  flex-shrink: 0;
}
.adm-customer-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adm-customer-avatar--ph {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--text-dim);
}

.adm-customer-id { min-width: 0; }
.adm-customer-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-customer-handle {
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.adm-customer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
.adm-pair { display: inline-flex; flex-direction: column; line-height: 1.2; }
.adm-pair-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}
.adm-pair-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
}
.adm-customer-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--warn, #c8a83a);
  color: var(--warn, #c8a83a);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.adm-customer-flag .dot {
  width: 6px; height: 6px;
  background: var(--warn, #c8a83a);
  box-shadow: 0 0 8px var(--warn, #c8a83a);
}

.adm-chev {
  color: var(--text-dim);
  font-size: 18px;
  transition: transform 0.12s, color 0.12s;
}
.adm-chev--open {
  color: var(--accent);
  transform: rotate(180deg);
}

.adm-customer-body {
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px dashed color-mix(in oklab, var(--accent) 25%, var(--border));
}
.adm-customer-body > * { margin-top: 14px; }

.adm-order-customer {
  color: var(--text);
  font-weight: 600;
}

/* Admin order card lives inside customer body — slightly tighter */
.adm-order-card { background: var(--bg); }

/* Key editor controls */
.adm-key-row { display: inline-flex; align-items: center; gap: 8px; }

.adm-key-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.adm-key-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  width: 260px;
  text-shadow: 0 0 6px color-mix(in oklab, var(--accent) 40%, transparent);
}
.adm-key-input:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in oklab, var(--accent) 50%, transparent);
}

.adm-mini-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.12s;
}
.adm-mini-btn:hover { color: var(--text); border-color: var(--text); }
.adm-mini-btn--primary { border-color: var(--accent); color: var(--accent); }
.adm-mini-btn--primary:hover {
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 40%, transparent);
}
.adm-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.adm-mini-btn:disabled:hover { color: var(--text-dim); border-color: var(--border-strong); background: transparent; box-shadow: none; }

.adm-set-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 7px 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.adm-set-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.adm-set-btn--warn { color: var(--warn, #c8a83a); border-color: color-mix(in oklab, var(--warn, #c8a83a) 50%, var(--border-strong)); }
.adm-set-btn--warn:hover { border-color: var(--warn, #c8a83a); background: color-mix(in oklab, var(--warn, #c8a83a) 10%, transparent); }