/* ==========================================================================
   PHAC FAILED FILM FESTIVAL (phac.xyz/fff) — OFFICIAL STYLESHEET
   Aesthetic: Prospect Heights Art Club (phac.xyz) Pure Black & Sparse Pure CMY
              Screenprint Zine meets Underground Screening Room
   Club Colors: Pure Black (#000000), Deep Obsidian (#070709 / #0e0e12),
                Pure Cyan (#00FFFF), Pure Magenta (#FF00FF), Pure Yellow (#FFFF00)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Modern Web Guidance Root & Browser UI Theming
   - dark-mode / browser-ui-theming: color-scheme: dark on :root
   - customize-scrollbar-color-and-thickness: scrollbar-width & scrollbar-color
   - brand-consistent-forms: accent-color: #FFFF00
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: #FFFF00 #070709;
  accent-color: #FFFF00;

  /* PHAC Pure Black & Obsidian Surfaces */
  --bg-black: #000000;
  --bg-pitch: #000000;
  --bg-obsidian: #070709;
  --bg-zine: #070709;
  --bg-zine-alt: #0a0a0e;
  --bg-card: #0e0e12;
  --bg-card-hover: #15151c;
  --bg-elevated: #181820;
  --bg-glass: rgba(0, 0, 0, 0.92);

  /* PHAC Sparse Pure CMY Screenprint Accents */
  --cmy-cyan: #00FFFF;
  --cmy-magenta: #FF00FF;
  --cmy-yellow: #FFFF00;
  --cyan: #00FFFF;
  --magenta: #FF00FF;
  --yellow: #FFFF00;

  --cmy-cyan-dim: rgba(0, 255, 255, 0.12);
  --cmy-magenta-dim: rgba(255, 0, 255, 0.12);
  --cmy-yellow-dim: rgba(255, 255, 0, 0.12);

  /* Semantic Aliases Harmonized to Pure CMY */
  --acid-yellow: #FFFF00;
  --acid-yellow-dim: rgba(255, 255, 0, 0.12);
  --neon-crimson: #FF00FF;
  --neon-crimson-dim: rgba(255, 0, 255, 0.12);
  --cyan-telemetry: #00FFFF;
  --cyan-telemetry-dim: rgba(0, 255, 255, 0.12);
  --signal-emerald: #00FF9D;
  --signal-emerald-dim: rgba(0, 255, 157, 0.12);
  --punk-orange: #FF5500;

  /* Newsprint Typography Colors (High-Contrast #D4D4D8 Body Copy on #070709 Surfaces) */
  --text-white: #FFFFFF;
  --text-light: #E4E4E7;
  --text-muted: #D4D4D8;
  --text-dim: #A1A1AA;
  --text-ink: #000000;
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D8;
  --gold: #FFFF00;
  --accent-yellow: #FFFF00;
  --accent-green: #00FF9D;

  /* Sparse Razor-Sharp 1px/2px CMY Borders & Offset Registration Shadows */
  --border-zinc: #222222;
  --border-subtle: #1F1F26;
  --border-strong: #2E2E38;
  --border-zine: 1px solid #2E2E38;
  --border-cyan: 1px solid #00FFFF;
  --border-magenta: 1px solid #FF00FF;
  --border-yellow: 1px solid #FFFF00;

  --shadow-yellow: 3px 3px 0px #FFFF00;
  --shadow-magenta: 3px 3px 0px #FF00FF;
  --shadow-crimson: 3px 3px 0px #FF00FF;
  --shadow-cyan: 3px 3px 0px #00FFFF;
  --shadow-emerald: 3px 3px 0px #00FFFF;
  --shadow-cmy-split: -2px -2px 0px #00FFFF, 2px 2px 0px #FF00FF;
  --shadow-dark: 3px 3px 0px #000000;
  --shadow-lg-yellow: 5px 5px 0px #FFFF00;
  --shadow-lg-crimson: 5px 5px 0px #FF00FF;

  /* Typography Stacks */
  --font-display: "Impact", "Arial Black", "Syne", "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Spacing & Layout */
  --nav-height: 70px;
  --max-width: 1440px;
  --radius-sharp: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --transition-fast: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-snappy: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. Box-Sizing, Pure Black Surface & CMY Screenprint Registration Texture
   - improve-text-layout-and-legibility / typography:
     text-wrap: balance on headings, text-wrap: pretty on body copy
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: var(--bg-black);
  color: var(--text-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--bg-black);
  background-image:
    radial-gradient(rgba(0, 255, 255, 0.04) 1px, transparent 0),
    radial-gradient(rgba(255, 0, 255, 0.035) 1px, transparent 0),
    radial-gradient(rgba(255, 255, 0, 0.03) 1px, transparent 0);
  background-size: 32px 32px, 48px 48px, 64px 64px;
  background-position: 0 0, 16px 16px, 8px 24px;
  color: var(--text-white);
  overflow-x: hidden;
  position: relative;
}

/* Top CMY Screenprint Registration Hairline Strip */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--cmy-cyan) 0%,
    var(--cmy-cyan) 33.33%,
    var(--cmy-magenta) 33.33%,
    var(--cmy-magenta) 66.66%,
    var(--cmy-yellow) 66.66%,
    var(--cmy-yellow) 100%
  );
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title,
.card-title,
.modal-title,
.netflix-hero-title {
  text-wrap: balance;
  margin-top: 0;
  font-family: var(--font-display);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--text-white);
}

p,
li,
dd,
blockquote,
.body-copy,
.film-synopsis,
.failure-statement,
.outreach-body,
.diagnostic-text,
.helper-text {
  text-wrap: pretty;
  max-width: 72ch;
}

code,
pre,
.mono,
.telemetry-readout,
.hmac-token,
.hash-badge,
.credentials-code {
  font-family: var(--font-mono);
}

a {
  color: var(--cmy-cyan);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--cmy-yellow);
}

/* CMY Registration Mark Utility */
.cmy-marks,
.registration-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cmy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.cmy-dot.cyan {
  background-color: var(--cmy-cyan);
}
.cmy-dot.magenta {
  background-color: var(--cmy-magenta);
}
.cmy-dot.yellow {
  background-color: var(--cmy-yellow);
}

/* --------------------------------------------------------------------------
   3. Heavy Content Deferred Rendering
   - defer-rendering-heavy-content: content-visibility: auto & contain-intrinsic-size
   -------------------------------------------------------------------------- */
.catalog-section,
.docket-grid-section,
.admin-table-section,
.netflix-row-section,
.telemetry-stream-section,
.outreach-queue-section,
.gcp-architecture-section,
.heavy-content-block {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* --------------------------------------------------------------------------
   4. Native <dialog> Top-Layer Animations
   - dialog / animate-to-from-top-layer: @starting-style & allow-discrete
   -------------------------------------------------------------------------- */
dialog:not([open]) {
  display: none;
}

dialog {
  background: var(--bg-obsidian);
  color: var(--text-white);
  border: 2px solid var(--cmy-yellow);
  box-shadow: var(--shadow-cmy-split);
  border-radius: var(--radius-sharp);
  padding: 1.75rem;
  max-width: min(680px, 92vw);
  width: 100%;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition:
    opacity var(--transition-snappy),
    transform var(--transition-snappy),
    overlay var(--transition-snappy) allow-discrete,
    display var(--transition-snappy) allow-discrete;
}

dialog[open] {
  display: block;
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 9998;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 1;
  transform: none;
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition:
    opacity var(--transition-snappy),
    overlay var(--transition-snappy) allow-discrete,
    display var(--transition-snappy) allow-discrete;
}

dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   5. Form Controls & User-Interaction Validation
   - validate-input-after-interaction / required-field-feedback:
     Use :user-invalid and :user-valid instead of premature :invalid
   -------------------------------------------------------------------------- */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  background-color: var(--bg-black);
  color: var(--text-white);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sharp);
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-dim);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cmy-cyan);
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--cmy-yellow);
  box-shadow: 2px 2px 0px var(--cmy-cyan);
  background-color: var(--bg-obsidian);
}

/* Post-interaction validation states */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: var(--cmy-magenta);
  box-shadow: 2px 2px 0px var(--cmy-magenta);
  background-color: rgba(255, 0, 255, 0.06);
}

input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: var(--cmy-cyan);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--cmy-yellow);
  cursor: pointer;
}

label,
.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 0.35rem;
}

.field-group,
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   6. Pure Black & Sparse CMY Buttons
   -------------------------------------------------------------------------- */
.btn,
button.btn-primary,
button.btn-secondary,
button.btn-danger,
button.btn-emerald,
button.btn-cyan,
button.btn-magenta,
button.btn-yellow,
button.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.62rem 1.1rem;
  border-radius: var(--radius-sharp);
  border: 1.5px solid var(--text-white);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn:disabled,
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-primary,
.btn-yellow {
  background-color: var(--cmy-yellow);
  color: var(--text-ink);
  border-color: var(--cmy-yellow);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
}

.btn-primary:hover:not(:disabled),
.btn-yellow:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px var(--cmy-cyan);
}

.btn-secondary {
  background-color: var(--bg-black);
  color: var(--text-white);
  border-color: var(--cmy-cyan);
  box-shadow: 2px 2px 0px var(--cmy-cyan);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--cmy-yellow);
  color: var(--cmy-yellow);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--cmy-yellow);
}

.btn-danger,
.btn-crimson,
.btn-magenta,
button.btn-magenta {
  background-color: var(--cmy-magenta);
  color: var(--text-ink);
  border-color: var(--cmy-magenta);
  box-shadow: 2px 2px 0px rgba(255, 0, 255, 0.45);
}

.btn-danger:hover:not(:disabled),
.btn-crimson:hover:not(:disabled),
.btn-magenta:hover:not(:disabled),
button.btn-magenta:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  border-color: var(--cmy-magenta);
  box-shadow: 4px 4px 0px rgba(255, 0, 255, 0.75);
}

.btn-emerald,
.btn-success,
.btn-cyan,
button.btn-cyan {
  background-color: var(--cmy-cyan);
  color: var(--text-ink);
  border-color: var(--cmy-cyan);
  box-shadow: 2px 2px 0px rgba(0, 255, 255, 0.45);
}

.btn-emerald:hover:not(:disabled),
.btn-success:hover:not(:disabled),
.btn-cyan:hover:not(:disabled),
button.btn-cyan:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  border-color: var(--cmy-cyan);
  box-shadow: 4px 4px 0px rgba(0, 255, 255, 0.75);
}

.btn-outline-cyan,
button.btn-outline-cyan {
  background-color: rgba(0, 255, 255, 0.08);
  color: var(--cmy-cyan);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: none;
}

.btn-outline-cyan:hover:not(:disabled),
button.btn-outline-cyan:hover:not(:disabled) {
  background-color: var(--cmy-cyan);
  color: var(--text-ink);
  border-color: var(--cmy-cyan);
  box-shadow: 2px 2px 0px rgba(0, 255, 255, 0.55);
}

.btn-outline-magenta,
button.btn-outline-magenta {
  background-color: rgba(255, 0, 255, 0.08);
  color: var(--cmy-magenta);
  border: 1.5px solid var(--cmy-magenta);
  box-shadow: none;
}

.btn-outline-magenta:hover:not(:disabled),
button.btn-outline-magenta:hover:not(:disabled) {
  background-color: var(--cmy-magenta);
  color: var(--text-ink);
  border-color: var(--cmy-magenta);
  box-shadow: 2px 2px 0px rgba(255, 0, 255, 0.55);
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}

.btn-ghost,
.btn-download {
  background-color: var(--bg-black);
  color: var(--cmy-cyan);
  border: 1px solid var(--cmy-cyan);
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}

.btn-ghost:hover:not(:disabled),
.btn-download:hover:not(:disabled) {
  border-color: var(--cmy-yellow);
  color: var(--text-ink);
  background-color: var(--cmy-yellow);
}

/* --------------------------------------------------------------------------
   7. Top Sticky Navigation Bar (PHAC Pure Black + Sparse CMY)
   -------------------------------------------------------------------------- */
.global-topbar,
.top-nav,
.site-header,
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: var(--nav-height);
  background: #07070B;
  background-color: #07070B;
  backdrop-filter: none;
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 2px 0px var(--cmy-magenta);
  padding: 0.6rem 1.25rem;
}

#admin-join-search-input,
#aud-film-search-input {
  background: #0D0D14;
  color: #FFFFFF;
  border: 1.5px solid rgba(0, 255, 255, 0.55);
  padding: 0.4rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

#admin-join-search-input::placeholder,
#aud-film-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.chip,
.chip-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #0D0D14;
  color: var(--text-light);
  border: 1px solid var(--cmy-cyan);
  padding: 0.24rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chip:hover,
.chip-sm:hover {
  border-color: var(--cmy-yellow);
  color: var(--cmy-yellow);
}

.chip.active,
.chip-sm.active {
  background: var(--cmy-yellow);
  color: #050507;
  border-color: var(--cmy-yellow);
  box-shadow: 2px 2px 0px var(--cmy-magenta);
}

.nav-inner,
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand-cluster,
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-stamp,
.brand-logo {
  background-color: var(--bg-black);
  color: var(--cmy-yellow);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  padding: 0.25rem 0.65rem;
  border: 1.5px solid var(--cmy-yellow);
  box-shadow: -2px -2px 0px var(--cmy-cyan), 2px 2px 0px var(--cmy-magenta);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.brand-titles {
  display: flex;
  flex-direction: column;
}

.brand-main,
.brand-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--text-white);
  text-transform: uppercase;
  line-height: 1.1;
}

.brand-sub,
.brand-subtitle {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--cmy-cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 4 View Navigation Tabs */
.nav-tabs,
.view-tabs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.nav-tab,
.tab-btn {
  background-color: var(--bg-black);
  color: var(--text-light);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sharp);
  padding: 0.4rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.nav-tab:hover,
.tab-btn:hover {
  border-color: var(--cmy-cyan);
  color: var(--cmy-cyan);
  box-shadow: 2px 2px 0px var(--cmy-magenta);
}

.nav-tab.active,
.tab-btn.active,
.nav-tab[aria-selected="true"],
.tab-btn[aria-selected="true"] {
  background-color: var(--cmy-yellow);
  color: var(--text-ink);
  border-color: var(--cmy-yellow);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  font-weight: 900;
}

/* Right Nav Utilities: Live System Pulse & Language Adjust Switcher */
.nav-utilities,
.nav-right,
.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pulse-badge,
.system-pulse,
.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--bg-black);
  border: 1px solid var(--cmy-cyan);
  color: var(--cmy-cyan);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.live-dot,
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cmy-cyan);
  box-shadow: 0 0 8px var(--cmy-cyan);
  animation: fff-pulse 1.8s infinite ease-in-out;
}

@keyframes fff-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.5;
  }
}

.lang-switcher,
.lang-select-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--bg-black);
  border: 1.5px solid var(--cmy-magenta);
  box-shadow: 2px 2px 0px var(--cmy-yellow);
  padding: 0.15rem 0.45rem;
}

.lang-switcher select,
#lang-select,
.lang-select {
  width: auto;
  background: transparent;
  border: none;
  color: var(--cmy-yellow);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.25rem 0.35rem;
  cursor: pointer;
  box-shadow: none !important;
}

.lang-switcher select option,
#lang-select option {
  background-color: var(--bg-black);
  color: var(--text-white);
}

/* --------------------------------------------------------------------------
   8. Main App Shell, Views & Pure Black CMY Hero Headers
   -------------------------------------------------------------------------- */
.app-shell,
.main-container,
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.view-panel,
.tab-panel,
.app-view {
  display: none;
}

.view-panel.active,
.tab-panel.active,
.app-view.active {
  display: block;
  opacity: 1;
  transform: none;
}

@keyframes view-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.zine-hero,
.view-hero,
.festival-hero {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-yellow);
  box-shadow: -3px -3px 0px var(--cmy-cyan), 3px 3px 0px var(--cmy-magenta);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
}

.zine-hero::after {
  content: "PHAC.XYZ/FFF // CMY EDITION";
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--cmy-cyan);
  letter-spacing: 0.12em;
}

.hero-kicker,
.zine-kicker {
  display: inline-block;
  background-color: var(--cmy-magenta);
  color: var(--text-ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.6rem;
  box-shadow: 2px 2px 0px var(--cmy-yellow);
}

.hero-title {
  font-size: clamp(1.65rem, 3.2vw, 2.6rem);
  margin-bottom: 0.45rem;
  text-shadow: -1.5px 0px 0px var(--cmy-cyan), 1.5px 0px 0px var(--cmy-magenta);
}

.hero-motto,
.hero-subtitle {
  font-size: 1rem;
  color: var(--text-light);
  margin: 0;
}

/* Generic Zine Cards & Panels */
.zine-card,
.panel-card,
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sharp);
  padding: 1.25rem;
  box-shadow: var(--shadow-dark);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.zine-card.featured,
.panel-card.featured,
.card.featured {
  border: 1.5px solid var(--cmy-yellow);
  box-shadow: var(--shadow-yellow);
}

/* Sparse CMY Badges & Pills */
.badge,
.pill,
.tag,
.synthid-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sharp);
  border: 1px solid currentColor;
  background-color: var(--bg-black);
}

.badge-yellow,
.badge-cmy-y {
  color: var(--cmy-yellow);
  border-color: var(--cmy-yellow);
}

.badge-crimson,
.badge-magenta,
.badge-cmy-m {
  color: var(--cmy-magenta);
  border-color: var(--cmy-magenta);
}

.badge-emerald,
.badge-cyan,
.badge-cmy-c,
.synthid-badge {
  color: var(--cmy-cyan);
  border-color: var(--cmy-cyan);
}

/* --------------------------------------------------------------------------
   9. VIEW 1: FILMMAKER BALLOT STYLES
   - Auto-generated Ballot Username & Password Login Gate
   - 10-Film Official Docket Grid with "YOUR FILM — AUTO-INCLUDED" neon badge
   - Offline MP4 & Playlist ZIP/Manifest Download Controls
   - Interactive Video Screening Player with progress bar & telemetry readout
   - Dual-Column Ranking Board (Top 5 "Least Failed" vs Bottom 5 "Most Failed")
   -------------------------------------------------------------------------- */
.login-gate,
.auth-card,
.filmmaker-login-card {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.25rem;
}

.filmmaker-login-card.is-collapsed {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  border-bottom: 1px dashed var(--border-strong);
  box-shadow: none;
}

.auth-compact-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.liveness-challenge-banner {
  background-color: var(--bg-black);
  border: 1.5px solid var(--cmy-cyan);
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.login-form-row,
.auth-row,
.credentials-login-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem;
  align-items: end;
}

.credentials-badge,
.ballot-credentials-pill {
  background-color: var(--bg-black);
  border: 1px dashed var(--cmy-yellow);
  color: var(--cmy-yellow);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.45rem 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.demo-personas,
.persona-switcher,
.quick-fill-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border-strong);
}

.persona-chip,
.demo-chip {
  background-color: var(--bg-black);
  color: var(--text-light);
  border: 1px solid var(--border-strong);
  padding: 0.32rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.persona-chip:hover,
.demo-chip:hover,
.persona-chip.active {
  border-color: var(--cmy-yellow);
  color: var(--text-ink);
  background-color: var(--cmy-yellow);
  font-weight: 800;
}

/* Offline Download Pack Bar & Merged Docket Status Strip */
.offline-download-bar,
.playlist-pack-banner,
.docket-status-strip {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-cyan);
  padding: 0.65rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.filmmaker-login-card.is-collapsed + #filmmaker-workspace .docket-status-strip {
  border-top: none;
  box-shadow: 3px 3px 0px var(--cmy-magenta);
}

/* Interactive Video Screening Player & Telemetry Booth */
.screening-room,
.player-booth,
.video-screening-panel {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--border-strong);
  box-shadow: 3px 3px 0px var(--cmy-cyan);
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.video-player-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: player-col;
}

.video-stage,
.player-stage,
.video-wrapper {
  position: relative;
  background: radial-gradient(circle at center, #0d0e17 0%, #020205 100%);
  border: 1.5px solid var(--cmy-yellow);
  border-bottom: none;
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: aspect-ratio 220ms ease, max-height 220ms ease, border-color 180ms ease;
}

.video-stage video,
.player-stage video,
video.festival-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background-color: #000000;
}

/* Adaptive Framing Modes on .video-stage */
.video-stage[data-fit-mode="fit"] video.festival-player {
  object-fit: contain;
}

.video-stage[data-fit-mode="native"] {
  aspect-ratio: var(--film-aspect-ratio, 16 / 9);
  max-height: 72dvh;
  margin-inline: auto;
}

.video-stage[data-fit-mode="native"] video.festival-player {
  object-fit: contain;
}

.video-stage[data-fit-mode="fill"] video.festival-player {
  object-fit: cover;
}

.video-stage[data-fit-mode="pixel"] video.festival-player {
  object-fit: contain;
  image-rendering: pixelated;
  filter: contrast(1.06) saturate(1.05);
}

/* Parent-aware aspect styling via :has() (modern-web-guidance: style-parent-with-has) */
.video-stage:has(video[data-aspect-mode="portrait"]) {
  border-color: var(--cmy-magenta);
  background:
    linear-gradient(90deg, rgba(255, 0, 255, 0.09) 0%, rgba(0, 0, 0, 0.96) 22%, rgba(0, 0, 0, 0.96) 78%, rgba(0, 255, 255, 0.09) 100%);
}

.video-stage:has(video[data-aspect-mode="academy"]),
.video-stage:has(video[data-aspect-mode="classic"]),
.video-stage:has(video[data-aspect-mode="flat"]) {
  border-color: var(--cmy-cyan);
  background:
    linear-gradient(90deg, rgba(0, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.96) 14%, rgba(0, 0, 0, 0.96) 86%, rgba(255, 255, 0, 0.07) 100%);
}

.video-stage:has(video[data-aspect-mode="scope"]) {
  border-color: var(--cmy-yellow);
  background:
    linear-gradient(180deg, rgba(255, 255, 0, 0.08) 0%, rgba(0, 0, 0, 0.98) 14%, rgba(0, 0, 0, 0.98) 86%, rgba(255, 0, 255, 0.08) 100%);
}

/* Format & Aspect Framing Control Strip */
.player-format-bar {
  background-color: #08090f;
  border-left: 1.5px solid var(--cmy-cyan);
  border-right: 1.5px solid var(--cmy-cyan);
  border-top: 1px dashed rgba(0, 255, 255, 0.32);
  padding: 0.4rem 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.player-format-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.player-framing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.format-mode-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.14rem 0.48rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 140ms ease;
}

.format-mode-btn:hover {
  border-color: var(--cmy-cyan);
  color: var(--cmy-cyan);
}

.format-mode-btn.active {
  background: var(--cmy-yellow);
  color: #050507;
  border-color: var(--cmy-yellow);
}

.card-aspect-pill {
  position: absolute;
  bottom: 0.45rem;
  left: 0.45rem;
  background-color: rgba(5, 5, 10, 0.9);
  color: var(--cmy-cyan);
  border: 1px solid rgba(0, 255, 255, 0.55);
  padding: 0.1rem 0.42rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.card-aspect-pill.is-unusual {
  color: var(--cmy-yellow);
  border-color: var(--cmy-yellow);
}

@container player-col (max-width: 560px) {
  .player-format-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

.player-telemetry-bar,
.telemetry-strip,
.stream-telemetry {
  margin-top: 0;
  background-color: var(--bg-black);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--cmy-cyan);
}

.watch-progress-track,
.progress-track {
  width: 100%;
  height: 8px;
  background-color: var(--bg-black);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  margin-top: 0.45rem;
}

.watch-progress-fill,
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cmy-cyan) 0%, var(--cmy-magenta) 50%, var(--cmy-yellow) 100%);
  width: 0%;
  transition: width 200ms linear;
}

.failure-confession-box,
.failure-statement-box {
  background-color: rgba(255, 0, 255, 0.06);
  border-left: 3px solid var(--cmy-magenta);
  padding: 0.75rem 0.9rem;
  font-size: 0.88rem;
  color: var(--text-light);
}

/* 10-Film Official Docket Grid */
.docket-grid,
.films-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 1.1rem;
}

.docket-card,
.film-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.75rem;
  position: relative;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.fm-swap-slot-box {
  margin-top: auto;
}

.docket-card:hover,
.film-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-cyan);
}

.docket-card.active-playing,
.film-card.active-playing {
  border-color: var(--cmy-yellow);
  box-shadow: 3px 3px 0px var(--cmy-yellow);
}

.docket-card.ranked-top,
.film-card.ranked-top {
  border: 2px solid #FF00FF;
  box-shadow: 3px 3px 0px #FF00FF;
}

.docket-card.ranked-bottom,
.film-card.ranked-bottom {
  border: 2px solid #00FFFF;
  box-shadow: 3px 3px 0px #00FFFF;
}

.docket-card-thumb {
  width: 100%;
  height: 118px;
  border: 1px solid var(--border-strong);
  background-color: #07070B;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.45rem 0.55rem;
  position: relative;
  overflow: hidden;
}

.docket-card-thumb .duration-pill,
.netflix-card-thumb .duration-pill {
  position: absolute;
  right: 0.5rem;
  bottom: 0.45rem;
  background: rgba(5, 5, 7, 0.9);
  border: 1px solid var(--cmy-yellow);
  color: var(--cmy-yellow);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.42rem;
}

/* Filmmaker's Own Guaranteed Film Card & Pure Yellow/Magenta Neon Badge */
.docket-card.is-own-film,
.film-card.is-own-film,
.docket-card[data-own-film="true"] {
  border: 1.5px solid var(--cmy-yellow);
  background:
    linear-gradient(160deg, rgba(255, 255, 0, 0.09) 0%, rgba(0, 255, 255, 0.04) 100%),
    var(--bg-card);
  box-shadow: 3px 3px 0px var(--cmy-yellow);
}

.own-film-badge,
.badge-own-film,
.guaranteed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--cmy-yellow);
  color: var(--text-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--text-white);
  box-shadow: 2px 2px 0px var(--cmy-magenta);
  width: fit-content;
}

.docket-card-actions,
.film-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

/* Dual-Column Ranking Board (Top 5 Least Failed in Cyan/Yellow vs Bottom 5 Most Failed in Magenta) */
.ranking-board,
.dual-ranking-grid,
.ballot-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.ranking-column,
.rank-panel {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--border-strong);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.rank-col-least-failed,
.least-failed-panel,
.ranking-column.least-failed {
  border-color: var(--cmy-magenta);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
}

.rank-col-least-failed .column-header,
.least-failed-panel .column-header {
  color: var(--cmy-magenta);
  border-bottom: 1.5px solid var(--cmy-magenta);
  padding-bottom: 0.6rem;
}

.rank-col-most-failed,
.most-failed-panel,
.ranking-column.most-failed {
  border-color: var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-cyan);
}

.rank-col-most-failed .column-header,
.most-failed-panel .column-header {
  color: var(--cmy-cyan);
  border-bottom: 1.5px solid var(--cmy-cyan);
  padding-bottom: 0.6rem;
}

.rank-slot,
.rank-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0.65rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  padding: 0.55rem 0.75rem;
}

.rank-col-least-failed .rank-badge,
.rank-slot.least-failed .rank-badge {
  background-color: var(--cmy-magenta);
  color: var(--text-ink);
  font-family: var(--font-mono);
  font-weight: 900;
  text-align: center;
  padding: 0.3rem 0.45rem;
}

.rank-col-most-failed .rank-badge,
.rank-slot.most-failed .rank-badge {
  background-color: var(--cmy-cyan);
  color: var(--text-ink);
  font-family: var(--font-mono);
  font-weight: 900;
  text-align: center;
  padding: 0.3rem 0.45rem;
}

/* Category Nomination Pills & Grid */
.category-nominations,
.categories-section {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-yellow);
  box-shadow: 3px 3px 0px var(--cmy-yellow);
  padding: 1.25rem;
}

.category-grid,
.nomination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.9rem;
  margin-top: 0.85rem;
}

.category-card,
.nomination-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-pill,
.nomination-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--bg-black);
  color: var(--cmy-yellow);
  border: 1px solid var(--cmy-yellow);
  padding: 0.3rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.category-pill.selected,
.nomination-pill.selected,
.category-pill:hover {
  background-color: var(--cmy-yellow);
  color: var(--text-ink);
}

/* Verified Ballot Receipt Card */
.ballot-receipt,
.receipt-card {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-yellow);
  padding: 1.35rem;
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   10. VIEW 2: HOST YOUR OWN SCREENING (NETFLIX CLONE) STYLES
   - Full-bleed Featured Film Hero Banner
   - Horizontal scrollable Netflix-style film carousels (scroll-snap-type: x mandatory)
   - Screening Mode Switcher & Offline Playlist Pack Download
   - Crowd Photo Booth & Gemini / SynthID & AI Image Forensic Detector
   -------------------------------------------------------------------------- */
.netflix-hero,
.featured-screening-hero {
  position: relative;
  border: 1.5px solid var(--cmy-magenta);
  box-shadow: -3px -3px 0px var(--cmy-cyan), 4px 4px 0px var(--cmy-yellow);
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.2), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.14), transparent 55%),
    var(--bg-obsidian);
  padding: 2.25rem 2rem;
  margin-bottom: 1.75rem;
  overflow: hidden;
  display: block;
}

.netflix-badge,
.n-series-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--cmy-magenta);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.netflix-hero-title {
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  color: var(--text-white);
  margin-bottom: 0.55rem;
}

.netflix-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--cmy-yellow);
  margin-bottom: 0.9rem;
}

.netflix-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.host-controls-grid,
.host-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.screening-mode-switcher,
.mode-switcher-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.mode-card,
.mode-pill,
.mode-btn {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  padding: 0.9rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mode-card:hover,
.mode-pill:hover,
.mode-btn:hover {
  border-color: var(--cmy-cyan);
  transform: translate(-2px, -2px);
}

.mode-card.active,
.mode-pill.active,
.mode-btn.active {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-yellow);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
}

/* Horizontal Scrollable Netflix-Style Film Carousels */
.netflix-row,
.carousel-section {
  margin-bottom: 1.85rem;
}

.netflix-row-header,
.carousel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.netflix-carousel,
.carousel-track,
.film-row-scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.35rem 0.25rem 1rem;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--cmy-magenta) var(--bg-obsidian);
}

.netflix-card,
.carousel-card,
.carousel-item {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition:
    transform var(--transition-snappy),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  position: relative;
}

.netflix-card:hover,
.carousel-card:hover,
.carousel-item:hover {
  transform: translateY(-4px);
  border-color: var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  z-index: 5;
}

.netflix-card-thumb,
.poster-banner {
  height: 135px;
  background:
    linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.16)),
  var(--bg-black);
  border-bottom: 1px solid var(--border-strong);
  padding: 0.45rem 0.55rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.netflix-card-body {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

/* Interactive Queue Drawer */
.queue-drawer,
.playlist-drawer,
.screening-queue-panel {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-cyan);
  padding: 1.25rem;
  margin-bottom: 1.75rem;
}

.queue-items,
.playlist-queue-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.queue-chip,
.queue-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: var(--bg-black);
  border: 1px solid var(--cmy-cyan);
  padding: 0.32rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

/* Crowd Photo Booth & Gemini / SynthID & AI Image Forensic Detector */
.crowd-photo-booth,
.photo-verifier-panel,
.bouncer-booth-section {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-yellow);
  box-shadow: -3px -3px 0px var(--cmy-cyan), 3px 3px 0px var(--cmy-magenta);
  padding: 1.5rem;
  margin-top: 1.75rem;
}

.booth-grid,
.verifier-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.photo-dropzone,
.webcam-stage,
.crowd-upload-box {
  background-color: var(--bg-black);
  border: 1.5px dashed var(--cmy-yellow);
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 220px;
}

.forensic-scan-matrix,
.forensic-results-card {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-strong);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.forensic-scan-matrix.verified,
.forensic-results-card.verified {
  border-color: var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-cyan);
}

.forensic-scan-matrix.rejected,
.forensic-results-card.rejected {
  border-color: var(--cmy-magenta);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
}

.headcount-badge,
.detected-people-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--cmy-cyan);
  color: var(--text-ink);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 900;
  padding: 0.35rem 0.75rem;
}

.recipient-slots-list,
.ballot-dispatch-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.recipient-row,
.dispatch-slot-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 0.55rem;
  align-items: center;
  background-color: var(--bg-black);
  border: 1px solid var(--border-strong);
  padding: 0.5rem;
}

/* --------------------------------------------------------------------------
   11. VIEW 3: PERSONAL AUDIENCE BALLOT STYLES (House-Party Guest)
   -------------------------------------------------------------------------- */
.audience-ballot-shell,
.guest-ballot-panel {
  max-width: 960px;
  margin: 0 auto;
}

.party-ticket-banner,
.token-verification-card {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-yellow);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#audience-token-card.is-collapsed {
  padding: 0.65rem 1.1rem;
}

.aud-filter-bar {
  background-color: var(--bg-black);
  border: 1px solid var(--border-strong);
  padding: 0.55rem 0.75rem;
}

.aud-progress-strip {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  padding: 0.65rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   12. VIEW 4: ADMIN COMMAND CENTER, OUTREACH & GCP COST CALCULATOR
   -------------------------------------------------------------------------- */
.kpi-grid,
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.kpi-card,
.stat-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--cmy-yellow);
  padding: 1rem 1.15rem;
}

.kpi-card.crimson,
.kpi-card.magenta,
.stat-card.crimson {
  border-left-color: var(--cmy-magenta);
}

.kpi-card.emerald,
.kpi-card.cyan,
.stat-card.emerald,
.stat-card.cyan {
  border-left-color: var(--cmy-cyan);
}

.kpi-value,
.stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.05;
  color: var(--text-white);
  margin: 0.25rem 0;
}

.kpi-label,
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Broken Submission Outreach Cards (Side-by-Side WHAT'S WRONG & HOW TO FIX IT) */
.admin-filter-strip {
  background-color: var(--bg-black);
  border: 1px solid var(--border-strong);
  padding: 0.55rem 0.85rem;
}

.outreach-list,
.broken-submissions-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.outreach-card,
.broken-submission-card {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-magenta);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.outreach-card.resolved {
  border-color: var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-cyan);
}

.outreach-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 0.65rem;
}

.diagnostic-split,
.outreach-diagnostic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
}

.whats-wrong-block,
.diagnostic-wrong {
  background-color: rgba(255, 0, 255, 0.07);
  border: 1px solid var(--cmy-magenta);
  padding: 0.65rem 0.8rem;
}

.whats-wrong-block h4,
.diagnostic-wrong h4 {
  color: var(--cmy-magenta);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
}

.how-to-fix-block,
.diagnostic-fix {
  background-color: rgba(0, 255, 255, 0.07);
  border: 1px solid var(--cmy-cyan);
  padding: 0.65rem 0.8rem;
}

.how-to-fix-block h4,
.diagnostic-fix h4 {
  color: var(--cmy-cyan);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
}

/* Visual Net Failure Score Bars & Rank Medals on Admin Leaderboard */
.rank-medal-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rank-medal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 900;
  border: 1px solid var(--cmy-yellow);
  background-color: var(--bg-black);
  color: var(--cmy-yellow);
  white-space: nowrap;
}

.rank-medal-pill.top-3 {
  background-color: var(--cmy-yellow);
  color: var(--text-ink);
  box-shadow: 2px 2px 0px var(--cmy-magenta);
}

.leaderboard-poster-swatch {
  width: 42px;
  height: 26px;
  border: 1px solid var(--border-strong);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.score-bar-track {
  width: 100%;
  min-width: 120px;
  height: 7px;
  background-color: var(--bg-black);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  margin: 0.3rem 0;
}

.score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cmy-cyan), var(--cmy-yellow));
  transition: width 220ms ease;
}

.score-bar-fill.negative,
.score-bar-fill.most-failed {
  background: linear-gradient(90deg, var(--cmy-magenta), var(--cmy-yellow));
}

/* GCP Global Low-Latency Architecture & Cost Calculator Panel */
.gcp-calculator-panel,
.gcp-architecture-card {
  background-color: var(--bg-obsidian);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-yellow);
  padding: 1.35rem;
  margin-bottom: 1.85rem;
}

.gcp-tier-grid,
.cost-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* Collated Votes & Google Sheet Join Table */
.table-responsive,
.table-container {
  width: 100%;
  overflow-x: auto;
  border: 1.5px solid var(--border-strong);
  background-color: var(--bg-obsidian);
  margin-bottom: 1.75rem;
}

table,
.admin-table,
.standings-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.86rem;
}

th {
  background-color: var(--bg-black);
  color: var(--cmy-yellow);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.75rem 0.9rem;
  border-bottom: 1.5px solid var(--cmy-yellow);
  white-space: nowrap;
}

td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

tbody tr:hover {
  background-color: rgba(0, 255, 255, 0.05);
}

/* Real-Time Terminal-Style Interaction & Telemetry Event Log Stream */
.telemetry-terminal,
.event-log-stream {
  background-color: var(--bg-black);
  border: 1.5px solid var(--cmy-cyan);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.log-entry,
.telemetry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}

.log-timestamp {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.log-type {
  color: var(--cmy-cyan);
  font-weight: 800;
}

.log-type.security,
.log-type.error {
  color: var(--cmy-magenta);
}

/* Toast Notifications */
.toast-container,
#toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: min(420px, 92vw);
}

.toast {
  background-color: var(--bg-black);
  color: var(--text-white);
  border: 1.5px solid var(--cmy-yellow);
  box-shadow: 3px 3px 0px var(--cmy-cyan);
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.toast.error {
  border-color: var(--cmy-magenta);
  box-shadow: 3px 3px 0px var(--cmy-magenta);
}

/* --------------------------------------------------------------------------
   13. Utility Classes, Accessibility Helpers & CMY Component Polish
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  background-color: var(--cmy-yellow);
  color: var(--bg-black);
  padding: 0.55rem 1rem;
  font-family: var(--font-mono);
  font-weight: 800;
  text-transform: uppercase;
  border: 2px solid var(--bg-black);
  transition: top var(--transition-fast);
}

.skip-link:focus-visible {
  top: 0.75rem;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hidden {
  display: none !important;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 { gap: 0.35rem; }
.gap-2 { gap: 0.65rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

.mt-1 { margin-top: 0.35rem; }
.mt-2 { margin-top: 0.65rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }

.mb-1 { margin-bottom: 0.35rem; }
.mb-2 { margin-bottom: 0.65rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.ml-2 { margin-left: 0.5rem; }
.pt-2 { padding-top: 0.65rem; }
.pt-3 { padding-top: 1rem; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.text-xs { font-size: 0.78rem; line-height: 1.45; }
.text-secondary { color: #D4D4D8; }
.text-muted { color: #D4D4D8; }
.text-cyan { color: var(--cmy-cyan); }
.text-magenta { color: var(--cmy-magenta); }
.text-yellow { color: var(--cmy-yellow); }
.text-green { color: var(--signal-emerald); }
.text-red { color: var(--cmy-magenta); }
.text-white { color: var(--text-white); }

.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 800; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.08em; }

.btn-xs {
  padding: 0.32rem 0.65rem;
  font-size: 0.72rem;
}

.badge-outline {
  border-color: var(--border-strong);
  color: var(--text-light);
  background-color: var(--bg-obsidian);
}

.cyan-border {
  border-color: var(--cmy-cyan) !important;
  box-shadow: 3px 3px 0px rgba(0, 255, 255, 0.25);
}

.magenta-border {
  border-color: var(--cmy-magenta) !important;
  box-shadow: 3px 3px 0px rgba(255, 0, 255, 0.25);
}

.yellow-border {
  border-color: var(--cmy-yellow) !important;
  box-shadow: 3px 3px 0px rgba(255, 255, 0, 0.25);
}

.ranking-col-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-strong);
}

.rank-slots-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.category-film-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.duration-pill {
  position: absolute;
  bottom: 0.45rem;
  right: 0.45rem;
  background-color: rgba(0, 0, 0, 0.88);
  color: var(--cmy-yellow);
  border: 1px solid var(--cmy-yellow);
  padding: 0.12rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. Desktop Browser & Mobile App Version Architecture
   - Modern Web Guidance (responsive-design): 100dvh & aspect-ratio: 16 / 9
   - Modern Web Guidance (size-aware-styling): container-type: inline-size & @container
   - Modern Web Guidance (responsive-table): @container card fallback with var(--label-n)
   -------------------------------------------------------------------------- */
body {
  min-height: 100dvh;
}

.video-stage,
.player-wrapper,
.docket-card-thumb,
.film-thumb {
  aspect-ratio: 16 / 9;
}

.video-stage[data-fit-mode="native"] {
  aspect-ratio: var(--film-aspect-ratio, 16 / 9);
}

/* Container Query Contexts (size-aware-styling: MANDATORY container-type) */
.app-shell {
  width: 100%;
  container-type: inline-size;
  container-name: workspace;
  overflow-x: clip;
}

.view-panel,
.zine-card,
.panel-card,
.zine-hero,
.netflix-hero,
.filmmaker-login-card,
.screening-room,
.player-booth,
.ranking-board {
  max-width: 100%;
  min-width: 0;
}

.table-responsive {
  container-type: inline-size;
  container-name: tablewrap;
}

/* Desktop / Mobile Version Switcher in Top Nav */
.device-mode-switcher {
  display: inline-flex;
  align-items: center;
  background-color: var(--bg-obsidian);
  border: 1px solid var(--border-strong);
  padding: 2px;
  gap: 2px;
}

.device-mode-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.device-mode-btn:hover {
  color: var(--text-white);
  border-color: var(--cmy-cyan);
}

.device-mode-btn.active {
  background-color: var(--cmy-cyan);
  color: var(--bg-black);
  border-color: var(--bg-black);
}

/* Sticky Mobile Bottom Navigation Bar (Hidden on Desktop Browser, Active & Full-Bleed on Mobile) */
#mobile-bottom-nav,
.mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  z-index: 1000;
  background: #000000;
  border-top: 2px solid #00FFFF;
  border-left: none;
  border-right: none;
  border-bottom: none;
  box-shadow: 0 -2px 0px var(--cmy-magenta);
  grid-template-columns: repeat(4, 1fr);
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
}

.mobile-nav-item {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.4rem 0.25rem;
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.mobile-nav-item .mobile-nav-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.mobile-nav-item.active {
  color: var(--bg-black);
  background-color: var(--cmy-yellow);
  border-color: var(--bg-black);
  box-shadow: 2px 2px 0px var(--cmy-magenta);
}

/* Interactive Mobile App Version Mode (when toggled on Desktop or loaded on Mobile) */
body[data-device-mode="mobile"] .app-shell,
body[data-device="mobile"] .app-shell {
  max-width: 430px;
  margin: 0 auto;
  padding: 0.85rem 0.75rem calc(96px + env(safe-area-inset-bottom, 0px));
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
  background-color: var(--bg-black);
}

body[data-device-mode="mobile"] .view-panel,
body[data-device="mobile"] .view-panel {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

body[data-device-mode="mobile"] #mobile-bottom-nav,
body[data-device-mode="mobile"] .mobile-bottom-nav,
body[data-device="mobile"] #mobile-bottom-nav,
body[data-device="mobile"] .mobile-bottom-nav {
  display: grid;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: #000000;
  border-top: 2px solid #00FFFF;
  border-left: none;
  border-right: none;
  border-bottom: none;
  z-index: 1000;
}

body[data-device-mode="mobile"] .hero-title,
body[data-device-mode="mobile"] .netflix-hero-title,
body[data-device="mobile"] .hero-title,
body[data-device="mobile"] .netflix-hero-title {
  text-shadow: -1px -1px 0 #00FFFF, 1px 1px 0 #FF00FF;
  line-height: 1.08;
}

body[data-device-mode="mobile"] .pass-status-banner,
body[data-device-mode="mobile"] .ballot-credentials-pill,
body[data-device="mobile"] .pass-status-banner,
body[data-device="mobile"] .ballot-credentials-pill {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  padding: 4px 8px;
}

body[data-device-mode="mobile"] .kpi-grid,
body[data-device-mode="mobile"] .admin-kpi-grid,
body[data-device-mode="mobile"] #admin-kpi-grid,
body[data-device-mode="mobile"] #view-admin .kpi-grid,
body[data-device="mobile"] .kpi-grid,
body[data-device="mobile"] .admin-kpi-grid,
body[data-device="mobile"] #admin-kpi-grid,
body[data-device="mobile"] #view-admin .kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
  margin-bottom: 0.85rem !important;
}

body[data-device-mode="mobile"] .kpi-card,
body[data-device="mobile"] .kpi-card {
  padding: 0.65rem 0.75rem !important;
}

body[data-device-mode="mobile"] .kpi-card:last-child,
body[data-device="mobile"] .kpi-card:last-child {
  grid-column: 1 / -1;
}

body[data-device-mode="mobile"] .kpi-value,
body[data-device="mobile"] .kpi-value {
  font-size: 1.35rem !important;
}

/* Container-Based Component Adaptation (@container workspace) */
@container workspace (max-width: 820px) {
  .screening-room,
  .player-booth,
  .ranking-board,
  .dual-ranking-grid,
  .ballot-columns,
  .host-controls-grid,
  .screening-mode-switcher,
  .booth-grid,
  .verifier-layout,
  .diagnostic-split,
  .outreach-diagnostic-grid,
  .login-form-row,
  .grid-2,
  .grid-3,
  .gcp-tier-grid {
    grid-template-columns: 1fr !important;
  }

  .kpi-grid,
  .admin-kpi-grid,
  #admin-kpi-grid,
  #view-admin .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .kpi-card {
    padding: 0.65rem 0.75rem !important;
  }

  .kpi-card:last-child {
    grid-column: 1 / -1;
  }

  .zine-hero,
  .netflix-hero {
    padding: 1.15rem 0.95rem;
  }

  .zine-hero::after {
    display: none;
  }

  .hero-title,
  .netflix-hero-title {
    font-size: clamp(1.45rem, 6vw, 2rem);
    text-shadow: -1px -1px 0 #00FFFF, 1px 1px 0 #FF00FF;
    line-height: 1.08;
  }

  .pass-status-banner,
  .ballot-credentials-pill {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    padding: 4px 8px;
  }

  .docket-grid,
  .films-grid,
  .category-nomination-grid,
  .categories-grid,
  .playlist-selector-grid,
  .curated-playlists-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .rank-slot,
  .recipient-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .btn {
    min-height: 44px;
  }
}

/* Responsive Data Table Card Transformation (@container tablewrap < 680px) */
@container tablewrap (max-width: 680px) {
  .standings-table thead {
    display: none;
  }

  .standings-table,
  .standings-table tbody,
  .standings-table tr,
  .standings-table td {
    display: block;
    width: 100%;
  }

  .standings-table tr {
    margin-bottom: 0.85rem;
    border: 1px solid var(--cmy-cyan);
    background-color: var(--bg-obsidian);
    padding: 0.5rem 0.75rem;
    box-shadow: 2px 2px 0px var(--cmy-magenta);
  }

  .standings-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    text-align: right;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border-subtle);
  }

  .standings-table td:last-child {
    border-bottom: none;
  }

  .standings-table td::before {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--cmy-yellow);
    text-align: left;
    flex-shrink: 0;
  }

  .standings-table td:nth-child(1)::before { content: var(--label-1, "Col 1") ": "; }
  .standings-table td:nth-child(2)::before { content: var(--label-2, "Col 2") ": "; }
  .standings-table td:nth-child(3)::before { content: var(--label-3, "Col 3") ": "; }
  .standings-table td:nth-child(4)::before { content: var(--label-4, "Col 4") ": "; }
  .standings-table td:nth-child(5)::before { content: var(--label-5, "Col 5") ": "; }
  .standings-table td:nth-child(6)::before { content: var(--label-6, "Col 6") ": "; }
  .standings-table td:nth-child(7)::before { content: var(--label-7, "Col 7") ": "; }
  .standings-table td:nth-child(8)::before { content: var(--label-8, "Col 8") ": "; }
  .standings-table td:nth-child(9)::before { content: var(--label-9, "Col 9") ": "; }
}

/* Native Mobile Viewport (@media max-width: 768px) */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .app-shell,
  body[data-device-mode="mobile"] .app-shell,
  body[data-device="mobile"] .app-shell {
    max-width: 100%;
    margin: 0;
    padding: 0.85rem 0.75rem calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .view-panel {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .hero-title,
  .netflix-hero-title {
    text-shadow: -1px -1px 0 #00FFFF, 1px 1px 0 #FF00FF;
    line-height: 1.08;
  }

  .pass-status-banner,
  .ballot-credentials-pill {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: 100%;
    padding: 4px 8px;
  }

  .nav-tabs,
  .pulse-badge,
  .zine-hero::after,
  .device-mode-switcher,
  #nav-route-experience-pill,
  #nav-experience-lock-banner,
  .experience-lock-banner,
  .brand-sub {
    display: none !important;
  }

  #mobile-bottom-nav,
  .mobile-bottom-nav {
    display: grid;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    background: #000000;
    border-top: 2px solid #00FFFF;
    border-left: none;
    border-right: none;
    border-bottom: none;
    z-index: 1000;
  }

  .nav-inner,
  .header-inner {
    padding: 0.42rem 0.65rem;
    gap: 0.35rem;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .nav-utilities,
  .header-actions {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }

  .brand-title {
    font-size: 0.92rem;
    white-space: nowrap;
  }

  .lang-switcher select {
    max-width: 108px;
    font-size: 0.68rem;
    padding: 0.2rem 0.35rem;
  }
}

@media (max-width: 680px) {
  .kpi-grid,
  .admin-kpi-grid,
  #admin-kpi-grid,
  #view-admin .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
    margin-bottom: 0.85rem !important;
  }

  .kpi-card {
    padding: 0.65rem 0.75rem !important;
  }

  .kpi-card:last-child {
    grid-column: 1 / -1;
  }

  .kpi-value {
    font-size: 1.35rem !important;
  }
}

@media (max-width: 900px) {
  .screening-room,
  .player-booth,
  .ranking-board,
  .dual-ranking-grid,
  .ballot-columns,
  .host-controls-grid,
  .screening-mode-switcher,
  .booth-grid,
  .verifier-layout,
  .diagnostic-split,
  .outreach-diagnostic-grid,
  .login-form-row,
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .nav-inner,
  .header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .rank-slot,
  .recipient-row {
    grid-template-columns: 1fr;
  }

  .btn {
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   15. Iteration 8 Reliability & Mobile Usability Hardening
   - Truthful DESKTOP / MOBILE device-mode button state
   - Compact mobile hierarchy (390x844 & 320px) so active task is above the fold
   - Toast & safe-area placement above .mobile-bottom-nav (never blocks nav)
   - Session expiry recovery banner & player state badge
   - Keyboard :focus-visible outlines & long-translation (DE/ES) word wrapping
   -------------------------------------------------------------------------- */
.session-recovery-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.45rem;
  background-color: rgba(255, 0, 255, 0.14);
  border: 2px solid var(--cmy-magenta);
  box-shadow: 3px 3px 0px var(--cmy-yellow);
  color: var(--text-white);
}

/* Keyboard :focus-visible high-contrast brutalist focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cmy-yellow) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.35) !important;
}

/* Long translation (DE/ES/FR/PT) overflow resilience */
.hero-title,
.netflix-hero-title,
.zine-card h2,
.zine-card h3,
.nav-tab,
.mobile-nav-item,
.mobile-nav-btn,
.btn,
.badge {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Truthful Device-Mode Switcher State synced to body[data-device-mode] */
body[data-device-mode="mobile"] #btn-device-mobile,
body[data-device="mobile"] #btn-device-mobile {
  background-color: var(--cmy-cyan) !important;
  color: var(--bg-black) !important;
  border-color: var(--bg-black) !important;
  box-shadow: 2px 2px 0px var(--cmy-magenta) !important;
}

body[data-device-mode="mobile"] #btn-device-desktop,
body[data-device="mobile"] #btn-device-desktop {
  background-color: transparent !important;
  color: var(--text-muted) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-device-mode="desktop"] #btn-device-desktop,
body[data-device="desktop"] #btn-device-desktop {
  background-color: var(--cmy-cyan) !important;
  color: var(--bg-black) !important;
  border-color: var(--bg-black) !important;
}

body[data-device-mode="desktop"] #btn-device-mobile,
body[data-device="desktop"] #btn-device-mobile {
  background-color: transparent !important;
  color: var(--text-muted) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Mobile Hierarchy Compaction & Toast Safe-Area Clearance (body[data-device-mode="mobile"]) */
body[data-device-mode="mobile"] .top-nav .nav-inner,
body[data-device="mobile"] .top-nav .nav-inner {
  padding: 0.32rem 0.6rem !important;
  gap: 0.25rem 0.4rem !important;
}

body[data-device-mode="mobile"] .brand-stamp,
body[data-device="mobile"] .brand-stamp {
  padding: 0.14rem 0.4rem !important;
  font-size: 0.85rem !important;
  box-shadow: 2px 2px 0px var(--cmy-magenta) !important;
}

body[data-device-mode="mobile"] .brand-main,
body[data-device="mobile"] .brand-main {
  font-size: 0.76rem !important;
  line-height: 1.05 !important;
}

body[data-device-mode="mobile"] .brand-sub,
body[data-device="mobile"] .brand-sub {
  display: block !important;
  font-size: 0.58rem !important;
  line-height: 1.15 !important;
}

body[data-device-mode="mobile"] .nav-tabs,
body[data-device="mobile"] .nav-tabs,
body[data-device-mode="mobile"] .pulse-badge,
body[data-device="mobile"] .pulse-badge {
  display: none !important;
}

body[data-device-mode="mobile"] .nav-utilities,
body[data-device="mobile"] .nav-utilities {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  width: auto !important;
  margin-left: auto !important;
}

body[data-device-mode="mobile"] .device-mode-btn,
body[data-device="mobile"] .device-mode-btn {
  padding: 0.18rem 0.42rem !important;
  font-size: 0.64rem !important;
  min-height: 26px !important;
}

body[data-device-mode="mobile"] #lang-select,
body[data-device="mobile"] #lang-select {
  padding: 0.16rem 1.3rem 0.16rem 0.38rem !important;
  font-size: 0.66rem !important;
  min-height: 26px !important;
  max-width: 132px !important;
}

body[data-device-mode="mobile"] .app-shell,
body[data-device="mobile"] .app-shell {
  padding: 0.42rem 0.55rem calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

body[data-device-mode="mobile"] .zine-hero,
body[data-device="mobile"] .zine-hero {
  padding: 0.42rem 0.6rem !important;
  margin-bottom: 0.4rem !important;
  box-shadow: 2px 2px 0px var(--cmy-magenta) !important;
}

body[data-device-mode="mobile"] .zine-hero .hero-kicker,
body[data-device="mobile"] .zine-hero .hero-kicker {
  font-size: 0.58rem !important;
  padding: 0.08rem 0.32rem !important;
  margin-bottom: 0.16rem !important;
}

body[data-device-mode="mobile"] .zine-hero .hero-title,
body[data-device="mobile"] .zine-hero .hero-title {
  font-size: clamp(0.98rem, 4.2vw, 1.16rem) !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

body[data-device-mode="mobile"] .zine-hero .hero-motto,
body[data-device="mobile"] .zine-hero .hero-motto {
  display: none !important;
}

body[data-device-mode="mobile"] .zine-hero p.text-secondary,
body[data-device="mobile"] .zine-hero p.text-secondary {
  font-size: 0.68rem !important;
  line-height: 1.22 !important;
  margin-top: 0.15rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body[data-device-mode="mobile"] .filmmaker-login-card,
body[data-device="mobile"] .filmmaker-login-card,
body[data-device-mode="mobile"] #host-pass-bar,
body[data-device="mobile"] #host-pass-bar,
body[data-device-mode="mobile"] #admin-auth-bar,
body[data-device="mobile"] #admin-auth-bar {
  padding: 0.38rem 0.55rem !important;
  margin-bottom: 0.38rem !important;
}

body[data-device-mode="mobile"] #fm-compact-session-label,
body[data-device="mobile"] #fm-compact-session-label {
  font-size: 0.64rem !important;
  line-height: 1.18 !important;
}

body[data-device-mode="mobile"] #fm-toggle-auth-drawer-btn,
body[data-device="mobile"] #fm-toggle-auth-drawer-btn,
body[data-device-mode="mobile"] #host-toggle-pass-drawer-btn,
body[data-device="mobile"] #host-toggle-pass-drawer-btn {
  min-height: 26px !important;
  padding: 0.16rem 0.42rem !important;
  font-size: 0.6rem !important;
}

body[data-device-mode="mobile"] #fm-docket-status-bar,
body[data-device="mobile"] #fm-docket-status-bar {
  padding: 0.38rem 0.55rem !important;
  margin-bottom: 0.4rem !important;
  gap: 0.3rem !important;
}

body[data-device-mode="mobile"] #fm-docket-status-bar p.text-secondary,
body[data-device="mobile"] #fm-docket-status-bar p.text-secondary {
  display: none !important;
}

body[data-device-mode="mobile"] #fm-own-film-pill,
body[data-device="mobile"] #fm-own-film-pill {
  font-size: 0.58rem !important;
  padding: 0.14rem 0.36rem !important;
  line-height: 1.18 !important;
}

body[data-device-mode="mobile"] #fm-docket-status-bar .btn,
body[data-device="mobile"] #fm-docket-status-bar .btn {
  min-height: 30px !important;
  padding: 0.2rem 0.45rem !important;
  font-size: 0.64rem !important;
}

body[data-device-mode="mobile"] .netflix-hero,
body[data-device="mobile"] .netflix-hero {
  padding: 0.5rem 0.6rem !important;
  margin-bottom: 0.45rem !important;
}

body[data-device-mode="mobile"] .netflix-hero-title,
body[data-device="mobile"] .netflix-hero-title {
  font-size: 1.12rem !important;
  margin: 0.15rem 0 !important;
}

body[data-device-mode="mobile"] .netflix-hero p.text-secondary,
body[data-device="mobile"] .netflix-hero p.text-secondary {
  font-size: 0.68rem !important;
  line-height: 1.22 !important;
  margin: 0.15rem 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body[data-device-mode="mobile"] .netflix-hero .failure-confession-box,
body[data-device="mobile"] .netflix-hero .failure-confession-box {
  padding: 0.25rem 0.45rem !important;
  font-size: 0.64rem !important;
  margin-top: 0.2rem !important;
}

body[data-device-mode="mobile"] .netflix-hero-actions,
body[data-device="mobile"] .netflix-hero-actions {
  margin-top: 0.35rem !important;
  gap: 0.3rem !important;
}

body[data-device-mode="mobile"] .netflix-hero-actions .btn,
body[data-device="mobile"] .netflix-hero-actions .btn {
  min-height: 32px !important;
  padding: 0.22rem 0.48rem !important;
  font-size: 0.64rem !important;
}

body[data-device-mode="mobile"] #toast-container,
body[data-device="mobile"] #toast-container,
body[data-device-mode="mobile"] .toast-container,
body[data-device="mobile"] .toast-container {
  bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  max-width: calc(100vw - 1rem) !important;
  z-index: 9995 !important;
  pointer-events: none !important;
  gap: 0.35rem !important;
}

body[data-device-mode="mobile"] #toast-container .toast,
body[data-device="mobile"] #toast-container .toast {
  pointer-events: auto !important;
  padding: 0.42rem 0.65rem !important;
  font-size: 0.72rem !important;
  line-height: 1.22 !important;
  box-shadow: 2px 2px 0px var(--cmy-cyan) !important;
}

body[data-device-mode="mobile"] #mobile-bottom-nav,
body[data-device="mobile"] #mobile-bottom-nav,
body[data-device-mode="mobile"] .mobile-bottom-nav,
body[data-device="mobile"] .mobile-bottom-nav {
  z-index: 9998 !important;
}

@media (max-width: 840px) {
  .top-nav .nav-inner {
    padding: 0.32rem 0.6rem !important;
    gap: 0.25rem 0.4rem !important;
  }

  .brand-stamp {
    padding: 0.14rem 0.4rem !important;
    font-size: 0.85rem !important;
    box-shadow: 2px 2px 0px var(--cmy-magenta) !important;
  }

  .brand-main {
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
  }

  .brand-sub {
    display: block !important;
    font-size: 0.58rem !important;
    line-height: 1.15 !important;
  }

  .nav-tabs,
  .pulse-badge {
    display: none !important;
  }

  .nav-utilities {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    width: auto !important;
    margin-left: auto !important;
  }

  .device-mode-btn {
    padding: 0.18rem 0.42rem !important;
    font-size: 0.64rem !important;
    min-height: 26px !important;
  }

  #lang-select {
    padding: 0.16rem 1.3rem 0.16rem 0.38rem !important;
    font-size: 0.66rem !important;
    min-height: 26px !important;
    max-width: 132px !important;
  }

  .app-shell {
    padding: 0.42rem 0.55rem calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .zine-hero {
    padding: 0.42rem 0.6rem !important;
    margin-bottom: 0.4rem !important;
    box-shadow: 2px 2px 0px var(--cmy-magenta) !important;
  }

  .zine-hero .hero-kicker {
    font-size: 0.58rem !important;
    padding: 0.08rem 0.32rem !important;
    margin-bottom: 0.16rem !important;
  }

  .zine-hero .hero-title {
    font-size: clamp(0.98rem, 4.2vw, 1.16rem) !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  .zine-hero .hero-motto {
    display: none !important;
  }

  .zine-hero p.text-secondary {
    font-size: 0.68rem !important;
    line-height: 1.22 !important;
    margin-top: 0.15rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .filmmaker-login-card,
  #host-pass-bar,
  #admin-auth-bar {
    padding: 0.38rem 0.55rem !important;
    margin-bottom: 0.38rem !important;
  }

  #fm-compact-session-label {
    font-size: 0.64rem !important;
    line-height: 1.18 !important;
  }

  #fm-toggle-auth-drawer-btn,
  #host-toggle-pass-drawer-btn {
    min-height: 26px !important;
    padding: 0.16rem 0.42rem !important;
    font-size: 0.6rem !important;
  }

  #fm-docket-status-bar {
    padding: 0.38rem 0.55rem !important;
    margin-bottom: 0.4rem !important;
    gap: 0.3rem !important;
  }

  #fm-docket-status-bar p.text-secondary {
    display: none !important;
  }

  #fm-own-film-pill {
    font-size: 0.58rem !important;
    padding: 0.14rem 0.36rem !important;
    line-height: 1.18 !important;
  }

  #fm-docket-status-bar .btn {
    min-height: 30px !important;
    padding: 0.2rem 0.45rem !important;
    font-size: 0.64rem !important;
  }

  .netflix-hero {
    padding: 0.5rem 0.6rem !important;
    margin-bottom: 0.45rem !important;
  }

  .netflix-hero-title {
    font-size: 1.12rem !important;
    margin: 0.15rem 0 !important;
  }

  .netflix-hero p.text-secondary {
    font-size: 0.68rem !important;
    line-height: 1.22 !important;
    margin: 0.15rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .netflix-hero .failure-confession-box {
    padding: 0.25rem 0.45rem !important;
    font-size: 0.64rem !important;
    margin-top: 0.2rem !important;
  }

  .netflix-hero-actions {
    margin-top: 0.35rem !important;
    gap: 0.3rem !important;
  }

  .netflix-hero-actions .btn {
    min-height: 32px !important;
    padding: 0.22rem 0.48rem !important;
    font-size: 0.64rem !important;
  }

  #toast-container,
  .toast-container {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
    z-index: 9995 !important;
    pointer-events: none !important;
    gap: 0.35rem !important;
  }

  #toast-container .toast,
  .toast-container .toast {
    pointer-events: auto !important;
    padding: 0.42rem 0.65rem !important;
    font-size: 0.72rem !important;
    line-height: 1.22 !important;
    box-shadow: 2px 2px 0px var(--cmy-cyan) !important;
  }

  #mobile-bottom-nav,
  .mobile-bottom-nav {
    z-index: 9998 !important;
  }
}

/* Narrow 320px Viewport Hardening */
@media (max-width: 360px) {
  .top-nav .nav-inner {
    padding: 0.28rem 0.4rem !important;
    gap: 0.2rem !important;
  }

  .brand-stamp {
    font-size: 0.76rem !important;
    padding: 0.12rem 0.3rem !important;
  }

  .brand-main {
    font-size: 0.68rem !important;
  }

  .cmy-marks {
    display: none !important;
  }

  .device-mode-btn {
    padding: 0.14rem 0.32rem !important;
    font-size: 0.58rem !important;
  }

  #lang-select {
    max-width: 108px !important;
    font-size: 0.6rem !important;
    padding: 0.14rem 1.1rem 0.14rem 0.3rem !important;
  }

  .app-shell {
    padding: 0.35rem 0.4rem calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #host-passcode-input {
    width: 100% !important;
  }

  .mobile-nav-item,
  .mobile-nav-btn {
    padding: 0.28rem 0.12rem !important;
    font-size: 0.56rem !important;
    min-height: 44px !important;
  }
}

/* ============================================================================
   Iteration 9: Truthful Intake Sync Telemetry & Honest Media Audit Strip
   ============================================================================ */
.intake-sync-panel {
  background: #0a0a0f;
  border: 2px solid var(--cmy-cyan);
  padding: 0.65rem 0.85rem;
  box-shadow: 3px 3px 0px rgba(0, 240, 255, 0.22);
}

.intake-sync-panel.is-stale-sync {
  border-color: var(--cmy-magenta);
  box-shadow: 3px 3px 0px rgba(255, 0, 85, 0.35);
}

.intake-sync-panel.is-partial-sync {
  border-color: var(--cmy-yellow);
  box-shadow: 3px 3px 0px rgba(250, 204, 21, 0.3);
}

.intake-scenario-select {
  width: auto;
  min-width: 240px;
  max-width: 340px;
  padding: 0.26rem 0.55rem;
  font-size: 0.72rem;
  height: 30px;
}

.intake-sync-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.intake-meta-cell {
  background: #111119;
  border: 1px solid #272736;
  padding: 0.35rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.intake-meta-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intake-meta-val {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-word;
}

.intake-sync-alert {
  background: rgba(255, 0, 85, 0.1);
  border: 1.5px solid var(--cmy-magenta);
  padding: 0.55rem 0.75rem;
  font-size: 0.76rem;
  line-height: 1.35;
}

.intake-sync-alert.warning-mode {
  background: rgba(250, 204, 21, 0.09);
  border-color: var(--cmy-yellow);
}

.intake-sync-alert.healthy-mode {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--cmy-cyan);
}

@media (max-width: 840px) {
  #view-admin #admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    margin-bottom: 0.4rem !important;
  }

  #view-admin .kpi-card {
    padding: 0.3rem 0.4rem !important;
  }

  #view-admin .kpi-value {
    font-size: 0.95rem !important;
  }

  #view-admin .kpi-label {
    font-size: 0.56rem !important;
    line-height: 1.1 !important;
  }

  .intake-sync-panel {
    padding: 0.45rem 0.55rem !important;
  }

  .intake-sync-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
  }

  .intake-scenario-select {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   ITERATION 10: STRICTLY SEPARATED APP EXPERIENCES (ZERO CROSS-APP SWITCHING)
   - Individual Ballot & Screening Room (/fff/watch)
   - Watch-Party Host App (/fff/party)
   - Watch-Party Guest Quick-Vote (/fff/guest)
   - PHAC Admin Command Center (/fff/admin)
   ========================================================================== */
body[data-app-experience] .nav-tabs,
body[data-app-experience] .mobile-bottom-nav {
  display: none !important;
}

body[data-app-experience] #nav-experience-lock-banner {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
}

body[data-app-experience][data-device-mode="mobile"] .app-shell {
  padding-bottom: 1.5rem !important;
}

body[data-app-experience][data-device-mode="mobile"] #toast-container {
  bottom: 1rem !important;
}

/* ==========================================================================
   ITERATION 10 DESIGN SYSTEM UPGRADE:
   "80% NETFLIX CINEMA, 20% CHARMING PRINT ZINE"
   ========================================================================== */

/* 1. 80% Netflix Cinema Restraint on Standard Surfaces & Containers */
.zine-card,
.docket-section,
.queue-drawer,
.crowd-photo-booth,
.intake-sync-panel,
.admin-section-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(20, 20, 28, 0.94) 0%, rgba(12, 12, 18, 0.98) 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* Reserve bold 2px CMY offsets & risograph glow for active/selected cards, primary CTAs, and physical zine stamps */
.docket-card.active,
.docket-card.ranked-top,
.docket-card.ranked-bottom,
.mode-card.active,
.btn-cyan,
.btn-magenta,
.btn-yellow,
.ballot-receipt {
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.16s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.16s ease;
}

/* 2. Unified "Failure Spectrum" Stack-Rank Ladder (Portals 01 & 03) */
.ranking-board.failure-spectrum-ladder,
.failure-spectrum-ladder {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 1.25rem;
  max-width: 960px;
  margin: 1.5rem auto 0;
}

.spectrum-zone {
  padding: 1.25rem;
  border-radius: 6px;
  position: relative;
}

.spectrum-zone-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spectrum-zone-top {
  background: linear-gradient(180deg, rgba(255, 0, 160, 0.08) 0%, rgba(14, 14, 19, 0.95) 100%) !important;
  border: 1px solid rgba(255, 0, 160, 0.45) !important;
  box-shadow: 0 4px 20px rgba(255, 0, 160, 0.08);
}

.spectrum-zone-buffer {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px dashed rgba(255, 255, 255, 0.2) !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}

.spectrum-zone-bottom {
  background: linear-gradient(180deg, rgba(14, 14, 19, 0.95) 0%, rgba(0, 240, 255, 0.08) 100%) !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.08);
}

.spectrum-buffer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-height: 52px;
  align-items: center;
}

.spectrum-buffer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: rgba(10, 10, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.spectrum-buffer-chip:hover {
  border-color: var(--cmy-yellow);
  transform: translateY(-1px);
}

.spectrum-buffer-chip .buffer-chip-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* 3. Category Award Cards as Risograph Award Seals */
.category-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle at top right, rgba(255, 234, 0, 0.06), rgba(17, 17, 26, 0.98) 70%);
  padding: 1.15rem;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.category-card.has-nominee {
  border-color: rgba(255, 230, 0, 0.55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.award-nominee-showcase {
  margin-bottom: 0.75rem;
}

.award-nominee-locked-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 230, 0, 0.08);
  border: 1px solid rgba(255, 230, 0, 0.45);
  border-radius: 6px;
}

.award-nominee-empty-banner {
  padding: 0.45rem 0.65rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}

.award-nominee-thumb,
.rank-slot-thumb {
  width: 44px;
  height: 26px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}

.award-nominee-stamp {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--cmy-yellow);
  color: #050507;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 2px 2px 0 var(--cmy-magenta);
  white-space: nowrap;
}

.category-film-select-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.4rem;
}

.category-pill {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  background: #171722;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-pill:hover {
  border-color: rgba(255, 230, 0, 0.5);
  color: var(--text-primary);
  background: #1E1E2C;
}

.category-pill.selected,
.cat-film-pill.selected,
.cat-film-pill[aria-pressed="true"] {
  background: var(--cmy-yellow) !important;
  color: #050507 !important;
  font-weight: 800 !important;
  border-color: #050507 !important;
  box-shadow: 2px 2px 0 var(--cmy-magenta) !important;
}

/* 4. Perforated Ticket-Stub Ballot Receipts */
.ballot-receipt {
  position: relative;
  border: 2px solid var(--cmy-cyan) !important;
  border-top: 2px dashed rgba(0, 240, 255, 0.55) !important;
  background:
    radial-gradient(circle at 0 50%, #07070a 11px, transparent 12px),
    radial-gradient(circle at 100% 50%, #07070a 11px, transparent 12px),
    linear-gradient(135deg, rgba(0, 240, 255, 0.09) 0%, rgba(255, 0, 160, 0.06) 100%) !important;
  padding: 1.25rem 1.65rem !important;
  border-radius: 6px;
  box-shadow: 4px 4px 0 rgba(255, 0, 160, 0.45);
}

.ballot-receipt .badge-green,
.ballot-receipt .receipt-rubber-stamp {
  display: inline-block;
  transform: rotate(-2deg);
  border: 2px solid var(--accent-green) !important;
  padding: 0.2rem 0.6rem !important;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 rgba(0, 230, 118, 0.25);
}

/* 5. Portal 02 Segmented Mode Switcher */
#host-screening-mode-controls,
.screening-mode-switcher {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
  background: #08080c !important;
  padding: 0.4rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-strong) !important;
}

#host-screening-mode-controls .mode-card,
.screening-mode-switcher .mode-card {
  padding: 0.65rem 0.85rem !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 26, 0.85);
}

#host-screening-mode-controls .mode-card.active,
.screening-mode-switcher .mode-card.active {
  border-color: var(--cmy-cyan) !important;
  background: rgba(0, 240, 255, 0.1) !important;
  box-shadow: 2px 2px 0 var(--cmy-magenta) !important;
}

#host-screening-mode-controls .mode-card-desc,
.screening-mode-switcher .mode-card-desc {
  font-size: 0.72rem !important;
  opacity: 0.8 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 6. 10-Foot Living-Room TV QR Projection Modal */
#tv-qr-modal {
  max-width: 780px !important;
  width: min(94vw, 780px) !important;
  background: radial-gradient(circle at top, #141422 0%, #07070b 100%) !important;
  border: 2px solid var(--cmy-cyan) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 240, 255, 0.2) !important;
}

#tv-qr-svg-container {
  min-width: 260px !important;
  min-height: 260px !important;
  max-width: 320px !important;
  padding: 1.25rem !important;
  background: #ffffff !important;
  border: 4px solid var(--cmy-cyan) !important;
  box-shadow: 6px 6px 0 var(--cmy-magenta) !important;
  border-radius: 8px !important;
  margin: 1rem auto !important;
}

#tv-qr-svg-container svg {
  width: 240px !important;
  height: 240px !important;
  display: block;
}

/* 7. Collapsible <details class="qa-drawer"> */
details.qa-drawer {
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.45rem 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

details.qa-drawer > summary {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  color: var(--text-secondary);
  list-style-position: inside;
}

details.qa-drawer > summary:hover {
  color: var(--cmy-cyan);
}

details.qa-drawer[open] > summary {
  margin-bottom: 0.45rem;
  color: var(--cmy-yellow);
}

.intake-compact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cmy-cyan);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.4);
  width: fit-content;
}

/* 8. Admin Crowd Photo Review Queue Visual Thumbnail Cards */
.crowd-review-card,
#admin-host-screenings-review-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0.75rem 1rem !important;
  background: rgba(10, 10, 16, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px;
}

.crowd-review-thumb {
  width: 96px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid var(--cmy-cyan);
  background: #09090f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* 9. Admin Broken-Link Outreach Cards Scannability */
.outreach-card {
  padding: 0.85rem 1rem !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(14, 14, 20, 0.95) !important;
  margin-bottom: 0.65rem;
}

.outreach-card .outreach-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.outreach-card .diagnostic-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.outreach-card .whats-wrong-block,
.outreach-card .how-to-fix-block {
  padding: 0.5rem 0.65rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 840px) {
  #host-screening-mode-controls,
  .screening-mode-switcher {
    grid-template-columns: 1fr !important;
  }
}

/* 10. Sub-Element Polish: Tones, Ticket Stubs, Crowd Photo Previews, Toast & Noise */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.75px, transparent 0.75px);
  background-size: 6px 6px;
}

.badge-cyan-tone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.14);
  border: 1px solid var(--cmy-cyan);
  color: var(--cmy-cyan);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.badge-magenta-tone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 0, 127, 0.14);
  border: 1px solid var(--cmy-magenta);
  color: var(--cmy-magenta);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.badge-neutral-tone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: #1B1B28;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #B4B4C6;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}

.spectrum-buffer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: #151520;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.ticket-stub-receipt {
  border-left: 5px dashed var(--cmy-cyan) !important;
}

.ticket-stub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}

.ticket-stub-cell {
  padding: 0.55rem 0.75rem;
  background: rgba(10, 10, 16, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
}

.ticket-stub-cell.stub-cyan {
  border-left: 3px solid var(--cmy-cyan);
}

.ticket-stub-cell.stub-magenta {
  border-left: 3px solid var(--cmy-magenta);
}

.kpi-sub-badge {
  display: block;
  margin-top: 0.18rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.intake-compact-pill.is-stale {
  color: #FF5277;
  background: rgba(255, 0, 85, 0.12);
  border-color: rgba(255, 0, 85, 0.45);
}

.intake-compact-pill.is-warn {
  color: var(--cmy-yellow);
  background: rgba(255, 230, 0, 0.12);
  border-color: rgba(255, 230, 0, 0.45);
}

.intake-compact-pill.is-healthy {
  color: #00E676;
  background: rgba(0, 230, 118, 0.1);
  border-color: rgba(0, 230, 118, 0.4);
}

.outreach-resolved-details {
  border-top: 1px dashed rgba(0, 230, 118, 0.25);
  padding-top: 0.4rem;
}

.outreach-resolved-summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #00E676;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.crowd-photo-thumb-preview {
  width: 120px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--cmy-cyan);
  background: #08080E;
  flex-shrink: 0;
  box-shadow: 2px 2px 0 rgba(255, 0, 127, 0.35);
}

@media (min-width: 841px) {
  #toast-container {
    top: 72px !important;
    right: 20px !important;
    bottom: auto !important;
  }
}

/* Single-row Failure Spectrum Rungs & Wide 2/3-Col Key Award Trading Cards */
.failure-spectrum-ladder .rank-slot-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0.75rem !important;
  padding: 0.48rem 0.85rem !important;
}

.failure-spectrum-ladder .rank-slot-row .rank-slot-info {
  flex: 1 1 auto !important;
  text-align: left !important;
  min-width: 0 !important;
}

.failure-spectrum-ladder .rank-slot-row .rank-slot-title {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-white);
}

.failure-spectrum-ladder .rank-slot-row .rank-slot-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.award-nominee-showcase.is-locked {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  margin-top: 0.45rem;
  background: rgba(255, 230, 0, 0.08);
  border: 1px solid rgba(255, 230, 0, 0.45);
  border-radius: 6px;
}

.award-nominee-showcase.is-locked .award-nominee-thumb {
  width: 64px;
  height: 36px;
}

.award-nominee-showcase.is-locked .award-nominee-title {
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--text-white);
  margin-top: 0.18rem;
}

.award-nominee-showcase.is-locked .award-nominee-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
}

#fm-category-grid,
#aud-category-grid,
.category-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important;
  gap: 1rem !important;
}

.status-banner:not(.hidden) {
  display: flex;
}
.status-banner.hidden {
  display: none !important;
}
.video-stage[data-fit-mode="fit"] video,
.video-stage[data-fit-mode="native"] video {
  object-fit: contain;
}
.video-stage[data-fit-mode="fill"] video {
  object-fit: cover;
}
.video-stage[data-fit-mode="pixel"] video {
  object-fit: scale-down;
}

.category-film-select-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.35rem !important;
}

/* =========================================================================
   ITERATION 11 (v2.1): ZINE SCRAPBOOK POLAROID GALLERY & VISUAL QA POLISH
   ========================================================================= */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.zine-scrapbook-card {
  background: linear-gradient(145deg, rgba(16, 18, 26, 0.96), rgba(10, 11, 16, 0.98));
  border: 2px dashed rgba(0, 229, 255, 0.55);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  box-shadow: 4px 4px 0 rgba(255, 42, 133, 0.25);
  position: relative;
}

.zine-scrapbook-card h4 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0.35rem 0 0.25rem;
}

.scrapbook-prompt {
  font-size: 0.84rem;
  color: var(--text-muted, #b5bcc9);
  margin: 0 0 0.85rem;
  line-height: 1.45;
}

.scrapbook-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.scrapbook-cat-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #d6dce8;
  font-size: 0.76rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}

.scrapbook-cat-pill.active {
  background: rgba(0, 229, 255, 0.18);
  border-color: #00e5ff;
  color: #00e5ff;
  font-weight: 700;
}

.btn-outline-cyan {
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid #00e5ff;
  color: #00e5ff;
  font-weight: 700;
}

.btn-outline-cyan:hover {
  background: #00e5ff;
  color: #0a0b10;
}

.btn-outline-yellow {
  background: rgba(255, 230, 0, 0.1);
  border: 1px solid #ffe600;
  color: #ffe600;
  font-weight: 700;
}

.btn-outline-yellow:hover {
  background: #ffe600;
  color: #0a0b10;
}

.badge-dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #eef2f8;
}

.mono-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #b5bcc9);
  text-transform: uppercase;
}

.scrapbook-preview-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 229, 255, 0.07);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 8px;
}

.scrapbook-preview-wrap[hidden] {
  display: none !important;
}

.scrapbook-preview-img {
  width: 72px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid #fff;
}

.scrapbook-preview-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: #00e5ff;
}

.scrapbook-caption-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.scrapbook-caption-input {
  flex: 1 1 280px;
  min-width: 200px;
}

.scrapbook-char-count {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: var(--text-muted, #9aa3b5);
}

.scrapbook-strip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.scrapbook-polaroid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-top: 0.75rem;
}

.zine-polaroid-card {
  background: #f9f6ee;
  color: #14151a;
  padding: 0.55rem 0.55rem 0.75rem;
  border-radius: 4px;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.65);
  border: 1px solid #d8d2c5;
  transform: rotate(-0.6deg);
  transition: transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.zine-polaroid-card:nth-child(even) {
  transform: rotate(0.7deg);
}

.zine-polaroid-card:hover {
  transform: rotate(0deg) translateY(-2px);
}

.zine-polaroid-img {
  width: 100%;
  height: 128px;
  object-fit: cover;
  background: #1a1d26;
  border: 1px solid #2b2f3c;
}

.zine-polaroid-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  color: #444957;
  text-transform: uppercase;
}

.zine-polaroid-cat-tag {
  padding: 0.1rem 0.38rem;
  border-radius: 3px;
  background: #14151a;
  color: #ffe600;
  font-size: 0.62rem;
}

.zine-polaroid-cat-tag.is-party {
  color: #00e5ff;
}

.zine-polaroid-caption {
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.35;
  color: #161820;
  margin: 0;
  word-break: break-word;
}

.zine-polaroid-author {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  color: #5c6274;
}

/* Video Center Play Overlay Button */
.video-stage {
  position: relative;
}

/* Hide WebKit native missing-glyph overlay square (■) & use custom Play button */
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.center-play-overlay-btn {
  position: absolute;
  top: auto !important;
  bottom: 18px !important;
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 11, 16, 0.92);
  border: 2.5px solid #ffe600;
  color: #ffe600;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  cursor: pointer;
  z-index: 6;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.85), 3px 3px 0 #ff2a85;
  transition: transform 0.15s ease, background 0.15s ease;
}

.center-play-overlay-btn:hover {
  transform: scale(1.08) !important;
  background: rgba(255, 230, 0, 0.95);
  color: #0a0b10;
}

.center-play-overlay-btn.is-playing {
  opacity: 0;
  pointer-events: none;
}

/* Compact TV QR Two-Column Modal & Modal Header Top-Right Close Alignment */
dialog .modal-header,
#tv-qr-modal .modal-header,
#outreach-email-modal .modal-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
}

dialog .modal-header > button,
#tv-qr-close-btn,
#modal-close-btn {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  align-self: flex-start !important;
}

.tv-qr-modal-card {
  max-width: 840px !important;
  width: 94vw !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.tv-qr-two-col-grid {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

@media (max-width: 720px) {
  .tv-qr-two-col-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Verified Success State for Outreach Diagnostic Box 1 */
.whats-wrong-block.is-verified-ok,
#outreach-modal-box1.is-verified-ok {
  border-color: #00f0ff !important;
  background: rgba(0, 240, 255, 0.08) !important;
}

.whats-wrong-block.is-verified-ok #outreach-modal-box1-label,
#outreach-modal-box1.is-verified-ok #outreach-modal-box1-label {
  color: #00f0ff !important;
}

/* Key Award Nominee Selector: Collapse When Locked & Full-Width Pills */
.category-film-select-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

.category-film-select-list.collapsed-when-locked {
  display: none !important;
}

.category-film-pill {
  white-space: normal !important;
  line-height: 1.3 !important;
  text-align: left !important;
  padding: 7px 10px !important;
}

.award-nominee-showcase-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.award-change-nominee-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #e4e6f0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  padding: 3px 9px;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.award-change-nominee-btn:hover {
  border-color: #ffe600;
  color: #ffe600;
}

/* Fix Ultra-Narrow Mobile (<= 640px) Failure Spectrum Row Overlap & Counter Pill */
#fm-top5-counter,
#fm-bottom5-counter,
#fm-top5-count,
#fm-bottom5-count,
#aud-top5-counter,
#aud-bottom5-counter,
.spectrum-zone-header > span,
.column-count-badge {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  word-break: keep-all !important;
  display: inline-block !important;
}

@media (max-width: 640px) {
  #view-ballot .zine-hero {
    padding: 0.65rem 0.8rem !important;
    margin-bottom: 0.45rem !important;
  }

  #view-ballot .zine-hero #ballot-hero-subtitle {
    display: none !important;
  }

  #fm-docket-status-bar {
    padding: 0.5rem 0.65rem !important;
    margin-bottom: 0.5rem !important;
  }

  #fm-self-vote-notice {
    display: none !important;
  }

  .failure-spectrum-ladder .rank-slot-row,
  .rank-slots-list .rank-slot-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .failure-spectrum-ladder .rank-slot-info,
  .rank-slots-list .rank-slot-info,
  .failure-spectrum-ladder .rank-slot-content,
  .rank-slots-list .rank-slot-content {
    flex: 1 1 140px !important;
    min-width: 120px !important;
  }

  .failure-spectrum-ladder .rank-slot-row > .flex-row,
  .rank-slots-list .rank-slot-row > .flex-row,
  .failure-spectrum-ladder .rank-slot-actions,
  .rank-slots-list .rank-slot-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-top: 4px !important;
    padding-top: 6px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
  }
}

/* Mobile Toast Top Placement & Compact 3-Way Host Mode Bar */
@media (max-width: 840px) {
  #toast-container {
    top: 10px !important;
    bottom: auto !important;
    left: 10px !important;
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }

  #host-screening-mode-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #host-screening-mode-controls .screening-mode-btn {
    padding: 7px 6px !important;
    font-size: 0.68rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ============================================================================
   ITERATION 12 (v4): PRE-ROLL BUMPER, SMART FILM AFFILIATION, AWARD TAGGER,
   AND VISUAL QA FIXES (#2, #3, #5, #6)
   ============================================================================ */

/* 1. Programmatic Pre-Roll Cinema Bumper */
.cinema-preroll-overlay {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: radial-gradient(circle at 50% 45%, rgba(18, 22, 34, 0.97) 0%, rgba(7, 8, 12, 0.99) 85%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 18px;
  color: var(--text-primary);
  overflow: hidden;
  border: 1px solid rgba(255, 214, 10, 0.45);
  box-sizing: border-box;
}

.cinema-preroll-overlay.hidden {
  display: none !important;
}

.preroll-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 3;
}

.preroll-act {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  position: relative;
  min-height: 0;
}

.preroll-act.hidden {
  display: none !important;
}

.preroll-act-globe {
  flex-direction: row;
  padding: 6px 10px;
}

.preroll-globe-stage {
  position: relative;
  width: 170px;
  height: 170px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fm-preroll-globe-canvas,
#host-preroll-globe-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.28), inset 0 0 18px rgba(0, 240, 255, 0.22);
}

.preroll-target-reticle {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid var(--accent-yellow);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 214, 10, 0.8);
  pointer-events: none;
  animation: prerollPulse 1.1s ease-in-out infinite alternate;
}

@keyframes prerollPulse {
  from { transform: scale(0.85); opacity: 0.75; }
  to { transform: scale(1.18); opacity: 1; }
}

.preroll-typography {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
}

.preroll-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preroll-film-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 2px 2px 0px rgba(255, 0, 85, 0.75);
  margin: 0;
}

.preroll-origin-stamp {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  background: rgba(255, 214, 10, 0.12);
  border-left: 3px solid var(--accent-yellow);
}

/* SMPTE 16mm Radial Countdown Leader */
.preroll-act-countdown {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.smpte-leader-stage {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 10, 0.1) 0%, rgba(0, 0, 0, 0.75) 75%);
}

.smpte-ring-outer {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}

.smpte-ring-inner {
  position: absolute;
  inset: 16px;
  border: 2px dashed rgba(0, 240, 255, 0.75);
  border-radius: 50%;
}

.smpte-crosshair-h {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.smpte-crosshair-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.smpte-sweep-hand {
  position: absolute;
  width: 50%;
  height: 2px;
  top: 50%;
  left: 50%;
  transform-origin: left center;
  background: var(--accent-yellow);
  box-shadow: 0 0 8px var(--accent-yellow);
  animation: smpteSweep 1s linear infinite;
}

@keyframes smpteSweep {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

.smpte-countdown-num {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 900;
  color: var(--accent-yellow);
  text-shadow: 0 0 18px rgba(255, 214, 10, 0.65);
}

.preroll-lower-third {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.72);
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Dual-Act Side-by-Side Inspection Mode (Act I 3D Globe + Act II 10..1 Countdown) */
.cinema-preroll-overlay.preroll-dual-inspection {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
}

.cinema-preroll-overlay.preroll-dual-inspection .preroll-act-globe,
.cinema-preroll-overlay.preroll-dual-inspection .preroll-act-countdown {
  display: flex !important;
  flex: none !important;
}

.cinema-preroll-overlay.preroll-dual-inspection .preroll-act-globe {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 2px 6px !important;
}

.cinema-preroll-overlay.preroll-dual-inspection .preroll-globe-stage {
  width: 148px !important;
  height: 148px !important;
}

.cinema-preroll-overlay.preroll-dual-inspection .preroll-act-countdown {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 8px 12px !important;
  background: rgba(12, 14, 22, 0.88);
  border: 1px solid rgba(255, 214, 10, 0.38);
  border-radius: 6px;
}

.cinema-preroll-overlay.preroll-dual-inspection .smpte-leader-stage {
  width: 112px !important;
  height: 112px !important;
  flex-shrink: 0 !important;
}

.cinema-preroll-overlay.preroll-dual-inspection .smpte-countdown-num {
  font-size: 2.85rem !important;
}

/* 2. Smart Film Affiliation & Conflict-of-Interest Bar */
.film-affiliation-bar {
  padding: 10px 14px !important;
  background: linear-gradient(90deg, rgba(255, 0, 85, 0.08) 0%, rgba(18, 20, 28, 0.95) 45%, rgba(0, 240, 255, 0.07) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.affiliation-bar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.affiliation-status-block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.affiliation-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.affiliation-mode-select,
.affiliation-film-select {
  background: rgba(9, 10, 15, 0.92);
  color: var(--text-primary);
  border: 1px solid rgba(0, 240, 255, 0.35);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border-radius: 3px;
  max-width: 245px;
}

/* 3. In-Player & Per-Card Award Eligibility Checkbox Strip */
.stage-award-tagger-strip {
  background: rgba(0, 0, 0, 0.28);
  padding: 8px 10px;
  border-radius: 4px;
}

.award-tagger-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.award-tag-chip,
.award-tag-checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.award-tag-chip:hover,
.award-tag-checkbox-pill:hover {
  border-color: var(--accent-yellow);
  color: #ffffff;
}

.award-tag-chip.is-tagged,
.award-tag-chip.is-checked,
.award-tag-checkbox-pill.is-checked,
.award-tag-chip[aria-pressed="true"],
.award-tag-checkbox-pill[aria-pressed="true"] {
  background: rgba(255, 214, 10, 0.22);
  color: var(--accent-yellow);
  border-color: var(--accent-yellow);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255, 214, 10, 0.28);
}

.card-award-tagger-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.card-award-tagger-row .award-tag-chip {
  padding: 2px 6px;
  font-size: 0.62rem;
}

.category-pill.is-tagged-while-watching {
  border-color: var(--accent-yellow) !important;
  box-shadow: 0 0 8px rgba(255, 214, 10, 0.35);
}

/* 4. Fix #2: Video Stage & Center Play Button Clipping Guard */
.video-stage {
  position: relative;
  overflow: hidden;
}

.center-play-overlay-btn {
  bottom: 16px !important;
  right: 16px !important;
  width: 48px !important;
  height: 48px !important;
  box-sizing: border-box !important;
}

/* 5. Fix #3: Toast Container Non-Overlapping Placement (Desktop + Mobile) */
@media (min-width: 841px) {
  #toast-container {
    top: auto !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    max-width: 420px !important;
    z-index: 9999 !important;
  }
}

@media (max-width: 840px) {
  #toast-container {
    top: auto !important;
    bottom: 68px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    pointer-events: none;
  }

  body[data-app-experience] #toast-container {
    bottom: 14px !important;
    top: auto !important;
  }

  .toast {
    padding: 7px 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    max-width: 94vw !important;
  }
}

/* 6. Fix #5: Mobile Above-the-Fold Compression for Portal 01 & Portal 03 */
@media (max-width: 640px) {
  .zine-hero {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
  }

  .zine-hero p {
    display: none !important;
  }

  #filmmaker-auth-section {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
  }

  #fm-docket-status-bar {
    padding: 5px 8px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #fm-docket-status-bar .docket-status-strip a[download],
  #fm-offline-pack-link,
  #fm-blank-pdf-link,
  #fm-download-pack-link,
  #fm-credentials-pill,
  #fm-own-film-pill {
    display: none !important;
  }

  #fm-cohort-badge {
    font-size: 0.62rem !important;
    padding: 2px 6px !important;
  }

  #fm-autofill-ranks-btn {
    padding: 4px 8px !important;
    font-size: 0.65rem !important;
  }

  #ballot-film-affiliation-bar,
  #aud-film-affiliation-bar {
    padding: 5px 8px !important;
    margin-bottom: 6px !important;
  }

  #ballot-film-affiliation-bar .affiliation-bar-main,
  #aud-film-affiliation-bar .affiliation-bar-main {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
  }

  #ballot-film-affiliation-bar .affiliation-status-block .badge,
  #aud-film-affiliation-bar .affiliation-status-block .badge {
    font-size: 0.6rem !important;
    padding: 2px 5px !important;
  }

  #fm-affiliation-summary-text,
  #aud-affiliation-summary-text,
  #fm-affiliation-reset-btn {
    display: none !important;
  }

  .affiliation-controls-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .affiliation-mode-select,
  .affiliation-film-select {
    font-size: 0.64rem !important;
    padding: 2px 5px !important;
    max-width: 138px !important;
    height: 24px !important;
  }

  #aud-affiliation-apply-btn {
    padding: 2px 6px !important;
    font-size: 0.64rem !important;
    min-height: 24px !important;
  }

  #audience-token-card {
    padding: 5px 8px !important;
    margin-bottom: 6px !important;
  }

  #audience-token-card p.text-secondary,
  #audience-token-card .badge-magenta,
  #audience-token-card [data-demo-aud-token],
  #aud-active-guest-summary {
    display: none !important;
  }

  #aud-active-session-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  #aud-toggle-token-drawer-btn {
    padding: 3px 8px !important;
    font-size: 0.65rem !important;
    min-height: 26px !important;
  }

  #audience-token-card h1 {
    font-size: 1rem !important;
    margin-top: 0 !important;
  }

  #aud-ticket-banner {
    padding: 5px 8px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  #aud-ticket-banner #aud-token-badge,
  #aud-ticket-banner p {
    display: none !important;
  }

  #aud-ticket-banner h2 {
    font-size: 0.82rem !important;
    margin-top: 2px !important;
  }

  #aud-autofill-btn {
    padding: 4px 8px !important;
    font-size: 0.64rem !important;
    white-space: nowrap !important;
  }

  #view-audience > .audience-ballot-shell > .zine-card.mb-4 {
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
  }

  #view-audience > .audience-ballot-shell > .zine-card.mb-4 .grid-2 > .text-xs.text-secondary {
    display: none !important;
  }

  .preroll-act-globe {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .preroll-globe-stage {
    width: 115px;
    height: 115px;
  }
}

/* 7. Fix #6: Host Custom Queue Chip Buttons & TV QR Modal Polish */
#host-active-queue-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

@media (max-width: 900px) {
  #host-active-queue-strip {
    grid-template-columns: 1fr !important;
  }
}

.queue-chip {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.queue-chip .queue-play-chip {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: 26px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 0 6px !important;
  font-size: 0.7rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  line-height: 26px !important;
}

.queue-chip .queue-up-chip,
.queue-chip .queue-down-chip,
.queue-chip .queue-remove-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
  border-radius: 3px !important;
}

.tv-qr-modal-card,
#tv-qr-modal {
  max-width: 880px !important;
  width: min(95vw, 880px) !important;
}

.tv-qr-two-col-grid {
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 20px !important;
}

#tv-qr-claimed-guests-list .badge,
#tv-qr-claimed-guests-list span {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex-shrink: 0 !important;
}

/* ============================================================================
   3-STEP FILMMAKER PORTAL FLOW:
   Step 1: Dedicated Login Gate
   Step 2: Pre-Loaded 12-Film Ballot Welcome & Instructions Interstitial
   Step 3: Main Ballot App Workspace
   ============================================================================ */
#view-ballot[data-filmmaker-step="login"] #filmmaker-auth-section {
  max-width: 780px;
  margin: 2.5rem auto;
  padding: 2rem 2.25rem;
  border: 2px solid var(--cmy-cyan, #00f0ff);
  box-shadow: 6px 6px 0px var(--cmy-magenta, #ff006e);
}

.fm-welcome-interstitial {
  max-width: 1020px;
  margin: 0.75rem auto 1.5rem;
  padding: 1.35rem 1.75rem;
  border: 2px solid var(--cmy-yellow, #ffe600);
  background: rgba(12, 12, 18, 0.96);
  box-shadow: 6px 6px 0px var(--cmy-cyan, #00f0ff);
}

.fm-welcome-headline {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.15;
  color: #ffffff;
}

.fm-welcome-lead {
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text-secondary, #cbd5e1);
  margin-top: 0.45rem;
  max-width: 78ch;
}

.fm-welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 0.9rem;
}

.fm-welcome-card {
  padding: 1rem 1.25rem;
  border-radius: 4px;
  background: rgba(20, 20, 30, 0.92);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fm-welcome-card-nyc {
  border-color: var(--cmy-cyan, #00f0ff);
  box-shadow: 4px 4px 0px rgba(0, 240, 255, 0.25);
}

.fm-welcome-card-host {
  border-color: var(--cmy-magenta, #ff006e);
  box-shadow: 4px 4px 0px rgba(255, 0, 110, 0.25);
}

.fm-screening-schedule-box {
  padding: 0.85rem 1rem;
  background: rgba(5, 5, 10, 0.78);
  border-left: 3px solid var(--cmy-yellow, #ffe600);
}

.fm-screening-list {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.6;
}

.fm-nyc-ticket-drawer {
  padding: 0.9rem 1rem;
  background: rgba(0, 240, 255, 0.07);
  border: 1px dashed var(--cmy-cyan, #00f0ff);
  border-radius: 4px;
}

.nyc-showtime-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: #f8fafc;
  cursor: pointer;
}

.fm-welcome-footer {
  display: flex;
  justify-content: center;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#fm-enter-ballot-btn {
  font-size: 1.05rem;
  padding: 0.85rem 2rem;
  box-shadow: 4px 4px 0px var(--cmy-yellow, #ffe600);
}

/* ==========================================================================
   VOTER COMMENTS BLOCK & POST-VOTE ("YOU VOTED / YOU UPDATED") SCREEN
   ========================================================================== */
.voter-notes-block {
  padding: 1rem 1.15rem;
  background: rgba(14, 15, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 3px solid var(--cmy-cyan, #00f0ff);
  border-radius: 6px;
}

.voted-confirmation-screen {
  padding: 1.35rem 1.5rem;
  background: linear-gradient(155deg, rgba(16, 22, 30, 0.96), rgba(10, 12, 18, 0.98));
  border: 2px solid var(--cmy-yellow, #ffe600);
  box-shadow: 5px 5px 0px rgba(255, 230, 0, 0.22);
  border-radius: 6px;
}

.voted-confirmation-title {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  color: #ffffff;
  letter-spacing: -0.01em;
}

.voted-confirmation-subtitle {
  font-size: 0.96rem;
  line-height: 1.55;
  color: #e2e8f0;
  max-width: 78ch;
}

.voted-rankings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 720px) {
  .voted-rankings-grid {
    grid-template-columns: 1fr;
  }
}

.voted-rank-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.voted-rank-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #f8fafc;
}

.voted-rank-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  opacity: 0.85;
  min-width: 1.6rem;
}

.voted-notes-preview {
  padding: 0.75rem 1rem;
  background: rgba(255, 230, 0, 0.06);
  border-left: 3px solid var(--cmy-yellow, #ffe600);
  border-radius: 4px;
}

.voted-cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 780px) {
  .voted-cta-grid {
    grid-template-columns: 1fr;
  }
}

.voted-cta-card {
  padding: 1.1rem 1.25rem;
  background: rgba(15, 16, 24, 0.9);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.voted-cta-nyc {
  border-color: var(--cmy-cyan, #00f0ff);
  box-shadow: 3px 3px 0px rgba(0, 240, 255, 0.22);
}

.voted-cta-host {
  border-color: var(--cmy-magenta, #ff006e);
  box-shadow: 3px 3px 0px rgba(255, 0, 110, 0.22);
}

/* =========================================================================
   5-STEP GUIDED FILMMAKER BALLOT FLOW (Log In -> Instructions -> Docket -> Viewer -> Vote & Photos)
   ========================================================================= */

.fm-step-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 1rem;
  background: rgba(12, 13, 20, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

.fm-step-pills {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.fm-step-pill {
  appearance: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-secondary, #b8bcc8);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.fm-step-pill:hover {
  border-color: var(--cmy-cyan, #00f0ff);
  color: #ffffff;
}

.fm-step-pill.active {
  background: var(--cmy-yellow, #ffe600);
  border-color: var(--cmy-yellow, #ffe600);
  color: #0b0c10;
  box-shadow: 0 0 12px rgba(255, 230, 0, 0.28);
}

#fm-screening-room.viewer-vertical-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#fm-screening-room.viewer-vertical-stack .screening-video-col,
#fm-screening-room.viewer-vertical-stack .screening-meta-col {
  width: 100% !important;
  max-width: 100% !important;
}

.docket-card-swappable {
  border-color: rgba(0, 240, 255, 0.5) !important;
}

.fm-swap-slot-select:focus {
  outline: 2px solid var(--cmy-cyan, #00f0ff);
  border-color: var(--cmy-cyan, #00f0ff);
}

.voting-film-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 0.65rem;
}

.voting-picker-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(14, 15, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
}

.voting-picker-card.in-top5 {
  border-color: var(--cmy-magenta, #ff006e);
  background: rgba(255, 0, 110, 0.07);
}

.voting-picker-card.in-bot5 {
  border-color: var(--cmy-cyan, #00f0ff);
  background: rgba(0, 240, 255, 0.07);
}

.voting-picker-card-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.voting-picker-thumb {
  width: 56px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.15rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.voting-picker-slot {
  font-family: var(--font-mono, monospace);
  font-size: 0.64rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
}

.voting-picker-info {
  min-width: 0;
  flex: 1;
}

.voting-picker-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voting-picker-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* =========================================================================
   Step 3 Docket Card Info (Thumbnail, Title, Tagline, Location)
   ========================================================================= */
.docket-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.docket-card-tagline {
  font-size: 0.82rem;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.docket-card-location {
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.68);
}

/* =========================================================================
   Step 5 Vertical Ranking Board: Top 5 -> Dynamic Middle Pool -> Bottom 5
   ========================================================================= */
.ranking-board-vertical-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.15rem !important;
}

.ranking-board-vertical-stack > .ranking-column,
.ranking-board-vertical-stack > .middle-docket-pool-card {
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  transition: all 0.2s ease;
}

#fm-top5-slots,
#fm-bottom5-slots,
.middle-docket-pool-card .voting-film-picker-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  height: auto !important;
  min-height: 0 !important;
  transition: all 0.2s ease;
}

.rank-slots-empty-hint {
  padding: 0.55rem 0.75rem;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
}

.middle-docket-pool-card {
  border: 2px dashed rgba(255, 230, 0, 0.55) !important;
  background: rgba(16, 16, 24, 0.92) !important;
  padding: 1rem 1.15rem !important;
  border-radius: 8px;
  transition: all 0.22s ease;
}

.voting-picker-thumb {
  width: 72px;
  height: 44px;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

/* =========================================================================
   Step 5 Second Ballot Section: 10 Specific Award Categories (Thumb Dropdown)
   ========================================================================= */
.award-dropdown-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 1rem !important;
}

.award-dropdown-card {
  position: relative;
  overflow: visible !important;
}

.award-dropdown-card.is-open {
  z-index: 40;
}

.award-thumb-dropdown {
  position: relative;
  width: 100%;
}

.award-dd-trigger {
  width: 100%;
  background: rgba(10, 10, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.award-dd-trigger:hover,
.award-dropdown-card.is-open .award-dd-trigger {
  border-color: var(--cmy-yellow, #ffe600);
  box-shadow: 0 0 0 1px rgba(255, 230, 0, 0.35);
}

.award-dd-selected {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.award-dd-thumb {
  width: 64px;
  height: 38px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: #151520;
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.award-dd-meta {
  flex: 1;
  min-width: 0;
}

.award-dd-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.award-dd-tagline {
  font-size: 0.73rem;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.award-dd-sub {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.award-dd-caret {
  font-size: 0.85rem;
  color: var(--cmy-yellow, #ffe600);
  margin-left: auto;
  padding-left: 0.4rem;
}

.award-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 290px;
  overflow-y: auto;
  background: #0d0d15;
  border: 2px solid var(--cmy-yellow, #ffe600);
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.88);
  z-index: 60;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.award-dd-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.award-dd-option:hover {
  background: rgba(0, 240, 255, 0.12);
  border-color: var(--cmy-cyan, #00f0ff);
}

.award-dd-option.is-selected {
  background: rgba(255, 230, 0, 0.14);
  border-color: var(--cmy-yellow, #ffe600);
}

.award-category-comment-wrap {
  width: 100%;
  margin-top: 0.5rem;
}

.award-category-comment-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(10, 10, 16, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  font-size: 0.82rem;
  color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.award-category-comment-input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.award-category-comment-input:focus {
  outline: none;
  border-color: var(--cmy-cyan, #00f0ff);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35);
}

/* =========================================================================
   Destination-Matched Top 5 (Magenta) & Bottom 5 (Cyan) Selectors
   ========================================================================= */
.fm-picker-top5-btn,
.slot-up-btn,
.buffer-promote-top-btn,
#fm-stage-top5-btn {
  background-color: var(--cmy-magenta, #ff00ff) !important;
  color: var(--text-ink, #000000) !important;
  border: 1.5px solid var(--cmy-magenta, #ff00ff) !important;
  box-shadow: 2px 2px 0px rgba(255, 0, 255, 0.45) !important;
}

.fm-picker-top5-btn:hover:not(:disabled),
.slot-up-btn:hover:not(:disabled),
.buffer-promote-top-btn:hover:not(:disabled),
#fm-stage-top5-btn:hover:not(:disabled) {
  background-color: var(--cmy-magenta, #ff00ff) !important;
  color: var(--text-ink, #000000) !important;
  border-color: #ffffff !important;
  box-shadow: 3px 3px 0px rgba(255, 0, 255, 0.8) !important;
}

.fm-picker-bot5-btn,
.slot-down-btn,
.buffer-demote-bot-btn,
#fm-stage-bottom5-btn {
  background-color: var(--cmy-cyan, #00ffff) !important;
  color: var(--text-ink, #000000) !important;
  border: 1.5px solid var(--cmy-cyan, #00ffff) !important;
  box-shadow: 2px 2px 0px rgba(0, 255, 255, 0.45) !important;
}

.fm-picker-bot5-btn:hover:not(:disabled),
.slot-down-btn:hover:not(:disabled),
.buffer-demote-bot-btn:hover:not(:disabled),
#fm-stage-bottom5-btn:hover:not(:disabled) {
  background-color: var(--cmy-cyan, #00ffff) !important;
  color: var(--text-ink, #000000) !important;
  border-color: #ffffff !important;
  box-shadow: 3px 3px 0px rgba(0, 255, 255, 0.8) !important;
}

.audio-norm-toggle-btn.is-active {
  border-color: var(--cmy-yellow, #ffe600) !important;
  color: var(--cmy-yellow, #ffe600) !important;
  background: rgba(255, 230, 0, 0.1) !important;
}

/* ==========================================================================
   VIBE CHECK INSTRUCTIONS, DOCKET LOCK MODAL, OVERFLOW BANNERS & MORE MOVIES
   ========================================================================== */
.vibe-check-instructions {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cmy-yellow, #ffe600);
  background: rgba(255, 230, 0, 0.09);
  border: 1px dashed rgba(255, 230, 0, 0.55);
  padding: 0.35rem 0.65rem;
  margin-bottom: 0.25rem;
}

#fm-stage-top5-btn.is-vibe-selected {
  box-shadow: 0 0 0 2px #ffffff, 4px 4px 0px var(--cmy-cyan, #00e5ff) !important;
  transform: translate(-1px, -1px);
}

#fm-stage-bottom5-btn.is-vibe-selected {
  box-shadow: 0 0 0 2px #ffffff, 4px 4px 0px var(--cmy-magenta, #ff0055) !important;
  transform: translate(-1px, -1px);
}

.rank-slot-card.is-overflow-slot {
  border: 2px dashed var(--cmy-yellow, #ffe600) !important;
  background: rgba(255, 230, 0, 0.08) !important;
}

.docket-card.is-locked-slot {
  border-color: rgba(255, 230, 0, 0.45);
}

.docket-swap-locked-note {
  margin-top: 0.4rem;
  padding: 0.3rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cmy-yellow, #ffe600);
  background: rgba(255, 230, 0, 0.08);
  border-left: 3px solid var(--cmy-yellow, #ffe600);
}

.ballot-overflow-feedback-banner,
.ballot-submit-feedback-banner {
  background: rgba(255, 0, 85, 0.14);
  border: 2px solid var(--cmy-yellow, #ffe600);
  box-shadow: 4px 4px 0px rgba(255, 0, 85, 0.65);
  color: #ffffff;
  padding: 0.85rem 1.1rem;
  margin: 0.85rem 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.45;
}

.more-movies-cta-card {
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.09) 0%, rgba(255, 0, 85, 0.09) 100%);
  border: 2px solid var(--cmy-yellow, #ffe600);
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.65);
}

.more-movies-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.more-movies-kicker {
  display: inline-block;
  margin-bottom: 0.4rem;
}

.more-movies-headline {
  margin: 0 0 0.35rem;
  font-family: var(--font-display, inherit);
  font-size: 1.2rem;
  color: var(--cmy-yellow, #ffe600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.more-movies-desc {
  margin: 0;
  max-width: 64ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-paper, #f4f1ea);
}

.more-movies-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.lock-docket-modal,
.ballot-thank-you-modal {
  background: var(--bg-ink, #121216);
  color: var(--text-paper, #f4f1ea);
  border: 3px solid var(--cmy-yellow, #ffe600);
  box-shadow: 10px 10px 0px #000000;
  padding: 1.5rem 1.75rem;
  max-width: min(580px, 92vw);
  width: calc(100% - 2rem);
  margin: auto;
}

dialog .modal-body {
  margin-top: 0.9rem;
}

dialog .modal-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lock-docket-modal::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}

.lock-docket-modal-inner {
  padding: 1.5rem 1.6rem;
}

.lock-docket-modal-kicker {
  margin-bottom: 0.6rem;
}

.lock-docket-modal-title {
  margin: 0 0 0.55rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cmy-yellow, #ffe600);
}

.lock-docket-modal-desc {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #ffffff;
}

.lock-docket-modal-subnote {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.lock-docket-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ============================================================================
   HOST PORTAL STEP 3: SELECT YOUR LINEUP & PLAYLIST BUILDER
   ============================================================================ */
.host-lineup-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.host-preset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 0.85rem 1rem;
  min-height: 76px;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.host-preset-card:hover {
  transform: translate(-2px, -2px);
}

.host-preset-card.active {
  outline: 2px solid var(--cmy-yellow, #ffff00);
  box-shadow: 4px 4px 0px var(--cmy-yellow, #ffff00);
}

.host-preset-card-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.host-preset-card-sub {
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.9;
  font-weight: 500;
  text-transform: none;
}

.host-lineup-workspace {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1.15rem;
  align-items: start;
}

@media (max-width: 960px) {
  .host-lineup-workspace {
    grid-template-columns: 1fr;
  }
}

.host-library-controls-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 680px) {
  .host-library-controls-row {
    grid-template-columns: 1fr;
  }
}

.host-lineup-library-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.host-library-film-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-zinc, #2c2c38);
  border-radius: 6px;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.host-library-film-row:hover {
  border-color: var(--cmy-cyan, #00ffff);
  background: rgba(0, 255, 255, 0.04);
}

.host-library-film-row.in-playlist {
  border-color: rgba(0, 255, 255, 0.55);
  background: rgba(0, 255, 255, 0.06);
}

.host-library-film-info {
  flex: 1;
  min-width: 0;
}

.host-library-film-actions {
  flex-shrink: 0;
}

.host-playlist-runtime-banner {
  padding: 0.65rem 0.85rem;
  background: rgba(0, 255, 255, 0.07);
  border: 1px solid var(--cmy-cyan, #00ffff);
  border-radius: 6px;
}

.host-lineup-compact-list {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.host-compact-playlist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-zinc, #2c2c38);
  border-radius: 5px;
  cursor: grab;
  user-select: none;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.host-compact-playlist-row:hover {
  border-color: var(--cmy-yellow, #ffff00);
  background: rgba(255, 255, 0, 0.05);
}

.host-compact-playlist-row.is-dragging {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--cmy-cyan, #00ffff);
}

.host-compact-playlist-row.is-drag-over {
  border-color: var(--cmy-magenta, #ff00ff);
  background: rgba(255, 0, 255, 0.14);
  transform: scale(1.01);
}

.host-compact-left {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
  flex: 1;
}

.host-drag-handle {
  color: var(--text-muted, #8e8ea0);
  font-size: 0.95rem;
  cursor: grab;
  padding: 0 0.15rem;
}

.host-compact-index {
  font-size: 0.74rem;
  color: var(--cmy-yellow, #ffff00);
  font-weight: 700;
  flex-shrink: 0;
}

.host-compact-title-wrap {
  min-width: 0;
  flex: 1;
}

.host-compact-title {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-compact-right {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  flex-shrink: 0;
}

.host-compact-runtime {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
}

/* ============================================================================
   Simplified Audience Ballot 2-Column Layout & Clean Card Actions
   ============================================================================ */
#view-audience .aud-two-col-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 780px) {
  #view-audience .aud-two-col-board {
    grid-template-columns: 1fr;
  }
}

#view-audience .aud-simple-film-card .docket-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

#view-audience .aud-simple-film-card .docket-card-actions .btn {
  width: 100%;
  justify-content: center;
}

/* ============================================================================
   Admin Early Aggregated Voting Results & At-Home Screening Provisioning Center
   ============================================================================ */
#admin-early-results-card {
  border: 2px solid var(--cmy-cyan, #00ffff);
  box-shadow: 6px 6px 0px rgba(0, 255, 255, 0.22);
}

.early-pulse-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1200px) {
  .early-pulse-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .early-pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.early-pulse-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-zinc, #2c2c38);
  border-radius: 6px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.3rem;
}

.early-pulse-tile-accent {
  border-color: var(--cmy-yellow, #ffff00);
  background: rgba(255, 255, 0, 0.05);
}

.early-pulse-tile-leader-cyan {
  border-color: rgba(0, 255, 255, 0.6);
  background: rgba(0, 255, 255, 0.05);
}

.early-pulse-tile-leader-magenta {
  border-color: rgba(255, 0, 128, 0.6);
  background: rgba(255, 0, 128, 0.05);
}

.early-pulse-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #9a9aa8);
}

.early-pulse-value {
  font-family: var(--font-display, var(--font-mono));
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
}

.early-pulse-value-title {
  font-size: 1.02rem;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.early-pulse-sub {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted, #a5a5b5);
}

.early-pulse-bar-wrap {
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.2rem;
}

.early-pulse-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
}

.early-standings-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 960px) {
  .early-standings-split {
    grid-template-columns: 1fr;
  }
}

.early-standings-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-zinc, #2c2c38);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.early-standings-box-cyan {
  border-top: 3px solid var(--cmy-cyan, #00ffff);
}

.early-standings-box-magenta {
  border-top: 3px solid var(--cmy-magenta, #ff007f);
}

.early-standings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.early-standings-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.early-rank-row {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 0.55rem 0.7rem;
}

.early-rank-row-top1 {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 230, 0, 0.45);
}

.early-rank-top-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.early-rank-left {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  flex: 1;
}

.early-rank-num {
  font-size: 0.75rem;
  font-weight: 900;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.early-rank-title-wrap {
  min-width: 0;
  flex: 1;
}

.early-rank-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.early-rank-sub {
  font-size: 0.69rem;
  line-height: 1.3;
  margin-top: 0.1rem;
}

.early-rank-right {
  text-align: right;
  flex-shrink: 0;
}

.early-rank-pts {
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.15;
}

.early-rank-pts-unit {
  font-size: 0.65rem;
  font-weight: 600;
  opacity: 0.8;
}

.early-rank-split {
  font-size: 0.66rem;
  margin-top: 0.1rem;
}

.early-rank-bar-track {
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.42rem;
}

.early-rank-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
}

.early-categories-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (max-width: 1180px) {
  .early-categories-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .early-categories-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.early-cat-pill-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-zinc, #2c2c38);
  border-radius: 5px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.2rem;
}

.early-cat-pill-label {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cmy-yellow, #ffff00);
}

.early-cat-pill-leader {
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.early-cat-pill-meta {
  font-size: 0.66rem;
}

.early-ops-split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .early-ops-split {
    grid-template-columns: 1fr;
  }
}

.early-ops-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-zinc, #2c2c38);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}

.early-ops-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.early-ballot-feed {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.early-ballot-item {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
}

.early-ballot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.early-ballot-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.early-pick-pill {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 0.12rem 0.42rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.early-pick-pill-cyan {
  background: rgba(0, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.4);
  color: var(--cmy-cyan, #00ffff);
}

.early-pick-pill-magenta {
  background: rgba(255, 0, 128, 0.08);
  border-color: rgba(255, 0, 128, 0.4);
  color: var(--cmy-magenta, #ff007f);
}

/* ============================================================================
   NORMALIZED SELF-REPORTED FILM CREDITS MODAL & TRIGGER PILLS
   ============================================================================ */

.film-credits-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.16rem 0.48rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 240, 255, 0.32);
  background: rgba(0, 240, 255, 0.07);
  color: var(--cmy-cyan, #00f0ff);
  cursor: pointer;
  transition: all 0.14s ease;
  white-space: nowrap;
}

.film-credits-trigger-btn:hover,
.film-credits-trigger-btn:focus-visible {
  border-color: var(--cmy-yellow, #ffe600);
  background: rgba(255, 230, 0, 0.12);
  color: var(--cmy-yellow, #ffe600);
  transform: translateY(-1px);
}

.btn-link-inline {
  background: none;
  border: none;
  padding: 0;
  color: var(--cmy-cyan, #00f0ff);
  font-family: var(--font-mono, monospace);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.btn-link-inline:hover {
  color: var(--cmy-yellow, #ffe600);
}

.film-credits-modal-card {
  max-width: 760px !important;
  width: 94vw !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.85), 0 0 28px rgba(0, 240, 255, 0.14) !important;
}

.credits-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.credits-dept-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-zinc, #2c2c38);
  border-radius: 6px;
  overflow: hidden;
}

.credits-dept-header {
  background: rgba(0, 240, 255, 0.08);
  border-bottom: 1px solid rgba(0, 240, 255, 0.22);
  padding: 0.42rem 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cmy-cyan, #00f0ff);
}

.credits-dept-body {
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.credits-role-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.credits-role-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.credits-role-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary, #b5b8c8);
  flex: 0 0 42%;
  line-height: 1.35;
}

.credits-role-people {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  flex: 1;
}

.credits-person-pill {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
}

.film-credits-raw-details {
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  padding: 0.5rem 0.75rem;
}

.film-credits-raw-summary {
  cursor: pointer;
  user-select: none;
  color: var(--text-muted, #8e92a4);
}

.film-credits-raw-pre {
  margin: 0.45rem 0 0 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary, #c8cbd8);
  line-height: 1.4;
}

/* ==========================================================================
   User Help & Issue Reporting Modal + Admin Help Triage Queue
   ========================================================================== */
.nav-help-btn {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.48rem !important;
  min-height: 26px !important;
  line-height: 1.1 !important;
  color: var(--text-muted, #9ca0b3) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap;
  opacity: 0.82;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nav-help-btn:hover,
.nav-help-btn:focus-visible {
  opacity: 1;
  color: var(--text-primary, #f4f4f6) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-device-mode="mobile"] .nav-help-btn,
body[data-device="mobile"] .nav-help-btn {
  padding: 0.14rem 0.38rem !important;
  font-size: 0.62rem !important;
  min-height: 24px !important;
}

.help-issue-dialog {
  max-width: 660px;
  width: min(94vw, 660px);
}

.help-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.65rem;
}

.help-category-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.help-category-option:hover {
  border-color: rgba(255, 230, 0, 0.55);
  background: rgba(255, 230, 0, 0.06);
}

.help-category-option.active {
  border-color: #ffe600;
  background: rgba(255, 230, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 230, 0, 0.35);
}

.help-cat-title {
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  font-size: 0.84rem;
  color: #ffe600;
  margin-bottom: 0.2rem;
}

.help-cat-desc {
  font-size: 0.74rem;
  color: var(--text-secondary, #c8cbd8);
  line-height: 1.35;
}

.help-topic-chip {
  font-size: 0.7rem !important;
  padding: 0.22rem 0.55rem !important;
}