/* UX-Überarbeitung (Dashboard, Prüfen, Stile, Katalog, Job-Verlauf, Einstellungen, Shell).
   Nur neue Klassen mit Präfix „ux-“; nutzt die bestehenden Design-Tokens aus app.css. Keine Fremd-Domains. */

/* ---------- Grundbausteine ---------- */
.ux-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ux-ok { color: var(--accent); }
.ux-spacer { flex: 1 1 auto; }
.ux-sub { font-size: .95rem; margin-top: 6px; }
.ux-bar { display: block; height: 8px; border-radius: 8px; background: rgb(255 255 255 / .08); overflow: hidden; }
.ux-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .5s var(--ease); }
.ux-bar.is-warn i { background: var(--warn); }
.ux-bar.is-full i { background: var(--danger); }
.ux-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgb(14 14 18 / .82); color: var(--text); border: 1px solid var(--line-2); }
.ux-badge.is-warn { background: rgb(36 22 0 / .9); color: var(--warn); border-color: rgb(255 194 102 / .55); }
.ux-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ux-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--surface-3); color: var(--text-2); }
.ux-chip .i { width: .95em; height: .95em; }
.ux-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); flex: none; }
.ux-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }

/* Leerzustände */
.ux-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 18px; border: 1px dashed var(--line-2); border-radius: 18px; color: var(--text-2); background: rgb(255 255 255 / .015); }
.ux-empty.is-sm { padding: 18px; }
.ux-empty p { max-width: 52ch; }
.ux-empty-ic { width: 34px; height: 34px; padding: 8px; box-sizing: content-box; border-radius: 14px; background: rgb(var(--accent-rgb) / .1); color: var(--accent); }
.ux-mini-steps { display: grid; gap: 6px; padding-left: 1.3em; text-align: left; font-size: .88rem; color: var(--text-2); }

/* Skeletons (feste Höhen → kein Layout-Sprung) */
.ux-skel { border-radius: 16px; background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .ux-skel { animation: ux-shimmer 1.4s linear infinite; } }
@keyframes ux-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ux-skel-wrap { display: grid; gap: 10px; }
.ux-skel-kpi { height: 104px; }
.ux-skel-row { height: 56px; border-radius: 12px; }
.ux-skel-card { height: 220px; }
.ux-skel-title { height: 34px; width: min(320px, 70%); margin-bottom: 14px; }
.ux-loading { display: grid; gap: 8px; }
.ux-grid-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Format-Symbol / Cover (immer 9:16) */
.ux-cover { position: relative; display: block; aspect-ratio: 9 / 16; width: 100%; border-radius: 12px; overflow: hidden; background: var(--surface-3); flex: none; }
.ux-cover img, .ux-cover svg { width: 100%; height: 100%; object-fit: cover; }
.ux-cover.is-sm { width: 58px; border-radius: 9px; }
.ux-cover.is-xs { width: 36px; border-radius: 7px; }
.ux-glyph .ux-g-bg { fill: var(--surface-3); }
.ux-glyph .ux-g-a { fill: #6d6457; }
.ux-glyph .ux-g-b { fill: #45505c; }
.ux-glyph .ux-g-txt { fill: #f4f4f6; }
.ux-glyph .ux-g-c1 { fill: #2f2d2a; } .ux-glyph .ux-g-c2 { fill: #c49a6c; } .ux-glyph .ux-g-c3 { fill: #e9e1d3; }
.ux-glyph .ux-g-st { fill: #c49a6c; stroke: #fff; stroke-width: 3; } .ux-glyph .ux-g-st2 { fill: #41536b; stroke: #fff; stroke-width: 3; }

/* Kontingent */
.ux-quota { list-style: none; padding: 0; display: grid; gap: 12px; }
.ux-quota li { display: grid; gap: 5px; }
.ux-quota small { font-size: .74rem; }
.ux-quota-top { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; color: var(--text-2); }
.ux-quota-top b { color: var(--text); font-size: .84rem; }
.ux-quota.is-compact { gap: 8px; }
.ux-quota.is-compact .ux-quota-top, .ux-quota.is-compact .ux-quota-top b { font-size: .76rem; }
.ux-quota.is-compact .ux-bar { height: 5px; }
.ux-upgrade { align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ux-upgrade span { flex: 1 1 200px; }

/* ---------- Shell ---------- */
.ux-nav { gap: 14px; }
.ux-nav-group { display: grid; gap: 2px; }
.ux-nav-h { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); padding: 0 12px 4px; }
.ux-plan-box { gap: 10px; }
.ux-plan-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ux-plan-tag { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgb(var(--accent-rgb) / .14); color: var(--accent); }
.ux-side-user { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: .78rem; color: var(--text-3); min-width: 0; }
.ux-side-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text); font-weight: 800; font-size: .8rem; }
.ux-crumb { font: 700 .95rem/1 var(--font-display); color: var(--text); letter-spacing: -.01em; }
@media (max-width: 979px) { .ux-crumb { display: none; } }

/* ---------- Übersicht ---------- */
.ux-kpi-grid { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.ux-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; min-height: 104px; border-radius: 18px; background: var(--surface-1); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .16s, background .16s; }
.ux-kpi:hover { border-color: var(--line-2); background: var(--surface-2); }
.ux-kpi-ic { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(var(--accent-rgb) / .1); color: var(--accent); }
.ux-kpi-l { font-size: .76rem; font-weight: 600; color: var(--text-3); }
.ux-kpi b { font: 700 1.6rem/1.1 var(--font-display); }
.ux-kpi small { font-size: .72rem; }
.ux-onboard { display: grid; gap: 14px; border-color: rgb(var(--accent-rgb) / .3); background: linear-gradient(135deg, rgb(var(--accent-rgb) / .07), var(--surface-1) 60%); }
.ux-ob-count { font: 800 1.1rem/1 var(--font-display); padding: 8px 12px; border-radius: 12px; background: var(--surface-3); }
.ux-ob-steps { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ux-ob-steps li { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ux-ob-steps li > .btn, .ux-ob-steps li > .ux-ok { grid-column: 2; justify-self: start; }
.ux-ob-steps li.is-done { opacity: .75; }
.ux-ob-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-3); }
.ux-ob-steps li.is-done .ux-ob-num { background: var(--accent); color: var(--accent-ink); }
.ux-ov-grid { display: grid; gap: 12px; }
@media (min-width: 900px) { .ux-ov-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ux-live-list { display: grid; gap: 10px; min-height: 120px; align-content: start; }
.ux-live-job { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.ux-live-body { display: grid; gap: 6px; min-width: 0; }
.ux-pct { font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.ux-cover-row { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 120px), 1fr)); }
.ux-cover-link { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.ux-cover-link:hover .ux-cover { outline: 2px solid var(--line-2); }
.ux-cover-cap { display: grid; gap: 4px; justify-items: start; }

/* ---------- Prüfen ---------- */
.ux-posts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.ux-post-card { position: relative; transition: border-color .16s, transform .2s var(--ease); }
.ux-post-card:hover { transform: translateY(-2px); }
.ux-post-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ux-review { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1000px) { .ux-review { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); } }
.ux-stage-col { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.ux-phone { width: min(380px, 100%); padding: 10px; border-radius: 40px; background: #000; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .9), inset 0 0 0 2px #1d1d24; }
.ux-phone-screen { position: relative; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: var(--surface-3); }
.ux-phone-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ux-phone-top { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: linear-gradient(rgb(0 0 0 / .45), transparent); font-size: .78rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.ux-phone-count { padding: 3px 9px; border-radius: 999px; background: rgb(0 0 0 / .45); }
.ux-phone-badges { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ux-phone-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .3); background: rgb(10 10 14 / .6); color: #fff; backdrop-filter: blur(6px); }
.ux-phone-nav.is-prev { left: 10px; } .ux-phone-nav.is-next { right: 10px; }
.ux-phone-nav:disabled { opacity: .25; cursor: default; }
.ux-phone-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ux-flip { transform: scaleX(-1); }
.ux-dots { display: flex; gap: 6px; justify-content: center; }
.ux-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .22); transition: width .2s var(--ease); }
.ux-dots i.is-cur { width: 20px; border-radius: 4px; background: var(--accent); }
.ux-dots i.is-warn { background: var(--warn); }
.ux-strip { width: 100%; }
.ux-strip .slide { width: clamp(108px, 22vw, 140px); padding: 6px; border-radius: 14px; border: 1px solid transparent; }
.ux-strip .slide.is-cur { border-color: var(--accent); background: rgb(var(--accent-rgb) / .06); }
.ux-strip .slide.has-warn:not(.is-cur) { border-color: rgb(255 194 102 / .5); }
.ux-thumb-btn { position: relative; padding: 0; border: 0; background: none; border-radius: 10px; display: block; width: 100%; }
.ux-thumb-btn img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--surface-3); }
.ux-thumb-warn { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--warn); color: #241600; }
.ux-review-side { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 1000px) { .ux-review-side { position: sticky; top: 76px; } }
.ux-side-card { gap: 12px; }
.ux-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ux-counters > div { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.ux-counters dt { font-size: .68rem; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.ux-counters dd { display: grid; gap: 4px; margin: 0; }
.ux-counters dd > .mono { font: 700 1.05rem/1.1 var(--font-display); }
.ux-counters small { font-size: .66rem; }
.ux-counters .ux-bar { height: 5px; }
.ux-actions { display: grid; gap: 8px; }
.ux-actions .btn { justify-content: center; width: 100%; }
.ux-btn-lg { min-height: 50px; font-size: 1rem; }
.ux-hook { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.ux-hook p { font-size: 1.15rem; line-height: 1.2; }
.ux-ai-line { font-size: .8rem; color: var(--text-2); display: flex; gap: 6px; align-items: flex-start; }
.ux-caption-pre { white-space: pre-wrap; background: var(--bg); padding: 10px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; }
.ux-details summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-2); min-height: 32px; display: flex; align-items: center; }

/* ---------- Stile ---------- */
.ux-styles-head { min-height: 26px; }
.ux-usage { display: grid; grid-template-columns: auto minmax(80px, 240px) auto; gap: 12px; align-items: center; font-size: .86rem; color: var(--text-2); }
.ux-style-grid { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.ux-style-card { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 20px; background: var(--surface-1); border: 1px solid var(--line); transition: border-color .16s; }
.ux-style-card:hover { border-color: var(--line-2); }
.ux-style-thumb { border-radius: 14px; overflow: hidden; background: var(--surface-3); aspect-ratio: 9 / 16; align-self: start; box-shadow: 0 12px 30px -16px rgb(0 0 0 / .9); }
.ux-style-canvas { width: 100%; height: 100%; display: block; }
.ux-style-body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ux-style-name { font-size: 1.05rem; overflow-wrap: anywhere; }
.ux-meta { display: grid; gap: 4px; font-size: .8rem; }
.ux-meta > div { display: grid; grid-template-columns: minmax(70px, auto) 1fr; gap: 8px; }
.ux-meta dt { color: var(--text-3); }
.ux-meta dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }
.ux-empty-wide { grid-column: 1 / -1; display: grid; gap: 14px; padding: 18px; border: 1px dashed var(--line-2); border-radius: 20px; }
.ux-style-card.is-example { background: var(--surface-2); }
@media (max-width: 420px) { .ux-style-card { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; } }

/* ---------- Job-Verlauf ---------- */
.ux-filter-chips, .ux-chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ux-chip-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font-size: .82rem; font-weight: 600; color: var(--text-2); }
.ux-chip-btn:hover { background: rgb(255 255 255 / .05); color: var(--text); }
.ux-chip-btn[aria-pressed="true"] { background: var(--text); color: #0b0b0f; border-color: transparent; }
.ux-chip-n { font-size: .7rem; padding: 1px 6px; border-radius: 999px; background: rgb(255 255 255 / .1); }
.ux-chip-btn[aria-pressed="true"] .ux-chip-n { background: rgb(0 0 0 / .12); }
.ux-what-in { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ux-status-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ux-arrow { color: var(--text-3); }
.ux-jobs td.ux-dur { min-width: 7ch; }
.ux-jobs tbody tr { transition: background .2s; }
.ux-jobs tbody tr:hover { background: rgb(255 255 255 / .02); }

/* ---------- Katalog ---------- */
.ux-shop-grid { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.ux-shop { display: grid; gap: 10px; }
.ux-shop-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ux-shop-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); flex: none; }
.ux-search-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ux-search-row { grid-template-columns: minmax(0, 1fr) minmax(160px, 240px); } }
.ux-search { position: relative; display: block; }
.ux-search .i { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
.ux-search input { padding-left: 38px; }
.ux-chipbox { gap: 8px; }
.ux-chiprow .ux-label { min-width: 84px; }
.ux-chiprow .ux-chip-btn { min-height: 32px; padding: 3px 11px; font-size: .78rem; }
.ux-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: var(--surface-3); flex: none; display: inline-block; }
.ux-swatch.is-multi { background: conic-gradient(#e57b2e, #e8c840, #3f8f4f, #3d6fd1, #7a4fb0, #c8352e, #e57b2e); }
.ux-selbar { position: sticky; bottom: 12px; z-index: 40; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -18px rgb(0 0 0 / .9); }
.ux-prod-grid { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 180px), 1fr)); }
.ux-prod { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; overflow: hidden; background: var(--surface-1); border: 1px solid var(--line); min-width: 0; transition: border-color .16s; }
.ux-prod.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ux-prod-img { position: relative; aspect-ratio: 4 / 5; background: var(--surface-3); }
.ux-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.ux-prod-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.ux-prod-ph .i { width: 30px; height: 30px; opacity: .6; }
.ux-prod-check { position: absolute; top: 6px; left: 6px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgb(10 10 14 / .7); }
.ux-prod-check input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.ux-prod-flag { position: absolute; left: 6px; bottom: 6px; right: 6px; justify-content: center; }
.ux-prod-body { display: grid; gap: 3px; padding: 10px 10px 12px; align-content: start; min-width: 0; }
.ux-prod-body .brandname { font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.ux-prod-name { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.ux-prod-meta { display: flex; gap: 6px; align-items: center; font-size: .74rem; color: var(--text-3); min-width: 0; }
.ux-prod-meta .i { width: .9em; height: .9em; }
.ux-prod-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; }
.ux-prod-foot .price { font: 700 1rem/1 var(--font-display); }
/* Import-Assistent */
.ux-stepper { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; counter-reset: none; }
.ux-stepper li { min-width: 0; }
.ux-step-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: transparent; font-size: .82rem; font-weight: 600; color: var(--text-3); text-align: left; }
button.ux-step-btn { cursor: pointer; color: var(--text-2); }
button.ux-step-btn:hover { background: rgb(255 255 255 / .04); }
.ux-stepper li.is-cur .ux-step-btn { border-color: var(--accent); color: var(--text); background: rgb(var(--accent-rgb) / .07); }
.ux-step-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: .74rem; font-weight: 800; }
.ux-stepper li.is-cur .ux-step-n, .ux-stepper li.is-done .ux-step-n { background: var(--accent); color: var(--accent-ink); }
.ux-drop { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; border: 2px dashed var(--line-2); border-radius: 16px; text-align: center; cursor: pointer; background: rgb(255 255 255 / .015); }
.ux-drop:hover { border-color: var(--accent); }
.ux-drop-ic { width: 28px; height: 28px; color: var(--accent); }
.ux-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.field:has(.ux-file-input:focus-visible) .ux-drop { outline: 2px solid var(--accent); outline-offset: 2px; }
.field.is-mapped select { border-color: rgb(var(--accent-rgb) / .5); }
.ux-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; max-width: 100%; }
.ux-mini-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ux-mini-table caption { text-align: left; padding: 8px 10px 0; }
.ux-mini-table th, .ux-mini-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ux-mini-table th { color: var(--text-3); font-size: .7rem; }
.ux-sum { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); }
.ux-sum li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ux-sum b { font: 700 1.3rem/1 var(--font-display); }
.ux-sum span { font-size: .72rem; color: var(--text-3); }
.ux-sum li.is-ok b { color: var(--accent); } .ux-sum li.is-bad b { color: var(--danger); } .ux-sum li.is-warn b { color: var(--warn); }

/* ---------- Einstellungen ---------- */
.ux-settings { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .ux-settings { grid-template-columns: 200px minmax(0, 1fr); } }
.ux-toc { display: none; }
@media (min-width: 1100px) { .ux-toc { display: block; position: sticky; top: 76px; } }
.ux-toc ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.ux-toc a { display: block; padding: 7px 12px; border-radius: 10px; font-size: .86rem; color: var(--text-2); text-decoration: none; }
.ux-toc a:hover { background: rgb(255 255 255 / .05); color: var(--text); }
.ux-set-sec { scroll-margin-top: 80px; }
.ux-set-sec h2 { margin-bottom: 2px; }
.ux-lang-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.ux-lang { position: relative; }
.ux-lang input { position: absolute; opacity: 0; inset: 0; }
.ux-lang span { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; font-size: .9rem; font-weight: 600; }
.ux-lang-code { font: 800 .72rem/1 var(--font-display); padding: 5px 6px; border-radius: 6px; background: var(--surface-3); }
.ux-lang input:checked + span { border-color: var(--accent); background: rgb(var(--accent-rgb) / .08); }
.ux-lang input:checked + span .ux-lang-code { background: var(--accent); color: var(--accent-ink); }
.ux-lang input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ux-pw-grid { align-items: start; }
.ux-pw-grid .field { align-content: start; }
.ux-ai-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.ux-ai-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.ux-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgb(var(--accent-rgb) / .12), var(--surface-2)); }
.ux-plan-name { display: block; font: 800 1.5rem/1.1 var(--font-display); }
.ux-subcard { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); }
.ux-danger { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(255 122 122 / .35); background: rgb(255 122 122 / .05); }
.ux-audit li { grid-template-columns: minmax(118px, auto) minmax(0, 1fr); }
.ux-budget { display: grid; gap: 6px; }

@media (max-width: 420px) {
  .ux-counters { gap: 6px; } .ux-counters > div { padding: 8px; }
  .ux-usage { grid-template-columns: 1fr; }
  .ux-chiprow .ux-label { min-width: 100%; }
  .ux-stepper { grid-template-columns: 1fr; }
  .ux-phone { padding: 6px; border-radius: 30px; }
  .ux-phone-screen { border-radius: 24px; }
}
@media (max-width: 999px) { .ux-phone { width: min(320px, 82vw); } }

/* ------------------------------------------------------------------ Live-Vorschau laufender Jobs (ux/livepreview.js)
   Plätze stehen vorher fest (--lp-n = geplante Bilder) → beim Eintrudeln der Bilder kein Layout-Sprung. */
.lp-strip { display: grid; gap: 5px; min-height: 76px; align-content: start; }
.lp-count { color: var(--text-2, inherit); }
.lp-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(var(--lp-n, 6), minmax(0, 30px)); }
.lp-tile { position: relative; aspect-ratio: 9 / 16; border-radius: 5px; overflow: hidden; background: var(--surface-3); border: 1px dashed var(--line-2); }
.lp-tile.is-done { border: 1px solid var(--line); }
.lp-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-strip.is-lg { min-height: 122px; margin-bottom: 12px; }
.lp-strip.is-lg .lp-tiles { grid-template-columns: repeat(var(--lp-n, 6), minmax(0, 54px)); gap: 6px; }
.lp-rowcount { display: block; color: var(--text-2, inherit); }
@media (prefers-reduced-motion: no-preference) {
  .lp-tile.is-new img { animation: lp-in .4s ease-out; }
  @keyframes lp-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
}

/* Fehlerhafter Slide (vom System erkannt): Hinweis + kostenloser Neuwurf (Bild-Guthaben, 10.10.2026) */
.defect-hint { color: var(--warn); margin: 4px 0 2px; line-height: 1.35; }
.defect-hint .muted { color: var(--muted, inherit); }
.btn.is-free { border-color: rgb(var(--accent-rgb) / .7); color: var(--accent); }