/* ============================================================
   📦 Modell-Katalog (js/modelcatalog.js) — ⚙️ Engine & Bridge, 🧙 #/ki-modell/katalog, Einrichtungskarte.
   PS1-Retro: nur Farb-Tokens, harte Kanten, Hard-Shadows, keine Gradients. Badges/Notizen aus llmwizard.css.
   ============================================================ */

.mc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc code { font-family: var(--mono); font-size: .78em; background: var(--surface-2); padding: 0 4px; border: 1px solid var(--border); overflow-wrap: anywhere; }
.mc-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mc-for { font-size: .8rem; color: var(--muted); margin: 0; }
.mc-sec { display: flex; flex-direction: column; gap: 6px; }
.mc-st { font-family: var(--px); font-size: .62rem; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.mc-st small, .mc-grp summary small { font-family: var(--font); font-size: .74rem; font-weight: 400; text-transform: none; color: var(--muted); }
.mc-sh { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.4; }
.mc-est { color: var(--muted); font-style: italic; }
.mc-bad { color: var(--danger); }
.mc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }

.mc-grp { border: 2px dashed var(--border); padding: 6px 8px; background: var(--bg); }
.mc-grp[open] { border-style: solid; }
.mc-grp > summary { cursor: pointer; font-family: var(--px); font-size: .6rem; font-weight: 700; text-transform: uppercase; padding: 2px 0; }
.mc-grp > .mc-cards, .mc-grp > .mc-form { margin-top: 8px; }

/* ---- Karte ---- */
.mc-card {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 10px; background: var(--surface); border: 2px solid var(--line); box-shadow: 3px 3px 0 var(--shadow-c); font-size: .84rem;
}
.mc-card.top { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent-soft); }
.mc-card.fit-no { border-style: dashed; }
.mc-custom-card { border-color: var(--danger); box-shadow: 3px 3px 0 var(--shadow-c); }
.mc-head { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mc-name { font-size: .98rem; overflow-wrap: anywhere; }
.mc-size { margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.mc-id { align-self: flex-start; font-size: .7rem !important; color: var(--muted); }
.mc-q small, .mc-own small { color: var(--muted); }
.mc-traits { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; }
.mc-plus { color: var(--ok); font-weight: 700; }
.mc-minus { color: var(--danger); font-weight: 700; }
.mc-trp { color: var(--muted); overflow-wrap: anywhere; }
.mc-speed { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: .78rem; }
.mc-speed small { color: var(--muted); }
.mc-hwrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mc-hwl { font-family: var(--px); font-size: .5rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-right: 2px; }
.mc-hw { font-size: .72rem; padding: 1px 5px; border: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.mc-hw.gpu { border-color: var(--ok); }
.mc-hw.partial { border-color: var(--accent); }
.mc-hw.no { border-style: dashed; color: var(--muted); }
.mc-own { font-size: .8rem; padding: 4px 7px; border-left: 4px solid var(--border); background: var(--bg); overflow-wrap: anywhere; }
.mc-own.gpu { border-left-color: var(--ok); }
.mc-own.partial { border-left-color: var(--accent); }
.mc-own.no { border-left-color: var(--danger); }
.mc-prof { margin: 0; font-size: .8rem; overflow-wrap: anywhere; }
.mc-mem > summary { cursor: pointer; font-size: .78rem; color: var(--muted); }
.mc-mem .mv { margin-top: 4px; }
.mc-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; }
.mc-acts .btn { padding: 5px 8px; font-size: .6rem; }
.mc-on { color: var(--ok); font-weight: 700; font-size: .8rem; }
.mc-busy { color: var(--muted); font-size: .8rem; }
.mc-job { width: 100%; }
.mc-job .btn { padding: 2px 6px; }

/* ---- 🧪 Anderes Modell ---- */
.mc-other { border-color: var(--danger); }
.mc-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-repo { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-repo input { flex: 1 1 220px; min-width: 0; font-family: var(--mono); }
.mc-meta { font-size: .8rem; overflow-wrap: anywhere; }
.mc-meta a { white-space: nowrap; }
.mc-files { display: flex; flex-direction: column; gap: 3px; max-height: 280px; overflow: auto; border: 2px solid var(--border); padding: 4px; background: var(--bg); }
.mc-file {
  display: grid; grid-template-columns: auto 92px minmax(0, 1fr) auto auto; gap: 6px; align-items: center;
  padding: 3px 5px; font-size: .78rem; font-weight: 400; cursor: pointer; border: 1px solid transparent; margin: 0;
}
.mc-file.on { border-color: var(--accent); background: var(--accent-soft); }
.mc-file.off { opacity: .5; cursor: default; }
.mc-fq { font-family: var(--px); font-size: .5rem; font-weight: 700; overflow-wrap: anywhere; }
.mc-fn { font-family: var(--mono); font-size: .72rem; overflow-wrap: anywhere; color: var(--muted); }
.mc-fs { white-space: nowrap; }
.mc-ff { white-space: nowrap; font-size: .72rem; }
.mc-mm { max-width: 100%; }
.mc-plan { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; padding: 6px 8px; background: var(--surface-2); border-left: 4px solid var(--accent); overflow-wrap: anywhere; }
.mc-warn { padding: 8px 10px; border: 2px solid var(--danger); background: var(--bg); box-shadow: 3px 3px 0 var(--shadow-c); font-size: .82rem; }
.mc-warn > b { color: var(--danger); }
.mc-warn ul { margin: 4px 0 6px; padding-left: 18px; }
.mc-warn .chk { font-weight: 700; margin: 0; }
@media (max-width: 560px) {
  .mc-file { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .mc-fn { grid-column: 2 / -1; grid-row: 2; }
}

/* ---- Einbau in ⚙️ Engine & Bridge (unter der Engine-Karte, volle Breite) ---- */
.ai-mcatwrap:empty { display: none; }
.ai-mcat { border: 2px solid var(--line); background: var(--surface-2); padding: 6px 10px; }
.ai-mcat > summary { cursor: pointer; font-weight: 700; padding: 2px 0; }
.ai-mcat > summary small { font-weight: 400; color: var(--muted); }
.ai-mcat > .mc { margin-top: 8px; }
@media (min-width: 1100px) {
  .ai-bmitem .ai-bman > .ai-mcatwrap { grid-column: 1 / -1; }
}

/* ---- Neue Nutzer: Empfehlung (Einrichtungskarte, Wizard ①) ---- */
.mc-quick { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin: 10px 0; text-align: left;
  border: 2px solid var(--accent); background: var(--accent-soft); box-shadow: 3px 3px 0 var(--shadow-c); }
.mc-qt small, .mc-qm small { color: var(--muted); }
.mc-qm b { font-size: 1rem; }
.mc-qb { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-qh { margin: 0; font-size: .76rem; color: var(--muted); }

/* ---- 🧙 Wizard-Reiter #/ki-modell/katalog ---- */
.lw-page .mc-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }

/* ---- 📐 Kontext & Slots (Katalog-Laden, Wizard ④) ---- */
.mc-lopanel { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.mc-lo { display: flex; flex-direction: column; gap: 5px; padding: 8px; border: 2px solid var(--accent); background: var(--bg); font-size: .8rem; min-width: 0; }
.mc-lorow { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.mc-lol { font-family: var(--px); font-size: .5rem; font-weight: 700; text-transform: uppercase; color: var(--muted); min-width: 130px; }
.mc-lochips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mc-lochip {
  padding: 4px 7px; cursor: pointer; font-family: var(--px); font-size: .52rem; font-weight: 700;
  background: var(--surface); color: var(--text); border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--shadow-c);
}
.mc-lochip.on { background: var(--accent); color: #fff; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25); }
.mc-lochip:disabled { opacity: .4; cursor: default; }
.mc-lochip:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.mc-loc { width: 84px; padding: 3px 5px; font-size: .78rem; }
.mc-loc.on { border-color: var(--accent); }
.mc-lohint { margin: 0; font-size: .76rem; color: var(--muted); line-height: 1.35; }
.mc-lohint.warn { color: var(--text); border-left: 4px solid var(--accent); padding-left: 6px; }
.mc-losugg { margin: 0; font-size: .78rem; }
.mc-losugg .btn { padding: 3px 7px; font-size: .56rem; margin-left: 4px; }
.mc-louses .ok { color: var(--ok); }
.mc-louses .no { color: var(--muted); }
.mc-lo small { color: var(--muted); }
.mc-lo .mv { margin-top: 2px; }
/* ⚙️ Erweitert: GPU-Schichten (Teil-Offload), KV-Cache / Bildprojektor im RAM */
.mc-loadv { border-top: 2px dashed var(--muted); padding-top: 5px; display: flex; flex-direction: column; gap: 5px; }
.mc-loadv > summary { cursor: pointer; font-family: var(--px); font-size: .5rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.mc-loadv[open] > summary { color: var(--text); margin-bottom: 3px; }
.mc-loadv .mc-lochip small { color: inherit; opacity: .8; }
.mc-lorange { width: 150px; accent-color: var(--accent); }
.mc-loout { font-variant-numeric: tabular-nums; min-width: 48px; }
.mc-lock { display: flex; gap: 6px; align-items: center; font-size: .78rem; cursor: pointer; }
.mc-lock input { accent-color: var(--accent); }
.mc-own.mc-tempo { margin-top: 3px; border-left-color: var(--accent); }   /* ⏱️ Tempo-Schätzung für die GPU des Nutzers */