/* Bestandsverwaltung als Studio-Panel. Nutzt die Studio-Design-Tokens
   (tokens.css) und .rbtn-Buttons, damit es aus einem Guss wirkt. Alles unter
   #panel-manage gescoped, damit nichts in andere Tabs blutet. */

/* Mit den zusätzlichen Tabs darf die Studio-Tableiste bei schmaler Breite umbrechen
   statt zu überlaufen (greift nur bei Bedarf; auf breiten Schirmen unverändert). Der
   Header darf dabei mitwachsen statt bei fixen 56px die Tabs nach unten zu drücken. */
.studio-tabs { flex-wrap: wrap; row-gap: 4px; }
.studio-top { height: auto; min-height: 56px; padding-top: 6px; padding-bottom: 6px; }

/* Unterauswahl innerhalb der Gruppen-Tabs (Prompting Tool / Auto-Flow): ein
   zentriertes Segment-Control über dem jeweiligen Werkzeug-Panel. */
.studio-subnav { display: flex; width: fit-content; gap: 4px; margin: 4px auto 20px; padding: 4px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.studio-subnav[hidden] { display: none; }
.studio-subtab { appearance: none; border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-weight: 600; font-size: 13px; padding: 7px 18px; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, color .15s; }
.studio-subtab:hover { color: var(--color-text); }
.studio-subtab.active { background: var(--color-accent); color: var(--color-accent-ink); }

#panel-manage { max-width: 1100px; margin: 0 auto; }

/* Sub-Navigation Verwaltung / Papierkorb */
#panel-manage .mng-sub {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 16px;
}
#panel-manage .mng-subbtn {
  background: var(--color-surface-2); color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 8px 14px; font: inherit; font-size: var(--font-size-sm); cursor: pointer;
}
#panel-manage .mng-subbtn.active { background: var(--color-accent); color: var(--color-accent-ink); border-color: transparent; font-weight: 600; }
#panel-manage .mng-sub .spacer { margin-left: auto; }

/* Kategorie-Navigation (Chips mit Anzahl + Stift) */
#panel-manage .mng-catnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
#panel-manage .mng-cat {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 6px 6px 6px 14px; font-size: var(--font-size-sm);
  color: var(--color-text); cursor: pointer;
}
#panel-manage .mng-cat:hover { border-color: var(--color-border-strong); }
#panel-manage .mng-cat.active { background: var(--color-accent); color: var(--color-accent-ink); border-color: transparent; font-weight: 600; }
#panel-manage .mng-cat .n { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
#panel-manage .mng-cat.active .n { color: var(--color-accent-ink); opacity: .7; }
#panel-manage .mng-cat .pen {
  border: 0; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-pill);
  color: inherit; opacity: .55; font-size: 13px; line-height: 1;
}
#panel-manage .mng-cat .pen:hover { opacity: 1; background: rgba(255,255,255,.08); }

/* Grid + Kacheln */
#panel-manage .mng-catblock { margin: 18px 0; }
#panel-manage .mng-catblock h3 {
  font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-muted); margin: 0 0 10px; border-bottom: 1px solid var(--color-border); padding-bottom: 6px;
}
#panel-manage .mng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#panel-manage .mng-tile {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column;
}
#panel-manage .mng-tile .tw { aspect-ratio: 9/16; background: #000; cursor: zoom-in; overflow: hidden; position: relative; }
#panel-manage .mng-tile .tw img { width: 100%; height: 100%; object-fit: cover; display: block; }
#panel-manage .mng-tile .tw::after {
  content: "⤢"; position: absolute; right: 6px; bottom: 6px; font-size: 13px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: var(--radius-xs); padding: 1px 5px; opacity: 0; transition: .15s;
}
#panel-manage .mng-tile .tw:hover::after { opacity: 1; }
#panel-manage .mng-tile .m { padding: 8px 10px; }
#panel-manage .mng-tile .nm { font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel-manage .mng-tile .ct { font-size: var(--font-size-xs); color: var(--color-text-muted); }
#panel-manage .mng-tile .ct .ov { color: var(--color-accent); }
#panel-manage .mng-tile .acts { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; margin-top: auto; }
#panel-manage .mng-tile .acts .rbtn { width: 100%; padding: 7px 8px; font-size: 12.5px; }

#panel-manage .mng-empty { color: var(--color-text-muted); text-align: center; padding: 50px 0; }
#panel-manage .mng-hint { color: var(--color-text-muted); font-size: 12.5px; margin: 0 0 14px; }
#panel-manage .mng-purge {
  margin-top: 24px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
  padding: 14px 16px; color: var(--color-text-muted); font-size: var(--font-size-sm);
}

/* Lightbox */
#panel-manage .mng-lb {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; background: rgba(0,0,0,.85); padding: 24px;
}
#panel-manage .mng-lb.show { display: flex; }
#panel-manage .mng-lb img { max-width: 92vw; max-height: 90vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
#panel-manage .mng-lb .x {
  position: absolute; top: 18px; right: 22px; font-size: 26px; color: #fff; background: transparent;
  border: 0; cursor: pointer; line-height: 1;
}
#panel-manage .mng-lb .cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #ddd; font-size: var(--font-size-sm); }

/* Modals (Verschieben / Umbenennen) */
#panel-manage .mng-modal {
  position: fixed; inset: 0; z-index: 1001; display: none;
  align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 16px;
}
#panel-manage .mng-modal.show { display: flex; }
#panel-manage .mng-modal .card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 22px; width: min(440px, 94vw); box-shadow: var(--shadow-lg);
}
#panel-manage .mng-modal h4 { margin: 0 0 4px; font-size: var(--font-size-md); font-family: var(--font-display); }
#panel-manage .mng-modal .sub { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 0 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#panel-manage .mng-modal label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 12px 0 5px; }
#panel-manage .mng-modal select,
#panel-manage .mng-modal input {
  width: 100%; background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit;
}
#panel-manage .mng-modal .or { text-align: center; color: var(--color-text-dim); font-size: var(--font-size-xs); margin: 12px 0 0; }
#panel-manage .mng-modal .note { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.5; margin: 14px 0 0; background: var(--color-surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
#panel-manage .mng-modal .row { display: flex; gap: 8px; margin-top: 18px; }
#panel-manage .mng-modal .row .rbtn { flex: 1; }
#panel-manage .mng-modal .prog { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 10px; min-height: 16px; text-align: center; }

/* Mini-Toast (unter dem Panel) */
#panel-manage .mng-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1002;
  background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text);
  padding: 10px 18px; border-radius: var(--radius-md); opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw;
}
#panel-manage .mng-toast.show { opacity: 1; }
#panel-manage .mng-toast.err { border-color: var(--color-danger); color: #ffd7da; }
#panel-manage .mng-toast.good { border-color: var(--color-success); color: #d4f7db; }

/* Anzeigename in der Kachel ist per Klick editierbar. */
#panel-manage .mng-tile .nm { cursor: text; }
#panel-manage .mng-tile .nm:hover { text-decoration: underline dotted; text-underline-offset: 2px; }

/* ── Sortieren (Einzelkategorie) ── */
#panel-manage .mng-orderhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; }
#panel-manage .mng-orderhint { color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.5; flex: 1; min-width: 220px; }
#panel-manage .mng-sortable.mng-dirty { outline: 1px dashed var(--color-border-strong); outline-offset: 6px; border-radius: var(--radius-md); }
#panel-manage .mng-sortable.mng-error { outline: 1px solid var(--color-danger); outline-offset: 6px; border-radius: var(--radius-md); }
#panel-manage .mng-tile.dragging { opacity: .45; }
#panel-manage .mng-orderbar {
  display: flex; align-items: center; gap: 4px; padding: 6px 8px;
  background: var(--color-surface-2); border-bottom: 1px solid var(--color-border);
}
#panel-manage .mng-drag { cursor: grab; color: var(--color-text-muted); font-size: 16px; line-height: 1; padding: 2px 4px; user-select: none; }
#panel-manage .mng-drag:active { cursor: grabbing; }
#panel-manage .mng-pos {
  width: 46px; text-align: center; background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 4px 4px; font: inherit; font-size: 12.5px;
  -moz-appearance: textfield;
}
#panel-manage .mng-pos::-webkit-outer-spin-button, #panel-manage .mng-pos::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#panel-manage .mng-obtn {
  border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-muted);
  border-radius: var(--radius-sm); padding: 3px 7px; font-size: 13px; line-height: 1; cursor: pointer;
}
#panel-manage .mng-obtn:hover { color: var(--color-text); background: var(--color-bg); }
#panel-manage .mng-orderbar + .tw { border-top-left-radius: 0; border-top-right-radius: 0; }

/* ── Uploader (#panel-upload) ── */
#panel-upload { max-width: 820px; margin: 0 auto; }
#panel-upload .up-note { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.55; margin-bottom: 16px; }
#panel-upload .up-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 16px; margin-bottom: 14px;
}
#panel-upload .up-label { display: block; font-size: var(--font-size-sm); font-weight: 600; margin-bottom: 10px; }
/* Drag-and-Drop-Zone (Schritt 1): dezente Umrandung, beim Drüberziehen Lime-Highlight. */
#panel-upload .up-drop { transition: border-color .15s, background .15s; }
#panel-upload .up-drop.dragover { border-color: var(--color-accent); background: rgba(204, 255, 0, 0.08); }
#panel-upload .up-drophint { margin-top: 10px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
#panel-upload input[type="file"] { display: block; width: 100%; font: inherit; color: var(--color-text-muted); }
#panel-upload input[type="file"]::file-selector-button {
  font: inherit; margin-right: 12px; padding: 8px 14px; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text); cursor: pointer;
}
#panel-upload .up-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#panel-upload .up-row select, #panel-upload .up-row input[type="text"] {
  flex: 1; min-width: 160px; background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit;
}
#panel-upload .up-or { color: var(--color-text-dim); font-size: var(--font-size-xs); }
#panel-upload .up-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--font-size-sm); color: var(--color-text-muted); }
#panel-upload .up-actions { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
#panel-upload .up-summary { color: var(--color-text-muted); font-size: var(--font-size-sm); }
#panel-upload .up-filelist { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
#panel-upload .up-hint { color: var(--color-text-dim); font-size: var(--font-size-sm); }
#panel-upload .up-file {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: var(--font-size-sm);
}
#panel-upload .up-file .nm { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panel-upload .up-file .st { color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; flex: 0 0 auto; }
#panel-upload .up-file .st.good { color: var(--color-success); }
#panel-upload .up-file .st.warn { color: #ffcf8a; }
#panel-upload .up-file .st.err { color: var(--color-danger); }
#panel-upload .up-done { color: var(--color-text); font-size: var(--font-size-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; }
#panel-upload .mng-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1002; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); padding: 10px 18px; border-radius: var(--radius-md); opacity: 0; pointer-events: none; transition: .25s; }
#panel-upload .mng-toast.show { opacity: 1; }
#panel-upload .mng-toast.err { border-color: var(--color-danger); color: #ffd7da; }
#panel-upload .mng-toast.good { border-color: var(--color-success); color: #d4f7db; }
#panel-upload .mng-toast.warn { border-color: #ffcf8a; color: #ffe8c4; }
#panel-upload .mng-empty { color: var(--color-text-muted); text-align: center; padding: 50px 0; }

/* ── Varianten-Prompts (#panel-variants, Prompting Tool 3. Werkzeug) ── */
#panel-variants .vp-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
#panel-variants .vp-count { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-right: auto; }
#panel-variants .vp-warn { color: #ffcf8a; font-size: var(--font-size-sm); margin: 0 0 12px; }
#panel-variants .vp-list { display: flex; flex-direction: column; gap: 10px; }
#panel-variants .vp-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
#panel-variants .vp-block-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); }
#panel-variants .vp-num { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-accent); margin-right: auto; }
/* Bleibende "kopiert"-Markierung (nur diese Ansicht/Sitzung, nichts gespeichert). */
#panel-variants .vp-done { display: none; align-items: center; gap: 4px; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-accent); }
#panel-variants .vp-block.vp-copied .vp-done { display: inline-flex; }
#panel-variants .vp-block.vp-copied { opacity: .6; transition: opacity .15s; }
#panel-variants .vp-block.vp-copied:hover { opacity: 1; } /* beim Hover wieder voll lesbar */
#panel-variants .vp-block.vp-copied .vp-num { color: var(--color-text-muted); }
#panel-variants .vp-block.vp-copied .vp-block-head { border-left: 3px solid var(--color-accent); padding-left: 9px; }
#panel-variants .vp-text { padding: 12px 14px; font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-text); white-space: pre-wrap; word-break: break-word; }

/* ── Nutzungs-Dashboard (#panel-usage) ── */
#panel-usage { max-width: 900px; margin: 0 auto; }
#panel-usage .us-note { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.55; margin-bottom: 16px; }
#panel-usage .us-empty { color: var(--color-text-muted); text-align: center; padding: 50px 0; }
#panel-usage .us-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
#panel-usage .us-card { flex: 1; min-width: 180px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; }
#panel-usage .us-k { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
#panel-usage .us-v { font-size: var(--font-size-xl); font-weight: 700; font-family: var(--font-display); margin-top: 4px; color: var(--color-accent); }
#panel-usage .us-v.us-since { font-size: var(--font-size-sm); font-family: var(--font-body); font-weight: 500; color: var(--color-text); }
#panel-usage .us-sub { font-size: var(--font-size-2xs); color: var(--color-text-dim); margin-top: 2px; }
#panel-usage .us-tablewrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
#panel-usage .us-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
#panel-usage .us-table th { text-align: left; padding: 10px 12px; background: var(--color-surface-2); color: var(--color-text-muted); font-weight: 600; font-size: var(--font-size-xs); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
#panel-usage .us-table th.r, #panel-usage .us-table td.r { text-align: right; }
#panel-usage .us-table td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); }
#panel-usage .us-table tr:last-child td { border-bottom: 0; }
#panel-usage .us-prov { color: var(--color-text-muted); }
#panel-usage .us-count { font-variant-numeric: tabular-nums; font-weight: 600; }
#panel-usage .us-cost { font-variant-numeric: tabular-nums; }
#panel-usage .us-cur { color: var(--color-text-dim); margin-right: 2px; }
#panel-usage .us-price { width: 82px; text-align: right; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 4px 6px; font: inherit; font-size: 12.5px; -moz-appearance: textfield; }
#panel-usage .us-price::-webkit-outer-spin-button, #panel-usage .us-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#panel-usage .us-links { margin: 16px 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
#panel-usage .us-links a { color: var(--color-accent); }
#panel-usage .us-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#panel-usage .us-hint { color: var(--color-text-dim); font-size: var(--font-size-xs); }
#panel-usage .mng-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1002; background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); padding: 10px 18px; border-radius: var(--radius-md); opacity: 0; pointer-events: none; transition: .25s; }
#panel-usage .mng-toast.show { opacity: 1; }
#panel-usage .mng-toast.err { border-color: var(--color-danger); color: #ffd7da; }
#panel-usage .mng-toast.good { border-color: var(--color-success); color: #d4f7db; }

/* Kategorie-Aushängeschild (Cover): Badge auf der Kachel + aktiver Umschalter-Button. */
#panel-manage .mng-tile .tw .mng-coverbadge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: 12px; line-height: 1; font-weight: 700; padding: 4px 6px; border-radius: 6px;
}
#panel-manage .mng-tile.is-cover { outline: 2px solid var(--color-accent); outline-offset: -2px; }
#panel-manage .mng-tile .acts .rbtn.mng-coverbtn.is-cover {
  background: var(--color-accent); color: var(--color-accent-ink); border-color: transparent; font-weight: 600;
}

/* Format-/Seitenverhaeltnis-Analyse (reine Anzeige). Badge auf der Kachel: gruen = 9:16-nah,
   orange = 2:3-nah, grau = sonstige. Masse als kleine Zeile in der Meta. Plus die Formatleiste
   oben mit farbigen Kategorie-Chips (zugleich Filter und Zaehler). */
#panel-manage .mng-tile .tw .mng-fmtbadge {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  font-size: 10.5px; line-height: 1; font-weight: 700; letter-spacing: .02em;
  padding: 3px 6px; border-radius: 6px; pointer-events: none;
}
#panel-manage .mng-tile .tw .mng-fmtbadge.c916 { background: rgba(40,160,90,.88); color: #eafff1; }
#panel-manage .mng-tile .tw .mng-fmtbadge.c23 { background: rgba(230,140,30,.92); color: #1a1205; }
#panel-manage .mng-tile .tw .mng-fmtbadge.cother { background: rgba(150,150,155,.85); color: #101012; }
#panel-manage .mng-tile .m .dim { font-size: var(--font-size-xs); color: var(--color-text-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
#panel-manage .mng-formatbar { margin: 2px 0 12px; }
#panel-manage .mng-fmt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#panel-manage .mng-fmt-lead { font-size: var(--font-size-sm); color: var(--color-text-muted); }
#panel-manage .mng-fmt-chip {
  font: inherit; font-size: var(--font-size-sm); padding: 5px 10px; border-radius: var(--radius-full, 999px);
  border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-muted);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
#panel-manage .mng-fmt-chip b { color: var(--color-text); font-variant-numeric: tabular-nums; }
#panel-manage .mng-fmt-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
#panel-manage .mng-fmt-chip.c916::before { background: rgba(40,160,90,.95); }
#panel-manage .mng-fmt-chip.c23::before { background: rgba(230,140,30,1); }
#panel-manage .mng-fmt-chip.cother::before { background: rgba(150,150,155,.95); }
#panel-manage .mng-fmt-chip.call::before { display: none; }
#panel-manage .mng-fmt-chip.active { border-color: var(--color-accent); color: var(--color-text); background: rgba(204,255,0,.08); }
#panel-manage .mng-fmt-chip.call.active { background: var(--color-accent); color: var(--color-accent-ink); border-color: transparent; }
#panel-manage .mng-fmt-chip.call.active b { color: var(--color-accent-ink); }
#panel-manage .mng-fmt-recompute { margin-left: auto; }
#panel-manage .mng-fmt-unk { font-size: var(--font-size-xs); color: var(--color-text-dim); }
#panel-manage .mng-fmt-note { font-size: var(--font-size-xs); color: var(--color-text-dim); margin-top: 6px; }

/* Stapel-Umformung aller 2:3-nah auf 9:16 (aktiv schalten, Originale in den Papierkorb). */
#panel-manage .mng-batchbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 16px; }
#panel-manage .mng-batchbox .mng-batch-note { font-size: var(--font-size-xs); color: var(--color-text-dim); flex: 1 1 240px; }
#panel-manage .mng-batch-result { flex-basis: 100%; font-size: var(--font-size-sm); color: var(--color-text-muted); }
#panel-manage .mng-batch-result:empty { display: none; }
#panel-manage .mng-batch-result .err { color: #ffb0b0; font-weight: 600; }
#panel-manage .mng-batch-head { font-weight: 600; color: var(--color-text); }
#panel-manage .mng-batch-cur { margin-top: 4px; font-size: var(--font-size-xs); color: var(--color-text-dim); }
#panel-manage .mng-batch-ok { margin-top: 6px; color: var(--color-text-muted); }
#panel-manage .mng-batch-bar { margin: 8px 0 2px; height: 8px; border-radius: 999px; background: var(--color-surface-2); overflow: hidden; }
#panel-manage .mng-batch-bar > span { display: block; height: 100%; background: var(--color-accent); transition: width .3s; }
#panel-manage .mng-batch-failhead { margin-top: 10px; font-weight: 600; color: #ffb0b0; }
#panel-manage .mng-batch-faillist { margin: 4px 0 0; padding-left: 18px; font-size: var(--font-size-xs); color: #ffc9c9; max-height: 220px; overflow: auto; }