/* ==========================================================================
   Spin Kie Studio — design tokens
   Every rule below references tokens only; themes swap the token set.
   ========================================================================== */

/* Neutral instrumental grey, in the spirit of a desktop editor (Photoshop /
   Cinema 4D): no near-black "space" grounds, no neon accents. Text contrast is
   deliberately restrained (#d6d7da, not white) — size and weight carry the
   hierarchy, colour does not. */
:root {
  --bg: #2b2b2d;
  --pn: #333336;
  --pn2: #3b3b3f;
  --ln: #4a4a4f;
  --tx: #d6d7da;
  --dim: #9b9ca1;
  --dm2: #8e9096;
  --acc: #7f9ac4;
  --acctx: #7f9ac4;
  --onacc: #16171a;
  --accs: rgba(127, 154, 196, 0.15);
  --ok: #6ea587;
  --photo: #8bae99;
  --photobg: rgba(139, 174, 153, 0.1);
  --photoln: rgba(139, 174, 153, 0.35);
  --danger: #c98080;

  --tier-quality: #9a90c0;
  --tier-balanced: #7793b8;
  --tier-budget: #6ea587;
  --tier-bg-a: 1f;
  --tier-ln-a: 38;

  --eo: cubic-bezier(0.23, 1, 0.32, 1);
  --eio: cubic-bezier(0.77, 0, 0.175, 1);

  /* Golos Text — гротеск, нарисованный с кириллицей как основным алфавитом,
     а не дорисованной к латинице; слегка squarish, что ложится на
     «инструментальную» эстетику. JetBrains Mono держит крупную высоту строчных
     и потому читается на наших 9.5px подписях. */
  --sans: "Golos Text", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

:root[data-theme="light"] {
  --bg: #d9d9d6;
  --pn: #ebebe8;
  --pn2: #f6f6f4;
  --ln: #c9c9c4;
  --tx: #2c2e33;
  --dim: #63666e;
  --dm2: #6a6d75;
  --acc: #7f9ac4;
  --acctx: #4a5a72;
  --onacc: #16171a;
  --accs: rgba(127, 154, 196, 0.12);
  --ok: #3d7259;
  --photo: #3d7259;
  --photobg: rgba(61, 114, 89, 0.09);
  --photoln: rgba(61, 114, 89, 0.3);
  --danger: #9c4a4a;

  --tier-quality: #59546f;
  --tier-balanced: #45556b;
  --tier-budget: #40604e;
  --tier-bg-a: 1c;
}

/* ---- reset / base -------------------------------------------------------- */

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(130, 133, 145, 0.4) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(130, 133, 145, 0.4);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(150, 153, 165, 0.6); background-clip: padding-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: var(--sans); cursor: pointer; }
input, textarea { font-family: var(--sans); }
::selection { background: rgba(165, 163, 245, 0.32); }
::placeholder { color: var(--dm2); }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }

/* ---- motion -------------------------------------------------------------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes shim {
  0% { background-position: -260px 0; }
  100% { background-position: 260px 0; }
}
@keyframes pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

button {
  transition: transform 140ms var(--eo), background 160ms ease,
    border-color 160ms ease, color 160ms ease, filter 160ms ease;
}
button:active { transform: scale(0.97); }
input, textarea { transition: border-color 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  button:active { transform: none; }
}

/* ---- app shell ----------------------------------------------------------- */

/* Capped at the width the handoff composed the mockups at (1560px) and centred.
   Past that the middle column just grows and the eye has to travel between the
   catalogue and the history rails. Side rules mark where the app ends. */
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 1180px;
  max-width: 1560px;
  margin: 0 auto;
  border-left: 1px solid var(--ln);
  border-right: 1px solid var(--ln);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  flex: none;
  padding: 0 16px;
  background: var(--pn);
  border-bottom: 1px solid var(--ln);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 11px; height: 11px;
  background: var(--acc);
  transform: rotate(45deg);
  border-radius: 2px;
}
.brand-name {
  font: 600 13px var(--sans);
  color: var(--tx);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.host-chip {
  font: 400 10px var(--mono);
  color: var(--dm2);
  padding: 2px 7px;
  border: 1px solid var(--ln);
  border-radius: 5px;
  white-space: nowrap;
}

.run-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 5px 10px;
  background: var(--accs);
  border: 1px solid var(--acc);
  border-radius: 999px;
  animation: rise 0.2s ease;
}
.run-pill .sp {
  width: 11px; height: 11px;
  border: 2px solid var(--acc);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.run-pill-label { font: 500 11.5px var(--sans); color: var(--tx); }
.run-pill-pct { font: 400 10.5px var(--mono); color: var(--dim); }

.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.credits {
  display: flex; align-items: baseline; gap: 6px;
  padding: 5px 10px;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 7px;
}
.credits .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); align-self: center; }
.credits .n { font: 600 11.5px var(--mono); color: var(--tx); }
.credits .u { font: 400 10px var(--sans); color: var(--dim); }
.credits.is-err .dot { background: var(--danger); }

/* ---- buttons ------------------------------------------------------------- */

.btn {
  font: 500 11.5px var(--sans);
  color: var(--dim);
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 7px;
  padding: 6px 11px;
}
.btn:hover { color: var(--tx); border-color: var(--dim); }
.btn-ghost { background: transparent; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 18.5px var(--sans);
  color: var(--onacc);
  background: var(--acc);
  border: none;
  border-radius: 11px;
  padding: 16px 30px;
}
.btn-primary:hover { filter: brightness(1.09); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn-primary .kbd { font: 400 14px var(--mono); opacity: 0.75; }
.btn-sm { font: 500 12px var(--sans); border-radius: 8px; padding: 9px 14px; }
.btn-sm.btn-primary { font: 600 12px var(--sans); padding: 9px 16px; }
.btn-xs {
  font: 500 9.5px var(--mono);
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--ln);
  border-radius: 5px;
  padding: 2px 6px;
}
.btn-xs:hover { color: var(--tx); border-color: var(--dim); }
.btn-xs.is-danger:hover { color: var(--danger); border-color: var(--danger); }

/* ---- layout -------------------------------------------------------------- */

.seg {
  display: flex; gap: 2px; padding: 2px;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 8px;
  flex: none;
}
.seg-btn {
  font: 500 11.5px var(--sans);
  color: var(--dim);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 11px;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--tx); }
.seg-btn.is-active { background: var(--acc); color: var(--onacc); font-weight: 600; }

.layout-root { flex: 1; min-height: 0; }
.layout-a {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr) 340px;
}
.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.col-models { border-right: 1px solid var(--ln); background: var(--pn); }
.col-form { background: var(--bg); }
.col-history { border-left: 1px solid var(--ln); background: var(--pn); }

/* ---- catalog ------------------------------------------------------------- */

.cats { display: flex; gap: 2px; padding: 12px 12px 10px; flex: none; }
.cat {
  flex: 1;
  font: 500 11.5px var(--sans);
  color: var(--dim);
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 7px 12px;
}
.cat:hover { color: var(--tx); }
.cat.is-active { background: var(--acc); color: var(--onacc); font-weight: 600; }

.catalog-controls { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 8px;
  padding: 8px 10px;
}
.search:focus-within { border-color: var(--acc); }
.search .ic { font: 400 12px var(--mono); color: var(--dm2); }
.search input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font: 400 12px var(--sans);
  color: var(--tx);
}
.search .kbd {
  font: 500 9.5px var(--mono);
  color: var(--dm2);
  border: 1px solid var(--ln);
  border-radius: 4px;
  padding: 1px 5px;
}

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font: 500 11.5px var(--sans);
  color: var(--dim);
  background: var(--pn2);
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 5px 10px;
}
.pill:hover { color: var(--tx); }
.pill.is-active {
  background: var(--accs);
  border-color: var(--acc);
  color: var(--acctx);
}
.pill-acc {
  color: var(--acctx);
  background: var(--accs);
  border-color: var(--acc);
}
.pill-acc:hover { filter: brightness(1.12); color: var(--acctx); }

.count-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px;
  border-top: 1px solid var(--ln);
  border-bottom: 1px solid var(--ln);
  background: var(--bg);
  flex: none;
}
.count-bar .l { font: 600 9.5px var(--mono); color: var(--dm2); letter-spacing: 0.08em; }
.count-bar .r { font: 500 10px var(--mono); color: var(--dm2); }

.scroll { flex: 1; min-height: 0; overflow-y: auto; }
.model-list { padding: 10px; display: flex; flex-direction: column; gap: 7px; }

.model-card {
  flex: none;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--pn2);
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 12px 13px;
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: background 0.14s, border-color 0.14s;
}
.model-card:hover { background: var(--pn); border-color: var(--ln); }
.model-card:active { transform: none; }
.model-card.is-selected { background: var(--accs); border-color: var(--acc); }
.model-card .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.model-card .mid {
  font: 500 15.5px var(--sans);
  color: var(--tx);
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-card .price { font: 600 11px var(--mono); color: var(--acctx); white-space: nowrap; }
.model-card .desc { font: 400 11.5px/1.55 var(--sans); color: var(--dim); }
.model-card .badges { display: flex; flex-wrap: wrap; gap: 5px; }

.badge {
  font: 500 9.5px var(--mono);
  border-radius: 4px;
  padding: 2px 6px;
  border: 1px solid var(--ln);
  background: var(--pn2);
  color: var(--dim);
  white-space: nowrap;
}
.badge-photo { color: var(--photo); background: var(--photobg); border-color: var(--photoln); }
/* Tier badges sit at a deliberately weak contrast — they must not compete with
   the model name. Fill ≈12%, border ≈22% of the tier colour. */
.badge-tier { border-width: 1px; border-style: solid; }
.badge-tier[data-tier="quality"] {
  color: var(--tier-quality);
  border-color: color-mix(in srgb, var(--tier-quality) 22%, transparent);
  background: color-mix(in srgb, var(--tier-quality) 12%, transparent);
}
.badge-tier[data-tier="balanced"] {
  color: var(--tier-balanced);
  border-color: color-mix(in srgb, var(--tier-balanced) 22%, transparent);
  background: color-mix(in srgb, var(--tier-balanced) 12%, transparent);
}
.badge-tier[data-tier="budget"] {
  color: var(--tier-budget);
  border-color: color-mix(in srgb, var(--tier-budget) 22%, transparent);
  background: color-mix(in srgb, var(--tier-budget) 12%, transparent);
}
.badge-stale { color: #b8944a; border-color: rgba(184, 148, 74, 0.35); background: rgba(184, 148, 74, 0.1); }

.list-msg { padding: 22px 14px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.list-msg .t { font: 500 11.5px var(--sans); color: var(--dim); }
.list-msg .s { font: 400 10px/1.5 var(--mono); color: var(--dm2); }

/* ---- empty / first run --------------------------------------------------- */

.empty {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 40px;
  animation: fade 0.25s ease;
}
.empty-head { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.empty-mark {
  width: 34px; height: 34px;
  background: var(--acc);
  transform: rotate(45deg);
  border-radius: 6px;
  margin-bottom: 8px;
}
.empty-title { font: 600 20px var(--sans); letter-spacing: -0.02em; color: var(--tx); }
.empty-sub { font: 400 12.5px/1.6 var(--sans); color: var(--dim); max-width: 420px; }
.steps { display: grid; grid-template-columns: repeat(3, 190px); gap: 12px; }
.step {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 10px;
}
.step .n { font: 600 10px var(--mono); color: var(--acctx); }
.step .t { font: 600 12.5px var(--sans); color: var(--tx); }
.step .d { font: 400 11px/1.5 var(--sans); color: var(--dim); }
.starters { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.starters .cap { font: 600 9.5px var(--mono); color: var(--dm2); letter-spacing: 0.08em; }
.starter {
  font: 400 11.5px var(--sans);
  color: var(--dim);
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 999px;
  padding: 7px 13px;
}
.starter:hover { color: var(--tx); border-color: var(--acc); }

/* ---- form ---------------------------------------------------------------- */

.form-head {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--ln);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  flex: none;
}
.form-head .l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-head .idrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* The active model id is the screen's main heading in this revision. */
.form-head .mid { font: 600 25.5px var(--mono); color: var(--tx); letter-spacing: -0.02em; }
.form-head .desc { font: 400 12px/1.5 var(--sans); color: var(--dim); max-width: 560px; }
.form-head .r { display: flex; gap: 7px; flex: none; }

.form-body { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 20px; }

.prompt-block { display: flex; flex-direction: column; gap: 7px; margin: 20px 0 22px; }
.prompt-label { display: flex; align-items: baseline; gap: 8px; }
.prompt-label .t { font: 500 17.5px var(--sans); color: var(--tx); letter-spacing: -0.01em; }
.prompt-label .k { font: 400 10px var(--mono); color: var(--acctx); }
.prompt-label .c { font: 400 10px var(--mono); color: var(--dm2); margin-left: auto; }
textarea.prompt {
  width: 100%;
  min-height: 168px;
  resize: vertical;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 9px;
  padding: 15px 17px;
  font: 400 16.5px/1.6 var(--sans);
  color: var(--tx);
  outline: none;
}
textarea.prompt:focus { border-color: var(--acc); }
.prompt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font: 400 10px var(--mono);
  color: var(--dim);
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 6px;
  padding: 4px 8px;
}
.chip:hover { color: var(--tx); border-color: var(--dim); }

.group { display: flex; flex-direction: column; gap: 12px; }
.group-head { display: flex; align-items: center; gap: 9px; }
.group-head .t { font: 600 9.5px var(--mono); color: var(--dim); letter-spacing: 0.09em; }
.group-head .n { font: 400 9.5px var(--mono); color: var(--dm2); }
.group-head .rule { flex: 1; height: 1px; background: var(--ln); }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field-label { display: flex; align-items: baseline; gap: 7px; }
.field-label .t { font: 500 11.5px var(--sans); color: var(--tx); }
.field-label .k { font: 400 9.5px var(--mono); color: var(--dm2); }
.field-label .req { font: 600 10px var(--mono); color: var(--acctx); }
.field-hint { font: 400 10.5px/1.55 var(--mono); color: var(--dm2); }

.sel-wrap { position: relative; }
.sel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 34px;
  padding: 0 11px;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}
.sel:hover { border-color: var(--dim); }
.sel.is-open { border-color: var(--acc); }
.sel .v { font: 400 11.5px var(--mono); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel .ca { font: 400 9px var(--mono); color: var(--dm2); }
.sel-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 20;
  background: var(--pn2);
  border: 1px solid var(--dim);
  border-radius: 8px;
  padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  animation: pop 0.14s ease;
  max-height: 260px;
  overflow-y: auto;
}
.sel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.sel-opt:hover { background: var(--ln); }
.sel-opt:active { transform: none; }
.sel-opt .l { font: 400 11.5px var(--mono); color: var(--tx); }
.sel-opt .m { font: 400 9.5px var(--mono); color: var(--dm2); }
.sel-opt.is-sel .l { color: var(--acctx); }

.num {
  display: flex; align-items: center;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 8px;
  overflow: hidden;
}
.num button {
  width: 32px; height: 34px;
  background: transparent;
  border: none;
  color: var(--dim);
  font: 400 14px var(--mono);
}
.num button:first-child { border-right: 1px solid var(--ln); }
.num button:last-child { border-left: 1px solid var(--ln); }
.num button:hover { color: var(--tx); background: var(--pn2); }
.num .v {
  flex: 1; text-align: center;
  font: 500 12px var(--mono);
  color: var(--tx);
  border: none; background: transparent; outline: none;
  min-width: 0;
  height: 34px;
}

.bool {
  display: flex; align-items: center; gap: 9px;
  height: 34px;
  padding: 0 11px;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}
.bool:hover { border-color: var(--dim); }
.bool:active { transform: none; }
.track {
  width: 30px; height: 17px; flex: none;
  border-radius: 999px;
  background: var(--ln);
  padding: 2px;
  display: flex;
  transition: background 160ms ease;
}
.track .knob {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms var(--eo);
}
.bool.is-on .track { background: var(--acc); }
.bool.is-on .track .knob { transform: translateX(13px); }
.bool .v { font: 400 11.5px var(--mono); color: var(--dim); }

.drop-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.drop {
  flex: 1; min-width: 220px; min-height: 70px;
  border: 1px dashed var(--ln);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--pn);
  cursor: pointer;
  padding: 8px 12px;
  text-align: center;
}
.drop:hover, .drop.is-over { border-color: var(--acc); background: var(--accs); }
.drop:active { transform: none; }
.drop .t { font: 500 11.5px var(--sans); color: var(--dim); }
.drop .s { font: 400 9.5px var(--mono); color: var(--dm2); }
.thumb {
  width: 96px; height: 70px; flex: none;
  border-radius: 8px;
  border: 1px solid var(--ln);
  background: var(--pn2) center/cover no-repeat;
  display: flex; align-items: flex-end;
  padding: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.thumb:hover { border-color: var(--acc); }
.thumb .cap {
  font: 400 8.5px var(--mono);
  color: var(--tx);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  padding: 1px 4px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.url-input {
  width: 100%;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 8px;
  padding: 8px 11px;
  font: 400 11px var(--mono);
  color: var(--tx);
  outline: none;
}
.url-input:focus { border-color: var(--acc); }

/* ---- cost bar ------------------------------------------------------------ */

.cost-bar {
  border-top: 1px solid var(--ln);
  background: var(--pn);
  padding: 14px 24px;
  display: flex; align-items: center; gap: 18px;
  flex: none;
}
/* The primary button keeps its full size; the cost column takes what is left
   and stays readable — without nowrap the price itself broke across lines on
   narrow windows. */
.cost-l { display: flex; flex-direction: column; gap: 3px; min-width: 190px; flex: 1 1 auto; }
.cost-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cost-cred { font: 600 14px var(--mono); color: var(--tx); white-space: nowrap; }
.cost-usd { font: 400 11px var(--mono); color: var(--dim); white-space: nowrap; }
.cost-break {
  font: 400 10px/1.45 var(--mono);
  color: var(--dm2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cost-r { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.cost-after { font: 400 10.5px var(--mono); color: var(--dm2); white-space: nowrap; }

/* ---- history ------------------------------------------------------------- */

.hist-head {
  padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
  border-bottom: 1px solid var(--ln);
  flex: none;
}
.hist-title { display: flex; align-items: center; justify-content: space-between; }
.hist-title .t { font: 600 11.5px var(--sans); color: var(--tx); }
.hist-title .s { font: 400 10px var(--mono); color: var(--dm2); }
.hist-list { padding: 10px; display: flex; flex-direction: column; gap: 12px; }

.run-card {
  flex: none;
  border: 1px solid var(--acc);
  border-radius: 12px;
  padding: 12px;
  background: var(--accs);
  display: flex; flex-direction: column; gap: 10px;
  animation: rise 0.2s ease;
}
.run-card .top { display: flex; align-items: center; justify-content: space-between; }
.run-card .top .t { font: 600 11px var(--sans); color: var(--tx); }
.run-card .top .p { font: 500 10.5px var(--mono); color: var(--acctx); }
.bar { height: 3px; border-radius: 2px; background: var(--ln); overflow: hidden; }
/* Scaled rather than resized: the handoff's motion rule is transform/opacity
   only, and the parent's overflow already supplies the rounded ends. */
.bar .fill {
  height: 100%;
  width: 100%;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
}
.stages { display: flex; flex-direction: column; gap: 5px; }
.stage { display: flex; align-items: center; gap: 7px; }
.stage .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ln); flex: none; }
.stage .l { font: 400 10.5px var(--mono); color: var(--dm2); }
.stage.is-done .dot { background: var(--ok); }
.stage.is-done .l { color: var(--dim); }
.stage.is-active .dot { background: var(--acc); animation: pulse 1s ease-in-out infinite; }
.stage.is-active .l { color: var(--tx); }
.run-foot { display: flex; align-items: center; gap: 8px; }
.run-foot .eta { font: 400 10px var(--mono); color: var(--dim); }
.run-note { font: 400 10.5px/1.55 var(--mono); color: var(--dm2); }

.hist-card {
  flex: none;
  background: var(--pn2);
  border: 1px solid transparent;
  border-radius: 13px;
  overflow: hidden;
  animation: rise 0.2s ease;
}
.hist-card:hover { border-color: var(--dim); }
.hist-thumb {
  height: 118px;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer;
  position: relative;
}
.hist-thumb.is-empty {
  background-image: repeating-linear-gradient(135deg, rgba(140, 150, 170, 0.14) 0 6px, transparent 6px 12px);
}
.hist-thumb .tag {
  font: 400 9px var(--mono);
  color: var(--tx);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 2px 5px;
  align-self: flex-start;
  margin: 6px;
}
.hist-thumb .play {
  font: 400 10px var(--mono);
  color: var(--tx);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  padding: 4px 9px;
  align-self: flex-end;
  margin: 6px;
}
.hist-body { padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; }
.hist-body .r1 { display: flex; align-items: baseline; gap: 6px; }
.hist-body .m {
  font: 600 10.5px var(--mono); color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-body .c { font: 500 9.5px var(--mono); color: var(--dim); margin-left: auto; white-space: nowrap; }
.hist-body .p {
  font: 400 11px/1.5 var(--sans); color: var(--dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hist-body .acts { display: flex; align-items: center; gap: 6px; }
.hist-body .ts { font: 400 9.5px var(--mono); color: var(--dm2); }
.fav {
  font: 400 12px var(--sans);
  color: var(--dm2);
  background: transparent; border: none; padding: 0 2px;
}
.fav:hover, .fav.is-on { color: var(--acctx); }
.hist-err { font: 400 10px/1.45 var(--mono); color: var(--danger); }

/* ---- overlays ------------------------------------------------------------ */

.scrim {
  position: fixed; inset: 0;
  background: rgba(4, 5, 8, 0.66);
  backdrop-filter: blur(3px);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
  animation: fade 0.16s ease;
  padding: 24px;
}
.scrim.top { align-items: flex-start; padding-top: 12vh; }
.scrim.lb { background: rgba(3, 4, 6, 0.86); backdrop-filter: blur(6px); z-index: 70; padding: 40px; }

.modal {
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 14px;
  overflow: hidden;
  animation: pop 0.18s ease;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  max-height: 86vh;
  display: flex; flex-direction: column;
}
.modal-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--ln);
  display: flex; flex-direction: column; gap: 5px;
  flex: none;
}
.modal-head .t { font: 600 14.5px var(--sans); letter-spacing: -0.01em; color: var(--tx); }
.modal-head .s { font: 400 12px/1.6 var(--sans); color: var(--dim); }
.modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--ln);
  display: flex; gap: 9px; justify-content: flex-end;
  flex: none;
}

.dotline { display: flex; align-items: baseline; gap: 10px; }
.dotline .k { font: 400 11.5px var(--mono); color: var(--dim); }
.dotline .rule { flex: 1; border-bottom: 1px dotted var(--ln); }
/* Сериализованные структуры бывают длинными — обрезаем, полное значение
   остаётся в подсказке. */
.dotline .v {
  font: 400 11.5px var(--mono);
  color: var(--tx);
  max-width: 62%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dotline.is-total .k, .dotline.is-total .v { color: var(--acctx); font-weight: 600; }

.run-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 9px;
  margin-top: 4px;
}
.run-preview .ph {
  width: 52px; height: 40px; flex: none;
  border-radius: 6px;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(135deg, rgba(140, 150, 170, 0.14) 0 6px, transparent 6px 12px);
}
.run-preview .m { font: 600 10.5px var(--mono); color: var(--tx); }
.run-preview .p {
  font: 400 10.5px var(--sans); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.checkrow { display: flex; align-items: center; gap: 9px; cursor: pointer; padding-top: 2px; background: none; border: none; }
.checkrow:active { transform: none; }
.checkbox {
  width: 15px; height: 15px; flex: none;
  border: 1px solid var(--ln);
  border-radius: 4px;
  background: var(--pn2);
  display: flex; align-items: center; justify-content: center;
  font: 600 9px var(--mono);
  color: var(--onacc);
}
.checkrow.is-on .checkbox { background: var(--acc); border-color: var(--acc); }
.checkrow .l { font: 400 11px var(--mono); color: var(--dim); }

.key-field { display: flex; flex-direction: column; gap: 6px; }
.key-field .cap { font: 500 10.5px var(--mono); color: var(--dim); }
.key-row { display: flex; gap: 8px; }
.key-row input {
  flex: 1; min-width: 0;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 12px var(--mono);
  color: var(--tx);
  outline: none;
}
.key-row input:focus { border-color: var(--acc); }
.key-status {
  font: 500 11px var(--mono);
  border-radius: 8px;
  padding: 9px 11px;
  border: 1px solid var(--ln);
  color: var(--dim);
  background: var(--pn2);
}
.key-status.is-ok { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.key-status.is-err { color: var(--danger); border-color: var(--danger); background: rgba(255, 107, 107, 0.08); }
.facts {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 9px;
}
.fact { display: flex; gap: 8px; }
.fact .b { font: 400 10.5px var(--mono); color: var(--acctx); }
.fact .l { font: 400 10.5px/1.5 var(--mono); color: var(--dim); }

.rec {
  display: flex; gap: 14px;
  padding: 13px;
  border: 1px solid var(--ln);
  border-radius: 11px;
  background: var(--pn2);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.rec:hover { border-color: var(--acc); }
.rec:active { transform: none; }
.rec .rank { width: 46px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rec .rank .n { font: 600 15px var(--mono); color: var(--acctx); }
.rec .rank .m { font: 400 9px var(--mono); color: var(--dm2); }
.rec .b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rec .idrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rec .id { font: 600 13px var(--mono); color: var(--tx); }
.rec .price { font: 600 10.5px var(--mono); color: var(--acctx); }
.rec .why { font: 400 11px/1.5 var(--sans); color: var(--dim); }

.pal-search {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ln);
  flex: none;
}
.pal-search .ic { font: 400 13px var(--mono); color: var(--dm2); }
.pal-search input {
  flex: 1; background: transparent; border: none; outline: none;
  font: 400 13.5px var(--sans); color: var(--tx);
}
.pal-search .kbd {
  font: 500 9.5px var(--mono); color: var(--dm2);
  border: 1px solid var(--ln); border-radius: 4px; padding: 2px 6px;
}
.pal-list { max-height: 52vh; overflow-y: auto; padding: 8px; }
.pal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent; border: none; width: 100%; text-align: left;
}
.pal-row:hover, .pal-row.is-cursor { background: var(--pn2); }
.pal-row:active { transform: none; }
.pal-row .id {
  font: 600 12px var(--mono); color: var(--tx);
  width: 230px; flex: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal-row .d {
  font: 400 11px var(--sans); color: var(--dim);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal-row .ph { font: 500 10px var(--mono); color: var(--photo); }
.pal-row .price { font: 600 10.5px var(--mono); color: var(--acctx); width: 74px; text-align: right; flex: none; }

.lb {
  display: flex;
  max-width: 1180px; width: 100%;
  max-height: 84vh;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 14px;
  overflow: hidden;
  animation: pop 0.2s ease;
}
.lb-stage {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 24px;
  position: relative;
}
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 72vh; border-radius: 8px; display: block; }
.lb-nav {
  position: absolute; top: 50%;
  width: 34px; height: 34px;
  transform: translateY(-50%);
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 50%;
  color: var(--dim);
  font: 400 13px var(--mono);
}
.lb-nav:hover { color: var(--tx); border-color: var(--acc); }
.lb-nav.prev { left: 14px; }
.lb-nav.next { right: 14px; }
.lb-side { width: 330px; flex: none; border-left: 1px solid var(--ln); display: flex; flex-direction: column; }
.lb-side-head { padding: 16px; border-bottom: 1px solid var(--ln); display: flex; flex-direction: column; gap: 6px; }
.lb-side-head .m { font: 600 13px var(--mono); color: var(--tx); }
.lb-side-head .s { font: 400 10.5px var(--mono); color: var(--dm2); }
.lb-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.lb-sec { display: flex; flex-direction: column; gap: 7px; }
.lb-sec .cap { font: 600 9.5px var(--mono); color: var(--dim); letter-spacing: 0.09em; }
.lb-sec .body { font: 400 11.5px/1.6 var(--sans); color: var(--tx); }
.lb-side-foot { padding: 14px 16px; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 8px; }
/* The oversized primary is for the one main action on the form; inside the
   330px lightbox rail it reverts to the compact size. */
.lb-side-foot .btn-primary {
  width: 100%; justify-content: center;
  font: 600 12px var(--sans);
  border-radius: 8px;
  padding: 11px;
}
.lb-side-foot .pair { display: flex; gap: 8px; }
.lb-side-foot .pair .btn { flex: 1; text-align: center; padding: 9px; }

/* ---- toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 9px;
  padding: 10px 16px;
  font: 400 11.5px var(--sans);
  color: var(--tx);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  animation: rise 0.2s ease;
  max-width: 520px;
}
.toast.is-err { border-color: var(--danger); color: var(--danger); }

/* ==========================================================================
   Layout B · Верстак — icon rail, result gallery, right inspector
   ========================================================================== */

.layout-b { display: grid; grid-template-columns: 64px minmax(0, 1fr) 372px; }

.rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 0;
  border-right: 1px solid var(--ln);
  background: var(--pn);
  min-height: 0; overflow: hidden;
}
.rail-btn {
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--dim);
}
.rail-btn .i { font: 400 15px var(--mono); }
.rail-btn .l { font: 500 8px var(--mono); letter-spacing: 0.04em; }
.rail-btn:hover { color: var(--tx); }
.rail-btn.is-active { background: var(--accs); border-color: var(--acc); color: var(--acctx); }
.rail-acc {
  margin-top: auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--ln);
  background: transparent;
  color: var(--acctx);
  font: 400 14px var(--mono);
}
.rail-acc:hover { background: var(--accs); }

.col-gallery { background: var(--bg); }
.gal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ln);
  background: var(--pn);
  flex: none;
}
.gal-search { flex: 1; max-width: 280px; }
.model-chip {
  display: flex; align-items: center; gap: 9px;
  flex: 1; max-width: 460px;
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 9px;
  padding: 9px 12px;
  text-align: left;
}
.model-chip:hover { border-color: var(--acc); }
.model-chip:active { transform: none; }
.model-chip .kbd { font: 400 11px var(--mono); color: var(--dm2); flex: none; }
.model-chip .mid {
  font: 500 13px var(--mono); color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-chip .hint { font: 400 10.5px var(--sans); color: var(--dim); margin-left: auto; flex: none; }

.gallery {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  align-content: start;
}
.gallery .run-card, .gallery .list-msg { grid-column: 1 / -1; }
.gallery .hist-thumb { height: 150px; }

.col-inspector { border-left: 1px solid var(--ln); background: var(--pn); }
.insp-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--ln);
  display: flex; flex-direction: column; gap: 4px;
  flex: none;
}
.insp-head .t { font: 600 11.5px var(--sans); color: var(--tx); }
.insp-head .s { font: 400 10px var(--mono); color: var(--dm2); }
.insp-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
.insp-prompt { margin: 0; }
.insp-prompt .prompt-label .t { font: 500 13.5px var(--sans); }
.insp-prompt textarea.prompt {
  min-height: 96px;
  background: var(--pn2);
  padding: 11px 12px;
  font: 400 12.5px/1.6 var(--sans);
}
/* One column: 372px cannot hold the two-up grid without cramping labels. */
.col-inspector .group-grid { grid-template-columns: minmax(0, 1fr); }
.insp-cost { padding: 12px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
.insp-cost .cost-l { gap: 2px; }
.insp-cost .btn-primary {
  width: 100%; justify-content: center;
  font: 600 14px var(--sans);
  border-radius: 9px;
  padding: 12px 18px;
}

/* ==========================================================================
   Layout C · Поток — model chips, single feed, sticky composer
   ========================================================================== */

.layout-c { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }

.flow-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--ln);
  background: var(--pn);
  overflow-x: auto;
  flex: none;
}
.flow-cats { padding: 0; gap: 2px; flex: none; }
.flow-cats .cat { flex: none; padding: 6px 11px; }
.flow-div { width: 1px; height: 18px; background: var(--ln); margin: 0 4px; flex: none; }
.quick { display: flex; gap: 6px; flex: none; }
.quick-chip {
  font: 500 10.5px var(--mono);
  color: var(--dim);
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
}
.quick-chip:hover { border-color: var(--acc); color: var(--tx); }
.quick-chip.is-active { background: var(--accs); border-color: var(--acc); color: var(--acctx); }
.quick-more {
  font: 500 10.5px var(--mono);
  color: var(--dim);
  background: transparent;
  border: 1px dashed var(--ln);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
  flex: none;
}
.quick-more:hover { color: var(--tx); border-color: var(--acc); }

.feed {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.feed .hist-card { border-color: var(--ln); }
.feed .hist-thumb { height: 380px; background-size: contain; background-repeat: no-repeat; }
.feed .hist-body { padding: 12px 14px; }
.feed .hist-body .p { -webkit-line-clamp: 3; font-size: 12px; }

.composer {
  border-top: 1px solid var(--ln);
  background: var(--pn);
  flex: none;
}
.composer-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.composer-head { display: flex; align-items: baseline; gap: 9px; }
.composer-head .mid { font: 500 13.5px var(--mono); color: var(--tx); }
.composer-head .c { font: 400 10px var(--mono); color: var(--dm2); margin-left: auto; }
textarea.flow-prompt {
  min-height: 70px;
  background: var(--pn2);
  border-radius: 10px;
  padding: 11px 13px;
  font: 400 12.5px/1.6 var(--sans);
}
.composer-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chips-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pchip {
  display: inline-flex; align-items: baseline; gap: 6px;
  font: 400 10px var(--mono);
  color: var(--dim);
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 999px;
  padding: 5px 11px;
}
.pchip:hover { border-color: var(--acc); color: var(--tx); }
.pchip .k { color: var(--dm2); letter-spacing: 0.04em; }
.pchip .v { color: var(--tx); font-weight: 500; }
.composer-cost { display: flex; align-items: baseline; gap: 7px; flex: none; }
.composer .btn-primary { font: 600 14px var(--sans); border-radius: 9px; padding: 12px 22px; flex: none; }
.composer .cost-break { padding-top: 2px; }
.composer .drop { min-height: 56px; }

/* ---- Electron shell ------------------------------------------------------ */

/* Window uses a hidden-inset title bar, so the header has to make room for the
   traffic lights and become the app's drag handle. */
html[data-shell="electron"] .topbar {
  padding-left: 86px;
  -webkit-app-region: drag;
}
html[data-shell="electron"] .topbar button,
html[data-shell="electron"] .topbar .seg,
html[data-shell="electron"] .topbar .credits { -webkit-app-region: no-drag; }
html[data-shell="electron"] .app { border-left: none; border-right: none; }

/* ---- structured (array) fields ------------------------------------------- */

.json-input {
  width: 100%;
  resize: vertical;
  background: var(--pn);
  border: 1px solid var(--ln);
  border-radius: 8px;
  padding: 9px 11px;
  font: 400 11px/1.55 var(--mono);
  color: var(--tx);
  outline: none;
}
.json-input:focus { border-color: var(--acc); }
.json-input.is-bad { border-color: var(--danger); }
.json-err { font: 400 10px/1.45 var(--mono); color: var(--danger); }

/* ---- close controls on overlays ------------------------------------------ */

/* Оверлей без своей кнопки закрытия — ловушка: в окне Electron ближайший
   «крестик» это системная кнопка закрытия приложения слева вверху, и рука
   тянется к ней. Кнопка живёт в правом верхнем углу самой панели, подальше
   от светофора. */
.ov-close {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 5;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font: 400 13px var(--sans);
  color: var(--dim);
  background: var(--pn2);
  border: 1px solid var(--ln);
  border-radius: 50%;
}
.ov-close:hover { color: var(--tx); border-color: var(--acc); }
/* Класс lb висит и на подложке (.scrim.lb), и на самой панели — селектор
   обязан цеплять только панель, иначе подложка теряет position:fixed. */
.modal, .scrim > .lb { position: relative; }

.pal-close {
  flex: none;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font: 400 12px var(--sans);
  color: var(--dm2);
  background: transparent;
  border: 1px solid var(--ln);
  border-radius: 50%;
}
.pal-close:hover { color: var(--tx); border-color: var(--acc); }

/* Аудио нечего показывать во всю высоту — плеер прижимается к нормальному
   размеру, а не плавает в чёрном поле. */
.lb-stage:has(audio) { padding: 40px 24px; }
.lb-stage audio { width: min(460px, 100%); }

/* Новинки каталога: акцентная рамка, чтобы модель было видно в общем списке,
   но без заливки — бейдж не должен спорить с названием. */
.badge-new {
  color: var(--acctx);
  border-color: var(--acc);
  background: var(--accs);
  font-weight: 600;
  letter-spacing: 0.04em;
}