/* styles.css — BatchTurbo Studio  */

/* =========================
   Root variables
   ========================= */
:root{
  --bg0:#07080b;
  --bg1:#0b0d12;
  --bg2:#10141c;
  --panel:#0e121a;
  --card:#0f141d;
  --card2:#0c1017;

  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);

  --text:#e9edf6;
  --muted:rgba(233,237,246,.7);
  --muted2:rgba(233,237,246,.55);

  --shadow: 0 18px 55px rgba(0,0,0,.55);
  --shadow2: 0 10px 26px rgba(0,0,0,.45);

  --radius:18px;
  --r2:14px;
  --r3:12px;

  --green:#2ee59d;
  --blue:#3aa2ff;
  --yellow:#ffd24a;
  --red:#ff5166;

  --focus: rgba(58,162,255,.35);
  --gradA: linear-gradient(135deg, rgba(46,229,157,.20), rgba(58,162,255,.14));
  --gradB: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));

  --brand-blue: #5ad7ff;
  --brand-blue-strong: rgba(90, 215, 255, 0.92);
  --brand-blue-border: rgba(90, 215, 255, 0.28);
  --brand-blue-border-hover: rgba(90, 215, 255, 0.48);
  --brand-blue-bg: rgba(90, 215, 255, 0.08);
  --brand-blue-bg-hover: rgba(90, 215, 255, 0.12);
}

/* =========================
   Global reset
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(58,162,255,.14), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(46,229,157,.10), transparent 60%),
    radial-gradient(900px 600px at 60% 120%, rgba(255,82,102,.10), transparent 60%),
    var(--bg0);
  color:var(--text);
  font: 14px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow:hidden;
}

/* =========================
   App shell
   ========================= */
.app{
  height:100%;
  display:flex;
  flex-direction:column;
}
.topbar{
  height:58px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex;gap:10px;align-items:center}
.brand__dot{
  width:12px;height:12px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 35%),
    linear-gradient(135deg, var(--green), var(--blue));
  box-shadow: 0 0 0 6px rgba(46,229,157,.08);
}
.brand__name{font-weight:650;letter-spacing:.2px}
.brand__tag{color:var(--muted2);font-size:12px;margin-top:1px}
.topbar__right{display:flex;gap:10px;align-items:center}

.workbench{
  flex:1;
  min-width:0;
  min-height:0;
  display:flex;
  gap:12px;
  padding:0 12px 12px;
}
.panel{
  min-height:0;
  min-width:0;
  border:1px solid var(--stroke);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(10,12,17,.35);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(14px);
}
.panel--left{
  flex: 0 1 45%;
  min-width: 0;
  display:flex;
  flex-direction:column;
}
.panel--right{
  flex: 1 1 55%;
  min-width: 0;
  display:flex;
  flex-direction:column;
}

/* Mobile/Small: Panels stack */
@media (max-width: 980px){
  body{overflow:auto}
  .workbench{flex-direction:column; overflow:auto}
  .panel--left,.panel--right{flex: 0 0 auto}
  .panel--left{min-height: 520px}
  .panel--right{min-height: 520px}
}

/* =========================
   Tabs
   ========================= */
.tabs{
  display:flex;
  gap:8px;
  padding:26px 10px 10px;
  border-bottom:1px solid var(--stroke);
  background: rgba(0,0,0,.14);
}
.tab{
  flex:1;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:10px 10px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted);
  background: rgba(255,255,255,.03);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
}
.tab:hover{transform: translateY(-1px); border-color: var(--stroke)}
.tab.is-active{
  background: var(--gradA);
  color:var(--text);
  border-color: rgba(58,162,255,.25);
}
.tab__icon{filter:saturate(1.2)}
.tabview{display:none; min-height:0; overflow:auto; padding:10px; flex:1}
.tabview.is-active{display:block}

/* =========================
   Cards
   ========================= */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    rgba(12,16,23,.55);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:12px;
  margin-bottom:10px;
}
.card--sticky{
  position: sticky;
  top:0;
  z-index: 2;
}
.card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.card__title{font-weight:650;letter-spacing:.2px}
.card__subtitle{color:var(--muted2);font-size:12px;margin-top:2px}

/* =========================
   Form elements
   ========================= */
.stack{display:flex;flex-direction:column;gap:10px}
.formgrid{display:grid;gap:10px}
.formgrid--2{grid-template-columns: 1fr 1fr}
.formgrid--3{grid-template-columns: 1.2fr 1.4fr 1.2fr}
@media (max-width: 1080px){
  .formgrid--2{grid-template-columns:1fr}
  .formgrid--3{grid-template-columns:1fr}
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:12px;color:var(--muted)}
.hint{font-size:12px;color:var(--muted2)}
.maskTitle{font-weight:650;letter-spacing:.2px;margin-bottom:2px}

.inputrow{display:flex;gap:8px;align-items:center}
.input, .textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color:var(--text);
  padding:10px 12px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.input:focus, .textarea:focus{
  border-color: rgba(58,162,255,.40);
  box-shadow: 0 0 0 4px var(--focus);
}
.textarea{resize:none; overflow:auto; max-height:160px}
.textarea--big{max-height:none; height: min(64vh, 520px)}
.textarea--compact{min-height:84px}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding:10px 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px); border-color: var(--stroke2)}
.btn:active{transform: translateY(0px)}
.btn--primary{
  background: var(--gradA);
  border-color: rgba(46,229,157,.28);
}
.btn__icon{opacity:.95}

.ghost{
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  padding:8px 10px;
  border-radius: 999px;
}
.ghost:hover{background: rgba(255,255,255,.05); color: var(--text)}

.iconbtn{
  width:38px;height:38px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
  flex: 0 0 auto;
}
.iconbtn:hover{transform: translateY(-1px); border-color: var(--stroke2)}
.icon{font-weight:800}

/* =========================
   Pills
   ========================= */
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color: var(--muted);
  user-select:none;
}
.pill.tiny{padding:6px 9px; font-size:12px}
.statuspill{gap:10px}
.statusdot{
  width:9px;height:9px;border-radius:50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(46,229,157,.10);
}
.dot{width:8px;height:8px;border-radius:50%}
.dot--green{background: var(--green)}
.dot--blue{background: var(--blue)}
.dot--yellow{background: var(--yellow)}
.dot--red{background: var(--red)}

/* =========================
   Divider / Callout
   ========================= */
.divider{
  height:1px;
  background: var(--stroke);
  margin: 10px 0;
}
.callout{
  margin-top:10px;
  padding:10px;
  border-radius: 14px;
  border:1px solid rgba(58,162,255,.18);
  background: rgba(58,162,255,.06);
}
.callout__title{font-weight:650;margin-bottom:4px}
.callout__body{color:var(--muted);font-size:12px}

/* =========================
   Select (custom portal)
   ========================= */
.select{
  width:100%;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.select:hover{border-color: var(--stroke2)}
.select:focus{outline:none}
.select__value{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.select__chev{opacity:.7}

.portalRoot{position:fixed; inset:0; pointer-events:none; z-index:20000}
.dropdown{
  pointer-events:auto;
  position:fixed;
  min-width:220px;
  max-width:min(480px, 92vw);
  max-height:min(320px, 50vh);
  overflow:auto;
  border-radius: 16px;
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    rgba(10,12,17,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  padding:6px;
}
.dditem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius: 12px;
  color: var(--text);
  cursor:pointer;
}
.dditem:hover{background: rgba(255,255,255,.06)}
.dditem.is-active{
  background: rgba(46,229,157,.12);
  border:1px solid rgba(46,229,157,.20);
}
.ddmeta{color: var(--muted2); font-size:12px}

/* =========================
   Mask layout
   ========================= */
.mask{display:flex;flex-direction:column;gap:12px;min-height:0}
.mask > *{min-height:0}
.mask .field{flex:0 0 auto}
.mask #btPromptAlert{flex:0 0 auto}
.inlineRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row{display:flex;justify-content:flex-end}
.footerrow{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px}
.footerrow--tight{margin-top:8px}
.footerrow--split{justify-content:space-between}
.footerrow__left{min-width:0}
.footerrow__right{display:flex;gap:10px;align-items:center}

/* =========================
   Details (collapsible)
   ========================= */
.details{
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(0,0,0,.10);
  overflow:hidden;
  margin-bottom:10px;
}
.details > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--text);
  font-weight:650;
}
.details > summary::-webkit-details-marker{display:none}
.details[open] > summary{border-bottom:1px solid var(--stroke)}
.details__body{padding:12px}
.details__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.details__meta{color: var(--muted2); font-size:12px}
.details--payload{margin-top:0}

/* =========================
   Upload tiles (KI-Charakter)
   ========================= */
.tileRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.tileRow--character{
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1080px){
  .tileRow,
  .tileRow--character{grid-template-columns:1fr}
}
.upTile{
   border:1px dashed rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  overflow:hidden;
  min-height: 210px;
  position:relative;
  display:flex;
  flex-direction:column;
}
.upTile__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px 8px;
  gap:10px;
}
.upTile__label{color:var(--muted); font-size:12px}
.upTile__body{
  flex:1;
  display:grid;
  place-items:center;
  padding:12px;
  position:relative;
  min-height:210px;
}
.dropzone{
  width:100%;
  height:100%;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  color: var(--muted);
  min-height:140px;
  cursor:pointer;
}
.thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: 14px;
  display:none;
}
.upTile__foot{
  padding:10px;
  border-top:1px solid var(--stroke);
  background: rgba(0,0,0,.10);
  display:none; /* shown when has-image is active */
}
.upTile.has-image .upTile__foot{display:block}
.upTile.has-image .thumb{display:block}

/* Drop zone remains active (invisible) to allow replacement */
.upTile.has-image .dropzone{
  position:absolute;
  inset:10px;
  border:1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,0);
  color: rgba(233,237,246,0);
  opacity:0;
  pointer-events:auto;
}
.upTile.has-image .dropzone:hover,
.upTile.has-image.is-drag .dropzone{
  opacity:.95;
  color: rgba(233,237,246,.75);
  background: rgba(0,0,0,.18);
}

/* Hover hint */
.upTile.has-image .upTile__body::after{
  content: attr(data-hover-hint);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.38);
  color: rgba(233,237,246,.82);
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.upTile.has-image:hover .upTile__body::after,
.upTile.is-drag .upTile__body::after{
  opacity: 1;
  transform: translateY(0);
}
.upTile.has-image:hover .thumb{filter: brightness(.94)}

/* Tile Actions: ↺ dezent + reveal */
#tab-character .upTile .tileActions .iconbtn{
  width: 32px !important;
  height: 32px !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.02) !important;
  opacity: .28 !important;
  transform: none !important;
}
#tab-character .upTile:hover .tileActions .iconbtn,
#tab-character .upTile:focus-within .tileActions .iconbtn{
  opacity: .95 !important;
}
#tab-character .upTile .tileActions .iconbtn:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  transform: translateY(-1px) !important;
}
#tab-character .upTile .tileActions .iconbtn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px var(--focus) !important;
}

/* =========================
   Code block
   ========================= */
.code{
  margin:0;
  padding:10px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.30);
  color: rgba(233,237,246,.88);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  max-height: 220px;
  overflow:auto;
}

/* =========================
   Right panel: output
   ========================= */
.outHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--stroke);
  background: rgba(0,0,0,.12);
}
.outTitle{font-weight:650}
.outSub{color:var(--muted2);font-size:12px;margin-top:2px}
.outHeader__right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.stepper{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.22);
  overflow:hidden;
}
.stepper__btn{
  width:36px;height:36px;
  border:none;
  background: transparent;
  color: var(--text);
  cursor:pointer;
}
.stepper__btn:hover{background: rgba(255,255,255,.06)}
.stepper__value{
  width:44px;
  text-align:center;
  color: var(--text);
  font-weight:650;
}

.gridWrap{
  flex:1;
  min-height:0;
  padding:5px;
  overflow:hidden;
}
.outputGrid{
  height:100%;
  display:grid;
  gap:2px;
  /*grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: minmax(140px, 1fr);*/
}
.outTile{
  position:relative;
  border-radius: 22px;
  border:1px solid var(--stroke);
  overflow:hidden;
  background: rgba(0,0,0,.25);
  box-shadow: var(--shadow2);
}
.outTile img, .outTile video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.outTile__hud button{
  width:34px;height:34px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}

.badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  color: var(--muted);
  font-size:12px;
}
.outFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid var(--stroke);
  background: rgba(0,0,0,.12);
}
.muted{color:var(--muted2)}

/* =========================
   Overlays
   ========================= */
.overlay{
  position:fixed;
  inset:0;
  display:none;
  z-index:10000;
}
.overlay.is-open{display:block}
.overlay__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.overlay__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(820px, 92vw);
  border-radius: 22px;
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    rgba(10,12,17,.94);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.overlay__panel--viewer{
  width: min(1100px, 96vw);
}
.overlay__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--stroke);
}
.overlay__title{font-weight:650}
.overlay__body{padding:12px}
.overlay__footer{
  padding:12px;
  border-top:1px solid var(--stroke);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* KI-Charakter Preview */
.charPreviewImg{
  width: 100%;
  height: auto;
  max-height: min(70vh, 560px);
  object-fit: contain;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
}

/* Output Viewer (vorbereitet) */
.viewerHud{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
  margin-right:10px;
}
.viewerBtn{
  width:34px;
  height:34px;
}
.viewerBody{padding:0}
.viewerStage{
  width:100%;
  height: min(78vh, 720px);
  background: rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.viewerStage img,
.viewerStage video{
  max-width:100%;
  max-height:100%;
  border-radius: 0;
  display:none;
}
.viewerStage img.is-active,
.viewerStage video.is-active{display:block}

/* =========================
   API Keys: HUD actions dezent
   ========================= */
.inputrow .input{flex: 1 1 auto; min-width: 0;}
.keyActions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}
.inputrow.keyrow .iconbtn,
.inputrow.keyrow a.iconbtn{
  width:32px;
  height:32px;
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  opacity: .35;
  transform: none;
}
.inputrow.keyrow:hover .iconbtn,
.inputrow.keyrow:hover a.iconbtn,
.inputrow.keyrow:focus-within .iconbtn,
.inputrow.keyrow:focus-within a.iconbtn{
  opacity: .95;
}
.inputrow.keyrow .iconbtn:hover,
.inputrow.keyrow a.iconbtn:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.inputrow.keyrow .icon{font-size: 14px; line-height: 1;}

/* Keys hint: (aktuell ausgeblendet wie bei dir) */
#keysHealthHint{ display:none !important; }
#keysHealthPill{ display:none !important; }
#tab-keys .card__header{ margin-bottom: 6px; }

/* Keys Tab kompakter */
#tab-keys .card{ padding: 10px; }
#tab-keys .stack{ gap: 8px; }
#tab-keys .divider{ margin: 8px 0; }
#tab-keys .field{ gap: 5px; }
#tab-keys .label{ font-size: 11px; }
#tab-keys .hint{ font-size: 11px; line-height: 1.2; }
#tab-keys .input,
#tab-keys .textarea{
  padding: 8px 10px;
  border-radius: 12px;
}
#tab-keys .iconbtn{ width: 34px; height: 34px; }
#tab-keys .btn{ padding: 9px 12px; }
#tab-keys #fieldPromptMainGemini textarea,
#tab-keys #fieldPromptMainGrok textarea{
  height: clamp(110px, 16vh, 170px) !important;
  min-height: 110px !important;
  max-height: 170px !important;
  overflow: hidden !important;
  resize: none !important;
}
#tab-keys #fieldPromptMainGemini .hint,
#tab-keys #fieldPromptMainGrok .hint{ display: none !important; }

/* Key Validierung (falls JS keyrow Klassen setzt) */
.keyrow.is-ok .input,
.keyrow.is-ok .input:focus{
  box-shadow: 0 0 0 2px rgba(46, 229, 157, .45) !important;
  border-color: rgba(46, 229, 157, .28) !important;
}
.keyrow.is-bad .input,
.keyrow.is-bad .input:focus{
  box-shadow: 0 0 0 2px rgba(255, 81, 102, .55) !important;
  border-color: rgba(255, 81, 102, .30) !important;
}
.keyrow.is-checking .input,
.keyrow.is-checking .input:focus{
  box-shadow: 0 0 0 2px rgba(58, 162, 255, .28) !important;
  border-color: rgba(58, 162, 255, .18) !important;
}

/* Prompt Boxes (pos/neg) */
.promptField{
  border-radius: 14px;
  padding: 10px;
}
.promptField--pos{
  background: rgba(46, 229, 157, .06);
  border: 1px solid rgba(46, 229, 157, .25);
}
.promptField--pos .textarea{ border-color: rgba(46, 229, 157, .35); }
.promptField--neg{
  background: rgba(255, 81, 102, .06);
  border: 1px solid rgba(255, 81, 102, .25);
}
.promptField--neg .textarea{ border-color: rgba(255, 81, 102, .35); }

/* =========================
   Generieren: UX (Composer Fokus)
   ========================= */
.jobbar{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
@media (max-width: 1080px){
  .jobbar{ grid-template-columns: 1fr; }
}
.composer__top{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom: 10px;
}
.composer__hint{
  color: var(--muted2);
  font-size: 12px;
}
.attachbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
}
.attachbar__list{
  flex:1;
  min-width:0;
  display:flex;
  gap:10px;
  align-items:center;
  overflow:auto;
  padding-bottom:2px;
}
.attachbar__list::-webkit-scrollbar{height:8px}
.attachbar__list::-webkit-scrollbar-thumb{background: rgba(255,255,255,.08); border-radius:999px}
.attachitem{
  width:46px;height:46px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  flex: 0 0 auto;
  position:relative;
}
.attachitem img,
.attachitem video{width:100%;height:100%;object-fit:cover;display:block}

/* Tiny screen tweaks */
@media (max-width: 520px){
  .iconbtn{ width:36px; height:36px; }
}

/* Attachment remove button */
.attachitem__x{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45);
  color: rgba(233,237,246,.9);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:12px;
  line-height:1;
  opacity:.0;
  transition: opacity .12s ease, transform .12s ease, background .12s ease, border-color .12s ease;
}
.attachitem:hover .attachitem__x{
  opacity:1;
}
.attachitem__x:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.62);
  border-color: rgba(255,255,255,.22);
}

/* =========================
   Tooltip (simple)
   ========================= */
[data-tooltip]{position:relative}
[data-tooltip]:hover::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  top:-10px;
  transform: translate(-50%,-100%);
  white-space:nowrap;
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.72);
  color: var(--text);
  font-size:12px;
  box-shadow: var(--shadow2);
  pointer-events:none;
}

/* =========================
   API Key links (optional)
   ========================= */
.keylink{ text-decoration:none; }
.keylink--pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  color: var(--brand-blue-strong);
  background: var(--brand-blue-bg);
  border: 1px solid var(--brand-blue-border);
  font-weight:750;
  font-size:12px;
  letter-spacing:.35px;
  text-transform:uppercase;
  white-space:nowrap;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}
.keylink--pill:hover{
  filter: brightness(1.06);
  background: var(--brand-blue-bg-hover);
  border-color: var(--brand-blue-border-hover);
  transform: translateY(-1px);
}
.keylink--pill:active{ transform: translateY(0); }
.keylink--pill:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(90,215,255,0.18);
}

/* =========================
   Gate (Root /) Styling
   ========================= */
body.gatePage{ overflow: hidden; }

/* FIX: Gate immer fullscreen, zentriert – unabhängig vom App-Layout */
.gateLayout{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  display: grid;
  place-items: center;

  padding: 22px;
  overflow: auto;              /* wichtig für kleine Screens */
  -webkit-overflow-scrolling: touch;
}

.gateCard{
  width: min(560px, calc(100vw - 44px));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.15));

  /* FIX: immer zentriert – unabhängig vom Wrapper */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* responsive: auf kleinen Screens scrollen statt abschneiden */
  max-height: calc(100vh - 44px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


.gateHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.gateTitle{
  font-weight:700;
  font-size:22px;
  letter-spacing:.2px;
}
.gateSub{ color:var(--muted2); margin-top:4px; }
.gateTabs{ display:flex; gap:8px; margin-top:10px; }
.gateTabs .tablike{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  user-select:none;
}
.gateTabs .tablike.is-active{
  border-color: rgba(120,180,255,0.35);
  background: rgba(120,180,255,0.10);
}
.gateBody{ margin-top: 14px; }
.gateActions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 12px;
}
.gateTurnstile{
  display:flex;
  justify-content:center;
  padding: 10px;
  border-radius: var(--r2);
  border: 1px dashed var(--stroke2);
  background: rgba(255,255,255,0.02);
}
.gateError{ margin-top:10px; color:var(--red); }
.gateOk{ margin-top:10px; color:var(--green); }
.gateTiny{ color:var(--muted2); font-size:12px; }

@media (max-width: 520px){
  .gateLayout{ padding: 14px; }
  .gateHeader{ flex-direction:column; align-items:flex-start; }
  .gateActions{ justify-content:stretch; }
  .gateActions .btn{ width:100%; }
}

/* Ghost-Style auch für <a> Links */
a.ghost{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
a.ghost:visited{ color: var(--muted); }
a.ghost:hover{ text-decoration: none; }

/* =========================
   Generieren: Prompt im Fokus (Perplexity-Prinzip)
   (Scoping: only #tab-generate, damit nichts anderes kaputt geht)
   ========================= */

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

/* Composer Card: etwas mehr Luft, aber ohne Layout zu sprengen */
#tab-generate .composer--focus{
  padding: 14px;
}

/* Promptfeld größer (zentraler Fokus) */
/* Generate: Prompt kompakter, damit CTA above-the-fold remains */
#tab-generate #promptText{
  height: clamp(140px, 25vh, 200px);
  max-height: 165px;
  min-height: 96px;
  resize: vertical;   /* User kann bei Bedarf größer ziehen */
  overflow: auto;
}

/* Attachments deutlich größer */
#tab-generate .attachbar--big{
  padding: 12px;
  border-radius: 20px;
}
#tab-generate .attachbar--big .attachbar__list{
  gap: 12px;
}
#tab-generate .attachbar--big .attachitem,
#tab-generate .attachbar--big .attachItem{
  width: 120px;
  height: 120px;
  border-radius: 18px;
}
#tab-generate .attachbar--big .attachitem__x{
  width: 24px;
  height: 24px;
  font-size: 13px;
}

/* Bottom-Bar wie bei Perplexity: kompakte Chips + CTA rechts */
#tab-generate .genbar{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#tab-generate .genbar__left,
#tab-generate .genbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

#tab-generate .genbar__meta{
  color: var(--muted2);
  font-size: 12px;
  white-space:nowrap;
  margin-right: 2px;
}

/* Provider/Model/Mode als edle Pills (wir nutzen trotzdem .select für app.js) */
#tab-generate .genpillselect{
  border-radius: 999px;
  padding: 8px 10px;
  min-height: 38px;
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:baseline;
  gap: 6px;
}
#tab-generate .genpillselect:hover{
  border-color: var(--stroke2);
}
#tab-generate .genpillselect .genpill__label{
  font-size: 11px;
  color: var(--muted2);
}
#tab-generate .genpillselect .select__value{
  font-weight: 650;
}

/* Rechte Pills (eigene Settings-Popovers) */
#tab-generate .genpill{
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 8px 10px;
  min-height: 38px;
  display:inline-flex;
  align-items:baseline;
  gap: 8px;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#tab-generate .genpill:hover{
  transform: translateY(-1px);
  border-color: var(--stroke2);
  background: rgba(255,255,255,.03);
}
#tab-generate .genpill:active{ transform: translateY(0); }
#tab-generate .genpill__label{
  font-size: 11px;
  color: var(--muted2);
}
#tab-generate .genpill__value{
  font-weight: 650;
}

/* Stepper in der Bar etwas kompakter */
#tab-generate .genstepper{
  height: 38px;
}
#tab-generate .genstepper .stepper__btn{
  width: 34px;
  height: 38px;
}
#tab-generate .genstepper .stepper__value{
  width: 42px;
}

/* CTA Button: optisch passend, nicht zu wuchtig */
#tab-generate .gencta{
  min-height: 38px;
  padding: 9px 14px;
}

/* Media-Overlay Stage */
.genMediaStage{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 240px;
}


/* Settings Popover (eigener kleiner Dropdown) */
.genPop{
  position: fixed;
  z-index: 11000;
  min-width: 220px;
  max-width: min(420px, 92vw);
  max-height: min(320px, 55vh);
  overflow:auto;
  border-radius: 16px;
  border:1px solid var(--stroke2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    rgba(10,12,17,.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  padding: 6px;
  display:none;
}
.genPop.is-open{ display:block; }
.genPop__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  color: var(--text);
}
.genPop__item:hover{ background: rgba(255,255,255,.06); }
.genPop__item.is-active{
  background: rgba(46,229,157,.12);
  border:1px solid rgba(46,229,157,.20);
}
.genPop__meta{
  color: var(--muted2);
  font-size: 12px;
}

/* Responsive: Bar stapelt sauber */
@media (max-width: 1080px){
  #tab-generate .genbar{
    align-items:flex-start;
  }
  #tab-generate .genbar__left,
  #tab-generate .genbar__right{
    width: 100%;
  }
  #tab-generate .genbar__right{
    justify-content: flex-end;
  }
}
@media (max-width: 520px){
  #tab-generate .genpillselect .genpill__label,
  #tab-generate .genpill .genpill__label{
    display:none;
  }
}

/* =========================
   GENERIEREN
   ========================= */
#tab-generate .composer--focus{
  padding: 14px;
}

#tab-generate .genPrompt{
  min-height: 170px;
}

#tab-generate .attachbar--big{
  min-height: 72px;
}

/* Bottom HUD bar */
#tab-generate .genbar{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--stroke);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

#tab-generate .genbar__left,
#tab-generate .genbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Provider / Model / Mode: aussehen wie HUD-Chips, aber remains .select (app.js) */
#tab-generate .genHudSelect{
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  max-width: 220px;
}

#tab-generate .genHudSelect .select__value{
  font-weight: 600;
}

#tab-generate .genHudSelect .select__chev{
  opacity: .55;
}

/* Right HUD pills (Aspect/Resolution/Format) */
#tab-generate .genHudPill{
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#tab-generate .genHudPill:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
#tab-generate .genHudPill__value{
  font-weight: 650;
  letter-spacing: .2px;
}

/* Stepper kompakt */
#tab-generate .genstepper{
  height: 36px;
}
#tab-generate .genstepper .stepper__btn{
  height: 36px;
}
#tab-generate .genstepper .stepper__value{
  width: 40px;
}

/* CTA größer, rechts */
#tab-generate .gencta{
  height: 40px;
  padding: 0 16px;
  min-width: 170px;
}

/* Output Grid: dynamische Spalten über CSS Variable */
.outputGrid{
  grid-template-columns: repeat(var(--out-cols, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

/* =========================
   Generate: Bottom Bar Layout (Perplexity-Style)
   ========================= */

.genbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;      /* desktop: wirklich links/rechts */
}

.genbar__left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:nowrap;      /* 3 Pills bleiben nebeneinander */
}

.genbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  flex-wrap:nowrap;
}

/* WICHTIG: only im Generate-Bar die Selects kompakt machen */
.genbar .select.genpillselect{
  width:auto !important;         /* überschreibt globales width:100% */
  flex:0 0 auto;
  border-radius:999px;
  padding:8px 10px;
  background: rgba(0,0,0,.22);
}

.genbar .select.genpillselect .genpill__label{
  font-size:11px;
  color: var(--muted2);
  margin-right:8px;
  white-space:nowrap;
}

.genbar .select.genpillselect .select__value{
  max-width: 160px;              /* verhindert “Endlosbreite” */
}

/* Responsive: wenn es eng wird -> 2 Reihen (erst links, dann rechts) */
@media (max-width: 900px){
  .genbar{
    flex-wrap:wrap;
  }
  .genbar__left{
    flex:1 1 100%;
    flex-wrap:wrap;
  }
  .genbar__right{
    flex:1 1 100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
}

/* Mobile: CTA darf “atmen” */
@media (max-width: 520px){
  .genbar__right{
    justify-content:space-between;
  }
  .gencta{
    flex:1 1 auto;
    justify-content:center;
  }
}

/* =========================
   Generate: CTA außerhalb der Prompt-Leiste
   ========================= */
.genSubmitRow{
  display:flex;
  justify-content:center;
  margin-top:25px;
}

.gencta--bottom{
  width: min(520px, 100%);
  padding: 12px 18px;
  border-radius: 999px;
}

/* Mobile: volle Breite, nicht gequetscht */
@media (max-width: 520px){
  .genSubmitRow{
    margin-top: 10px;
  }
  .gencta--bottom{
    width: 100%;
  }
}

/* =========================
   Generate: Media Bar größer + Preview klickbar
   ========================= */
#tab-generate .attachbar--big{
  min-height: 118px;
  padding: 12px;
  border-radius: 18px;
}

#tab-generate .attachbar--big.is-drag{
  border-color: rgba(58,162,255,.40) !important;
  box-shadow: 0 0 0 4px var(--focus) !important;
}

#tab-generate .attachbar__list{
  display:flex;
  gap:12px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 2px 4px;
  scroll-snap-type: x mandatory;
}

#tab-generate .attachEmpty{
  color: rgba(233,237,246,.55);
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}

#tab-generate .attachItem{
   width: 120px;
  height: 120px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  position: relative;
  overflow: visible;
  cursor: pointer;
  flex: 0 0 auto;
  scroll-snap-align: start;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

#tab-generate .attachItem:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
}

#tab-generate .attachItem__media{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:18px;
}

#tab-generate .attachThumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#tab-generate .attachPh{
  color: rgba(233,237,246,.65);
  font-weight: 650;
  letter-spacing: .4px;
  font-size: 11px;
  opacity:.75;
}

#tab-generate .attachItem__badge{
  position:absolute;
  top:8px;
  left:8px;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: rgba(233,237,246,.85);
  display:grid;
  place-items:center;
  font-size: 12px;
}

#tab-generate .attachItem__x{
   position:absolute;
  top:-6px;
  right:-6px;
  width:22px;
  height:22px;
  z-index:10;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: rgba(233,237,246,.85);
  cursor:pointer;
  opacity:.55;
  transition: opacity .12s ease, background .12s ease, transform .12s ease;
}
#tab-generate .attachItem:hover .attachItem__x{ opacity: .95; }
#tab-generate .attachItem__x:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }

#tab-generate .attachTag{
  position:absolute;
  bottom:8px;
  left:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: rgba(233,237,246,.85);
  font-size: 11px;
  letter-spacing:.35px;
}

/* Preview Stage (Overlay) */
.genMediaStage{
  width: 100%;
  height: min(70vh, 560px);
  display:grid;
  place-items:center;
}
/* FINAL: Media selbst ohne Rahmen/Kasten */
.genMediaStage img,
.genMediaStage video{
  width: 100%;
  height: 100%;
  object-fit: contain;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  background: transparent !important;
  border-radius: 0 !important;

  display: block;
}

/* ==============================
   Generate Media Overlay: No Crop
   ============================== */
#genMediaOverlay .overlay__panel{
  display:flex;
  flex-direction:column;
  /* sorgt dafür, dass der Body wirklich Platz bekommt */
}

#genMediaOverlay .overlay__body{
  flex:1;
  min-height:0;          /* important: verhindert “clipping” bei flex layouts */
  overflow:hidden;       /* Stage entscheidet, nicht der Body */
}

#genMediaOverlay .genMediaStage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#genMediaOverlay .genMediaStage img,
#genMediaOverlay .genMediaStage video{
  max-width:100%;
  max-height:100%;
  object-fit:contain !important;
  border-radius:16px;
}

/* =========================
   Generate Media Viewer (Zoom bis 5x)
   ========================= */
#genMediaOverlay .overlay__panel--viewer{
  width: min(1100px, 96vw);
  height: min(86vh, 860px);
  display:flex;
  flex-direction:column;
}

#genMediaOverlay .overlay__body.viewerBody{
  flex:1;
  min-height:0;
  padding:12px;
  overflow:hidden; /* important: kein Abschneiden durch Scroll/Overflow-Bugs */
}

#genMediaOverlay .viewerStage{
  width:100%;
  height:100%;
  transform-origin: 50% 50%;
  touch-action: none;
  cursor: grab;

  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;

  overflow: hidden;
  display:block;
}

#genMediaOverlay .viewerStage.is-dragging{ cursor: grabbing; }

#genMediaOverlay .viewerStage img,
#genMediaOverlay .viewerStage video{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

/* ===========================
   Dribbble-Style Lightbox (only Generate Media Overlay)
   =========================== */
#genMediaOverlay .overlay__panel{
  /* merged: vorheriges display:flex + Dribbble-Style */
  display:flex;
  flex-direction:column;

  width: min(94vw, 1120px);
  height: min(86vh, 760px);
  padding: 0;
  overflow: hidden;

  border-radius: 22px;

  /* WICHTIG: KEIN RAHMEN */
  border: 0 !important;

  /* du darfst Background behalten – das ist NICHT der Rahmen */
  background: rgba(18, 20, 26, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
}

#genMediaOverlay .overlay__header{
  height: 54px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  border-bottom: 0 !important;

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

#genMediaOverlay .overlay__title{
  font-size: 13px;
  font-weight: 600;
  opacity: .92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55vw;
}

#genMediaOverlay .overlay__body{
  flex:1;
  min-height:0;
  padding: 12px;
  overflow:hidden;
}

#genMediaOverlay .genLbHud{
  display: flex;
  align-items: center;
  gap: 8px;
}

#genMediaOverlay .lbBtn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: inherit;
  cursor: pointer;
  user-select: none;
}

#genMediaOverlay .lbBtn:hover{
  background: rgba(255,255,255,.10);
}

#genMediaOverlay .lbBtn:active{
  transform: translateY(1px);
}

/* Viewer Stage: Pan/Zoom Canvas */
#genMediaStage.viewerStage{
  height: 100%;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: transparent !important;

  touch-action: none; /* important: wir implementieren Pinch/Pan selbst */
  cursor: grab;
}

#genMediaStage.viewerStage.is-dragging{
  cursor: grabbing;
}

#genMediaStage .viewerCanvas{
  width: 100%;
  height: 100%;
  will-change: transform;
  transform-origin: 50% 50%;
}

#genMediaStage .viewerCanvas img,
#genMediaStage .viewerCanvas video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================================
   FINAL OVERRIDES (ohne Verluste)
   - Fix: OutputGrid nicht “1 Spalte” als Default
   - Fix: Attachments unterstützt snake_case + camelCase Klassen
   - Fix: Genbar-Select-Overrides only im Generate Tab
   ========================================================== */

/* Default: 3 Spalten Desktop, responsiv runter (JS kann --out-cols überschreiben) */
:root{ --out-cols: 3; }
@media (max-width: 980px){ :root{ --out-cols: 2; } }
@media (max-width: 520px){ :root{ --out-cols: 1; } }

/* OutputGrid: sinnvoller Default + remains JS-kompatibel */
.outputGrid{
  grid-template-columns: repeat(var(--out-cols, 3), minmax(180px, 1fr));
  grid-auto-rows: minmax(140px, 1fr);
}

/* Genbar select “kompakt” wirklich only im Generate Tab */
#tab-generate .genbar .select.genpillselect{
  width:auto !important;
}

/* Attachments: unterstütze beide Schreibweisen (attachitem / attachItem) */
#tab-generate .attachitem,
#tab-generate .attachItem{
  width: 120px;
  height: 120px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
  scroll-snap-align: start;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

#tab-generate .attachitem:hover,
#tab-generate .attachItem:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
}

#tab-generate .attachitem img,
#tab-generate .attachitem video,
#tab-generate .attachThumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#tab-generate .attachitem__x,
#tab-generate .attachItem__x{
  top:-6px;
  right:-6px;
  width:22px;
  height:22px;
  z-index:10;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: rgba(233,237,246,.85);
  cursor:pointer;
  opacity:.55;
  transition: opacity .12s ease, background .12s ease, transform .12s ease;
}

#tab-generate .attachitem:hover .attachitem__x,
#tab-generate .attachItem:hover .attachItem__x{
  opacity:.95;
}

#tab-generate .attachitem__x:hover,
#tab-generate .attachItem__x:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* Attachbar Big: remains groß + drag focus */
#tab-generate .attachbar--big{
  min-height: 118px;
  padding: 12px;
  border-radius: 18px;
}
#tab-generate .attachbar--big.is-drag{
  border-color: rgba(58,162,255,.40) !important;
  box-shadow: 0 0 0 4px var(--focus) !important;
}
/* =========================================================
   Generate Tab — Guided Composer v2 (append at end of styles.css)
   Scope: #tab-generate only
   ========================================================= */

#tab-generate .genInputBlock{
  display:flex;
  flex-direction:column;
  gap:0;
}

#tab-generate .genInputBlock .attachbar--big{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  margin-bottom:-1px;
}

#tab-generate .genInputBlock .genPrompt{
  border-top-left-radius:0;
  border-top-right-radius:0;
  margin-top:0;
  min-height: 240px;
}

#tab-generate .composer--focus:focus-within{
  box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(0,255,210,.10);
}

#tab-generate #genAttachBar.is-pulse{
  animation: genAttachPulse .42s ease;
}
@keyframes genAttachPulse{
  0%   { box-shadow: 0 0 0 0 rgba(0,255,210,.0); border-color: rgba(0,255,210,.20); }
  35%  { box-shadow: 0 0 0 6px rgba(0,255,210,.12); border-color: rgba(0,255,210,.35); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,210,.0); border-color: rgba(255,255,255,.10); }
}

#tab-generate .attachItem.is-in{
  animation: genThumbIn .18s ease;
}
@keyframes genThumbIn{
  from { transform: scale(.96); opacity: .0; }
  to   { transform: scale(1); opacity: 1; }
}

#tab-generate .attachThumb{
  transition: transform .14s ease, filter .14s ease;
}
#tab-generate .attachItem:hover .attachThumb{
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* Control bar: strict left/right on wide screens */
#tab-generate .genbar{
  gap: 12px;
}
@media (min-width: 860px){
  #tab-generate .genbar{
    flex-wrap: nowrap;
  }
  #tab-generate .genbar__left{
    flex: 1 1 auto;
    min-width: 0;
  }
  #tab-generate .genbar__right{
    flex: 0 0 auto;
    justify-content: flex-end;
  }
}

/* Breadcrumb chip (genInfoLeft) */
#tab-generate .gencrumb{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(10,12,14,.35);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Flash feedback on selection */
#tab-generate .genpillselect.is-flash,
#tab-generate .genpill.is-flash{
  animation: genFlash .26s ease;
}
@keyframes genFlash{
  0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(0,255,210,.0); }
  40%{ transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(0,255,210,.10); }
  100%{ transform: translateY(0); box-shadow: 0 0 0 0 rgba(0,255,210,.0); }
}

/* Disabled breadcrumb logic */
#tab-generate .genpillselect:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  filter: saturate(.75);
}

/* More (…) pill */
#tab-generate .genpill--more .genpill__value{
  font-weight: 900;
  letter-spacing: .08em;
}

/* More popover */
.genMore{
  position: fixed;
  z-index: 12000;
  width: 330px;
  max-width: calc(100vw - 20px);
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(14,16,18,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.genMore.is-open{ display:block; }

.genMore__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 4px 4px 10px;
}
.genMore__label{
  font-weight: 800;
  letter-spacing: .02em;
}
.genMore__x{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.genMore__x:hover{ background: rgba(255,255,255,.07); }

.genMore__section{ padding: 6px 4px 10px; }
.genMore__title{ font-size: 12px; opacity: .75; margin-bottom: 8px; }

.genMore__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.genMoreChip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}
.genMoreChip:hover{ background: rgba(255,255,255,.08); }
.genMoreChip.is-active{
  border-color: rgba(0,255,210,.35);
  background: rgba(0,255,210,.08);
}

/* CTA disabled polish */
#tab-generate .gencta:disabled{
  opacity: .48;
  cursor: not-allowed;
  filter: saturate(.8);
  transform: none !important;
}


/* =========================
   Generate: Command Dock (Dribbble-ish)
   ========================= */
/* =============================
   Generate Control Panel (v2)
   Replaces Command Dock
   ============================= */
#tab-generate .genControlPanel{
  margin-top: 2px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
#tab-generate .genControlPanel__grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  min-width: 0;
}
@media (max-width: 860px){
  #tab-generate .genControlPanel__grid{
    grid-template-columns: 1fr;
  }
}

#tab-generate .genControlPanel__left{
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width: 0;
}
#tab-generate .genControlPanel__left .gencrumb{
  margin: 0 0 2px 2px;
  color: rgba(233,237,246,.55);
  font-size: 12px;
}

#tab-generate .genModeRow{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items:center;
  min-width: 0;
}
#tab-generate .genModeRow__select{
  min-width: 0;
}
#tab-generate .genModeRow__stepper{
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#tab-generate .genControlPanel__right{
  display:flex;
  align-items:stretch;
  justify-content:stretch;

  min-width: 0;
}


#tab-generate .genSliders{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  padding: 14px 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: hidden; /* important: keine Layout-Explosion */

  min-width: 0;
}

#tab-generate .genSlider{
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  min-width: 0;
  height: 190px; /* fixes: slider stays inside card */
  padding: 8px 0 34px;
}

#tab-generate .genSlider__range{
  position:absolute;
  left:50%;
  top:50%;
  width: 150px;
  height: 28px;
  transform: translate(-50%,-50%) rotate(-90deg);
  transform-origin: center;
  appearance: none;
  background: transparent;
  touch-action: none;
  appearance: none;
  background: transparent;
  touch-action: none;
}

#tab-generate .genSlider__range::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
#tab-generate .genSlider__range::-webkit-slider-thumb{
  appearance:none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-top: -6px;
  background: #e9edf6;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  border: 2px solid rgba(0,0,0,.35);
}

#tab-generate .genSlider__range::-moz-range-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}
#tab-generate .genSlider__range::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #e9edf6;
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}

#tab-generate .genSlider__footer{
  position:absolute;
  left:0;
  right:0;
  bottom: 8px;
  height: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;

}

#tab-generate .genSlider__label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(233,237,246,.55);
}
#tab-generate .genSlider__value{
  font-size: 12px;
  color: rgba(233,237,246,.90);
  font-variant-numeric: tabular-nums;
}

/* Responsive: Slider-Card wird auf kleinen Screens horizontal */
@media (max-width: 560px){
  #tab-generate .genSliders{
    grid-template-columns: 1fr;
  }
  #tab-generate .genSlider{
    height: auto;
    padding: 10px 10px 12px;
    align-items:stretch;
    justify-content:flex-start;
  }
  #tab-generate .genSlider__range{
    position: static;
    transform: none;
    width: 100%;
    height: 28px;
    touch-action: pan-y;
  }
  #tab-generate .genSlider__footer{
    position: static;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-top: 8px;
  }
}

#tab-generate .genSlider__range:focus{
  outline: none;
}
#tab-generate .genSlider__footer{
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 2px;
  opacity:.9;
}
#tab-generate .genSlider__label{
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(233,237,246,.65);
}
#tab-generate .genSlider__value{
  font-size: 12px;
  font-weight: 700;
  color: rgba(233,237,246,.92);
}

#tab-generate .attachbar.is-disabled{
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.2);
}
#tab-generate .attachbar.is-disabled .iconbtn{
  opacity: .6;
}



.commandDock{
  margin-top: 12px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
#tab-generate .commandDock__head{
  height: 54px;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
#tab-generate .commandDock__title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
  opacity: .92;
}
#tab-generate .commandDock__actions{
  display:flex;
  gap: 10px;
  align-items:center;
}
#tab-generate .commandDock__body{
  padding: 12px;
}
#tab-generate .genbar{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
#tab-generate .genInfoLeft{
  margin-top: 10px;
  text-align:center;
  color: rgba(233,237,246,.55);
  font-size: 12px;
}

/* Output: HUD erscheint only bei Hover (Download/Löschen) */



/* Output/Thumb: kein Crop */
.outTile img, .outTile video{ object-fit: contain !important; }

/* Video Thumb Play Badge (TikTok-ish, glasig) */
.outTile video::cue{ }
.outTile .videoPlay{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  display:grid;
  place-items:center;
  color: rgba(233,237,246,.90);
  opacity: .55;
  pointer-events:none;
}
.outTile:hover .videoPlay{ opacity: .9; }


/* =========================
   Scrollbars: visual hidden (scroll remains möglich)
   ========================= */
:where(.tabview, .attachbar__list, .details__body, .menu){
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:where(.tabview, .attachbar__list, .details__body, .menu)::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* Prevent layout from being pushed by rotated controls */
html, body{ overflow-x: hidden; }
.workbench{ overflow-x: hidden; }
.panel{ overflow-x: hidden; }


/* =========================
   Studio: Eye Color Swatches (SVG Iris Assets)
   Scope: #studioOverlay only
   ========================= */
#studioOverlay .eyeSwatches{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#studioOverlay .eyeSwatch{
  width:64px;
  height:auto !important;
  padding:6px !important;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  cursor:pointer;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px !important;
   align-content:start;

  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#studioOverlay .eyeSwatch::before{
  content:"";
  width:44px;
  height:44px;
  border-radius:999px;
  background-size:cover;
  background-position:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

#studioOverlay .eyeSwatch::after{
  content: attr(title);
  font-size:11px;
  line-height:1;
  opacity:.85;
  white-space:nowrap;
}

/* SVG asset mapping */
#studioOverlay .eyeSwatch[data-eye="brown"]::before{ background-image:url("/app/assets/eyes/brown.svg"); }
#studioOverlay .eyeSwatch[data-eye="blue"]::before{ background-image:url("/app/assets/eyes/blue.svg"); }
#studioOverlay .eyeSwatch[data-eye="green"]::before{ background-image:url("/app/assets/eyes/green.svg"); }
#studioOverlay .eyeSwatch[data-eye="gray"]::before{ background-image:url("/app/assets/eyes/gray.svg"); }
#studioOverlay .eyeSwatch[data-eye="hazel"]::before{ background-image:url("/app/assets/eyes/hazel.svg"); }

/* Active state */
#studioOverlay .eyeSwatch.is-active{
  border-color: rgba(108,77,251,.85);
  box-shadow: 0 0 0 3px rgba(108,77,251,.22);
  transform: translateY(-1px);
}

/* =========================
   Fix: Slider bleiben im Rahmen + kein Horizontal-Overflow
   ========================= */
#tab-generate .genControlPanel__grid,
#tab-generate .genControlPanel__left,
#tab-generate .genControlPanel__right,
#tab-generate .genSliders{ min-width:0; }

#tab-generate .genControlPanel__right{ overflow:hidden; }

#tab-generate .genSlider{
  height: 150px;
  max-height: 150px;
}

#tab-generate .genSlider__range{
  top: 50%;
  left: 50%;
  width: 150px;
  transform: translate(-50%,-50%) rotate(-90deg);
  transform-origin: center;
}

/* Mobile: Slider horizontal stapeln */
@media (max-width: 560px){
  #tab-generate .genControlPanel__grid{ grid-template-columns: 1fr; }
  #tab-generate .genControlPanel__right{ padding: 10px; }
  #tab-generate .genSliders{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }
  #tab-generate .genSlider{
    height: 110px;
    max-height: 110px;
  }
  #tab-generate .genSlider__range{
    width: 120px;
  }
}


/* =========================================
   Slider: Wert IM Thumb, Label unten fix
   ========================================= */
#tab-generate .genSlider{
  position: relative;
  --thumb-y: 50%;
}

/* Overlay über dem nativen Range-Thumb: wirkt wie "Zahl im weißen Punkt" */
#tab-generate .genSlider__thumbValue{
  position: absolute;
  left: 50%;
  top: var(--thumb-y);
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;

  background: rgba(245, 248, 255, .95);
  color: rgba(10, 14, 18, .92);
  box-shadow:
    0 10px 26px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.25) inset;

  pointer-events: none;
  user-select: none;
}

/* Footer wird zur festen Label-Leiste */
#tab-generate .genSlider__footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;

  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}

/* Label remains unten, Value dort ist aus */
#tab-generate .genSlider__label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}

#tab-generate .genSlider.is-disabled .genSlider__thumbValue{
  opacity: .55;
}

#tab-generate .genSlider__value{ display:none !important; }

/* Slider: Wert nicht im Footer, sondern im Thumb */
#tab-generate .genSlider__footer .genSlider__value{ display:none !important; }


/* =========================================================
   V-Bar Sliders (4 Balken) – Werte im echten Thumb, Label unten fix
   ========================================================= */

#tab-generate .genSlider{
  position: relative;
  height: 220px;
  padding-top: 40px;  /* Platz für Top-Zahl */
  padding-bottom: 34px; /* Platz für Label */
  overflow: hidden; /* verhindert, dass irgendwas rausläuft */
}

/* Native Range remains im DOM, ist aber unsichtbar (wird only als State-Carrier genutzt) */
#tab-generate .genSlider__range--hidden{
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Falls alte Tooltip/Overlay-Implementierungen existieren: ausblenden */
#tab-generate .genSlider__thumbValue{ display:none !important; }
#tab-generate .genSlider__value{ display:none !important; }

/* Top value (über dem Balken) */
#tab-generate .genSlider__topValue{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(12, 16, 20, .72);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(233,237,246,.92);
  font-variant-numeric: tabular-nums;
  pointer-events:none;
  white-space: nowrap;
}

/* Footer remains only fürs Label */
#tab-generate .genSlider__footer{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

/* Label */
#tab-generate .genSlider__label{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78;
}

/* Balken-Container */
#tab-generate .genBar{
  position: absolute;
  left: 50%;
  top: 46px;          /* unter der Top-Zahl */
  bottom: 34px;       /* über dem Label */
  width: 44px;        /* breite Balken wie Referenz */
  transform: translateX(-50%);
}

#tab-generate .genBar__track{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
  touch-action: none;
}

/* gefüllter Bereich */
#tab-generate .genBar__fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 50%;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(77, 230, 170, .95), rgba(60, 190, 240, .92));
}

/* echter Thumb (der weiße Punkt) – zeigt Zahl */
#tab-generate .genBar__thumb{
  position:absolute;
  left:50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  background: rgba(245, 248, 255, .96);
  color: rgba(10, 14, 18, .92);
  box-shadow:
    0 10px 26px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.25) inset;
  user-select:none;
  pointer-events: auto;
}

#tab-generate .genBar__thumbText{
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* Disabled state */
#tab-generate .genSlider.is-disabled .genBar__track{
  opacity: .45;
}
#tab-generate .genSlider.is-disabled .genBar__thumb{
  opacity: .75;
}

/* Responsive: bei sehr schmalen Screens weniger Höhe */
@media (max-width: 520px){
  #tab-generate .genSlider{ height: 200px; }
  #tab-generate .genBar{ width: 40px; }
  #tab-generate .genBar__thumb{ width: 28px; height: 28px; }
}


/* =========================================================
   Generate: New Control Panel (Aspect pills + V-Bar sliders)
   ========================================================= */

#tab-generate .genControlPanel{
  margin-top: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(120% 140% at 10% 10%, rgba(18, 48, 56, .18) 0%, rgba(12, 16, 20, .72) 60%, rgba(10, 12, 14, .85) 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
  padding: 14px;
  overflow: hidden;
}

#tab-generate .genControlPanel__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 980px){
  #tab-generate .genControlPanel__grid{ grid-template-columns: 1fr; }
}

#tab-generate .genControlPanel__left,
#tab-generate .genControlPanel__right{
  min-width: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}

#tab-generate .genControlPanel__left{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#tab-generate .genControlPanel__right{
  padding: 12px;
  display: flex;
}

#tab-generate .genSelectStack{
  display: grid;
  gap: 10px;
}

#tab-generate .genRow--mode{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 520px){
  #tab-generate .genRow--mode{ grid-template-columns: 1fr; }
  #tab-generate .genstepper{ justify-self: start; }
}

/* Aspect pills */
#tab-generate .aspectRow{ margin-top: 2px; }
#tab-generate .aspectPills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tab-generate .aspectPill{
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(235,240,255,.86);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  user-select: none;
}

#tab-generate .aspectPill:hover{
  background: rgba(120,210,255,.06);
  border-color: rgba(120,210,255,.22);
}

#tab-generate .aspectPill:active{
  transform: translateY(1px);
}

#tab-generate .aspectPill.is-active{
  background: linear-gradient(180deg, rgba(32, 122, 114, .55), rgba(14, 40, 42, .55));
  border-color: rgba(120,210,255,.28);
  box-shadow: 0 14px 28px rgba(0,0,0,.30), 0 0 0 1px rgba(120,210,255,.10) inset;
}

#tab-generate .aspectPill.is-disabled{
  opacity: .35;
  cursor: not-allowed;
}

/* --- Tuning Cards (insp-like, bounded, no overflow) --- */

/* Allow content to be visible in right panel for detail mode */
.genControlPanel__right{
  min-width: 0;
  overflow: visible;
}

/* 2x2 Grid wie Screenshot – stabil, kein "springen" */
#tab-generate .genMetrics{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;

  /* Cards sollen im Rahmen bleiben */
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  overflow: visible; /* erlaubt Dropdown über den Rahmen */
}

@media (max-width: 560px){
  #tab-generate .genMetrics{
    grid-template-columns: 1fr;
  }
}

#tab-generate .genMetric{
  min-width: 0;
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 28px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tab-generate .genMetric__title{
  font-size: 12px;
  font-weight: 800;
  color: rgba(235,240,255,.84);
  letter-spacing: .01em;
}

#tab-generate .genMetric__control{
  min-width: 0;
}

/* Slider: simpel, logisch, sauber */
#tab-generate .genMetric__range{
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  outline: none;
}

#tab-generate .genMetric__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(235,240,255,.92);
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 10px 16px rgba(0,0,0,.35);
}

#tab-generate .genMetric__range::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(235,240,255,.92);
  border: 2px solid rgba(0,0,0,.35);
  box-shadow: 0 10px 16px rgba(0,0,0,.35);
}

/* Dropdowns: unaufgeregt, passt zu Dark UI */
#tab-generate .genMetric__select{
  width: 100%;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: rgba(235,240,255,.92);
  font-weight: 800;
  outline: none;
}

#tab-generate .genMetric__value{
  font-size: 24px;
  line-height: 1.05;
  font-weight: 900;
  color: rgba(235,240,255,.95);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Disabled (Dauer only für Video) */
#tab-generate .genMetric.is-disabled{
  opacity: .45;
}
#tab-generate .genMetric.is-disabled .genMetric__range,
#tab-generate .genMetric.is-disabled .genMetric__select{
  pointer-events: none;
}


/* TIME disabled for image modes */
#tab-generate .genVbar.is-disabled{
  opacity: .45;
}
/* ================================
   Aspect Ratio Pills mit Preview-Icon
   ================================ */

.aspectPills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.aspectPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(233,237,246,.85);
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

.aspectPill:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(120,210,255,.18);
}

.aspectPill:active{
  transform: translateY(1px);
}

.aspectPill.is-active{
  background: rgba(40,120,255,.22);
  border-color: rgba(60,150,255,.55);
  color: rgba(240,248,255,.95);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* kleines "Preview" Icon wie im Screenshot */
/* kleines Preview-Icon (Größe wird pro Ratio gesetzt) */
.aspectPill__icon{
  display:inline-block;
  border-radius:2px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}
/* Ratio-spezifische Vorschau (jedes Icon sieht anders aus) */
button.aspectPill[data-aspect="1:1"]  .aspectPill__icon{ width: 12px; height: 12px; }

button.aspectPill[data-aspect="16:9"] .aspectPill__icon{ width: 16px; height:  9px; }
button.aspectPill[data-aspect="9:16"] .aspectPill__icon{ width:  9px; height: 16px; }

button.aspectPill[data-aspect="4:3"]  .aspectPill__icon{ width: 16px; height: 12px; }
button.aspectPill[data-aspect="3:4"]  .aspectPill__icon{ width: 12px; height: 16px; }

button.aspectPill[data-aspect="3:2"]  .aspectPill__icon{ width: 16px; height: 11px; }
button.aspectPill[data-aspect="2:3"]  .aspectPill__icon{ width: 11px; height: 16px; }


/* Active: Icon wird "blau gefüllt" */
.aspectPill.is-active .aspectPill__icon{
  border-color: rgba(210,235,255,.95);
  background: rgba(60,150,255,.95);
}

/* Text */
.aspectPill__text{
  font-size:12px;
  letter-spacing:.02em;
  font-variant-numeric: tabular-nums;
}
/* =========================================================
   Output Workbench v2 (RIGHT PANEL) — scoped & safe
   ========================================================= */

/* Grid: stabile Squares, kein „zerschießen“ */
.panel--right .gridWrap{ overflow:hidden; }
/* =========================
   OUTPUT GRID — TIGHT LAYOUT (FINAL)
   ========================= */

/* Grid: NICHT stretchen, eng packen */
.outputGrid{
  height: 100%;
  display: grid;
  gap: 5px;                 /* ✅ Abstand zwischen Tiles */
  align-content: start;      /* ✅ verhindert „Riesen-Lücke“ zwischen Rows */
  place-content: start;      /* extra Stabilität */
  grid-auto-rows: auto;      /* ✅ KEINE 1fr-Reihen -> keine verteilte Luft */
}

/* Falls du irgendwo 12px gap drin hattest: wird damit überschrieben */


/* Tiles: clean, clickable, wie Referenz */
.panel--right .outTile{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  box-shadow: 0 12px 26px rgba(0,0,0,.38);
  overflow:hidden;
  cursor:pointer;
  user-select:none;
}

/* Thumbnail media: im GRID = cover (wie Preview Tiles) */
.panel--right .outTile img,
.panel--right .outTile video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.0001);
}

/* Placeholder */
.panel--right .outPh{
  width:100%;
  height:100%;
  background:
    radial-gradient(80% 80% at 50% 35%, rgba(90,215,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    rgba(0,0,0,.26);
}

/* Corner “fold” Badge (Aspect Ratio) */
.panel--right .outTile__badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.40);
  color: rgba(233,237,246,.86);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(10px);
}

/* Hover HUD unten mittig (wie Screenshot) */
.panel--right .outTile__hud{
  position:absolute;
  left:50%;
  bottom:12px;
  transform: translateX(-50%) translateY(8px);
  display:flex;
  gap:8px;
  padding:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
}
.panel--right .outTile:hover .outTile__hud{
  opacity:1;
  transform: translateX(-50%) translateY(0);
  pointer-events:auto;
}

.panel--right .outTile__hud .outBtn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(233,237,246,.92);
  cursor:pointer;
}
.panel--right .outTile__hud .outBtn:hover{
  background: rgba(255,255,255,.10);
}

/* Video Play hint (only optisch) */
.panel--right .outTile__play{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  display:grid;
  place-items:center;
  color: rgba(233,237,246,.90);
  opacity:.55;
  pointer-events:none;
}
.panel--right .outTile:hover .outTile__play{ opacity:.9; }

/* === REMOVE OVAL OVERLAYS (play circle + hud pill) === */

/* Play icon: remove circle */
.outTile__play,
.outPlay{
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}


/* (optional) HUD buttons: if they are still round and you want them not-round */
.outTile__hud .outBtn,
.outHud .outBtn{
  border-radius: 10px !important; /* or 0 if you want sharp corners */
}

/* =========================================================
   Output Viewer Overlay (outViewer) — nicer, still safe
   ========================================================= */

/* Glasiger Panel Look */
#outViewer .overlay__panel--viewer{
  width: min(1100px, 96vw);
  height: min(86vh, 820px);
  display:flex;
  flex-direction:column;
}

/* Stage: checkerboard-ish background */
#outViewerStage{
  width:100%;
  height: 100%;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.06) 75%),
    rgba(0,0,0,.35);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0, 0 0;
  overflow:hidden;
  display:grid;
  place-items:center;
}

/* Viewer media: contain (wie Preview) */
#outViewerImg,
#outViewerVid{
  max-width:100%;
  max-height:100%;
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
  transform-origin: 50% 50%;
}
#outViewerImg.is-active,
#outViewerVid.is-active{ display:block; }

/* Hide native selects used only for state/compat */
#tab-generate .genMetric__select--hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Brand variables (BatchTurbo-ish) */
:root{
  --bt-accent: rgba(30, 200, 190, 1);        /* brand turquoise */
  --bt-accent2: rgba(70, 120, 255, 1);       /* optional blue accent */
  --bt-surface: rgba(0,0,0,.28);
  --bt-stroke: rgba(255,255,255,.10);
  --bt-text: rgba(235,240,255,.92);
  --bt-muted: rgba(235,240,255,.62);
}

/* Custom Select */
#tab-generate .btSelect{
  position: relative;
  width: 100%;
  min-width: 0;
}

#tab-generate .btSelect__btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.20));
  border: 1px solid var(--bt-stroke);
  color: var(--bt-text);

  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;

  /* important: Text nicht abschneiden */
  min-width: 0;
}

#tab-generate .btSelect__btnText{
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-generate .btSelect__chev{
  opacity: .85;
  font-weight: 900;
}

/* Focus / Hover = Branding sichtbar */
#tab-generate .btSelect__btn:hover{
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.24));
}

#tab-generate .btSelect__btn:focus{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.45),
    0 0 0 4px rgba(30, 200, 190, .35);
  border-color: rgba(30, 200, 190, .55);
}

/* Dropdown Menu – gut sichtbar + gebrandet */
#tab-generate .btSelect__menu{
   /* Scrollbar ausblenden (Scrollen remains möglich) */
-ms-overflow-style: none;  /* IE/Edge legacy */
scrollbar-width: none;     /* Firefox */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 9999;

  border-radius: 14px;
  padding: 6px;
  background: rgba(10, 14, 20, .96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 50px rgba(0,0,0,.55);
/* damit nie "an den Rand klebt" */
  margin-top: 0;
  display: none;
}
#tab-generate .btSelect__menu::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* Dropdown standard: nach unten */
#tab-generate .btSelect__menu{
  top: calc(100% + 10px);
  bottom: auto;
}

/* Wenn root die Klasse .open-up hat -> nach oben öffnen */
#tab-generate .btSelect.open-up .btSelect__menu{
  top: auto;
  bottom: calc(100% + 10px);
}

/* Optional: kleine "Popup"-Anmutung */
#tab-generate .btSelect.open-up .btSelect__menu{
  transform-origin: bottom;
}

#tab-generate .btSelect.is-open .btSelect__menu{
  display: block;
}

#tab-generate .btSelect__opt{
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 10px;

  background: transparent;
  border: 0;
  color: rgba(235,240,255,.92);
  font-weight: 900;
  cursor: pointer;
}

#tab-generate .btSelect__opt:hover{
  background: rgba(30, 200, 190, .18);
}

#tab-generate .btSelect__opt.is-active{
  background: rgba(30, 200, 190, .26);
  box-shadow: inset 0 0 0 1px rgba(30, 200, 190, .30);
}
/* Immer nach oben öffnen (global) */
#tab-generate .btSelect .btSelect__menu{
  top: auto;
  bottom: calc(100% + 8px);
}
/* Stacking fix: geöffneter Select darf über Nachbar-Cards + Wrapper liegen */
#tab-generate .genMetrics{
  position: relative;
  overflow: visible;
}

#tab-generate .genMetric{
  position: relative;
  z-index: 1;
}

#tab-generate .btSelect.is-open{
  position: relative;
  z-index: 999;
}

#tab-generate .btSelect__menu{
  z-index: 1000;
}
:root{
  --bt-popup-safe: 14px; /* Abstand zum Viewport-Rand */
}
/* =========================================================
   Output Workbench v2 (Tiles + Modal) — Scoped (Right panel)
   ========================================================= */

.gridWrap--v2{
  padding: 5px;
  overflow: hidden;
}

.outputGrid--v2{
  height: 100%;
  display: grid;
  gap: 10px;
  /*grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  grid-auto-rows: 1fr;*/
}

@media (max-width: 980px){
  .outputGrid--v2{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.outCard{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
  min-height: 220px;
}

.outCard__media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;       /* wie Inspirations-Thumbs */
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

.outCard__shade{
  position:absolute;
  inset:0;
   /*background:
    radial-gradient(120% 120% at 30% 10%, rgba(90,215,255,.10), transparent 55%),
    radial-gradient(120% 120% at 80% 60%, rgba(46,229,157,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.55));*/
  pointer-events:none;
}
/* DONE: kein Overlay über dem Bild (max. Schärfe) */
.outCard.is-done .outCard__shade{ display:none !important; }

.outBadge{
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(233,237,246,.88);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: blur(10px);
}

.outStatus{
  position:absolute;
  left: 12px;
  right: 12px;
  top: 50px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(12px);
  color: rgba(233,237,246,.88);
}
/* When we render the new centered progress, the status container must cover the whole card */
.outStatus[data-bt-enhanced="1"]{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.outStatus__title{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  margin-bottom: 6px;
  opacity: .95;
}

.outStatus__sub{
  font-size: 12px;
  color: rgba(233,237,246,.68);
  margin-bottom: 10px;
}

.outProg{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.outProg__bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(46,229,157,.85), rgba(90,215,255,.85));
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset;
}

.outPending{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color: rgba(233,237,246,.55);
  font-size: 13px;
  letter-spacing:.02em;
}

.outPlay{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  display:grid;
  place-items:center;
  color: rgba(233,237,246,.90);
  opacity: .72;
  pointer-events:none;
}

.outHud{
  position:absolute;
  left: 12px;
  bottom: 12px;
  display:flex;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
}

.outCard:hover .outHud{
  opacity: 1;
  transform: translateY(0);
}

.outHud .iconbtn{
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.05);
}


/* =========================================================
   BatchTurbo Output Enhancements (Grid + Preview Modal)
   (Adds-only: no existing rules replaced)
   ========================================================= */

.outJobsMeta{
  font-size: 12px;
  color: rgba(233,237,246,.72);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

/* Aspect-aware tiles (enabled via JS: #outputGrid.bt-aspect-grid) */
#outputGrid.bt-aspect-grid{
  --bt-aspect: 1 / 1;
}
/*#outputGrid.bt-aspect-grid .outCard.bt-ar{
  aspect-ratio: var(--bt-aspect);
  min-height: 0;
}*/

/* Progress overlay (replaces inner outStatus markup via JS; uses new classes) */
/* Progress overlay (centered) */
.outCard .bt-progress{
   scale: .5;
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
/* Wenn Karte fertig ist: Overlay komplett entfernen */
.outCard.is-done .bt-progress,
.outCard.is-done .outStatus {
  display: none !important;
}
/* Big percent like your screenshot (top-right, subtle) */
.bt-progress__pct{
  position: absolute;
  right: 14px;
  top: 10px;
  font-weight: 900;
  font-size: 44px;
  letter-spacing: .01em;
  color: rgba(235,240,255,.22);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Track + green fill */
.bt-progress__bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  margin-top: 44px; /* Platz für die % Zahl */
}

.bt-progress__bar > i{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: rgba(46,229,157,1);   /*  grün */
  box-shadow: 0 0 18px rgba(46,229,157,.28);
  transition: width .18s ease;      /*  animiert beim Fortschritt */
  position: relative;
  overflow: hidden;
}

/* optionaler “Shimmer” (leicht, wirkt lebendig) */
.bt-progress__bar > i::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 40%;
  left: -45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: btProgShimmer 1.1s linear infinite;
  opacity: .35;
}

@keyframes btProgShimmer{
  to { left: 105%; }
}


/* =========================================================
   Preview Modal (new, independent from existing overlays)
   ========================================================= */

.preview-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.preview-modal.is-open{ display:block; }

.preview-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity .18s ease;
}
.preview-modal.is-open .preview-modal__backdrop{ opacity: 1; }

.preview-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  width: min(1180px, 95vw);
  height: min(780px, 88vh);
  transform: translate(-50%,-50%) scale(.985);
  opacity: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(14,16,18,.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 95px rgba(0,0,0,.70);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .16s ease;
}
.preview-modal.is-open .preview-modal__panel{
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}

.preview-modal__close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,237,246,.92);
  cursor:pointer;
  z-index: 5;
}
.preview-modal__close:hover{ background: rgba(255,255,255,.10); }

.preview-modal__body{
  height: 100%;
  display:flex;
}

.preview-modal__stageWrap{
  position:relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(90,215,255,.10), transparent 52%),
    radial-gradient(120% 120% at 80% 70%, rgba(46,229,157,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.30));
}

.preview-modal__badge{
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(233,237,246,.88);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
  backdrop-filter: blur(10px);
  z-index: 3;
}

.preview-modal__stage{
  position: relative;
  overflow: hidden;
}

.preview-modal__media{
  position: relative;
  width: 100%;
  height: 100%;
}

.preview-modal__media img,
.preview-modal__media video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
  display: none;
}

.preview-modal__stage.is-pannable{ cursor: grab; }
.preview-modal__stage.is-pannable:active{ cursor: grabbing; }

.preview-modal__media video{
  pointer-events: auto; /* controls usable */
}

.preview-modal__stage.is-zoomed{ cursor: grab; }
.preview-modal__stage.is-grabbing{ cursor: grabbing; }

.preview-modal__zoomHud{
  position:absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(14px);
  z-index: 4;
}

.preview-modal__zbtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,237,246,.92);
  cursor:pointer;
}
.preview-modal__zbtn:hover{ background: rgba(255,255,255,.10); }
.preview-modal__zval{
  min-width: 62px;
  text-align:center;
  font-weight: 800;
  color: rgba(233,237,246,.86);
  font-size: 12px;
  letter-spacing: .02em;
}

.preview-modal__side{
  width: clamp(280px, 24vw, 320px);
  border-left: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.preview-modal__sideHead{
  padding: 8px 6px 2px;
}
.preview-modal__sideTitle{
  font-weight: 850;
  color: rgba(233,237,246,.92);
  letter-spacing: .02em;
}

.preview-modal__kv{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 8px 6px;
  flex: 1 1 auto;
  overflow:auto;
}
.preview-modal__row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.preview-modal__k{
  width: 110px;
  flex: 0 0 auto;
  color: rgba(233,237,246,.55);
  font-size: 12px;
  letter-spacing: .02em;
}
.preview-modal__v{
  flex: 1 1 auto;
  color: rgba(233,237,246,.88);
  font-size: 12px;
  font-weight: 700;
  word-break: break-word;
}

.preview-modal__actions{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 8px 6px 4px;
}

.preview-modal__btnWide{
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
}

.preview-modal__btnDanger{
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,90,90,.30) !important;
  background: rgba(255,40,40,.12) !important;
  color: rgba(255,200,200,.92) !important;
}
.preview-modal__btnDanger:hover{ background: rgba(255,40,40,.18) !important; }

/* Responsive: stack sidebar below */
@media (max-width: 880px){
  .preview-modal__panel{
    width: min(980px, 96vw);
    height: min(860px, 92vh);
  }
  .preview-modal__body{
    flex-direction:column;
  }
  .preview-modal__side{
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .preview-modal__stageWrap{
    min-height: 52vh;
  }
}
/* =========================================================
   FINAL: Output Grid — tight gaps, no row “air”, aspect-safe
   Target: ONLY #outputGrid (avoid side effects)
   ========================================================= */

:root{
  --bt-cols: 3;
  --bt-rows: 2;
  --bt-gap: 5px;
  --bt-aspect: 1 / 1;
}

#outputGrid{
  height: 100%;
  min-height: 0;
  min-width: 0;

  display: grid;

  gap: var(--bt-gap) !important;

  grid-template-columns: repeat(var(--bt-cols), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--bt-rows), minmax(0, 1fr)) !important;

  /* IMPORTANT: do NOT create implicit tracks */
  grid-auto-rows: unset !important;
  grid-auto-columns: unset !important;

  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: stretch !important;
}

#outputGrid > *{
  min-width: 0;
  min-height: 0;
}

/* Tiles fill their cell */
#outputGrid .outTile,
#outputGrid .outCard{
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
}

/* Default preview: cover */
#outputGrid .outTile img,
#outputGrid .outTile video,
#outputGrid .outCard img,
#outputGrid .outCard video,
#outputGrid .outCard__media{
  width: 100%;
  height: 100%;
  object-fit: contain; /* KEIN Abschneiden mehr */
  display: block;
  background: rgba(0,0,0,.22); /* optional: sieht cleaner aus bei Letterbox */
}


/* Single-slot: show exact aspect ratio, no cropping */
#outputGrid.bt-single{
  place-items: center !important;
}

#outputGrid.bt-single .outTile,
#outputGrid.bt-single .outCard{
  aspect-ratio: var(--bt-aspect);
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
}

#outputGrid.bt-single .outTile img,
#outputGrid.bt-single .outTile video,
#outputGrid.bt-single .outCard img,
#outputGrid.bt-single .outCard video,
#outputGrid.bt-single .outCard__media{
  object-fit: contain !important;
}
/* =========================================================
   OUTPUT CARD STATES — pending / processing / done
   ========================================================= */

/* pending & processing are placeholders: not clickable, no HUD */
.outCard.is-pending,
.outCard.is-processing{
  cursor: default;
  pointer-events: none; /* disables click + keyboard + hud clicks */
}

/* HUD only when done */
.outCard.is-pending .outHud,
.outCard.is-processing .outHud{
  display: none !important;
}

/* If you have hover effects for cards, kill them for placeholders */
.outCard.is-pending:hover,
.outCard.is-processing:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* Optional: remove shade in placeholders (keeps it cleaner) */
.outCard.is-pending .outCard__shade,
.outCard.is-processing .outCard__shade{
  display: none !important;
}

/* PROCESSING: center a simple status box */
.outStatus--simple{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  text-align: center;
}

/* Ensure the inner box looks clean and not like the old framed block */
.outStatus--simple .outStatus__sub{
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 10px;
}

/* Progress bar container (use your existing .outProg styles if present) */
.outStatus--simple .outProg{
  width: min(260px, 80%);
}

/* PENDING: center text; for video you still have play icon */
.outCard.is-pending .outPending{
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  opacity: 0.65;
}

/* PENDING: play icon sits above the text */
.outCard.is-pending .outPlay{
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  opacity: 0.75;
}

/* If you don't want aspect badge during pending/processing, hide it */
.outCard.is-pending .outBadge,
.outCard.is-processing .outBadge{
  display: none !important;
}
/* =========================================================
   OUT HUD — icons like screenshot
   ========================================================= */


/* Base icon button (glassy) */
.outBtn{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,12,14,0.40);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(233,237,246,0.92);
}

.outBtn .icon{
  font-size: 18px;
  line-height: 1;
}

/* Hover polish */
.outBtn:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(10,12,14,0.55);
}

/* OPTIONAL: HUD only on hover/focus for done cards */
.outCard.is-done .outHud{
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .14s ease, transform .14s ease;
}

.outCard.is-done:hover .outHud,
.outCard.is-done:focus-within .outHud{
  opacity: 1;
  transform: translateY(0);
}

/* Safety: never show HUD on placeholders (redundant but safe) */
.outCard.is-pending .outHud,
.outCard.is-processing .outHud{
  display: none !important;
}
/* =========================================
   OUTPUT CARD STATES (pending/processing/done)
   ========================================= */

/* Safety: HUD only bei DONE sichtbar */
.outCard:not(.is-done) .outHud { display: none !important; }

/* Safety: non-done nicht klickbar (auch wenn mal ein Handler/role woanders gesetzt wird) */
.outCard.is-pending,
.outCard.is-processing{
  pointer-events: none;
}

/* Optional: Badge in pending/processing ausblenden (if you really NUR Text+Bar willst) */
.outCard.is-processing .outBadge{ display:none !important; }

/* -----------------------------------------
   PROCESSING: only mittig Text + Progressbar
   ----------------------------------------- */
.outCard.is-processing{
  position: relative;
  display: grid;
  place-items: center;
}

.outCard.is-processing .outPlay,
.outCard.is-processing .outPending,
.outCard.is-processing .outCard__shade{
  display:none !important;
}

.outStatus.outStatus--simple{
  position: relative;
  width: min(86%, 420px);
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: center;
}

.outStatus.outStatus--simple .outStatus__sub{
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  margin-bottom: 10px;
  opacity: 0.9;
}

.outProg{
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.10);
}

.outProg__bar{
  height: 100%;
  border-radius: 999px;
}

/* -----------------------------------------
   PENDING: Platzhalter
   - Video: Play + dezent "Wartet…"
   - Image: only "Wartet…"
   ----------------------------------------- */
.outCard.is-pending{
  position: relative;
  display: grid;
  place-items: center;
}

.outCard.is-pending .outCard__media,
.outCard.is-pending .outCard__shade{
  display:none !important;
}

.outCard.is-pending .outBadge{
  position: absolute;
  top: 8px;
  left: 8px;
}

.outCard.is-pending .outPlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-55%);
}

.outCard.is-pending .outPending{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  opacity: 0.75;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
}

/* -----------------------------------------
   DONE: normale Interaktion
   ----------------------------------------- */
.outCard.is-done{
  pointer-events: auto;
}
/* REMOVE the oval "Wartet..." pill */
.outPending{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
/* =========================================================
   FINAL: OutHud unten mittig (einzige Quelle der Wahrheit)
   ========================================================= */

.outCard{ position: relative; } /* important für absolute HUD */

.outHud{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  gap: 10px;
  z-index: 10;

  /* Glassy bar */
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

/* HUD only bei done + hover/focus */
.outCard.is-done:hover .outHud,
.outCard.is-done:focus-within .outHud{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Buttons im HUD */
.outHud .outBtn{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(233,237,246,.92);
  cursor: pointer;
}

.outHud .outBtn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
/* === BatchTurbo: Inline Video Play in Thumbnails === */
.outCard{
  position: relative; /* falls noch nicht gesetzt */
}


.btThumbPlay.is-playing{
  background: rgba(20,20,20,.55);
}

.btThumbVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* important: Thumbnail remains sauber */
  border-radius: inherit;
  display: none;
  z-index: 2;
}

.btThumbVideo.is-on{
  display: block;
}
/* === BatchTurbo: Inline Video Play in Thumbnails === */
.outCard{ position: relative; }

.btThumbPlay{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 64px;
  height: 64px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,20,20,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 5;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}

.btThumbPlay:hover{
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(20,20,20,.45);
  border-color: rgba(255,255,255,.26);
}

.btThumbPlay.is-playing{
  background: rgba(20,20,20,.55);
  transform: translate(-50%, -50%) scale(1.02);
}

.btThumbVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: none;
  z-index: 2;
  pointer-events: none; /* important: Detailansicht-Klick remains möglich */
}

.btThumbVideo.is-on{ display: block; }
/* ===== BatchTurbo: Thumbnail Video Play UI ===== */
.outCard{ position: relative; }

/* das Thumbnail-Video liegt über dem Bild, aber unter dem Button */
.btThumbVideo{
  position: absolute;
  inset: 10px;                 /* passt zu deinem inneren Padding-Rand */
  width: auto;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  display: none;
  z-index: 5;
  pointer-events: none;        /* Klick geht immer auf den Button */
  opacity: 0.95;
}

/* wenn aktiv: Video sichtbar */
.btThumbVideo.is-on{
  display: block;
}

/* Play/Pause Button mittig */
.btThumbPlay{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;

  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(15, 20, 25, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: rgba(255,255,255,0.92);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;

  cursor: pointer;
}

.btThumbPlay:hover{
  background: rgba(15, 20, 25, 0.50);
  border-color: rgba(255,255,255,0.26);
}

.btThumbPlay.is-playing{
  background: rgba(15, 20, 25, 0.55);
  border-color: rgba(255,255,255,0.30);
}
/* === BT FIX: Detail-Preview Medium IMMER sichtbar (Bild + Video) === */

#btPreviewStage {
  position: relative !important;
  width: 100% !important;
  height: 60vh !important;
  min-height: 420px !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 900px){
  #btPreviewStage {
    height: 55vh !important;
    min-height: 280px !important;
  }
}

/* Der Container, der img + video enthält */
#btPreviewMedia {
  position: absolute !important;
  inset: 0 !important;              /* top/right/bottom/left = 0 */
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Bild + Video selbst */
#btPreviewImg,
#btPreviewVid {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  display: block !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;    /* NICHT abschneiden */
  object-position: center !important;

  visibility: visible !important;
  opacity: 1 !important;

  transform-origin: center center !important;
  will-change: transform !important;
}
/* === BT FIX 2: Preview-Medium NICHT überdeckt (z-index + Layering) === */

#btPreviewStage {
  z-index: 1 !important;
}

#btPreviewMedia {
  z-index: 2 !important;
}

#btPreviewImg,
#btPreviewVid {
  z-index: 2 !important;
}

.preview-modal__zoomHud {
  z-index: 5 !important;
}

.preview-modal__badge {
  z-index: 6 !important;
}
/* ===== BatchTurbo: Preview (Detailansicht) Media Zentrierung + kein weißer Rahmen ===== */

/* Stage zentriert den Inhalt immer */
#btPreviewStage{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Media-Wrapper ebenfalls zentriert */
#btPreviewMedia{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Bild/Video passen sich an, ohne Rahmen */
#btPreviewImg,
#btPreviewVid{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ===== Thumbnail Play-Button IMMER mittig ===== */
.outCard{ position: relative; }

.btThumbPlay{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}

/* Wenn Video im Thumbnail läuft, liegt es unter dem Button */
.btThumbVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
}
/* ===========================
   PREVIEW (Detailansicht) Fix
   Zentrieren + kein weißer Rahmen
   =========================== */

#btPreviewStage{
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#btPreviewMedia{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btPreviewImg,
#btPreviewVid{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* important: zentriert & passt rein */
  display: block;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Manche Browser geben Video innen hellen Hintergrund -> kill */
#btPreviewVid{
  background-color: transparent !important;
}
/* ===== FINAL FIX: Preview Modal - kein schwarzer "Boden" ===== */
.preview-modal__stageWrap{
  background: transparent !important;
}
/* ===== FINAL FIX: Generate Media Overlay - kein Rahmen, kein Hintergrund ===== */
#genMediaOverlay #genMediaStage.viewerStage{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Wir transformieren die Canvas, nicht den Stage */
#genMediaOverlay #genMediaStage.viewerStage .viewerCanvas{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* Medium selbst: keine Rahmen/Flächen */
#genMediaOverlay #genMediaStage.viewerStage .viewerCanvas > img,
#genMediaOverlay #genMediaStage.viewerStage .viewerCanvas > video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* ===== REMOVE VIDEO/BILD-RAHMEN IM GENERATE VIEWER (FINAL) ===== */
#genMediaOverlay .viewerStage,
#genMediaOverlay .genMediaStage,
#genMediaOverlay .genMediaStage img,
#genMediaOverlay .genMediaStage video,
#genMediaOverlay .viewerStage img,
#genMediaOverlay .viewerStage video,
#genMediaStage.viewerStage,
#genMediaStage.viewerStage img,
#genMediaStage.viewerStage video,
#genMediaStage .viewerCanvas img,
#genMediaStage .viewerCanvas video{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* Notfall: Browser-Focus/Outline killen */
#genMediaOverlay video:focus,
#genMediaOverlay video:focus-visible{
  outline: none !important;
}
/* =========================================================
   Preview Sidebar — Inspiration Layout (inside #btPreviewKv)
   ========================================================= */

#btPreviewKv{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

#btPreviewKv .btSideHead{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

#btPreviewKv .btVarTitle{
  font-weight: 850;
  font-size: 18px;
  color: rgba(233,237,246,.95);
  letter-spacing: .01em;
}

#btPreviewKv .btMetaLine{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  color: rgba(233,237,246,.72);
  font-size: 12px;
  font-weight: 700;
}

#btPreviewKv .btPromptLabel,
#btPreviewKv .btDataLabel{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(233,237,246,.50);
  margin-top: 2px;
}

#btPreviewKv .btPromptBox{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(233,237,246,.86);
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

#btPreviewKv .btDataGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#btPreviewKv .btDataCard{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  min-width:0;
}

#btPreviewKv .btDataCard.is-disabled{
  opacity: .45;
}

#btPreviewKv .btK{
  font-size: 11px;
  color: rgba(233,237,246,.55);
  margin-bottom: 6px;
}

#btPreviewKv .btV{
  font-size: 13px;
  font-weight: 850;
  color: rgba(233,237,246,.92);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
/* =========================================================
   Generate Dashboard (FINAL, single source of truth)
   scoped: #tab-generate
   ========================================================= */

#tab-generate{
  --bg:#09090b;
  --fg:#fafafa;

  --card: rgba(30,30,35,.40);
  --cardBorder: rgba(255,255,255,.10);

  --mutedFg:#a1a1aa;

  /* Active Blue wie Screenshot */
  --accent: rgba(59,130,246,.15);
  --accentBorder: rgba(59,130,246,1);

  --radiusLg:22px;
  --radiusMd:16px;
  --radiusSm:10px;
}

/* Haupt-Card (Composer) */
#tab-generate .composer{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--card) !important;
  border: 1px solid var(--cardBorder) !important;
  border-radius: var(--radiusLg) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  padding: 18px !important;
}

/* Inputblock oben */
#tab-generate .genInputBlock{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 18px;
}

/* Attachbar */
#tab-generate #genAttachBar.attachbar--big{
  background: rgba(0,0,0,.20) !important;
  border: 1px solid var(--cardBorder) !important;
  border-radius: var(--radiusMd) !important;
  padding: 18px !important;
  min-height: 150px;
  overflow: visible;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Plus Button oben rechts */
#tab-generate #btnAddGenMedia.iconbtn{
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}
#tab-generate #btnAddGenMedia.iconbtn:hover{
  background: rgba(255,255,255,.18);
}

#tab-generate #genAttachBar #btMediaAlert,
#tab-generate #genAttachBar #btSourceAdvice{
  flex: 1 0 100%;
  margin-top: 12px;
}

/* Prompt textarea */
#tab-generate #promptText.genPrompt{
  background: transparent !important;
  border: 0 !important;
  color: var(--fg) !important;
  font-size: 16px;
  line-height: 1.5;
  outline: none !important;
  padding: 0 !important;
}
#tab-generate #promptText.genPrompt::placeholder{ color: var(--mutedFg); }

/* Control Layout: links Settings, rechts Tuning */
#tab-generate .genControlPanel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#tab-generate .genControlPanel__grid{
  display: grid !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap: 18px !important;
  align-items: start !important;
}
@media (max-width: 900px){
  #tab-generate .genControlPanel__grid{ grid-template-columns: 1fr !important; }
}

/* linke/rechte Fläche */
#tab-generate .genControlPanel__left,
#tab-generate .genControlPanel__right{
  background: rgba(0,0,0,.16) !important;
  border: 1px solid var(--cardBorder) !important;
  border-radius: var(--radiusLg) !important;
  padding: 16px !important;
}

/* Labels */
#tab-generate .genpill__label{
  display:block;
  font-size: 12px;
  color: var(--mutedFg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

/* Selects */
#tab-generate .select.genpillselect{
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radiusSm);
  background: rgba(0,0,0,.20);
  border: 1px solid var(--cardBorder);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#tab-generate .select.genpillselect:hover{ border-color: rgba(255,255,255,.20); }
#tab-generate .select.genpillselect .select__value{
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tab-generate .select.genpillselect .select__chev{ opacity: .55; }

/* Mode + Count Row */
#tab-generate .genRow--mode{
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 14px;
  align-items: end;
}
@media (max-width: 560px){
  #tab-generate .genRow--mode{ grid-template-columns: 1fr; }
}

/* Stepper */
#tab-generate .stepper.genstepper{
  height: 44px;
  padding: 0 4px;
  border-radius: var(--radiusSm);
  background: rgba(0,0,0,.20);
  border: 1px solid var(--cardBorder);
  display:flex;
  align-items:center;
  justify-content: space-between;
}
#tab-generate .stepper.genstepper .stepper__btn{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: rgba(233,237,246,.75);
}
#tab-generate .stepper.genstepper .stepper__btn:hover{
  background: rgba(255,255,255,.10);
  color: var(--fg);
}
#tab-generate .stepper.genstepper .stepper__value{
  font-weight: 900;
  color: var(--fg);
}

/* Aspect Pills */
#tab-generate .aspectPills{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
#tab-generate .aspectPill{
  min-width: 86px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radiusSm);
  background: rgba(0,0,0,.20);
  border: 1px solid var(--cardBorder);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg);
}
#tab-generate .aspectPill.is-active{
  background: var(--accent);
  border-color: var(--accentBorder);
  box-shadow: 0 0 12px rgba(59,130,246,.10);
}
#tab-generate .aspectPill__icon{
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(233,237,246,.55);
  background: rgba(255,255,255,.06);
}
#tab-generate .aspectPill.is-active .aspectPill__icon{
  background: rgba(59,130,246,.95);
  border-color: rgba(220,235,255,.95);
}

/* Right: Tuning */
#tab-generate .genMetrics{
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#tab-generate .genMetric{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#tab-generate .genMetric__title{
  font-size: 12px;
  color: var(--mutedFg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
#tab-generate .genMetric__value{
  font-size: 14px;
  font-weight: 900;
  color: var(--fg);
}

/* Sliders */
#tab-generate .genMetric__range{
  width: 100%;
  accent-color: rgba(59,130,246,1);
}

/* btSelect (Resolution/Format) */
#tab-generate .btSelect__btn{
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radiusSm);
  background: rgba(0,0,0,.20);
  border: 1px solid var(--cardBorder);
  color: var(--fg);
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 900;
}
#tab-generate .btSelect__btn:hover{ border-color: rgba(255,255,255,.20); }

/* CTA */
#tab-generate .genSubmitRow{ margin-top: 18px; }
#tab-generate #btnGenerate.gencta{
  width: 100%;
  height: 56px;
  border-radius: var(--radiusMd);
  background: linear-gradient(90deg, rgba(6,182,212,.20), rgba(59,130,246,.20));
  border: 1px solid rgba(6,182,212,.30);
  box-shadow: 0 0 20px rgba(6,182,212,.10);
}
#tab-generate #btnGenerate.gencta:hover{
  background: linear-gradient(90deg, rgba(6,182,212,.30), rgba(59,130,246,.30));
  border-color: rgba(6,182,212,.50);
  box-shadow: 0 0 30px rgba(6,182,212,.20);
  transform: translateY(-1px);
}
/* Header logo (replaces the dot) */
.brand__logo{
  width: 38px !important;
  height: 38px !important;
  object-fit: contain;
  display: inline-block;
}
/* Prompt Alert (inline) */
.bt-alert {
  display: none;
  margin-top: 10px;
  padding: 14px 14px;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
}
/* Visible states */
.bt-alert--error { display: block; }
.bt-alert--success { display: block; }
.bt-alert--warning { display: block; }

/* Layout */
.bt-alert__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bt-alert__icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.bt-alert__title {
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0 0 4px 0;
}

.bt-alert__text {
  margin: 0;
  opacity: 0.9;
  line-height: 1.35;
}

/* Error (rot) */
.bt-alert--error{
  border: 1px solid rgba(255, 80, 80, 0.35);
  background: rgba(255, 80, 80, 0.10);
}
.bt-alert--error .bt-alert__icon{
  background: rgba(255, 80, 80, 0.18);
  border: 1px solid rgba(255, 80, 80, 0.25);
}

/* Success (grün) */
.bt-alert--success{
  border: 1px solid rgba(46, 229, 157, 0.35);
  background: rgba(46, 229, 157, 0.10);
}
.bt-alert--success .bt-alert__icon{
  background: rgba(46, 229, 157, 0.18);
  border: 1px solid rgba(46, 229, 157, 0.25);
}

/* Warning / advisory (gelb-orange) */
.bt-alert--warning{
  border: 1px solid rgba(255, 210, 74, 0.36);
  background: rgba(255, 210, 74, 0.10);
}
.bt-alert--warning .bt-alert__icon{
  background: rgba(255, 210, 74, 0.18);
  border: 1px solid rgba(255, 210, 74, 0.24);
}
/* Generate: Alert darf Dropzone-Drag/Drop nicht blockieren */
#tab-generate .dropzone #btMediaAlert{
  pointer-events: none;
}
/* =========================
   Native Select – Dark Fix (Character Tab)
   ========================= */

#tab-character select{
  width:100%;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  color: var(--text);
  padding:10px 12px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
}

/* Hover */
#tab-character select:hover{
  border-color: var(--stroke2);
}

/* Focus */
#tab-character select:focus{
  border-color: rgba(58,162,255,.40);
  box-shadow: 0 0 0 4px var(--focus);
}

/* Dropdown Optionen (Dark Background erzwingen) */
#tab-character select option{
  background: #0e121a;
  color: var(--text);
}

/* Entfernt hellen OS-Style bei manchen Browsern */
#tab-character select::-ms-expand{
  display:none;
}
/* =========================
   Character Tab – Header 1-line (responsive)
   ========================= */

#tab-character .card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap; /* bleibt responsiv */
}

/* rechter Control-Block (Charakter-Picker + Name + Standard + Speichern) */
#tab-character .card__header > :last-child{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* verhindert, dass einzelne Controls „allein“ auf neue Zeile fallen */
#tab-character #btnSaveCharacter,
#tab-character #charPickerWrap,
#tab-character #charName,
#tab-character label{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Input nicht zu breit (damit alles in 1 Reihe passt) */
#tab-character #charName{
  max-width:180px;
}

/* Wenn es wirklich eng wird: Controls dürfen umbrechen, aber sauber */
@media (max-width: 900px){
  #tab-character .card__header > :last-child{
    width:100%;
    justify-content:flex-start;
  }
}
/* =========================
   Character Header – centered clean layout
   ========================= */

#tab-character .card__header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}

/* rechter Control-Block */
#tab-character .card__header > :last-child{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Picker Dropdown korrekt dark + schwebend */
#tab-character #charPickerWrap{
  position:relative;
}

#tab-character #charPickMenu{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  padding:6px;
}

/* Dropdown Items */
#tab-character #charPickMenu .dditem{
  border-radius:12px;
  padding:8px 12px;
}

#tab-character #charPickMenu .dditem:hover{
  background: rgba(255,255,255,.06);
}

/* Name Feld etwas eleganter */
#tab-character #charName{
  min-width:160px;
  text-align:center;
}
/* =========================
   Character Validation States (nur Tab: KI-Charakter)
   ========================= */

#tab-character .input.is-invalid{
  border-color:#ff4d4f !important;
  box-shadow:0 0 0 3px rgba(255,77,79,.15) !important;
}

#tab-character .input.is-valid{
  border-color:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.15) !important;
}

/* Dropzone (Bilder) valid/invalid */
#tab-character .dropzone.is-invalid{
  border-color:#ff4d4f !important;
  box-shadow:0 0 0 3px rgba(255,77,79,.12) !important;
}

#tab-character .dropzone.is-valid{
  border-color:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.12) !important;
}
/* =========================
   Character Panel Actions
   ========================= */
#tab-character .callout__title{
  padding-right: 4px;
}

#tab-character .charActions{
  display:flex;
  align-items:center;
  gap:10px;
}

#tab-character #btnSaveCharacter{
  min-height: 36px;
  padding: 8px 14px;
}

#tab-character #btnDeleteCharacter{
  padding: 8px 12px;
  border-radius: 999px;
}
/* =========================
   Character Editor Panel
   ========================= */
.details--character{
  background: 
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    rgba(12,16,23,.55);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.details--character > summary{
  font-weight: 650;
  padding: 14px 16px;
}

.details--character .callout__body,
.details--character .details__body{
  padding: 16px;
}
/* =========================
   Character Header Layout
   ========================= */
#tab-character .card__header{
  align-items: center;
}

#tab-character .charHeaderRight{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

#tab-character #charPickerWrap{
  display:flex;
  align-items:center;
  gap:8px;
}

#tab-character #btnNewCharacter{
  padding:8px 14px;
}
/* =========================
   Character Summary Refinement
   ========================= */
#tab-character .details--character > summary{
  border-bottom: 1px solid var(--stroke);
  background: rgba(255,255,255,.02);
  transition: background .15s ease;
}

#tab-character .details--character > summary:hover{
  background: rgba(255,255,255,.04);
}

#tab-character .details--character[open] > summary{
  border-bottom: 1px solid var(--stroke2);
}
/* =========================
   Active Influencer Context
   ========================= */
#tab-character #charPickBtn{
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(90,215,255,.06);
  border: 1px solid rgba(90,215,255,.25);
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

#tab-character #charPickBtn:hover{
  background: rgba(90,215,255,.12);
  border-color: rgba(90,215,255,.45);
  transform: translateY(-1px);
}

#tab-character #charPickValue{
  color: var(--text);
}
/* =========================
   Character Vertical Rhythm
   ========================= */
#tab-character .card{
  padding: 16px;
}

#tab-character .stack{
  gap: 16px;
}

#tab-character .details--character{
  margin-bottom: 16px;
}

#tab-character .tileRow{
  gap: 14px;
}
/* =========================
   Character Editor Footer
   ========================= */
#tab-character .charEditorFooter{
  margin-top: 18px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

#tab-character .details--character:not([open]) .charEditorFooter{
  display:none;
}
/* =========================
   Character: "Neu" Pill Button
   ========================= */
#tab-character .charNewBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  height: 38px;
  padding: 0 14px 0 10px;
  border-radius: 999px;

  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);

  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}

#tab-character .charNewBtn:hover{
  transform: translateY(-1px);
  border-color: var(--stroke2);
  background: rgba(255,255,255,.06);
}

#tab-character .charNewBtn:active{ transform: translateY(0); }

#tab-character .charNewBtn__plus{
  width: 26px;
  height: 26px;
  border-radius: 999px;

  display:grid;
  place-items:center;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);

  font-weight: 850;
  line-height: 1;
}

#tab-character .charNewBtn__text{
  font-weight: 650;
  letter-spacing: .2px;
}
/* FIX: doppelte Linie am Character-Accordion */
#tab-character .details--character > summary{
  border-bottom: none !important;
}

#tab-character .details--character[open] > summary{
  border-bottom: 1px solid var(--stroke2) !important;
}
/* =========================
   Character Captions: Auto button
   ========================= */
#tab-character .capRow{
  display:flex;
  align-items:center;
  gap:10px;
}

#tab-character .capRow .input{
  flex:1;
}

#tab-character .capAuto{
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  white-space:nowrap;
}

#tab-character .capAuto:hover{
  transform: translateY(-1px);
  border-color: var(--stroke2);
  background: rgba(255,255,255,.06);
}
/* Character Captions: Reset icon (immer sichtbar, aber gedimmt) */
#tab-character .capRow .capReset{
  opacity: .35;
  pointer-events: auto;
  transform: translateY(1px);
  transition: opacity .12s ease, transform .12s ease, border-color .12s ease, background .12s ease, filter .12s ease;
  filter: grayscale(1);
}

#tab-character .capReset:hover,
#tab-character .capReset:focus-visible{
  opacity: 1;
  transform: translateY(0);
  filter: none;
}
/* Character Captions: Auto icon (document/text) */
#tab-character .capAuto{
  opacity: .55;
  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
  filter: grayscale(1);
}

#tab-character .capAuto:hover,
#tab-character .capAuto:focus-visible{
  opacity: 1;
  transform: translateY(-1px);
  filter: none;
}

#tab-character .capIcon{
  display:block;
}
/* ---- FIX: In Character Tiles darf NUR das direkt gehoverte Icon aufhellen ---- */
#tab-character .upTile .iconbtn{
  opacity: .35 !important;
  filter: grayscale(1) !important;
  transition: opacity .12s ease, transform .12s ease, filter .12s ease !important;
}

#tab-character .upTile .iconbtn:hover,
#tab-character .upTile .iconbtn:focus-visible{
  opacity: 1 !important;
  filter: none !important;
}
/* === HARD RULE (Character Tab only):
   Never brighten sibling icons when hovering inside a tile.
   Only the actually hovered icon may brighten. === */

/* 1) Default: all icon buttons inside a Character tile are always dimmed */
#tab-character .upTile:hover .iconbtn,
#tab-character .upTile:focus-within .iconbtn{
  opacity: .35 !important;
  filter: grayscale(1) !important;
}

/* 2) Exception: ONLY the hovered / focused icon gets bright */
#tab-character .upTile:hover .iconbtn:hover,
#tab-character .upTile:focus-within .iconbtn:focus-visible{
  opacity: 1 !important;
  filter: none !important;
}
/* =========================
   Character Studio Overlay
   ========================= */

.studioOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 10000;
}

.studioOverlay.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.studioModal{
  width: 95vw;
  height: 92vh;
  background: var(--panel);
  border-radius: 22px;
  border: 1px solid var(--stroke);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.studioHeader{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--stroke);
}

.studioStepper{
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
}

.studioTitle{
  font-weight: 650;
  font-size: 16px;
}

.studioBody{
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}

.studioPreview{
  background: rgba(0,0,0,.25);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studioPreviewPlaceholder{
  color: var(--muted2);
}

.studioChat{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: rgba(0,0,0,.2);
}

.studioChatLog{
  flex: 1;
  overflow: auto;
  padding: 12px;
}

.studioChatInputRow{
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--stroke);
}
/* =========================
   Character Studio — 3-Spalten Layout + UI Skeleton
   ========================= */

.studioHeaderLeft{display:flex;align-items:center;gap:10px}
.studioBadge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted2);
  font-size:12px;
}

.studioHeaderRight{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.studioStepper{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
}
.step{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted2);
  font-size:12px;
  white-space:nowrap;
}
.stepNum{
  width:22px;height:22px;
  border-radius:999px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight:650;
  font-size:12px;
}
.step.is-active{color: var(--text)}
.step.is-active .stepNum{
  border-color: rgba(120,180,255,.35);
  box-shadow: 0 0 0 3px rgba(120,180,255,.12);
}
.step.is-done{color: rgba(220,240,255,.8)}
.step.is-done .stepNum{background: rgba(120,180,255,.12); border-color: rgba(120,180,255,.25)}

.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:12px;
  cursor:pointer;
}
.chip:hover{background: rgba(255,255,255,.06)}
.chip--gold{
  border-color: rgba(215,255,0,.25);
  background: rgba(215,255,0,.10);
}

.iconbtn--tiny{
  width:30px;height:30px;
  border-radius:999px;
}

/* 3 columns */
.studioGrid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns: 360px 1fr 320px;
  gap: 14px;
  padding: 16px;
  overflow:hidden;
}
.studioCol{min-height:0; overflow:auto; padding-right:2px}
.studioCol::-webkit-scrollbar{width:10px}
.studioCol::-webkit-scrollbar-thumb{background: rgba(255,255,255,.08); border-radius:999px}
.studioCol::-webkit-scrollbar-track{background: transparent}

.studioPanel{
  border:1px solid var(--stroke);
  border-radius:18px;
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow2);
  padding: 12px;
  margin-bottom: 12px;
}
.studioPanel--flat{padding:0}
.studioPanelTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:650;
  margin-bottom: 10px;
}
.studioPanel--flat .studioPanelTitle{padding:12px 12px 0 12px; margin-bottom: 8px}

/* DNA card */
.dnaCard{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding: 12px;
  background: rgba(255,255,255,.03);
}
.dnaTitle{font-weight:650; margin-bottom:6px}
.dnaLine{color: var(--muted2); font-size:12px; margin-top:4px}
.dnaLine b{color: var(--text); font-weight:650}

/* Controls (clean + responsive, less "messi") */
.ctrlRow{
  display:grid;
  grid-template-columns: 92px 1fr; /* label + control */
  gap:0px;
  align-items:start;      /* label & control starten oben gleich */
  margin-top: 0;          /* kein “Stack”-Drift */
  padding-top: 0;
  padding-bottom: 50px;   /* global: 20px Abstand zum nächsten Element */
}

/* Only rows that actually have a right-side value get a 3rd column */
.ctrlRow:has(.ctrlVal){
  grid-template-columns: 92px 1fr 44px;
}

/* keine Trennlinie / kein extra top-padding zwischen Rows */
.ctrlRow + .ctrlRow{
  border-top: 0;
  padding-top: 0;
}
.ctrlLbl{
  color: var(--muted2);
  font-size:12px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ctrlVal{
  text-align:right;
  color: var(--text);
  font-weight:650;
  font-size:12px;
}

.range{width:100%}

/* Segmented controls: square-ish chips, wrap nicely */
.seg{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  align-items:center;
}

.seg button{
  padding:7px 10px;
  min-height: 32px;
  border-radius:12px; /* eckiger */
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  font-size:12px;
  line-height:1;
}

.seg button.is-active{
  background: rgba(40, 200, 120, .18);     /* dezentes Grün */
  border-color: rgba(40, 200, 120, .45);
  color: #eafff4;
  box-shadow: 0 0 0 1px rgba(40,200,120,.25) inset;
}

/* Keep swatches styles untouched (legacy), hair ring is separate */
.swatches{display:flex; gap:8px; align-items:center}
.swatch{
  width:20px;height:20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  cursor:pointer;
}
.swatch.is-active{box-shadow: 0 0 0 4px rgba(120,180,255,.14)}
/* Gender Seg — icon-only look (active=white, inactive=muted outline) */
.seg--gender{
  gap:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.seg--gender button{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border:0;
  border-right:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background: transparent;
  color: rgba(233,237,246,.55); /* inactive */
}

.seg--gender button:last-child{ border-right:0; }

.seg--gender .segText{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0; /* visually hidden, keeps textContent */
}

.seg--gender button.is-active{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95); /* active = white icon */
}

.seg--gender button.is-active svg{
  filter: drop-shadow(0 0 10px rgba(255,255,255,.10));
}
/* Quality cards */
.qualityCard{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  margin-top: 8px;
}
.qualityCard.is-active{
  background: rgba(215,255,0,.10);
  border-color: rgba(215,255,0,.22);
}
.qTitle{font-weight:650}
.qMeta{color: var(--muted2); font-size:12px}

/* toggles */
.toggleRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.toggleLbl{color: var(--muted2); font-size:12px}
.switch{position:relative; width:44px; height:24px}
.switch input{opacity:0; width:0; height:0}
.switch span{
  position:absolute; inset:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.switch span:before{
  content:"";
  position:absolute;
  width:18px;height:18px;
  left:3px; top:50%;
  transform: translateY(-50%);
  border-radius:999px;
  background: rgba(255,255,255,.85);
}
.switch input:checked + span{background: rgba(120,180,255,.20); border-color: rgba(120,180,255,.28)}
.switch input:checked + span:before{left:22px}

/* Stage */
.studioStage{padding: 0 12px 12px 12px}
.studioStageTopRight{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding: 0 12px 10px 12px;
}
.studioStageActions{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top: 10px;
}
.stageVote{display:flex; gap:8px; margin-left:auto}

/* Chat */
.chatBubble{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
}
.chatBubble--user{
  text-align: right;
}
/* Chat attachments — smaller (ChatGPT-like) */
.chatImgs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.chatImg{
  width: 150px;          /* deutlich kleiner */
  max-width: 150px;
  height: 110px;         /* feste Card-Höhe */
  object-fit: cover;     /* wirkt wie ChatGPT */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  display:block;
}
@media (max-width: 520px){
  .chatImg{ width: 120px; max-width:120px; height: 92px; }
}

/* Composer attachments strip (multiple images before sending) */
.studioAttachStrip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0 0 10px 0;
}
.attachThumb{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  background-size: cover;
  background-position:center;
  position:relative;
}
.attachRemove{
  position:absolute;
  top:-7px; right:-7px;
  width:20px; height:20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.65);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:12px;
  line-height:1;
}
/* Chat attachments (ChatGPT-like sizing) */
.chatImg{
  display:block;
  max-width: 280px;      /* klein wie ChatGPT */
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom: 8px;
}
.chatText{
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* on very small screens */
@media (max-width: 520px){
  .chatImg{max-width: 220px;}
}
.studioThumbRow{display:flex; gap:8px; padding: 8px 0 2px 0}
.miniThumb{
  width:60px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.studioChatInputRow--big{
  display:flex;
  gap:10px;
  padding: 12px;
}
.studioChatInputRow--big .input{flex:1; min-height:44px}
.refRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding: 0 12px 12px 12px;
}
.refLbl{color: var(--muted2); font-size:12px}

/* Right: tabs + versions + slots */
.studioTabs{display:flex; gap:8px; align-items:center}
.tabMini{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  font-size:12px;
}
.tabMini.is-active{background: rgba(120,180,255,.10); border-color: rgba(120,180,255,.20)}

.versionList{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.verItem{
  display:grid;
  grid-template-columns: 34px 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
}
.verItem.is-active{
  border-color: rgba(215,255,0,.22);
  background: rgba(215,255,0,.08);
}
.verThumb{
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.verTxt{font-size:12px}
.verStar{color: rgba(215,255,0,.9)}

.slotGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.slotCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:10px;
  cursor:pointer;
  color: var(--text);
}
.slotCard.is-set{border-color: rgba(120,180,255,.25); background: rgba(120,180,255,.08)}
.slotThumb{
  height:74px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted2);
  margin-bottom:8px;
}
.slotThumb--empty{font-size:22px}
.slotLbl{font-weight:650; font-size:12px}

/* responsive */
@media (max-width: 1100px){
  .studioGrid{grid-template-columns: 320px 1fr; }
  .studioCol--right{display:none}
}
@media (max-width: 860px){
  .studioGrid{grid-template-columns: 1fr; }
  .studioCol--left{order:2}
  .studioCol--center{order:1}
}
/* =========================
   Center column: fixed input, scroll chat
   ========================= */

.studioCol--center{
  display:flex;
  flex-direction:column;
  gap: 12px;
  overflow: hidden;     /* wichtig: nur innen scrollen */
  min-height: 0;
}

/* Letztes Panel in der Mitte = Iterations-Chat Panel */
.studioCol--center > .studioPanel.studioPanel--flat:last-child{
  flex: 1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}

/* Chat-Log soll scrollen */
.studioCol--center > .studioPanel.studioPanel--flat:last-child .studioChatLog{
  flex:1;
  overflow:auto;
  padding: 12px;
  min-height:0;
}

/* Eingabe unten „fest“, größer */
.studioChatInputRow--big{
  padding: 14px 12px;
}
.studioChatInputRow--big .input{
  min-height: 52px;   /* höher */
  font-size: 14px;
}

/* Reference row bleibt unter Input sichtbar */
.studioCol--center > .studioPanel.studioPanel--flat:last-child .refRow{
  padding: 0 12px 14px 12px;
}
/* =========================
   Studio Composer (ChatGPT-like)
   ========================= */

.studioChatComposer{
  padding: 14px 12px;
  border-top: 1px solid var(--stroke);
  display:flex;
  flex-direction:column;
  gap:10px; /* sorgt für “sauberes Vergrößern” wie ChatGPT */
}

.studioComposerRow{
  position: relative;
}

.studioChatComposerInput{
  width: 100%;
  min-height: 78px;
  padding: 16px 64px 16px 76px; /* Platz links + rechts */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

/* Buttons immer sauber im Input */
.studioUploadInside,
.studioSendInside{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  z-index: 5;
}
.studioUploadInside{ left: 10px; }
.studioSendInside{ right: 10px; }

.studioChatComposerInput::placeholder{
  color: var(--muted2);
}

.studioSendInside{
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
}

.studioSendInside:hover{
  background: rgba(255,255,255,.10);
}
.studioUploadInside{
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  display:grid;
  place-items:center;
  font-size: 18px;
  line-height: 1;
}

.studioUploadInside:hover{
  background: rgba(255,255,255,.10);
}
/* =========================
   FIX: Composer attachments must not overlap buttons
   ========================= */

/* Attachment strip sits ABOVE input, but leaves room for + and send */
.studioAttachStrip{
  padding-left: 58px;   /* Platz für + Button */
  padding-right: 58px;  /* Platz für Send Button */
  margin: 0 0 10px 0;
}

/* Ensure buttons always stay above any thumbnails */
.studioUploadInside,
.studioSendInside{
  z-index: 5;
}

/* Thumbnails slightly smaller so they never collide */
.attachThumb{
  width: 40px;
  height: 40px;
}

/* =========================
   FIX: Chat images must be small (override older rules)
   ========================= */

.chatImgs .chatImg{
  width: 150px !important;
  max-width: 150px !important;
  height: 110px !important;
  object-fit: cover !important;
}

@media (max-width: 520px){
  .chatImgs .chatImg{
    width: 120px !important;
    max-width: 120px !important;
    height: 92px !important;
  }
}
/* =========================
   Studio Image Lightbox (ChatGPT-like)
   ========================= */
.studioLightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  display: none;
  z-index: 20000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.studioLightbox.is-open{ display:flex; }

.studioLightboxInner{
  max-width: min(1100px, 96vw);
  max-height: min(820px, 92vh);
  position: relative;
}
.studioLightboxImg{
  max-width: 100%;
  max-height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  display:block;
}
.studioLightboxClose{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.65);
  color: var(--text);
  cursor:pointer;
}
/* Gender icons: inactive = outline, active = filled */
.genderIcon{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.seg--gender button.is-active .genderIcon{
  fill: currentColor;
  stroke: none;
}
.genderImg{
  width: 18px;
  height: 18px;
  display: block;
  opacity: .45;
  filter: grayscale(1) brightness(1.4);
}

.seg--gender button.is-active .genderImg{
  opacity: 1;
  filter: brightness(2.2) saturate(0);
}
/* Gender icon <img> hard clamp (prevents huge exported SVGs from exploding) */
.seg--gender .segIcon{
  width: 20px;
  height: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.seg--gender .genderImg{
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain;
  display:block;
}
/* =========================
   Studio: Skin Tone Slider (6-step, 1 slider)
   Scope: #studioOverlay only
   ========================= */
#studioOverlay .skinSlider{
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 66px;

  /* 6 tone stops (tweak later if needed) */
  --skin-0: #f5dfd2; /* Porcelain */
  --skin-1: #efd2bd; /* Ivory */
  --skin-2: #e0b892; /* Sand */
  --skin-3: #c99663; /* Golden */
  --skin-4: #9a663c; /* Caramel */
  --skin-5: #4a2b1e; /* Ebony */

  /* knob position (JS setzt später 0..1) */
  --p: .5;
}

#studioOverlay .skinSlider__track{
  position:absolute;
  left: 23px;
  right: 23px;
  top: 50%;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(
    90deg,
    var(--skin-0) 0%,
    var(--skin-1) 20%,
    var(--skin-2) 40%,
    var(--skin-3) 60%,
    var(--skin-4) 80%,
    var(--skin-5) 100%
  );
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(0,0,0,.10);
}

#studioOverlay .skinSlider__range{
  position:absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 38px;
  margin: 0;
  opacity: 0; /* wir nutzen den native input nur für drag + snap */
  cursor: pointer;
  z-index: 5;
}

#studioOverlay .skinSlider__knob{
  position:absolute;
  top: 50%;
  left: calc(23px + var(--p) * (100% - 46px));
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.70);
  background: rgba(200,200,200,.55); /* default neutral */
  box-shadow:
    0 14px 30px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
  z-index: 4;
}

#studioOverlay .skinSlider__knobText{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(15,18,22,.92);
  user-select: none;
}

/* Default state: neutral + no text */
#studioOverlay .skinSlider__knob.is-neutral{
  background: rgba(190,195,205,.55);
}
#studioOverlay .skinSlider__knob.is-neutral .skinSlider__knobText{
  display:none;
}
/* Studio Left: DNA Panel oben fixieren (sticky) – solid (kein Durchscheinen) */
#studioOverlay .studioCol--left > .studioPanel:first-child{
  position: sticky;
  top: 0;
  z-index: 50;

  /* macht die Karte wirklich “fest sichtbar” */
  background: rgba(10,12,17,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* klare Trennung zum Content darunter */
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
#studioOverlay .hairRing{
  width: 190px;
  height: 190px;
}
#studioOverlay .hairRingWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: visible;
}

#studioOverlay .hairRing{
  width: 160px;
  height: 160px;
}

#studioOverlay .hairRing svg{
  width: 100%;
  height: 100%;
  display: block;
}
/* Augenfarbe 2x2 Grid */
#studioOverlay .eyeSwatches{
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 5px;
  padding: 5px;
}
/* Studio: Eye swatches – Rahmen komplett aus */
#studioOverlay .eyeSwatch{
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(0,0,0,.18) !important;
  box-shadow: none !important;
}

#studioOverlay .eyeSwatch.is-active{
  border-color: rgba(108,77,251,.85) !important;
  box-shadow: 0 0 0 3px rgba(108,77,251,.22) !important;
}
#studioOverlay .bodyTypeSwatches{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 10px;
  max-width: 100%;
}

#studioOverlay .bodyTypeSwatch{
  width: 72px;
  height: 96px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

#studioOverlay .bodyTypeSwatch:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
}

#studioOverlay .bodyTypeSwatch.is-active{
  border-color: rgba(108,77,251,.55); /* uses your --accent vibe */
  box-shadow: 0 0 0 2px rgba(108,77,251,.25), 0 16px 38px rgba(0,0,0,.45);
}

#studioOverlay .bodyTypeSwatch img{
  width: 56px;
  height: 76px;
  object-fit: contain;
  display: block;
}

#studioOverlay .bodyTypeSwatchLabel{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1;
  color: rgba(244,240,255,.80);
  text-align: center;
}
/* Body Type: make selected silhouette brighter (stays bright) */
#studioOverlay .bodyTypeSwatch{
  opacity: .72;
  filter: brightness(.92) contrast(1.05);
}

#studioOverlay .bodyTypeSwatch.is-active{
  opacity: 1;
  filter: brightness(1.25) contrast(1.08);
}
/* Body Type: hover preview */
#studioOverlay .bodyTypeSwatch:hover{
  opacity: .95;
  filter: brightness(1.12) contrast(1.06);
  transform: translateY(-2px);
}

/* Prevent hover from overriding active brightness */
#studioOverlay .bodyTypeSwatch.is-active:hover{
  filter: brightness(1.28) contrast(1.1);
}
/* =========================
   Studio — Body Type (ONLY)
   ========================= */
#studioOverlay #studioBodyTypeSwatches .bodyTypeImg{
  width: 72px !important;
  height: 55px !important;
  object-fit: contain !important;
  display: block !important;
  filter: brightness(.92);
  transition: filter .12s ease, transform .12s ease;
}

/* Hover: wie Tooltip-Preview (Zoom + überlagern) */
#studioOverlay #studioBodyTypeSwatches .bodyTypeSwatch:hover .bodyTypeImg{
  filter: invert(1) brightness(1.5) saturate(0) contrast(1.3) !important; /* sehr hell/weiß */
  transform: scale(2.1);
  z-index: 20;
  position: relative;
}
/* =========================
   Studio — Gender Seg (ONLY)
   ========================= */
#studioOverlay .seg.seg--gender{
  display: inline-flex;
  gap: 0;
  padding: 6px;
  border-radius: 14px;
  background: rgba(12, 22, 30, 0.65);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) inset;
}

#studioOverlay .seg.seg--gender .segIcon{
  display: none; /* Screenshot = nur Text */
}

#studioOverlay .seg.seg--gender button{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(244,240,255,0.62);
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}

#studioOverlay .seg.seg--gender button.is-active{
  background: rgba(20, 40, 55, 0.85);
  color: rgba(244,240,255,0.95);
}

#studioOverlay .seg.seg--gender button:not(.is-active):hover{
  color: rgba(244,240,255,0.80);
}
/* =========================
   Studio — Gender Text sichtbar (ONLY)
   ========================= */
#studioOverlay .seg.seg--gender .segText{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Studio — Gender Seg Breite fix (ONLY) */
#studioOverlay .seg.seg--gender{
  width: fit-content !important;
  max-width: none !important;
}
/* =========================
   Studio: Alter Slider (input.range) – kein Browser-Blau
   Scope: #studioOverlay only
   ========================= */
#studioOverlay input.range{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  outline: none;
}

/* Track */
#studioOverlay input.range::-webkit-slider-runnable-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
#studioOverlay input.range::-moz-range-track{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Thumb */
#studioOverlay input.range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(46, 213, 140, 0.95);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 4px rgba(108,77,251,0.18);
  margin-top: -5px; /* zentriert auf 8px Track */
  cursor: pointer;
}
#studioOverlay input.range::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(108,77,251,0.95);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 4px rgba(108,77,251,0.18);
  cursor: pointer;
}

/* Hover/Active */
#studioOverlay input.range:hover::-webkit-slider-thumb{
  box-shadow: 0 10px 24px rgba(0,0,0,0.42), 0 0 0 6px rgba(108,77,251,0.22);
}
#studioOverlay input.range:active::-webkit-slider-thumb{
  transform: scale(1.02);
}
/* =========================
   Studio — Selected = GREEN (ONLY)
   replaces purple rgba(108,77,251,0.95)
   ========================= */
#studioOverlay .seg button.is-active{
  border-color: rgba(46, 229, 157, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(46, 229, 157, 0.22) !important;
}

#studioOverlay .qualityCard.is-active{
  border-color: rgba(46, 229, 157, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(46, 229, 157, 0.22) !important;
}

#studioOverlay .eyeSwatch.is-active{
  border-color: rgba(46, 229, 157, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(46, 229, 157, 0.22) !important;
}

#studioOverlay .bodyTypeSwatch.is-active{
  border-color: rgba(46, 229, 157, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(46, 229, 157, 0.22) !important;
}

#studioOverlay #studioHairRing .hairSeg.is-active{
  stroke: rgba(46, 229, 157, 0.95) !important;
}
/* =========================
   Modal Studio: bottom control bar (Model + Generate)
   ========================= */
#studioOverlay .studioStage{
  display: flex;
  flex-direction: column;
  min-height: 520px; /* sorgt für „echtes“ Bottom anchoring auch bei leerem Preview */
}

#studioOverlay .studioPreview{
  flex: 1 1 auto;
  min-height: 260px;
}

#studioOverlay .studioStageActions{
  margin-top: auto;            /* <-- das ist der Bottom-Fix */
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding-top: 12px;
}

/* Model button: wide enough */
#studioOverlay #studioModelBtn{
  flex: 1 1 auto;
  min-width: 320px;
  max-width: 620px;
}

/* Generate button: always visible and stable width */
#studioOverlay #studioGenBtn{
  flex: 0 0 auto;
  min-width: 240px;
  height: 40px;
  border-radius: 999px;
}
/* Make center column fill available height so bottom bar is truly at the bottom */
#studioOverlay .studioBody{
  height: calc(100vh - 120px); /* header offset; keeps responsive */
  min-height: 640px;
}

#studioOverlay .studioCol--center{
  display: flex;
  flex-direction: column;
  height: 100%;
}

#studioOverlay .studioCol--center .studioStage{
  flex: 1 1 auto;
  min-height: 0; /* allow inner flex children to size properly */
}
/* Dropdown menu should open upwards (portal dropdown uses .dropdown in portalRoot) */
#portalRoot .dropdown[data-for="studioModel"],
#portalRoot .dropdown[data-select="studioModel"]{
  transform-origin: bottom;
}
/* ===== Preview Layout ===== */

.studioPreview {
  position: relative;
  overflow: hidden;
}

/* ===== Hover Button ===== */

.studioPreviewHover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: none;            /* WICHTIG */
  justify-content: center;
  pointer-events: none;
}

.studioPreview.has-image:hover .studioPreviewHover {
  display: flex;
  pointer-events: auto;
}

.studioPreviewHoverBtn {
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 12px 22px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* ===== Progress Overlay ===== */

.studioPreviewProgress {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.studioPreviewProgress.is-active {
  display: flex;
}

.studioPreviewProgress__bar {
  width: 60%;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.studioPreviewProgress__fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg,#00c46a,#1b9dff);
  transition: width .3s ease;
}

.studioPreviewProgress__text {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
/* Bee Progress Logo */
.beeProgressContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  pointer-events: none;
  display: none;
}

.beeLogoBase {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.15;
}

.beeLogoFillWrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  height: 0%;
  transition: height 0.6s ease;
  -webkit-mask-image: url('/app/assets/ki-influencers_bts_w.svg');
  mask-image: url('/app/assets/ki-influencers_bts_w.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
  mask-position: bottom center;
  background: #28c878;
}
/* Generated Image */

.studioPreviewImg {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.studioPreview.has-image .studioPreviewImg {
  display: block;
}

.studioPreview.has-image .studioPreviewLogo {
  display: none;
}
/* Preview Container */
.studioPreview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Image */
.studioPreviewImg {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

.studioPreview.has-image .studioPreviewImg {
  display: block;
}

/* Central State Layer */
.studioPreviewState {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .3s ease;
}

/* Logo */
.studioPreviewLogo {
  width: 120px;
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Progress */
.studioPreviewProgress {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.studioPreviewProgress__bar {
  width: 260px;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.studioPreviewProgress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#18e0b5,#2aa6ff);
  transition: width .3s ease;
}

.studioPreviewProgress__percent {
  font-size: 12px;
  opacity: .6;
}

/* Message */
.studioPreviewMessage {
  margin-top: 14px;
  font-size: 14px;
  opacity: .8;
}

/* Hover Assign */
.studioPreviewHover {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.studioPreview.has-image:hover .studioPreviewHover {
  opacity: 1;
  pointer-events: auto;
}
/* ── Origin Globe ── */
.ctrlRow--origin{ align-items:start; padding-bottom:50px; }
.originPicker{ display:flex; flex-direction:row; align-items:flex-start; gap:10px; }
.originGlobe{
  flex-shrink:0; position:relative;
  width:120px; height:120px;
  cursor:grab; touch-action:none;
}
.originGlobe:active{ cursor:grabbing; }
.originGlobe.is-locked{ cursor:default; }
#originGlobeCanvas{
  width:120px; height:120px; border-radius:50%; display:block;
  transition:box-shadow .3s;
}
.originGlobeHint{
  position:absolute; bottom:-15px; left:0; right:0; text-align:center;
  font-size:9px; letter-spacing:.07em; color:rgba(233,237,246,.22);
  pointer-events:none; transition:opacity .2s;
}
.originGlobe.is-locked .originGlobeHint{ opacity:0; }
.originSubPanel{ flex:1; display:none; flex-direction:column; gap:3px; min-width:0; }
.originSubPanel.visible{ display:flex; }
.originSubHead{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(233,237,246,.35); margin-bottom:4px; padding-left:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.originSubBtn{
  width:100%; padding:6px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03);
  color:rgba(233,237,246,.55); font-size:11px; font-weight:500;
  cursor:pointer; text-align:left; transition:all .14s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.originSubBtn:hover{ border-color:rgba(255,255,255,.14); color:#e9edf6; background:rgba(255,255,255,.06); }
.originSubBtn.is-active{ border-color:rgba(40,200,120,.45); background:rgba(40,200,120,.1); color:#eafff4; }
.originReset{
  margin-top:5px; background:none; border:none;
  color:rgba(233,237,246,.28); font-size:10px; cursor:pointer;
  text-align:left; padding:0 2px; transition:color .15s; letter-spacing:.04em;
}
.originReset:hover{ color:rgba(233,237,246,.6); }
/* ── Create Character Button ── */
#studioApplyBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#studioApplyBtn::before{
  content: '+';
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  font-weight: 850;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
#studioApplyBtn:not(:disabled):hover{
  transform: translateY(-1px);
  border-color: var(--stroke2);
  background: rgba(255,255,255,.06);
}
#studioApplyBtn:disabled{
  opacity: .35;
  cursor: not-allowed;
}
#openStudioBtn .aiIcon{
  color:#2ee59d !important;
  filter: saturate(2);
}
#openStudioBtn .aiIcon{
  display:inline-flex;
  align-items:center;
  margin-right:6px;
}
/* ===== Model Chooser Modal ===== */

body.bt-mc-open { overflow: hidden; }

#bt-model-chooser-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* ── Overlay ── */
#bt-model-chooser-root .bt-mc-overlay {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#bt-model-chooser-root .bt-mc-overlay.is-hidden { display: none; }

/* ── Shell ── */
#bt-model-chooser-root .bt-mc-shell {
  width: min(1300px, calc(100vw - 32px));
  height: min(840px, calc(100vh - 32px));
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(ellipse at top right, rgba(46,229,157,0.06) 0%, transparent 50%),
    #0b0d12;
  box-shadow: 0 24px 80px rgba(0,0,0,0.60);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Head ── */
#bt-model-chooser-root .bt-mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  flex-wrap: wrap;
}
#bt-model-chooser-root .bt-mc-title {
  color: #f0f4fa;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
#bt-model-chooser-root .bt-mc-subtitle {
  margin-top: 3px;
  color: rgba(233,237,246,0.50);
  font-size: 12px;
}
#bt-model-chooser-root .bt-mc-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#bt-model-chooser-root .bt-mc-provider {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(233,237,246,0.65);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
}
#bt-model-chooser-root .bt-mc-filters {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
#bt-model-chooser-root .bt-mc-filter {
  height: 26px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(233,237,246,0.50);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
#bt-model-chooser-root .bt-mc-filter.is-active {
  background: rgba(46,229,157,0.11);
  color: #2ee59d;
  border-color: rgba(46,229,157,0.20);
}
#bt-model-chooser-root .bt-mc-close {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(233,237,246,0.60);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.14s;
  flex-shrink: 0;
}
#bt-model-chooser-root .bt-mc-close:hover {
  background: rgba(255,82,102,0.12);
  border-color: rgba(255,82,102,0.22);
  color: #ff5166;
}

/* ── Body ── */
#bt-model-chooser-root .bt-mc-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.85fr);
}

/* ── Grid ── */
#bt-model-chooser-root .bt-mc-grid {
  padding: 16px;
  overflow-y: auto;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px;
  align-content: start;
}
#bt-model-chooser-root .bt-mc-grid::-webkit-scrollbar { width: 4px; }
#bt-model-chooser-root .bt-mc-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 4px; }

/* ── Card ── */
#bt-model-chooser-root .bt-mc-card {
  display: flex;
  flex-direction: column !important;
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  color: #eef2f8;
  font-family: inherit;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

#bt-model-chooser-root .bt-mc-card:hover {
  transform: translateY(-2px);
  border-color: rgba(46,229,157,0.20);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
#bt-model-chooser-root .bt-mc-card.is-active {
  border-color: rgba(46,229,157,0.48);
  box-shadow: 0 0 0 1px rgba(46,229,157,0.12), 0 10px 28px rgba(0,0,0,0.45);
}

/* ── Card media — dark green, NO overlays, NO text ── */
#bt-model-chooser-root .bt-mc-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 60% 30%, rgba(46,229,157,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #080e0a 0%, #07080b 100%);
  overflow: hidden;
  flex-shrink: 0;
}
#bt-model-chooser-root .bt-mc-card-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#bt-model-chooser-root .bt-mc-card-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Video cards with poster:
   default = show poster like image cards
   hover = fade in preview video */
#bt-model-chooser-root .bt-mc-card-media.is-video.has-poster .bt-mc-card-vid {
  opacity: 0;
}

#bt-model-chooser-root .bt-mc-card:hover .bt-mc-card-media.is-video.has-poster .bt-mc-card-vid {
  opacity: 1;
}

/* Video cards without poster:
   show the video layer immediately, otherwise the tile looks empty */
#bt-model-chooser-root .bt-mc-card-media.is-video.has-no-poster .bt-mc-card-vid {
  opacity: 1;
}

/* Play button — top-right, small, no overlay on card */
#bt-model-chooser-root .bt-mc-play {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.52);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.14s, transform 0.14s;
  z-index: 2;
  flex-shrink: 0;
}
#bt-model-chooser-root .bt-mc-play svg {
  width: 13px; height: 13px;
  margin-left: 1px;
}
#bt-model-chooser-root .bt-mc-play:hover {
  background: rgba(46,229,157,0.30);
  color: #2ee59d;
  transform: scale(1.08);
}

/* ── Card body — title + subtitle only ── */
#bt-model-chooser-root .bt-mc-card-bottom {
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 2;
}
#bt-model-chooser-root .bt-mc-card-text-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#bt-model-chooser-root .bt-mc-card-name {
  color: #f0f4fa;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-family: inherit;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8);
}
#bt-model-chooser-root .bt-mc-card-hook {
  color: rgba(233,237,246,0.65);
  font-size: 11px;
  line-height: 1.35;
  font-family: inherit;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
#bt-model-chooser-root .bt-mc-card-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(46,229,157,0.65), transparent);
}

/* ── Detail panel ── */
#bt-model-chooser-root .bt-mc-detail {
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 18px 16px 0;
}
#bt-model-chooser-root .bt-mc-detail-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
#bt-model-chooser-root .bt-mc-detail-media {
  height: 180px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background:
    radial-gradient(ellipse at 60% 30%, rgba(46,229,157,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #080e0a 0%, #07080b 100%);
}
#bt-model-chooser-root .bt-mc-detail-vid,
#bt-model-chooser-root .bt-mc-detail-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#bt-model-chooser-root .bt-mc-detail-ph {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  color: rgba(46,229,157,0.30);
  font-size: 13px;
  font-weight: 700;
}
#bt-model-chooser-root .bt-mc-detail-copy {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 14px 4px 0 12px;
}
#bt-model-chooser-root .bt-mc-detail-copy::-webkit-scrollbar { width: 3px; }
#bt-model-chooser-root .bt-mc-detail-copy::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 3px; }
#bt-model-chooser-root .bt-mc-detail-type {
  color: rgba(46,229,157,0.75);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#bt-model-chooser-root .bt-mc-detail-name {
  margin-top: 5px;
  color: #f0f4fa;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
#bt-model-chooser-root .bt-mc-detail-desc {
  margin-top: 6px;
  color: rgba(233,237,246,0.60);
  font-size: 12px;
  line-height: 1.6;
}
#bt-model-chooser-root .bt-mc-detail-section { margin-top: 12px; }
#bt-model-chooser-root .bt-mc-detail-label {
  color: rgba(233,237,246,0.35);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
#bt-model-chooser-root .bt-mc-detail-val {
  color: rgba(233,237,246,0.65);
  font-size: 12px;
  line-height: 1.55;
}
#bt-model-chooser-root .bt-mc-detail-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
#bt-model-chooser-root .bt-mc-chip {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.05);
  color: rgba(233,237,246,0.60);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
#bt-model-chooser-root .bt-mc-detail-strengths {
  margin: 4px 0 0;
  padding-left: 14px;
  color: rgba(233,237,246,0.60);
  font-size: 12px;
  line-height: 1.7;
}
#bt-model-chooser-root .bt-mc-detail-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
}
#bt-model-chooser-root .bt-mc-use {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #2ee59d, #25c484);
  color: #07080b;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 16px rgba(46,229,157,0.20);
  transition: transform 0.12s, box-shadow 0.14s;
}
#bt-model-chooser-root .bt-mc-use:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(46,229,157,0.30);
}

/* ── Empty ── */
#bt-model-chooser-root .bt-mc-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
}
#bt-model-chooser-root .bt-mc-empty-title {
  color: rgba(233,237,246,0.55);
  font-size: 14px;
  font-weight: 700;
}
#bt-model-chooser-root .bt-mc-empty-sub {
  margin-top: 5px;
  color: rgba(233,237,246,0.30);
  font-size: 12px;
}

/* ── Lightbox ── */
#bt-mc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
#bt-mc-lightbox.is-open { display: flex; }
.bt-mc-lb-bg {
  position: absolute;
  inset: 0;
  background: rgba(4,6,10,0.90);
  backdrop-filter: blur(16px);
  cursor: pointer;
}
.bt-mc-lb-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(233,237,246,0.75);
  font-size: 14px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.14s;
}
.bt-mc-lb-close:hover { background: rgba(255,82,102,0.14); color: #ff5166; }
.bt-mc-lb-stage {
  position: relative;
  z-index: 1;
  max-width: min(1200px, calc(100vw - 72px));
  max-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt-mc-lb-media {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 72px);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.75);
  object-fit: contain;
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  #bt-model-chooser-root .bt-mc-body { grid-template-columns: 1fr; overflow-y: auto; }
  #bt-model-chooser-root .bt-mc-grid { max-height: 45vh; }
  #bt-model-chooser-root .bt-mc-detail {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 14px 16px 16px;
    max-height: 48vh;
    overflow-y: auto;
  }
  #bt-model-chooser-root .bt-mc-detail-inner { flex-direction: row; gap: 14px; height: auto; }
  #bt-model-chooser-root .bt-mc-detail-media { width: 200px; height: 118px; flex-shrink: 0; }
  #bt-model-chooser-root .bt-mc-detail-copy { padding: 0; overflow: visible; }
}
@media (max-width: 780px) {
  #bt-model-chooser-root .bt-mc-overlay { padding: 10px; }
  #bt-model-chooser-root .bt-mc-shell { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 18px; }
  #bt-model-chooser-root .bt-mc-head { flex-wrap: wrap; padding: 14px 14px 12px; }
  #bt-model-chooser-root .bt-mc-grid { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  #bt-model-chooser-root .bt-mc-detail-inner { flex-direction: column; }
  #bt-model-chooser-root .bt-mc-detail-media { width: 100%; height: 150px; }
}
/* =========================================================
   MODEL CHOOSER — FINAL PLATFORM COLOR OVERRIDES
   Purpose: align chooser with BatchTurbo platform colors
   Scope: only #bt-model-chooser-root
   ========================================================= */

#bt-model-chooser-root{
  --mc-accent: var(--brand-blue);
  --mc-accent-strong: var(--brand-blue-strong);
  --mc-accent-border: var(--brand-blue-border);
  --mc-accent-border-hover: var(--brand-blue-border-hover);
  --mc-accent-bg: var(--brand-blue-bg);
  --mc-accent-bg-hover: var(--brand-blue-bg-hover);
  --mc-green-soft: rgba(46,229,157,.12);
  --mc-glass: rgba(255,255,255,.04);
  --mc-glass-2: rgba(255,255,255,.06);
  --mc-glass-3: rgba(255,255,255,.08);
  --mc-stroke: rgba(255,255,255,.09);
  --mc-stroke-strong: rgba(255,255,255,.14);
  --mc-shadow: 0 18px 50px rgba(0,0,0,.42);
  --mc-shadow-soft: 0 10px 24px rgba(0,0,0,.34);
}

/* Shell */
#bt-model-chooser-root .bt-mc-shell{
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1200px 500px at 12% -10%, rgba(90,215,255,.08), transparent 55%),
    radial-gradient(900px 420px at 88% -8%, rgba(46,229,157,.06), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(10,12,17,.92);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Header */
#bt-model-chooser-root .bt-mc-head{
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}

#bt-model-chooser-root .bt-mc-title{
  color: var(--text);
  letter-spacing: -.02em;
}

#bt-model-chooser-root .bt-mc-subtitle{
  color: rgba(233,237,246,.56);
}

/* Provider badge */
#bt-model-chooser-root .bt-mc-provider{
  border: 1px solid var(--mc-accent-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    var(--mc-accent-bg);
  color: rgba(233,237,246,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Filter group */
#bt-model-chooser-root .bt-mc-filters{
  padding: 4px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(9,12,18,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#bt-model-chooser-root .bt-mc-filter{
  border: 1px solid transparent;
  color: rgba(233,237,246,.58);
  background: transparent;
  transition:
    color .14s ease,
    background .14s ease,
    border-color .14s ease,
    transform .12s ease,
    box-shadow .14s ease;
}

#bt-model-chooser-root .bt-mc-filter:hover{
  color: rgba(233,237,246,.86);
  background: rgba(255,255,255,.04);
}

#bt-model-chooser-root .bt-mc-filter.is-active{
  background:
    linear-gradient(135deg, rgba(90,215,255,.16), rgba(46,229,157,.10)),
    rgba(255,255,255,.03);
  color: var(--text);
  border-color: rgba(90,215,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(90,215,255,.06);
}

/* Close button */
#bt-model-chooser-root .bt-mc-close{
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(9,12,18,.52);
  color: rgba(233,237,246,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#bt-model-chooser-root .bt-mc-close:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(11,15,22,.72);
  border-color: rgba(90,215,255,.22);
  color: rgba(233,237,246,.96);
  transform: translateY(-1px);
}

#bt-model-chooser-root .bt-mc-close:focus-visible,
#bt-model-chooser-root .bt-mc-filter:focus-visible,
#bt-model-chooser-root .bt-mc-card:focus-visible,
#bt-model-chooser-root .bt-mc-play:focus-visible,
#bt-model-chooser-root .bt-mc-use:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(90,215,255,.16);
}

/* Grid divider */
#bt-model-chooser-root .bt-mc-detail{
  border-left: 1px solid rgba(255,255,255,.05);
}

/* Cards */
#bt-model-chooser-root .bt-mc-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    rgba(12,16,23,.34);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none;
}

#bt-model-chooser-root .bt-mc-card:hover{
  border-color: rgba(90,215,255,.18);
  box-shadow: var(--mc-shadow-soft);
}

#bt-model-chooser-root .bt-mc-card.is-active{
  border-color: rgba(90,215,255,.34);
  box-shadow:
    0 0 0 1px rgba(90,215,255,.08),
    0 14px 34px rgba(0,0,0,.40);
}

#bt-model-chooser-root .bt-mc-card-media{
  background:
    radial-gradient(ellipse at 18% 12%, rgba(90,215,255,.10) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 18%, rgba(46,229,157,.07) 0%, transparent 48%),
    linear-gradient(160deg, #081019 0%, #090c13 100%);
}

#bt-model-chooser-root .bt-mc-card-name{
  color: #f4f7fb;
}

#bt-model-chooser-root .bt-mc-card-hook{
  color: rgba(233,237,246,.70);
}

#bt-model-chooser-root .bt-mc-card-line{
  height: 2px;
  background: linear-gradient(90deg, rgba(90,215,255,.72), rgba(46,229,157,.20), transparent 74%);
}

/* Play button */
#bt-model-chooser-root .bt-mc-play{
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(8,11,18,.58);
  color: rgba(233,237,246,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#bt-model-chooser-root .bt-mc-play:hover{
  background:
    linear-gradient(180deg, rgba(90,215,255,.18), rgba(90,215,255,.08)),
    rgba(8,11,18,.78);
  border-color: rgba(90,215,255,.28);
  color: #f7fbff;
  transform: scale(1.06);
}

/* Detail media panel */
#bt-model-chooser-root .bt-mc-detail-media{
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(ellipse at 18% 12%, rgba(90,215,255,.11) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 18%, rgba(46,229,157,.07) 0%, transparent 48%),
    linear-gradient(160deg, #081019 0%, #090c13 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

#bt-model-chooser-root .bt-mc-detail-ph{
  color: rgba(90,215,255,.34);
}

/* Detail typography */
#bt-model-chooser-root .bt-mc-detail-type{
  color: rgba(90,215,255,.88);
}

#bt-model-chooser-root .bt-mc-detail-name{
  color: #f4f7fb;
}

#bt-model-chooser-root .bt-mc-detail-desc{
  color: rgba(233,237,246,.64);
}

#bt-model-chooser-root .bt-mc-detail-label{
  color: rgba(233,237,246,.40);
}

#bt-model-chooser-root .bt-mc-detail-val{
  color: rgba(233,237,246,.76);
}

/* Mode chips */
#bt-model-chooser-root .bt-mc-chip{
  border: 1px solid rgba(90,215,255,.16);
  background: rgba(90,215,255,.06);
  color: rgba(233,237,246,.84);
}

/* Strength list */
#bt-model-chooser-root .bt-mc-detail-strengths{
  margin: 6px 0 0;
  padding-left: 16px;
  color: rgba(233,237,246,.74);
}

#bt-model-chooser-root .bt-mc-detail-strengths li{
  margin: 4px 0;
}

/* Use button */
#bt-model-chooser-root .bt-mc-use{
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(90,215,255,.24);
  background:
    linear-gradient(135deg, rgba(90,215,255,.20), rgba(46,229,157,.12)),
    rgba(255,255,255,.03);
  color: #f7fbff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 24px rgba(0,0,0,.24);
  transition:
    transform .12s ease,
    border-color .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

#bt-model-chooser-root .bt-mc-use:hover{
  transform: translateY(-1px);
  border-color: rgba(90,215,255,.34);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 28px rgba(0,0,0,.30);
}

/* Scrollbars */
#bt-model-chooser-root .bt-mc-grid::-webkit-scrollbar-thumb,
#bt-model-chooser-root .bt-mc-detail-copy::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
}