:root {
  --bg: #09090f;
  --panel: #0e0e18;
  --sidebar-bg: #0b0b14;
  --border: #1e1e2e;
  --text: #bbbbd0;
  --muted: #4a4a65;
  --accent: #ff3344;
  --screen-bg: #05050d;
  --cat-color: #555566;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Arial', sans-serif;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Header ── */
.header {
  background: var(--panel);
  border-bottom: 2px solid #181828;
  padding: 0 1.25rem;
  height: 3.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.header-icon { font-size: 1.25rem; }

.header-title {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.1em;
}

.header-sub {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

.saved-count {
  font-size: 0.65rem;
  color: var(--muted);
  background: #141420;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.home-btn {
  margin-left: 0.5rem;
  text-decoration: none;
  font-size: 1.1rem;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.home-btn:hover { opacity: 1; }

/* ── Layout ── */
.main-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Sidebar ── */
.sidebar {
  width: 188px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-label {
  padding: 0.55rem 0.9rem;
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.category-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.35rem 0;
}

.loading-cats {
  padding: 1rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.cat-btn {
  width: 100%;
  padding: 0.52rem 0.85rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: background 0.12s, border-color 0.12s;
}

.cat-btn:hover { background: rgba(255,255,255,0.03); }

.cat-btn.active {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--cat-color);
  color: #fff;
}

.cat-emoji { font-size: 0.95rem; flex-shrink: 0; }

/* ── Content ── */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.65rem;
  gap: 0.55rem;
  min-width: 0;
  min-height: 0;
}

/* ── TV Screen ── */
.tv-screen {
  flex: 1;
  background: var(--screen-bg);
  border: 2px solid #141424;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,0.6) inset;
}

/* CRT scanlines */
.tv-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 5;
}

/* Status bar */
.tv-status-bar {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-bottom: 1px solid #111122;
  font-size: 0.62rem;
  font-family: monospace;
  color: var(--muted);
  background: rgba(0,0,0,0.35);
  flex-shrink: 0;
  gap: 0.5rem;
}

.tv-status-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
}

.on-air-dot {
  font-size: 0.65rem;
  color: var(--muted);
  transition: color 0.3s;
}
.on-air-dot.live {
  color: #ff3344;
  animation: blink 0.9s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.on-air-label { font-size: 0.6rem; letter-spacing: 0.08em; }
.tv-channel { font-size: 0.6rem; opacity: 0.5; }
.tv-clock { font-size: 0.6rem; font-family: monospace; }

/* TV content panel */
.tv-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 0;
}

/* ── Empty state ── */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--muted);
}

.empty-icon { font-size: 2.5rem; opacity: 0.25; }
.empty-title { font-size: 0.9rem; }
.empty-sub { font-size: 0.72rem; opacity: 0.6; font-style: italic; }

/* ── Loading state ── */
.loading-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}

.loading-label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}

.loading-bar {
  width: 140px;
  height: 3px;
  background: #111122;
  border-radius: 2px;
  overflow: hidden;
}

.loading-fill {
  height: 100%;
  background: var(--cat-color);
  border-radius: 2px;
  animation: loadPulse 1.4s ease-in-out infinite;
}

@keyframes loadPulse {
  0%   { width: 0%;   margin-left: 0%; }
  50%  { width: 55%;  margin-left: 22%; }
  100% { width: 0%;   margin-left: 100%; }
}

.loading-sub {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Ad display (simple fallback) ── */
.ad-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ad-headline {
  font-size: 1.35rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.ad-copy {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.65;
  text-align: center;
}

.ad-tagline {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Campaign board ── */
.campaign-board {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
}

.campaign-header {
  background: linear-gradient(135deg, rgba(var(--cat-color-rgb, 80,80,120), 0.08), transparent);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.campaign-headline {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 0 24px rgba(255,255,255,0.08);
}

.campaign-copy {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  opacity: 0.85;
}

.campaign-tagline {
  font-size: 0.72rem;
  color: var(--cat-color);
  font-style: italic;
  opacity: 0.9;
}

/* ── Creative card base ── */
.creative-card {
  background: var(--cat-color);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.creative-fmt-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  font-size: 0.48rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  font-family: monospace;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.75);
  padding: 0.12rem 0.35rem;
  border-bottom-right-radius: 2px;
  pointer-events: none;
}

.fmt-size {
  color: rgba(255,255,255,0.35);
  margin-left: 0.3em;
}

/* ── Strip ads ── */
.creative-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 0.85rem;
  gap: 0.5rem;
  background: linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(255,255,255,0.06) 100%);
}

.creative-cta-badge {
  background: rgba(255,255,255,0.93);
  color: var(--cat-color);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Leaderboard (728×90) */
.fmt-leaderboard {
  width: 100%;
  height: 3.5rem;
}

.fmt-leaderboard .creative-slogan {
  font-size: 0.92rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Billboard (970×250) */
.fmt-billboard {
  width: 100%;
  height: 5.5rem;
}

.fmt-billboard .creative-slogan {
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Mobile banner (320×50) */
.fmt-mobile-banner {
  width: 100%;
  height: 2.1rem;
}

.fmt-mobile-banner .creative-slogan {
  font-size: 0.62rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Box ads row ── */
.box-ads-row {
  display: flex;
  gap: 0.6rem;
  height: 190px;
  flex-shrink: 0;
}

.box-ads-row .creative-card {
  height: 100%;
}

/* Medium rectangle (300×250) */
.fmt-medium-rectangle {
  flex: 300;
}

/* Half page (300×600) */
.fmt-half-page {
  flex: 300;
}

/* Skyscraper (160×600) */
.fmt-skyscraper {
  flex: 160;
}

.creative-visual {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.78);
  font-style: italic;
  padding: 0.5rem 0.65rem;
  background: rgba(0,0,0,0.28);
  line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.creative-visual::before { content: '📷 '; }

.creative-box-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 0.45rem;
  text-align: center;
  background: rgba(0,0,0,0.18);
  flex-shrink: 0;
}

.fmt-medium-rectangle .creative-slogan,
.fmt-half-page .creative-slogan {
  font-size: 0.78rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.fmt-skyscraper .creative-slogan {
  font-size: 0.65rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* ── Video creative ── */
.fmt-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 280px;
  position: relative;
  background: #000;
}

.creative-video-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.montage-frames {
  position: absolute;
  inset: 0;
}

.montage-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 3rem;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(255,255,255,0.92);
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  background: linear-gradient(135deg, rgba(var(--cat-color-rgb, 60,60,120), 0.35), #050510);
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

.montage-frame.bw {
  filter: grayscale(1) contrast(1.1);
  background: #0c0c14;
}

.montage-frame.active {
  opacity: 1;
}

.video-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  padding: 2rem 1.25rem 0.65rem;
  z-index: 2;
  pointer-events: none;
}

.video-slogan {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  line-height: 1.25;
}

.video-cta {
  font-size: 0.68rem;
  color: var(--cat-color);
  text-align: center;
  margin-top: 0.2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.video-skip-note {
  font-size: 0.5rem;
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin-top: 0.15rem;
  font-family: monospace;
  letter-spacing: 0.05em;
}

/* ── Ticker / Disclaimer ── */
.tv-ticker {
  background: #030308;
  border-top: 1px solid #111122;
  height: 1.75rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  gap: 0;
}

.ticker-label {
  font-size: 0.55rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 0.15rem 0.4rem;
  flex-shrink: 0;
  font-family: monospace;
  height: 100%;
  display: flex;
  align-items: center;
}

.ticker-wrap {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.62rem;
  color: #666677;
  animation: tickerMove 45s linear infinite;
  padding-left: 100%;
}

@keyframes tickerMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ── Controls ── */
.controls {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.controls-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  height: 2.6rem;
}

.saved-flash {
  font-size: 0.7rem;
  color: #44cc88;
  text-align: right;
  opacity: 0;
  transition: opacity 0.3s;
  height: 1rem;
  line-height: 1rem;
}
.saved-flash.visible { opacity: 1; }

.product-input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 0 0.75rem;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s;
}

.product-input:focus { border-color: var(--cat-color); }
.product-input::placeholder { color: var(--muted); }

.generate-btn {
  background: var(--cat-color);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0 1.1rem;
  cursor: pointer;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
  white-space: nowrap;
}

.generate-btn:disabled {
  background: #1a1a28;
  color: var(--muted);
  cursor: not-allowed;
}

.generate-btn:not(:disabled):hover { opacity: 0.82; }
.generate-btn:not(:disabled):active { transform: scale(0.97); }

/* ── Category group header ── */
.cat-group-header {
  padding: 0.55rem 0.85rem 0.18rem;
  font-size: 0.48rem;
  font-weight: bold;
  letter-spacing: 0.13em;
  color: #303048;
  text-transform: uppercase;
  border-top: 1px solid #131320;
  margin-top: 0.1rem;
}
.cat-group-header:first-child {
  border-top: none;
  margin-top: 0;
}

/* ── Category selected state ── */
.selected-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem;
}

.selected-icon { font-size: 2.5rem; opacity: 0.65; }

.selected-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--cat-color);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.selected-blurb {
  font-size: 0.82rem;
  color: var(--text);
  font-style: italic;
  text-align: center;
  max-width: 380px;
  line-height: 1.55;
  opacity: 0.8;
}

.selected-hint {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ── Content Tabs ── */
.content-tabs {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.tab-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.07em;
  padding: 0.28rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab-btn:hover { background: #181828; color: var(--text); }
.tab-btn.active { background: #181828; border-color: var(--cat-color); color: #fff; }

/* ── Preview Panel ── */
.preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--screen-bg);
  border: 2px solid #141424;
  border-radius: 5px;
  overflow: hidden;
}

/* ── Fake Browser Chrome ── */
.fake-browser {
  background: #18182a;
  border-bottom: 1px solid #111122;
  padding: 0.22rem 0.65rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fake-browser-dots {
  display: flex;
  gap: 0.28rem;
  flex-shrink: 0;
}

.fake-browser-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.fake-browser-dot:nth-child(1) { background: #ff5f57; }
.fake-browser-dot:nth-child(2) { background: #febc2e; }
.fake-browser-dot:nth-child(3) { background: #28c840; }

.fake-urlbar {
  flex: 1;
  background: #0d0d1a;
  border: 1px solid #222233;
  border-radius: 2px;
  padding: 0.12rem 0.5rem;
  font-size: 0.55rem;
  color: #555566;
  font-family: monospace;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Fake Site ── */
.fake-site {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f4f4f0;
  color: #333;
  min-height: 0;
}

.fake-header {
  background: #fff;
  border-bottom: 2px solid #e0e0da;
  padding: 0.3rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.fake-logo {
  font-size: 0.82rem;
  font-weight: 900;
  color: #1a1a28;
  letter-spacing: 0.07em;
}

.fake-tagline {
  font-size: 0.52rem;
  color: #999;
  font-style: italic;
}

.fake-nav {
  margin-left: auto;
  display: flex;
  gap: 0.55rem;
}

.fake-nav-link {
  font-size: 0.56rem;
  color: #555;
  text-decoration: none;
  font-weight: 500;
}
.fake-nav-link:hover { color: #1a1a28; text-decoration: underline; }

/* ── Ad Slots (preview context) ── */
.pv-ad-slot {
  background: #e8e8e4;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.pv-ad-label {
  font-size: 0.4rem;
  color: #aaa;
  letter-spacing: 0.1em;
  text-align: center;
  background: #eeeee8;
  border-bottom: 1px solid #ddd;
  padding: 0.06rem 0;
  flex-shrink: 0;
}

.pv-slot-inner {
  display: flex;
  align-items: stretch;
  transition: opacity 0.4s ease;
}

.pv-slot-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: #ccc;
  font-style: italic;
  background: #ededea;
  padding: 0.3rem;
  text-align: center;
}

/* Leaderboard */
.pv-slot-leaderboard { width: 100%; }
.pv-slot-leaderboard .pv-slot-inner { height: 2.8rem; }

/* Mobile banner */
.pv-slot-mobile { width: 100%; margin-top: auto; }
.pv-slot-mobile .pv-slot-inner { height: 1.9rem; }
.pv-slot-mobile .pv-ad-label { font-size: 0.36rem; }

/* ── Fake Body Layout ── */
.fake-body {
  flex: 1;
  display: flex;
  gap: 0.45rem;
  padding: 0.5rem;
  overflow: hidden;
  min-height: 0;
}

.fake-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  overflow: hidden;
  min-height: 0;
}

.fake-headline {
  font-size: 0.78rem;
  font-weight: 700;
  color: #1a1a28;
  line-height: 1.25;
  flex-shrink: 0;
}

.fake-byline {
  font-size: 0.5rem;
  color: #999;
  flex-shrink: 0;
}

.fake-para {
  font-size: 0.58rem;
  color: #555;
  line-height: 1.5;
  flex-shrink: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.fake-para-short { -webkit-line-clamp: 2; }

.pv-slot-medium-rect {
  flex: 1;
  min-height: 70px;
  width: 100%;
}

.pv-slot-medium-rect .pv-slot-inner {
  height: 100%;
}

/* Skyscraper sidebar */
.fake-sidebar {
  width: 115px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.pv-slot-skyscraper {
  flex: 1;
  width: 115px;
  display: flex;
  flex-direction: column;
}

.pv-slot-skyscraper .pv-slot-inner {
  flex: 1;
}

/* ── Preview Creative Renderers ── */
.pv-creative {
  flex: 1;
  display: flex;
  overflow: hidden;
  cursor: pointer;
}

.pv-strip {
  flex-direction: row;
  align-items: center;
  padding: 0 0.65rem;
  gap: 0.5rem;
  justify-content: space-between;
}

.pv-box {
  flex-direction: column;
  width: 100%;
}

.pv-visual {
  flex: 1;
  font-size: 0.46rem;
  color: rgba(255,255,255,0.78);
  font-style: italic;
  padding: 0.3rem 0.4rem;
  background: rgba(0,0,0,0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
  overflow: hidden;
}

.pv-box-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  padding: 0.3rem 0.3rem;
  background: rgba(0,0,0,0.18);
  flex-shrink: 0;
  text-align: center;
}

.pv-slogan {
  font-size: 0.62rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.pv-strip .pv-slogan {
  white-space: nowrap;
  flex: 1;
}

.pv-box .pv-slogan {
  white-space: normal;
  font-size: 0.58rem;
  text-align: center;
}

.pv-cta-pill {
  background: rgba(255,255,255,0.92);
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
  font-size: 0.48rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.pv-cat-label {
  font-size: 0.36rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Preview empty state ── */
.preview-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--muted);
  background: var(--screen-bg);
}
.preview-empty-icon { font-size: 2.5rem; opacity: 0.2; }
.preview-empty-title { font-size: 0.9rem; }
.preview-empty-sub { font-size: 0.72rem; font-style: italic; opacity: 0.6; }

/* ── Error state ── */
.error-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--muted);
}

.error-icon { font-size: 2rem; }
.error-text { font-size: 0.85rem; color: #cc4444; }
.error-sub { font-size: 0.7rem; font-style: italic; }

/* ── Sidebar Generate Area ── */
.sidebar-gen-area {
  position: relative;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 20;
}

.sidebar-gen-btn {
  width: 100%;
  background: var(--accent);
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.48rem 0.7rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.15s;
}

.sidebar-gen-btn:hover { opacity: 0.85; }
.sidebar-gen-btn:active { opacity: 0.7; }

/* ── Generate Dropdown ── */
.gen-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #0d0d1a;
  border: 1px solid #1e1e2e;
  border-top: none;
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

.gen-dropdown.open { display: flex; }

.gen-dropdown-group {
  padding: 0.38rem 0.7rem 0.1rem;
  font-size: 0.46rem;
  font-weight: bold;
  letter-spacing: 0.13em;
  color: #292940;
  text-transform: uppercase;
  border-top: 1px solid #131320;
  flex-shrink: 0;
}

.gen-dropdown-group:first-child { border-top: none; }

.gen-dropdown-item {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  padding: 0.38rem 0.7rem;
  text-align: left;
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 0.1s;
  flex-shrink: 0;
}

.gen-dropdown-item:hover { background: rgba(255,255,255,0.05); }

.gen-dropdown-divider {
  height: 1px;
  background: #1a1a2a;
  margin: 0.25rem 0;
  flex-shrink: 0;
}

.gen-new-cat {
  color: var(--accent);
  font-weight: bold;
  font-size: 0.72rem;
}

/* ── TV Category Bar ── */
.tv-category-bar {
  display: flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-bottom: 1px solid #111122;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
  gap: 0.5rem;
}

.tv-cat-badge {
  font-size: 0.68rem;
  color: var(--cat-color);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 1;
}

.tv-campaign-select {
  background: #0b0b16;
  border: 1px solid #1e1e2e;
  border-radius: 2px;
  color: var(--muted);
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  max-width: 220px;
  outline: none;
}

.tv-campaign-select option { background: #0d0d1a; }

/* ── Controls layout without the generate button ── */
.product-input { height: 2.4rem; }

/* ── Create Category Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-box {
  background: #0e0e1c;
  border: 1px solid #252538;
  border-radius: 6px;
  width: 420px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}

.modal-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 0.88rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.05em;
  flex: 1;
}

.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.1rem 0.35rem;
  line-height: 1;
  transition: color 0.15s;
}

.modal-close:hover { color: var(--text); }

.modal-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.modal-field-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}

.modal-field-sm { width: 72px; flex-shrink: 0; }
.modal-field-flex { flex: 1; }

.modal-label {
  font-size: 0.6rem;
  color: var(--muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.modal-label-opt {
  color: #292940;
  font-size: 0.6rem;
  text-transform: none;
  letter-spacing: 0;
}

.modal-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 0.42rem 0.6rem;
  font-size: 0.82rem;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.modal-input:focus { border-color: var(--accent); }
.modal-input::placeholder { color: var(--muted); }

.modal-textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 0.42rem 0.6rem;
  font-size: 0.78rem;
  outline: none;
  resize: none;
  min-height: 68px;
  font-family: inherit;
  line-height: 1.55;
  transition: border-color 0.2s;
  width: 100%;
}

.modal-textarea:focus { border-color: var(--accent); }
.modal-textarea::placeholder { color: var(--muted); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--border);
}

.modal-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  padding: 0.38rem 0.85rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.modal-cancel-btn:hover { border-color: var(--text); color: var(--text); }

.modal-create-btn {
  background: var(--accent);
  border: none;
  border-radius: 3px;
  color: #fff;
  padding: 0.38rem 1rem;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: opacity 0.15s;
}

.modal-create-btn:hover { opacity: 0.85; }
.modal-create-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Header Generate Button ── */
.header-gen-btn {
  background: var(--accent);
  border: none;
  border-radius: 3px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.15s;
  margin-left: auto;
  white-space: nowrap;
}
.header-gen-btn:hover { opacity: 0.85; }
.header-gen-btn:active { opacity: 0.7; }

/* ── Sidebar Sections ── */
.sidebar-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-section-network {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.sidebar-label-network {
  color: #cc6644 !important;
  border-bottom-color: rgba(255, 80, 60, 0.12) !important;
}

.network-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  max-height: 10rem;
}

.sidebar-section-campaigns {
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

/* ── Sidebar Group Buttons ── */
.group-list {
  overflow-y: auto;
  padding: 0.35rem 0;
  max-height: 11rem;
}

/* ── Campaign List ── */
.campaign-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0;
  min-height: 0;
}

.campaign-btn {
  width: 100%;
  padding: 0.38rem 0.75rem 0.38rem 0.85rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  transition: background 0.12s, border-color 0.12s;
}

.campaign-btn:hover { background: rgba(255,255,255,0.03); }

.campaign-btn.active {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--cat-color);
}

.campaign-btn.campaign-game {
  border-left-color: rgba(80, 200, 120, 0.15);
}

.campaign-btn.campaign-game:hover {
  border-left-color: rgba(80, 200, 120, 0.4);
}

.campaign-btn.campaign-game.active {
  border-left-color: #5cdf8a;
}

.campaign-btn.campaign-network {
  border-left-color: rgba(255, 100, 60, 0.15);
}

.campaign-btn.campaign-network:hover {
  border-left-color: rgba(255, 100, 60, 0.4);
}

.campaign-btn.campaign-network.active {
  border-left-color: #ff7755;
}

.campaign-btn.campaign-network .campaign-name {
  color: #ff9977;
}

.network-visit-link {
  color: rgba(255, 120, 80, 0.7);
  text-decoration: none;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}
.network-visit-link:hover { color: #ff9977; }

.campaign-emoji {
  font-size: 0.82rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.campaign-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  flex: 1;
}

.campaign-name {
  font-size: 0.68rem;
  font-weight: bold;
  color: #bbbbd8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-btn.campaign-game .campaign-name {
  color: #7ce89c;
}

.campaign-subline {
  font-size: 0.58rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-count-badge {
  font-size: 0.55rem;
  background: #1a1a2a;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.08rem 0.28rem;
  color: var(--muted);
  margin-left: 0.3rem;
  vertical-align: middle;
}

.group-btn {
  width: 100%;
  padding: 0.58rem 0.9rem;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.group-btn:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.group-btn.active {
  background: rgba(255,255,255,0.07);
  border-left-color: var(--accent);
  color: #fff;
}

/* ── TV Group Bar ── */
.tv-group-bar {
  display: flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-bottom: 1px solid #111122;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
  gap: 0.5rem;
}

.tv-back-btn {
  background: none;
  border: 1px solid #252535;
  border-radius: 2px;
  color: var(--muted);
  font-size: 0.56rem;
  font-weight: bold;
  letter-spacing: 0.09em;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.tv-back-btn:hover { color: var(--text); border-color: #383852; }

.tv-group-badge {
  font-size: 0.68rem;
  color: var(--cat-color);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-left: auto;
}

.tv-nav-btn {
  background: none;
  border: 1px solid #252535;
  border-radius: 2px;
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.tv-nav-btn:hover { color: var(--text); border-color: #383852; }

.tv-nav-counter {
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  min-width: 3rem;
  text-align: center;
}

.tv-cat-selector {
  flex-shrink: 0;
}

.tv-cat-select {
  background: #0b0b16;
  border: 1px solid #1e1e2e;
  border-radius: 2px;
  color: var(--muted);
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  max-width: 220px;
  outline: none;
}
.tv-cat-select option,
.tv-cat-select optgroup { background: #0d0d1a; }

/* ── New Category Divider in modal ── */
.new-cat-divider {
  font-size: 0.55rem;
  font-weight: bold;
  letter-spacing: 0.13em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0.5rem 0 0.4rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}

/* ── Rotation active cursor hint ── */
.tv-content.rotation-active { cursor: pointer; }