/* ============================================================
   VIDEO ROOM v2 — Konzept B "Kurzfilm-Kette" (Winchester-Wahl 15.09.2026,
   Konzept outbox/studio-video-konzepte-20260915). Dunkles Navy, Mint-CTA,
   Violett-Akzent fuer die Kette. Klassen-Praefix sv- (keine Kollisionen).
   Stempel 0918vview (Historie: ... -> 0916qtier -> 0916qclean -> 0916t2vex -> 0916polish3 -> 0916fastmode -> 0916minimal -> 0916enhmode -> 0916timing -> 0916sym -> 0916align -> 0916exright -> 0916afrb -> 0916gal3 -> 0916playc -> 0916rek -> 0917img3 -> 0917play1zu1 -> 0917vview2 -> 0918t2isc -> 09183dsc -> 0918harm -> 0918showcase4 -> 0918vview).
   0918vview (18.09., Auftrag Yamamoto vview-nachlanden-1789736981): der
   Video-Viewer 1:1 (0917play1zu1 / 0917vview2..5, Branch @ 12b7d4ba) ist
   jetzt in diesem Baum — der Showcase-Klick oeffnet den Viewer ueber
   window.vglxOpenList (0917vview3), nicht mehr die Kachel-Wiedergabe.
   ============================================================ */

/* ---- Szenen-Kette ---- */
.sv-chain { display: flex; flex-direction: column; gap: 0; margin: 4px 0 14px; }
.sv-sc { border: 1px solid rgba(148, 163, 190, .16); border-radius: 16px;
  background: linear-gradient(160deg, rgba(135, 57, 196, .10), rgba(13, 20, 32, .55) 42%);
  padding: 14px 16px; }
.sv-sc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sv-sc-n { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: #e9e4f8; }
.sv-sc-status { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.sv-sc-status.running { color: var(--mint); }
.sv-sc-status.done { color: var(--mint); }
.sv-sc-status.fail { color: #f0a0a8; }
.sv-sc-x { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 16px;
  cursor: pointer; padding: 0 4px; }
.sv-sc-x:hover { color: #f0a0a8; }
.sv-sc-p { width: 100%; min-height: 36px; border: 1px solid rgba(148, 163, 190, .18);
  border-radius: 10px; background: rgba(10, 16, 26, .6); color: inherit;
  font: inherit; font-size: 13px; padding: 0 12px; }
.sv-sc-p:focus { outline: none; border-color: rgba(169, 243, 225, .5); }
.sv-sc-frames { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.sv-fr { display: grid; gap: 4px; justify-items: center; min-width: 92px; }
.sv-fr-l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-fr-img { width: 92px; height: 58px; object-fit: cover; border-radius: 10px;
  border: 1px solid rgba(169, 243, 225, .35); display: block; }
.sv-fr-wrap { position: relative; }
.sv-fr-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  border: 0; background: #1b2536; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; }
.sv-fr-x:hover { color: #f0a0a8; }
.sv-fr-chain { font-size: 10px; color: var(--mint); letter-spacing: .02em; }
.sv-fr-empty { width: 92px; height: 58px; border: 1px dashed rgba(148, 163, 190, .3); border-radius: 10px;
  display: grid; place-items: center; font-size: 10px; color: var(--muted); }
.sv-fr-add { width: 92px; height: 58px; border: 1px dashed rgba(148, 163, 190, .35); border-radius: 10px;
  background: none; color: var(--muted); font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sv-fr-add:hover { border-color: var(--mint); color: var(--mint); }
.sv-fr-add svg { width: 13px; height: 13px; }
.sv-chainmid { color: #b49ae0; display: grid; place-items: center; }
.sv-chainrow { display: grid; place-items: center; padding: 2px 0; color: #b49ae0; }
.sv-chainrow .sv-link { transform: rotate(90deg); }
.sv-link { width: 18px; height: 18px; }
.sv-sc-err { color: #f0a0a8; font-size: 12px; margin-top: 6px; }
.sv-sc-err:empty { display: none; }
/* 0919buylink: klickbarer Kaufweg bei 1163/buy — statischer Link, kein Server-Markup */
.sv-buylink { color: var(--mint); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sv-buylink:hover { color: #fff; }
.sv-sc-res { margin-top: 10px; }
.sv-sc-res:empty { display: none; }
.sv-sc-vid { width: 100%; max-height: 260px; border-radius: 12px; background: #000;
  border: 1px solid rgba(148, 163, 190, .2); }
.sv-sc-fail { color: #f0a0a8; font-size: 12.5px; margin: 4px 0; }
.sv-add { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed rgba(169, 243, 225, .4);
  background: none; color: var(--mint); border-radius: 999px; padding: 7px 16px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; margin-bottom: 6px; }
.sv-add em { font-style: normal; opacity: .65; font-weight: 400; }
.sv-add svg { width: 13px; height: 13px; }
.sv-add:hover { background: rgba(169, 243, 225, .08); }

/* ---- Aspect-Ratio: 8 Kacheln, "soon" ehrlich abgedimmt ---- */
.sv-ratios { flex-wrap: wrap; }
.sv-rt.soon { opacity: .38; cursor: not-allowed; }
.sv-hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }

/* ---- Quality-Karten (B-Look: Vorschau zeigt die Stufe) ---- */
.sv-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 2px; }
.sv-qc { position: relative; border: 1px solid rgba(148, 163, 190, .16); border-radius: 14px;
  background: rgba(13, 20, 32, .55); padding: 12px; display: grid; gap: 7px; align-content: start;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.sv-qc.on { border-color: rgba(169, 243, 225, .55);
  box-shadow: 0 0 0 1px rgba(169, 243, 225, .25), 0 10px 30px -14px rgba(169, 243, 225, .35); }
.sv-qc:hover { border-color: rgba(169, 243, 225, .4); transform: translateY(-1px);
  transition: transform .15s ease, border-color .15s ease; }
.sv-qc:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
/* 1004sfk1 (STUDIO-FOKUS-T1, Befund F4): die Video-Karte ist seit dem
   Gruppen-Markup (role="group", Einzelziele mit tabindex) selbst kein
   Fokusziel mehr — die Regel oben greift dort nichts (sie gilt weiter fuer
   die Button-Karten im Image Lab). Dieselben Werte wie dort (2px,
   var(--mint), Abstand 2px) jetzt fuer jedes Tastaturziel in der Karte:
   Modus-Pillen und Stufenname. outline liegt ausserhalb des Layouts — die
   Kartenmasse bleiben exakt (Pruefer-Mass: 168x329). */
.sv-qc .sv-mode-o:focus-visible,
.sv-qc [data-tier-pick]:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
/* Maus-Klick zeigt keinen Rahmen: :focus-visible greift bei Maus nicht, die
   explizite Unterdrueckung deckt Engine-Restfaelle ab. */
.sv-qc .sv-mode-o:focus:not(:focus-visible),
.sv-qc [data-tier-pick]:focus:not(:focus-visible) { outline: none; }
.sv-qc-name { font-weight: 800; font-size: 15px; margin-top: 4px; }
.sv-qn-standard { color: #9fd8c9; }
.sv-qn-enhanced { color: #ffd98a; }
.sv-qn-ultra { color: #ff9aa6; }
.sv-qc-sub { font-size: 11.5px; color: var(--muted); }
.sv-qc-prev { border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; background: #060a12; }
.sv-qc-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* echte generierte Tier-Previews seit 0916qtier (keine CSS-Filter-Illustration mehr) */
.sv-qc-eng { display: inline-block; justify-self: start; font-size: 10.5px; font-weight: 600;
  border: 1px solid rgba(148, 163, 190, .3); border-radius: 999px; padding: 2px 9px; color: #c6d2de; }
.sv-qc.on .sv-qc-eng { border-color: rgba(169, 243, 225, .5); color: var(--mint); }
/* 1008vrT1: Video Room, lesbare Engine-Zeile statt Pille. Image Lab erhaelt seinen Stil. */
.stx.stx-vid .sv-qc-eng { display: block; justify-self: stretch; font-size: 12px; font-weight: 600;
  line-height: 20px; border: 0; border-radius: 0; padding: 0; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.stx.stx-vid .sv-qc.on .sv-qc-eng { color: var(--teal); }
/* 0916qclean (Winchester, Polish R2): jede Zeile EINZEILIG auf einer Baseline —
   Label links kurz, Wert rechts nowrap mit Tabular-Nums, gleiche Zeilenhoehe,
   Werte brechen nie mitten in der Klammer ("respektlos" -> clean). */
.sv-qc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 11.5px; line-height: 18px; white-space: nowrap;
  color: var(--muted); border-top: 1px solid rgba(148, 163, 190, .1); padding-top: 6px; }
.sv-qc-row span { flex: 0 0 auto; }
.sv-qc-row b { flex: 0 0 auto; font-weight: 600; color: #d5deea;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Slow mode (soon, ehrlich disabled) ---- */
.sv-slow { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; opacity: .55; }
.sv-sw { width: 34px; height: 20px; border-radius: 999px; border: 1px solid rgba(148, 163, 190, .35);
  position: relative; background: rgba(13, 20, 32, .6); }
.sv-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #46536a; }
.sv-slow-t { font-size: 12px; color: var(--muted); }
.sv-slow-t em { font-style: normal; opacity: .7; }

/* ---- Schaetzung + Generate ---- */
.sv-est { font-size: 12.5px; color: var(--muted); margin: 10px 0 2px; }
.sv-est b { color: var(--mint); }
.sv-est em { font-style: normal; opacity: .65; }
.sv-go { margin-top: 10px; }

/* ---- Mobil ---- */
@media (max-width: 640px) {
  .sv-q { grid-template-columns: 1fr; }
  .sv-sc-frames { flex-wrap: wrap; }
  .sv-sc-vid { max-height: 200px; }
}

/* ============================================================
   v3 STORYBOARD (Gap-Spec 15.09.): Szenenkarte als zentraler
   Arbeitsbereich. 0916afrb: die grossen Start/End-Frame-Slots
   sind raus (verwirrend) — die Karte traegt Referenz-Zeile,
   Status und Ergebnis.
   v3 Stempel 0915vidboard, aktuell 0916afrb (siehe Kopf).
   ============================================================ */
.sv-scenes { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px;
  margin: 4px 0 14px; }
.sv-card { flex: 1 1 0; min-width: 170px; border: 1px solid rgba(148, 163, 190, .16); border-radius: 16px;
  background: linear-gradient(160deg, rgba(135, 57, 196, .10), rgba(13, 20, 32, .55) 42%);
  padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.sv-card.st-done { border-color: rgba(169, 243, 225, .4); }
.sv-card.st-fail { border-color: rgba(240, 160, 168, .5); }
.sv-card.stale { border-style: dashed; }
.sv-card-head { display: flex; align-items: center; gap: 8px; }
.sv-card-n { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #e9e4f8; }
.sv-card-tools { margin-left: auto; display: inline-flex; gap: 2px; }
.sv-tool { border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer;
  padding: 2px 6px; border-radius: 6px; }
.sv-tool:hover { color: var(--mint); background: rgba(169, 243, 225, .08); }
.sv-tool-x:hover { color: #f0a0a8; }

/* Kette zwischen den Karten (Ende A -> Start B) — ruht (MAX_SCENES=1) */
.sv-join { flex: 0 0 26px; display: grid; place-items: center; color: var(--muted-2); align-self: center; }
.sv-join.on { color: var(--mint); }
.sv-join .sv-link { width: 20px; height: 20px; }

.sv-card-vid { width: 100%; max-height: 200px; border-radius: 12px; background: #000;
  border: 1px solid rgba(148, 163, 190, .2); }
.sv-card-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-card-acts .btn-primary, .sv-card-acts .btn-ghost { min-height: 30px; font-size: 11.5px;
  padding: 0 10px; text-decoration: none; display: inline-flex; align-items: center; }

/* Grosse Ratio-Reihe */
.sv-ratios-lg .sv-rt-lg { padding: 10px 14px; }
.sv-ratios-lg .rt-l { font-size: 12.5px; }

/* Grosse Quality-Karten */
.sv-q-lg .sv-qc { padding: 14px; }
.sv-q-lg .sv-qc-name { font-size: 16px; }

/* Action-Bar (sticky unten im Workspace) */
.sv-bar { position: static; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(148, 163, 190, .2); background: rgba(10, 16, 26, .82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .6); }
.sv-bar .sv-slow { margin: 0; }
.sv-bal { font-size: 12px; color: var(--muted); }
.sv-bal b { color: inherit; color: #d5deea; }
.sv-total { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.sv-total b { color: var(--mint); font-weight: 700; }
/* 0918sesscap2: Rest der Native-Session ("Native: N of M left in this session") */
.sv-sess { font-size: 12px; color: var(--muted); }
.sv-sess.sv-sess-low { color: #f2c46d; }
.sv-go { margin-top: 0; min-height: 42px; padding: 0 26px; }

/* Rechte Spalte: Style/Duration-Bloecke */
.sv-railblock { margin-bottom: 18px; }
.sv-railblock .gal-h { margin-bottom: 8px; }
.sv-railblock .sv-hint { margin-top: 4px; }
.sv-style { flex-wrap: wrap; }

/* Mobil: Prompt-Liste oben, Szenen untereinander */
@media (max-width: 860px) {
  .sv-scenes { flex-direction: column; overflow: visible; }
  .sv-card { min-width: 0; }
  .sv-join { flex: 0 0 auto; padding: 2px 0; }
  .sv-join .sv-link { transform: rotate(90deg); }
  .sv-bar { position: static; }
  .sv-total { margin-left: 0; flex-basis: 100%; order: 5; }
}

/* v3 Layout: Video-Composer = Zentrum (Gap-Spec: "Das Zentrum der Seite muss dem
   aktuellen Filmprojekt gehoeren"). Nur Video (.stx-vid), Desktop only. */
@media (min-width: 1101px) {
  .st-grid.stx.stx-vid { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
}

/* 0916timing: .sv-bar NICHT mehr sticky — der Generate-Button gehoert UNTER die
   Quality-Karten (Winchester-Voice 16.09.: "der button musste unter sein, es macht
   keinen sinn dass der button generiert film der ueber ist wo aspect ratio drin ist").
   Stempel 0916align (Historie: ... -> 0916sym -> 0916align). */

/* ---- 0916gal3 (Winchester 16.09. 15:38, Foto "FILM PROJECTS", 2 Karten:
   "Die Karte ist so klein, dass jetzt vier Posts in einer Reihe passen. Mach
   daraus drei und etwas groesser. Es ist mir nicht moeglich, darauf zu
   klicken.") ----
   Film projects (NUR .stx-vid .st-gal — Beispiele/Showcase unberuehrt):
   3 Karten je Reihe statt 4, groessere Karten; die Kartenhoehe folgt dem
   Video-Aspect (--gar setzt das JS aus Eintrag/Metadaten, Fallback 16/9),
   Poster object-fit cover (geerbt), Titel darunter 1 Zeile (geerbt).
   Klick oeffnet die Video-Lightbox (Interim bis zur Player-Konzept-Wahl) —
   deshalb cursor:pointer + Hover-Outline wie .gal-it.ex; gal-act bleibt
   versteckt (die Aktionen leben in der Lightbox).
   v4-Historie (15.09.): war 4 Spalten + cursor:default + alles Klickbare raus —
   das galt fuer die BEISPIELE, nicht fuer die eigenen Film projects. */
@media (min-width: 1101px) {
  .stx-vid .st-gal .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
}
.stx-vid .st-gal .gal-act { display: none; }
.stx-vid .st-gal .gal-it { cursor: pointer; }
.stx-vid .st-gal .gal-it:hover .gal-med { outline: 1px solid rgba(255, 255, 255, .22); outline-offset: -1px; }
.stx-vid .st-gal .gal-med { aspect-ratio: var(--gar, 16 / 9); }
@media (max-width: 1100px) {
  .stx-vid .st-gal .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 0917play1zu1: wie html:has(body.lw-lock) in app.css (0914lwtilt) — die
   Scrollbar-Rinne (scrollbar-gutter: stable) darf rechts neben der fixen
   Kante-zu-Kante-Buehne keinen 10px-Streifen lassen. */
html:has(body.vglx-lock) { scrollbar-gutter: auto; overflow: hidden; }

/* ---- Video-Player Konzept C "Immersive" — 1:1 nach Winchesters Mockup
   (0917play1zu1, Winchester 17.09.: "eins zu eins gleich, frame by frame";
   Vorgaenger 0916playc; 0917vview2 = Refill: Geometrie px-vermessen am SOLL
   1672x941 nachgezogen, Extend/Upscale entfernt; 0917vview4 = Himejima-
   CONCERN 8e0731f3 abgearbeitet: Rail als eigene dunkle Spalte (Video endet
   x1547), Thumbs oben ab y76, dunkler Verlauf hinter der Control-Bar,
   Labels/Plakette/Prompt 16px, Control-Icons 24px weiss (Play gefuellt),
   Pfeile 70px, X 45px, Sheet mit 4px-Einzug + hellem Rand; 0917vview5 =
   ZV9-Feinjustage auf exakte SOLL-Werte (+/-2px-Harness): Thumbs 103x85
   (Aussenmass inkl. Rand), Aktions-Top 755 (margin 22), Bar-Mitte 657
   (Bar 29px), Pfeil-Mitte 348 (50% + 27px)) ----
   Buehne KANTE-ZU-KANTE hinter allen schwebenden Elementen (Landscape cover;
   Portrait = Blur-Ambient + contain), Dreieck oben links (x28/y24, 25x24),
   Glas-Close-X oben rechts (45px, links von der Rail), Thumb-Rail als eigene
   dunkle Spalte rechts (125px, #040811, Thumbs 103x85, gap 18, oben ab y76,
   aktiv = Mint-Border), runde Glas-Edge-Pfeile 70px auf halber VIDEO-Hoehe
   (Mitte-Zone + halbe Control-Bar), eigene Control-Bar ueber dem Sheet auf
   dunklem Verlauf, Bottom-Sheet (Gradient #161c2a -> #0e121e, Radius 26,
   4px seitlicher Einzug + heller Rand, Griff 60x5) mit zwei Spalten (links
   Titel/Badge/Meta/PROMPT, rechts 5 runde Aktions-Buttons 70px).
   Mint = #94FAE2 (Mockup-Wert).
   Huelle teilt sich .glx-bg/.glx-x mit der Bild-Lightbox — die Bild-Lightbox
   (.glx ohne .glx-vidbox) bleibt unveraendert beim Seitenpanel .glx-side. */
.glx.glx-vidbox { display: flex; flex-direction: column; }
.glx.glx-vidbox .glx-bg { z-index: 0; }
/* APPICS-Dreieck oben links (Kanon-Outline ohne Kachel, Mint) — SOLL x28/y24 */
.glx.glx-vidbox .vglx-mark { position: absolute; top: 24px; left: 28px; z-index: 4;
  width: 25px; height: 24px; color: #94FAE2; pointer-events: none; }
.glx.glx-vidbox .vglx-mark svg { width: 100%; height: 100%; display: block; }
/* Close-X oben RECHTS, rundes dunkles Glas 45px, LINKS von der Thumb-Rail
   (SOLL: Kreis x1483-1529/y20-64 -> right 143px, top 20px) */
.glx.glx-vidbox .glx-x { top: 20px; left: auto; right: 143px; z-index: 4; width: 45px; height: 45px;
  background: rgba(20, 22, 30, .55); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.glx.glx-vidbox .glx-x:hover { background: rgba(34, 38, 52, .72); }
.glx.glx-vidbox .glx-x svg { width: 18px; height: 18px; }
/* Buehne: absolut HINTER Rail/Pfeilen/Controls/Sheet, endet an der
   Rail-Spalte (125px -> Video-Rechtsrand x1547 wie SOLL) */
.glx.glx-vidbox .vglx-stage { position: absolute; inset: 0 125px 0 0; z-index: 1; padding: 0;
  display: flex; align-items: center; justify-content: center; }
.glx.glx-vidbox .glx-vid { position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; background: #05060c; display: block; cursor: pointer; }
.glx.glx-vidbox .vglx-amb { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(38px) brightness(.5); transform: scale(1.12); display: none; }
.glx.glx-vidbox.vglx-tall .vglx-amb { display: block; }
.glx.glx-vidbox.vglx-tall .glx-vid { object-fit: contain; }
/* Mitte-Zone (ueber der Buehne): traegt Edge-Pfeile + rechte Rail, selbst klick-durchlaessig */
.glx.glx-vidbox .vglx-mid { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; pointer-events: none; }
.glx.glx-vidbox .vglx-mid > * { pointer-events: auto; }
/* Dunkler Verlauf hinter der Control-Bar (SOLL: Steuerleiste auf Verlauf,
   sonst auf hellem Clip unlesbar) — endet an der Rail-Spalte, reicht bis
   auf die Sheet-Oberkante (Bar 29px + Abstand 30px = 59) */
.glx.glx-vidbox .vglx-mid::after { content: ""; position: absolute; left: 0; right: 125px; bottom: -59px;
  height: 210px; background: linear-gradient(180deg, rgba(5, 7, 13, 0), rgba(5, 7, 13, .88));
  pointer-events: none; }
/* Pfeile 70px, auf halber VIDEO-Hoehe (SOLL Kreis-Mitte y~348 von 705):
   die Mitte-Zone endet ueber der Control-Bar, also 50% + halbe Bar-Hoehe
   (29px Bar + 30px Abstand = 59 -> 27, feingemessen am SOLL). Rechter
   Pfeil LINKS von der Rail. */
.vglx-edge { position: absolute; top: calc(50% + 27px); transform: translateY(-50%); z-index: 2;
  width: 70px; height: 70px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(20, 22, 30, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; }
.vglx-edge:hover { background: rgba(34, 38, 52, .72); }
.vglx-edge svg { width: 26px; height: 26px; }
.vglx-edge-l { left: 26px; }
.vglx-edge-r { right: 146px; } /* LINKS von der Rail (SOLL: Kreis-Rechtsrand x1526, Rail-Dunkel ab ~1546) */
/* Thumb-Rail als eigene dunkle Spalte rechts (SOLL: Spalte ab x1547,
   #040811, volle Video-Hoehe; Thumbs oben angesetzt, erste bei y76) */
.vglx-thumbs { position: absolute; right: 0; top: 0; bottom: 0; width: 125px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start; overflow-y: auto;
  padding: 76px 0 20px 10px; background: #040811; scrollbar-width: none; }
.vglx-thumbs::-webkit-scrollbar { display: none; }
.vglx-thumb { flex: 0 0 auto; width: 103px; height: 85px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; background: #060a12; padding: 0; cursor: pointer; }
.vglx-thumb:hover { border-color: rgba(148, 250, 226, .5); }
.vglx-thumb.on { border-color: #94FAE2; }
.vglx-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* Eigene Control-Bar: Play | Zeit | Fortschritt (Mint + Knob) | Volume Restart
   Fullscreen — SOLL: Bar-Mitte y~657, 30px Luft ueber dem Sheet, links 45px,
   Zeit weiss 15px, Icons 24px weiss (Play gefuellt), Icon-Gruppe Pitch ~68,
   letzte Icon-Kante x~1508, Seek x246-1305. Bar 29px hoch (Knoepfe 36px
   zentriert darin) — sonst liegt die Mitte 4px ueber dem SOLL. */
.vglx-ctl { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center;
  gap: 22px; height: 29px; padding: 0 164px 0 45px; margin: 0 0 30px; }
.vglx-cbtn { flex: 0 0 auto; border: 0; background: none; color: #fff; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.vglx-cbtn:hover { background: rgba(255, 255, 255, .1); }
.vglx-cbtn svg { width: 24px; height: 24px; }
#vglxPlay svg { width: 24px; height: 24px; }
.vglx-time { flex: 0 0 auto; font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; min-width: 104px; white-space: nowrap; }
.vglx-seek { flex: 1 1 auto; min-width: 0; margin: 0 9px 0 17px; -webkit-appearance: none; appearance: none; height: 14px;
  background: transparent; cursor: pointer; --p: 0%; }
.vglx-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #94FAE2 var(--p), rgba(255, 255, 255, .25) var(--p)); }
.vglx-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: #94FAE2; border: 0; margin-top: -5px; }
.vglx-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.vglx-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: #94FAE2; }
.vglx-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #94FAE2; }
.vglx-cgroup { flex: 0 0 auto; display: flex; align-items: center; gap: 32px; }
/* Bottom-Sheet: 4px seitlicher Einzug + heller Rand wie das SOLL, dunkler
   Gradient, Drag-Handle, zwei Spalten (oben ausgerichtet — die Buttons
   starten auf Titelhoehe +22, SOLL Kreis-Oberkante y755) */
.vglx-sheet { position: relative; z-index: 2; flex: 0 0 auto; margin: 0 4px; border-radius: 26px 26px 0 0;
  padding: 0 52px 30px; max-height: 52vh; overflow-y: auto;
  background: linear-gradient(180deg, #161c2a, #0e121e);
  border: 1px solid rgba(255, 255, 255, .12); border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 0;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .45); }
.vglx-grip { width: 60px; height: 5px; border-radius: 3px; background: #3a3f4d; margin: 13px auto 13px; }
.vglx-cols { display: flex; align-items: flex-start; gap: 40px; }
.vglx-info { flex: 1 1 auto; min-width: 0; max-width: 47%; display: flex; flex-direction: column; gap: 8px; }
.vglx-titlerow { display: flex; align-items: center; gap: 10px; }
.vglx-title { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  color: #fff; font: inherit; font-size: 30px; font-weight: 700; line-height: 1.2; padding: 0; }
.vglx-title::placeholder { color: rgba(255, 255, 255, .35); }
.vglx-metarow { display: flex; align-items: center; gap: 24px; }
.vglx-badge { display: inline-flex; align-items: center; border-radius: 999px; background: #2a2f40;
  border: 1px solid rgba(255, 255, 255, .1); color: #eef2f8; font-size: 16px; padding: 8px 18px; }
.vglx-meta { font-size: 14px; color: #9aa3b8; }
.vglx-meta[hidden] { display: none; }
.vglx-plab { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #6b7280; margin-top: 16px; }
.vglx-pwrap { display: flex; align-items: flex-end; gap: 10px; font-size: 16px; color: #c3c9d8; line-height: 1.55; }
.vglx-ptext { flex: 0 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.vglx-sheet.vglx-open .vglx-ptext { display: block; -webkit-line-clamp: unset; overflow: visible; }
.vglx-showmore { flex: 0 0 auto; border: 0; background: none; padding: 0 0 1px; font: inherit; font-size: 16px;
  color: #94FAE2; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vglx-showmore:hover { filter: brightness(1.1); }
.vglx-more { display: grid; gap: 10px; }
.vglx-more[hidden] { display: none; }
.vglx-sheet .glx-lab { margin-bottom: 5px; }
.vglx-sheet .vglx-sf { max-width: 220px; width: 100%; border-radius: 10px;
  border: 1px solid rgba(148, 250, 226, .35); display: block; }
/* Aktionszeile rechts: 5 runde Buttons 70px + Labels 16px (SOLL: Kreise
   y755-823, Pitch ~94, Labels bei y~840). Extend/Upscale gibt es nicht
   (0917vview2: kein echter Backend-Weg = weglassen statt Deko,
   Refill-Auftrag). */
.vglx-acts { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 24px; margin-left: auto; margin-top: 22px; }
.vglx-act { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.vglx-ab { width: 70px; height: 70px; border-radius: 50%; background: #252b3c;
  border: 1px solid rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center;
  cursor: pointer; padding: 0; }
.vglx-ab:hover { background: #2d3346; }
.vglx-ab svg { width: 24px; height: 24px; }
a.vglx-ab { text-decoration: none; }
.vglx-al { font-size: 16px; color: #aab2c5; }
.vglx-act-post .vglx-ab { background: #94FAE2; border-color: #94FAE2; color: #0b0d12; }
.vglx-act-post .vglx-ab:hover { filter: brightness(1.06); }
.vglx-act-del .vglx-ab { background: #2a1a1e; border-color: rgba(255, 80, 100, .35); color: #ff6b7a; }
.vglx-act-del .vglx-ab:hover { background: #342027; }
.vglx-act-del .vglx-al { color: #ff6b7a; }
@media (max-width: 1100px) {
  .glx.glx-vidbox .vglx-mark { top: 14px; left: 16px; width: 22px; height: 22px; }
  .glx.glx-vidbox .glx-x { top: 14px; right: 14px; width: 38px; height: 38px; }
  /* Mobil keine Rail-Spalte: Buehne wieder volle Breite, Verlauf auch */
  .glx.glx-vidbox .vglx-stage { inset: 0; }
  .glx.glx-vidbox .vglx-mid::after { right: 0; bottom: -35px; height: 170px; }
  /* Rail wird horizontale Strip-Liste ueber dem Sheet (unter der Buehne) */
  .vglx-thumbs { top: auto; bottom: 8px; left: 12px; right: 12px; width: auto; transform: none;
    padding: 0; background: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; }
  .vglx-thumb { width: 74px; height: 64px; border-radius: 10px; }
  .vglx-edge { width: 42px; height: 42px; top: calc(50% + 18px); }
  .vglx-edge-l { left: 14px; }
  .vglx-edge-r { right: 14px; }
  .vglx-ctl { padding: 0 12px; gap: 8px; margin-bottom: 6px; }
  .vglx-time { min-width: 0; font-size: 11px; white-space: nowrap; }
  .vglx-seek { margin: 0 2px 0 6px; }
  .vglx-cgroup { gap: 6px; }
  .vglx-cbtn { width: 28px; height: 28px; }
  .vglx-cbtn svg { width: 20px; height: 20px; }
  .vglx-sheet { padding: 0 18px 22px; max-height: 48vh; }
  .vglx-cols { flex-direction: column; align-items: stretch; gap: 18px; }
  .vglx-info { max-width: none; }
  .vglx-title { font-size: 22px; }
  .vglx-acts { margin-left: 0; margin-top: 0; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
  .vglx-ab { width: 52px; height: 52px; }
}

/* Zweite Stufe <=380px (0917vview6, Himejima SPERRE 2 zu bc402d44): bei 360px
   stand der Vollbild-Knopf 9,8px ausserhalb (range-input hat eine eingebaute
   Mindestbreite, deshalb min-width:0 am Seek oben + hier Abstaende weiter
   runter). Zielmass: letzte Kante <= Breite - 8 wie bei 390. */
@media (max-width: 380px) {
  .vglx-ctl { padding: 0 10px; gap: 6px; }
  .vglx-seek { margin: 0 0 0 4px; }
  .vglx-cgroup { gap: 4px; }
}

/* ---- Hover = Play-Symbol auf den eigenen Video-Karten (0916playc,
   Winchester 16.09. 16:51: "Maus ueber Video -> Play-Symbol erscheint") ----
   Desktop (feiner Zeiger): fadet bei Hover ein. Touch (hover: none): dauerhaft
   klein unten rechts — signalisiert "Video, Tap = Player". pointer-events:none,
   der Klick gehoert der Karte. Ausserhalb .stx-vid .st-gal unsichtbar. */
.gal-play { display: none; }
.stx-vid .st-gal .gal-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(6, 10, 18, .62); color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.stx-vid .st-gal .gal-play svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .stx-vid .st-gal .gal-it:hover .gal-play { opacity: 1; }
}
@media (hover: none) {
  .stx-vid .st-gal .gal-play { top: auto; left: auto; right: 7px; bottom: 7px; transform: none;
    width: 30px; height: 30px; opacity: .95; }
  .stx-vid .st-gal .gal-play svg { width: 14px; height: 14px; }
}

/* ---- v4.1 (Winchester 16.09.: "wir machen nur ein davon erstmal, groesser") ----
   EINE grosse Szenenkarte als Default; zusaetzliche Karten (Add scene) teilen sich
   die Reihe wieder kleiner. Stempel 0915vidbig. */
@media (min-width: 1101px) {
  .sv-card:only-child { flex: 0 0 560px; }
}

/* ---- Clip-Karten (Showcase 0916afrb; Basis aus der frueheren
   T2V-Beispiel-Galerie). Wie die Quality-Previews: echte Standbilder statt
   CSS-Illustration. Poster sofort, Clip hydriert erst bei Tap/Hover. ---- */
.sv-exc { border: 1px solid rgba(148, 163, 190, .16); border-radius: 14px;
  background: rgba(13, 20, 32, .55); padding: 8px; display: grid; gap: 7px;
  align-content: start; }
.sv-exc-media { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden;
  background: #060a12; border: 0; padding: 0; cursor: pointer; display: block; width: 100%; }
.sv-exc-media:hover { box-shadow: 0 0 0 1px rgba(169, 243, 225, .35); }
.sv-exc-media:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.sv-exc-poster { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.sv-exc-vid { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; opacity: 0; transition: opacity .18s ease; }
.sv-exc.play .sv-exc-vid { opacity: 1; }
.sv-exc-badge { position: absolute; top: 6px; left: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px;
  background: rgba(6, 10, 18, .72); color: #d5deea; border: 1px solid rgba(148, 163, 190, .25); }
.sv-exc-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(6, 10, 18, .58); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45); transition: opacity .15s ease; }
.sv-exc-ic svg { width: 19px; height: 19px; }
.sv-exc.play .sv-exc-ic { opacity: 0; }
.sv-exc-cap { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ============================================================
   POLISH R3 (Winchester 16.09.: "noch mehr verschaerfen, 120%")
   Optik-Schaerfung auf Konzept-B-Niveau. Stempel 0916polish3.
   ============================================================ */

/* Mode-Chips als segmentierte Pille */
.stx-left .cat-chips#stVidMode { display: inline-flex; gap: 0; padding: 3px;
  border: 1px solid rgba(148, 163, 190, .22); border-radius: 999px;
  background: rgba(10, 16, 26, .55); }
.stx-left .cat-chips#stVidMode .catc { height: 34px; padding: 0 18px; border: 0;
  background: transparent; border-radius: 999px; color: var(--muted); font-size: 12.5px; }
.stx-left .cat-chips#stVidMode .catc.on { background: linear-gradient(135deg, rgba(169, 243, 225, .22), rgba(135, 57, 196, .25));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(169, 243, 225, .45); }

/* Szenenkarte: ruhiger Rahmen, Ketten-Glow */
.sv-card { border-color: rgba(169, 128, 224, .22); }
.sv-join.on .sv-link { filter: drop-shadow(0 0 5px rgba(169, 243, 225, .8)); }

/* Ratio: Auswahl mit Mint-Glow, soon mit ehrlichem Mini-Tag */
.sv-rt { transition: border-color .15s ease, box-shadow .15s ease; }
.sv-rt.on { box-shadow: 0 0 0 1px rgba(169, 243, 225, .5), 0 6px 18px -8px rgba(169, 243, 225, .5); }
.sv-rt.soon::after { content: "soon"; display: block; font-size: 8.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px; }

/* Quality: Auswahl mit Violet->Mint Gradient-Ring */
.sv-qc { position: relative; }
.sv-qc.on { border: 1px solid transparent;
  background: linear-gradient(rgba(13, 20, 32, .92), rgba(13, 20, 32, .92)) padding-box,
    linear-gradient(135deg, rgba(135, 57, 196, .8), rgba(169, 243, 225, .75)) border-box;
  box-shadow: 0 12px 32px -14px rgba(135, 57, 196, .55); }
.sv-qc-prev { border-radius: 10px; }
.sv-qc-prev img { border-radius: 10px; }

/* Action-Bar: Glas mit Gradient-Kante oben, CTA mit Glow */
.sv-bar { border: 1px solid transparent;
  background: linear-gradient(rgba(10, 16, 26, .88), rgba(10, 16, 26, .88)) padding-box,
    linear-gradient(90deg, rgba(135, 57, 196, .55), rgba(169, 243, 225, .45), rgba(135, 57, 196, .55)) border-box; }
.sv-go { box-shadow: 0 6px 22px -6px rgba(169, 243, 225, .5);
  transition: transform .15s ease, box-shadow .15s ease; }
.sv-go:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -6px rgba(169, 243, 225, .65); }
.sv-go:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* Film-idea Feld: dezente Gradient-Kante bei Fokus */
.stx-left .m-input:focus, .stx-left textarea:focus { border-color: rgba(169, 243, 225, .5);
  box-shadow: 0 0 0 1px rgba(169, 243, 225, .3); outline: none; }

/* ---- Fast/Normal-Toggle auf der Standard-Karte (0916fastmode) ---- */
.sv-mode { display: inline-flex; gap: 0; padding: 2px; border-radius: 999px;
  border: 1px solid rgba(148, 163, 190, .22); background: rgba(10, 16, 26, .55);
  justify-self: start; }
.sv-mode-o { font-size: 10.5px; font-weight: 600; color: var(--muted);
  padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.sv-mode-o.on { background: linear-gradient(135deg, rgba(169, 243, 225, .22), rgba(135, 57, 196, .25));
  color: #fff; box-shadow: inset 0 0 0 1px rgba(169, 243, 225, .45); }

/* ---- Symmetrie der Quality-Karten (0916sym, Winchester-Voice) ---- */
.sv-q { align-items: stretch; }
.sv-qc { height: 100%; align-content: start; }
.sv-mode { min-height: 26px; align-items: center; }

/* ---- 0916playc (Winchester 16.09. 16:51): Karten deckungsgleich + ehrliche
   Ultra-Pille ----
   Ultra zeigt EINE sichtbare "Normal"-Pille (kein Toggle, keine unsichtbare
   Platzhalter-Luecke wie beim Interim-Stempel) — gleiche 26px-Zeile = gleiche
   Kartenhoehe. sub/eng duerfen nie umbrechen, sonst driften die Hoehen auf
   schmalen Viewports auseinander (gemessen: alle 3 Karten +-1px auf
   1440/1920/390). */
.sv-mode-one .sv-mode-o { cursor: default; }
.sv-qc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-qc-eng { white-space: nowrap; }

/* ---- Flucht-Fix (gemessen 16.09., Winchester: "nicht auf gleicher Hoehe") ----
   (1) Toggle exakt 26px auf allen Karten (lange Labels wrappten Standard auf 38px)
   (2) Spalten strikt gleich (minmax(0,1fr)) — Ultra wurde durch den nowrap-Wert
       "1080p + sound" breiter, dadurch Preview 85 statt 76px und Zeilen versetzt. */
@media (min-width: 641px) { .sv-q { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-mode { height: 26px; min-height: 26px; overflow: hidden; white-space: nowrap; }
.sv-mode-o { white-space: nowrap; padding: 3px 8px; }

/* Ultra-Overflow: die nowrap-Zeile "1080p + sound" drueckte die Karte ~8% ueber die
   Spalte -> Preview 85 statt 79px, Zeilen versetzt. Karte darf schrumpfen, Zeilen
   11px -> passt ohne Wachstumsdruck. */
.sv-qc { min-width: 0; }
.sv-qc-row { font-size: 11px; }

/* Preview-Breiten hart gleichziehen (gemessen: 140.1/140.1/145.7 bei gleichen
   170er-Karten — Restbreite unterschiedlich). Jetzt deterministisch gleich. */
.sv-qc > * { min-width: 0; }
.sv-qc-prev { width: 100%; }

/* 1010svq (Video Room, Klappe Style Presets): die drei Stufenkarten stehen in der aufgeklappten
   Sicht wieder sichtbar. Die linke Spalte ist seit 1026clab schmaler; je nach Fensterbreite bleibt
   einer Karte zwischen rund 97 px und 220 px. Die Regeln richten sich darum nach der Breite der
   Klappe, nicht nach der Breite des Fensters:
   (1) drei gleiche Spalten nur, wenn die Klappe mindestens 420 px misst, sonst eine Spalte;
   (2) ist eine Kartenzeile schmaler als 190 px, steht der Wert unter dem Label, sonst rechts
       daneben. Alle Zeilen einer Karte haben dieselbe Breite, die drei Karten also dieselbe
       Zeilenfolge und dieselbe Hoehe;
   (3) die Unterzeile hat fest zwei Zeilen Platz statt Auslassungspunkten nach einer. */
.mst-presets #svQ { grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 21px) / 3), calc((420px - 100%) * 999), 100%), 1fr)); }
.mst-presets #svQ .sv-qc-row { flex-wrap: wrap; row-gap: 0; }
.mst-presets #svQ .sv-qc-row b { flex: 0 1 auto; min-width: clamp(0px, calc((190px - 100%) * 999), 100%); white-space: normal; }
.mst-presets #svQ .sv-qc-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  white-space: normal; line-height: 16px; height: 32px; }

/* ---- 0916afrb (KIMI-WEB-VIDEOROOM-AUFRAEUMEN-SHOWCASE-KONZEPTE-20260916,
   Winchester 16.09.: "sieht brutal schlimm aus", "bitte mitdenken") ----
   Rechte Spalte = 1. "Your videos" (Fortschritts-Karten laufender Jobs + eigene
   Clips) 2. "Showcase" (11 Ultra-Clips mit Kanon-Wasserzeichen).
   NICHTS wird mehr per matchMedia verschoben — mobil stapelt die Rail-Huelle
   per display:contents beides nativ UNTER den Composer. */
.stx-right { min-width: 0; }
@media (max-width: 1100px) { .stx-right { display: contents; } }
.yv-sec .m-lab, .sc-sec .m-lab { margin-top: 0; }
.sc-sec { margin-top: 26px; }

/* Fortschritts-Karte laufender Job (Daten: localStorage apxweb.lab.pend) */
.yv-jobs { display: grid; gap: 8px; margin: 8px 0 12px; }
.yv-job { display: flex; align-items: center; gap: 10px; border-radius: 12px;
  border: 1px solid rgba(169, 243, 225, .3); padding: 9px 12px;
  background: linear-gradient(140deg, rgba(169, 243, 225, .07), rgba(135, 57, 196, .10) 70%); }
.yv-job-spin { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(169, 243, 225, .25); border-top-color: var(--mint);
  animation: yvspin 0.9s linear infinite; }
@keyframes yvspin { to { transform: rotate(360deg); } }
.yv-job-b { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.yv-job-b b { font-size: 12.5px; color: #e9e4f8; }
.yv-job-m { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mint); }
.yv-job-p { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.yv-job-t { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--mint);
  font-variant-numeric: tabular-nums; }
/* 0919wait3: Restzeit neben der Uhr (laengstes Label 47 Zeichen). Breit: rechts
   neben der Uhr, hoechstens die halbe Karte. Schmal (<=640): eigene Zeile unter
   dem Text, damit weder Label noch Prompt zerhackt werden. Leer = unsichtbar. */
.yv-job-l { flex: 0 0 auto; max-width: 48%; font-size: 11px; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums; }
.yv-job-l:empty { display: none; }
@media (max-width: 640px) {
  .yv-job { flex-wrap: wrap; }
  .yv-job-b { flex-basis: 0; }   /* sonst nimmt ein langer Prompt die ganze Zeile und Spinner/Uhr rutschen weg */
  .yv-job-l { flex-basis: 100%; max-width: none; box-sizing: border-box; text-align: left; padding-left: 26px; }
}

/* Showcase-Grid: einheitliche 16:9-Media, Karten-Basis = .sv-exc oben.
   0918harm (Winchester 18.09.: "DREI VIDEOS IN EINER SPALTE"): die auto-fill-Spur
   liess die Spaltenzahl aus der Rail-Breite fallen — GEMESSEN auf 1440 waren es
   VIER Kacheln a 145,4x81,8px. Jetzt drei, wie im Image Lab und im 3D VERSE;
   dieselbe Zahl fuer alle drei Showcases steht jetzt EINMAL hier. */
.sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sc-media { aspect-ratio: 16/9; }
.sc-cap { margin-top: 6px; min-height: 0; display: block; }
@media (max-width: 1100px) { .sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ---- 0918harm: BREITKANT UND HOCHKANT IN EINER FORM ----
   Winchester 18.09.: "finde einen WEG wie man halt BREITKANT-Videos und
   HOCHKANT-Videos in EINE FORM reinbringt dass es miteinander HARMONIERT".
   Bestand der Video-Showcase: 11 Clips, davon 3x 9:16 und 8x 16:9 (an den
   Postern gemessen: 720x1280 bzw. 1280x720).
   Was vorher passierte (gemessen am Stand b195397a, 1440):
     - Poster object-fit:cover in der 16:9-Kachel -> vom Hochkant-Frame waren
       nur 31,6 % der Hoehe zu sehen, der Rest war weggeschnitten.
     - beim Abspielen wechselte dieselbe Karte auf .sv-exc-vid object-fit:contain
       -> die Flaeche sprang von 145x82 auf 46x82. Das Bild aenderte beim Klick
       seine Form; genau das laesst das Raster zerfallen.
   Der Weg ist die Hausform, die es im Feed (.ph-bg, app.css) und im Composer
   (.cpo-medbg) schon gibt: der Frame wird EINGEPASST (contain), und dahinter
   liegt derselbe Frame geblurrt als Fuellung. Ergebnis: gleich grosse Kacheln,
   beide Formate GANZ im Bild, keine schwarzen Balken, kein Formsprung.
   Kein zusaetzliches Netzgewicht — die Fuell-Lage traegt dieselbe URL wie das
   Poster und kommt aus dem Cache.
   Bewusst NICHT geaendert: das 16:9-Kachelmass. Es ist das Mass, in dem 8 der
   11 Clips exakt aufgehen (0 Fuellflaeche); ein neutrales 1:1 haette bei ALLEN
   elf gefuellt. Falls Winchester die quadratische Form lieber ist: eine Zeile. */
.sc-fit .sv-exc-poster { object-fit: contain; }
/* Der schwarze Grund des Video-Elements wuerde die Fuell-Lage beim Abspielen
   zudecken — dann waere der Formsprung nur verschoben statt weg. */
.sc-fit .sv-exc-vid { background: transparent; }
.sv-exc-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(18px) saturate(1.15) brightness(.6); transform: scale(1.18); opacity: .55;
  pointer-events: none; display: block; }

/* 0918t2isc (WEB-T2I-SHOWCASE-PREVIEW-20260918): dieselbe Rail-Struktur im
   Image Lab. Die Bild-Showcase traegt 3:4 statt 16:9 — alle sechs Assets sind
   gemessen 480x640, im 16:9-Rahmen wuerde die Vorschau das Motiv beschneiden.
   09183dsc (Winchester 18.09., Screenshots): dasselbe Raster traegt jetzt auch
   die 3D-Showcase (#scGrid3) — die sechs 3D-Assets sind ebenfalls 480x640.
   Die Regel .yi-sec .m-lab ist mit dem eigenen Label "Your images" entfallen:
   die Galerie behaelt ihre Bestandsueberschrift ("Your creations" aus paintGal),
   sonst stehen beim Rueckkehrer zwei Ueberschriften uebereinander. */
/* Sechs Karten in der auto-fill-Spur des Video-Rasters ergaben 4+2 — eine
   angebrochene Reihe. Winchesters stehendes Wort zu genau diesem Raster
   (16.09., Foto "FILM PROJECTS"): "Mach daraus drei und etwas groesser."
   0918harm: die drei Spalten (und mobil die zwei) stehen jetzt in .sc-grid
   selbst — alle drei Showcases teilen dieselbe Zahl, und die zweite, nur fuer
   .sc-ic wiederholte Mobil-Regel ist damit entbehrlich. .sc-ic traegt nur noch,
   was es wirklich unterscheidet: das 3:4-Kachelmass der 480x640-Assets. */
.sc-ic .sc-media { aspect-ratio: 3/4; }
.sc-ic .sv-exc-media { cursor: pointer; padding: 0; border: 0; background: none; display: block; width: 100%; }

/* Referenz-Zeile mit Start-frame-Umschalter (refUi opts.startFrame) */
.sv-ref-lab em { font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--muted); }
.sv-refs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.refw { display: grid; gap: 5px; justify-items: center; }
.refsf { border: 1px solid rgba(148, 163, 190, .3); border-radius: 999px; background: none;
  color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; cursor: pointer; }
.refsf:hover { border-color: rgba(169, 243, 225, .5); color: var(--mint); }
.refsf.on { border-color: var(--mint); color: #0b1530; background: var(--mint); }
.gal-empty-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

/* 0916rek (KIMI-WEB-VIDEOROOM-REKLAMATION-COMPOSER-20260916, Winchester 16.09. 16:2x):
   (1) Tag-Chip-Echo unterm Prompt — jeder "@n"/"#imagen"-Tag zeigt sein Bild,
   fehlende Bilder ehrlich markiert (.miss); (2) schlanker Karten-Status
   (.sv-live) — Vorschau/Ergebnis leben RECHTS in "Your videos". */
.st-ref-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.st-ref-tags[hidden] { display: none; }
.stag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px;
  border: 1px solid rgba(148, 250, 226, .35); border-radius: 999px;
  background: rgba(148, 250, 226, .07); color: var(--mint);
  font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.stag img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; display: block; }
.stag.miss { border-color: rgba(255, 122, 122, .45); background: rgba(255, 122, 122, .07);
  color: #ff9d9d; border-style: dashed; }
.sv-live { margin: 10px 0 0; font-size: 12px; color: var(--muted); display: flex;
  flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-live b { color: var(--mint); font-weight: 700; }
.sv-live-acts { display: inline-flex; gap: 6px; }
.sv-live-acts .btn-ghost { min-height: 26px; font-size: 11px; padding: 2px 10px; }

/* 0917img3 (KIMI-WEB-IMAGE-DREI-STUFEN-20260916, Winchester 16.09. 19:3x):
   Image Lab auf den drei Stufen des Video Rooms. (1) Ultra-Kachel OHNE echtes
   Sample — ehrliche Text-Kachel statt Fake-Bild (Ultra ist noch nie gelaufen).
   (2) Format-Kachel, die die gewaehlte Engine nicht kann (.off statt .soon —
   verfuegbar auf einer anderen Stufe, nicht "bald"). */
.sv-qc-new { display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed rgba(148, 163, 190, .3); }
.sv-qc-new span { font-size: 11px; color: var(--muted); line-height: 1.45; padding: 8px 12px; }
.sv-rt.off { opacity: .38; cursor: not-allowed; }

/* ---- AILAB-UPSCALER-T2B (02.10., Winchester 07:1x): vierte Quality-Kachel "Upscale" NUR in Text to Image ----
   Die 4-Spalten-Regel fuer #stQ steht in css/ailab-image-design.css (NICHT hier: tests/unit/studio-vid-filmprojects.test.js
   Test 1 verbietet ein Vier-Spalten-Raster in dieser Datei als Wache gegen das alte 4er-Galerie-Raster).
   Der Video Room (#svQ) bleibt bei 3 (Regel oben, 641 px); mobil bleibt 1 Spalte. */
/* Name der vierten Stufe: Pastellton in derselben Helligkeitsfamilie wie .sv-qn-standard/-enhanced/-ultra (Zeile 85-87). */
.sv-qn-upscale { color: #b9b4ff; }
/* Ehrlich gesperrte Kachel (Upscale-Modell fehlt auf der Engine): disabled, Grund sichtbar ueber der Vorschau,
   Hoehe unveraendert — keine Attrappe, kein toter Knopf. */
.sv-qc.sv-qc-off { cursor: not-allowed; opacity: .55; }
.sv-qc.sv-qc-off:hover { transform: none; border-color: rgba(148, 163, 190, .16); }
.sv-qc-prev { position: relative; }
.sv-qc-na { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: rgba(20, 20, 30, .88);
  color: var(--ink); font-size: 11px; line-height: 1.35; }
/* Zwei Stufen sichtbar: 1 Render (Enhanced, 1K) / 2 Upscale (APPICS GPU). Tokens aus css/app.css. */
.iup-steps { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; }
.iup-step { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--panel-2); border-radius: var(--radius-s);
  background: var(--panel); color: var(--muted); font-size: 12px; line-height: 1.4; }
.iup-step b { color: var(--ink); font-size: 13px; font-weight: 600; }
.iup-step em { font-style: normal; overflow-wrap: anywhere; }
.iup-step.is-run { border-color: var(--teal); }
.iup-step.is-run em, .iup-step.is-ok em { color: var(--teal); }
.iup-step.is-fail { border-color: var(--red); }
.iup-step.is-fail em { color: var(--red); }
.iup-step.is-wait em { color: var(--muted); }
.ai-out.iup-src { opacity: .55; }
.iup-meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.iup-act { margin-left: 2px; padding: 0; border: 0; background: none; color: var(--teal); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer; }