.kv-root{--kv-paper:var(--hz-paper,#F1F1EE);--kv-panel:var(--hz-panel,#17191C);--kv-orange:var(--hz-signal,#FF6A2A);box-sizing:border-box;max-width:100%;min-width:0;padding:24px;background:var(--kv-paper);color:var(--kv-panel);border:1px solid #D7D8D3;border-radius:6px;font:14px/1.45 var(--hz-text,'Golos Text',sans-serif)}
.kv-root *{box-sizing:border-box}
.kv-root button{cursor:pointer}
.kv-root :focus-visible{outline:3px solid var(--kv-orange);outline-offset:2px}
.kv-top{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:22px}
.kv-chooser{min-width:0;flex:1}
.kv-chooser-head{display:flex;align-items:center;gap:12px;margin:0 0 9px}
.kv-chooser-head strong{font-size:16px}
.kv-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;max-width:620px}
.kv-root .kv-choices{display:grid}
.kv-choice{min-width:0;white-space:normal;text-align:left!important}
.kv-choice span{display:block;font-size:15px}
.kv-root .kv-choice small{font:12px/1.3 var(--hz-mono,'JetBrains Mono',monospace);opacity:.7}
.kv-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.kv-auto{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kv-track{display:flex;gap:4px;width:110px}
.kv-bar{position:relative;display:block;flex:1;height:4px;background:#D1D2CD;border-radius:9px;overflow:hidden}
.kv-bar:before{content:'';display:block;width:var(--progress,0%);height:100%;background:var(--kv-orange)}
.kv-auto-label{white-space:nowrap;font:12px/1.2 var(--hz-mono,'JetBrains Mono',monospace)}
.kv-toggle{width:38px;height:38px;border-radius:6px;border:1px solid #A8AAA5;background:transparent;color:inherit}
.kv-root .kv-toggle{width:38px;height:38px;border-radius:6px}
.kv-toggle:hover,.kv-replay:hover{border-color:var(--kv-orange)}
.kv-replay{min-height:38px;padding:6px 11px;border:1px solid #A8AAA5;border-radius:6px;background:transparent;color:inherit;font:600 12px var(--hz-text,'Golos Text',sans-serif)}

/* Раскладка: сверху «01 товар в базе» и «02 сборка», под ними во всю ширину «03 готовое объявление» —
   страница объявления в интерфейсе Авито (.avm-item), ей нужна ширина, чтобы встать как на Авито */
.kv-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2.34fr);gap:18px;align-items:start}
.kv-source,.kv-flow{min-width:0;border:1px solid #D7D8D3;border-radius:6px;padding:15px;background:#fff}
.kv-kicker{margin:0 0 12px;color:#5F6466;font:12px/1.3 var(--hz-mono,'JetBrains Mono',monospace);letter-spacing:.04em;text-transform:uppercase}
.kv-source-image,.kv-frame-image{overflow:hidden;background:#F1F1EE;border-radius:4px}
.kv-source-image{aspect-ratio:4/3}
.kv-source-image img,.kv-frame-image img{display:block;width:100%;height:100%;object-fit:cover}
.kv-source-name{display:block;margin:12px 0 3px;font:700 21px/1.1 var(--hz-display,'Sofia Sans Condensed',sans-serif);text-wrap:balance}
.kv-source-sku{font:12px var(--hz-mono,'JetBrains Mono',monospace);color:#5F6466}
.kv-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 20px;align-items:start}
.kv-flow-text{min-width:0}
.kv-timer{margin:0 0 7px;font:650 18px/1.25 var(--hz-display,'Sofia Sans Condensed',sans-serif)}
.kv-hint{margin:0 0 16px}
.kv-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin-bottom:15px}
.kv-root .kv-stages{display:grid}
.kv-stage{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;position:relative;padding:10px 5px 14px!important;white-space:normal!important;font-size:12px!important}
.kv-stage-number{font:12px var(--hz-mono,'JetBrains Mono',monospace);opacity:.65}
.kv-stage-meter{position:absolute;bottom:4px;left:8px;right:8px;height:3px;border-radius:3px;background:#CACCC8}
.kv-stage[aria-pressed=true] .kv-stage-meter,.kv-stage-done .kv-stage-meter{background:var(--kv-orange)}
.kv-message{min-height:42px;margin:0 0 8px;font-size:13px}
.kv-frame{margin:0;min-width:0}
.kv-frame-image{aspect-ratio:4/3}
.kv-frame figcaption{margin:6px 0 0;color:#5F6466;font:12px var(--hz-mono,'JetBrains Mono',monospace)}

/* 03 — итог. До третьего этапа объявление «собирается» (приглушено), на третьем — готово */
.kv-result{grid-column:1/-1;position:relative;min-width:0}
.kv-result-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;margin:6px 0 10px}
.kv-result-head .kv-kicker{margin:0}
.kv-status{margin:0;padding:5px 10px;border-radius:4px;background:#E4E5E0;color:#4D5254;font-size:13px;font-weight:600;line-height:1.3}
.kv-result[data-state=ready] .kv-status{background:#ECF4ED;color:#235D37}
.kv-ad{min-width:0;transition:opacity .45s ease,filter .45s ease}
.kv-ad .avm-item{border:1px solid #D7D8D3}
.kv-result[data-state=pending] .kv-ad{opacity:.42;filter:grayscale(1)}
.kv-ad-probe{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
.kv-ad-note{margin:8px 0 0;color:#5F6466;font-size:12px;line-height:1.4}

.kv-boundary{display:flex;gap:14px;margin-top:16px}
.kv-boundary p{flex:1;margin:0;padding:10px 12px;border-left:3px solid var(--kv-orange);background:#E7E8E3;font-size:12px}
.kv-more{margin-top:12px}
.kv-more summary{cursor:pointer;font-weight:700}
.kv-more summary:hover{color:var(--kv-orange)}
.kv-log{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:1px;background:#DDD}
.kv-log li{display:grid;grid-template-columns:90px minmax(0,1fr);gap:4px 12px;padding:10px;background:#fff;font-size:12px}
.kv-log-time{font:12px var(--hz-mono,'JetBrains Mono',monospace);color:#5F6466}
.kv-log-detail{grid-column:2;color:#5F6466}
.kv-caption{margin:12px 0 0;font-size:12px;color:#5F6466}
.kv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1199px){.kv-top{display:block}.kv-controls{justify-content:flex-start;margin-top:12px}.kv-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.kv-flow{display:block}}
/* телефон: 01 → 02 → 03 столбиком, итог — компактное объявление (.avm-item_compact, выбирает JS) */
@media(max-width:699px){.kv-root{padding:14px}.kv-choices{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}.kv-choice:last-child{grid-column:1/-1}.kv-root .kv-choice,.kv-root .kv-stage{min-height:44px}.kv-controls{display:grid;grid-template-columns:1fr;gap:8px}.kv-auto{flex-wrap:nowrap;justify-content:space-between}.kv-track{flex:none;width:56px}.kv-auto-label{white-space:nowrap}.kv-root .kv-toggle{width:44px;height:44px}.kv-replay{width:100%;min-height:44px}.kv-grid{display:flex;flex-direction:column;gap:12px}.kv-source{display:grid;grid-template-columns:90px minmax(0,1fr);gap:2px 12px;align-items:center}.kv-source .kv-kicker{grid-column:1/-1;margin-bottom:5px}.kv-source-image{grid-row:2/4;width:90px}.kv-source-name{margin:0}.kv-source-sku{align-self:start}.kv-flow .kv-frame-image{aspect-ratio:16/10}.kv-stage-number{display:none}.kv-boundary{display:grid;gap:7px}}
@media(max-width:359px){.kv-root{padding:10px}.kv-chooser-head{flex-wrap:wrap}.kv-choice{padding:8px!important}.kv-choice span{font-size:14px}.kv-auto-label{white-space:normal}.kv-root .kv-stages{gap:2px;padding:3px}.kv-stage{padding:10px 2px 14px!important;letter-spacing:-.01em}.kv-flow{padding:12px}}
@media(prefers-reduced-motion:reduce){.kv-root .kv-toggle{width:auto;padding:0 10px;white-space:nowrap}.kv-track{display:none}}
@media(prefers-reduced-motion:reduce){.kv-root *{animation:none!important;transition:none!important}}

/* A2: the reduced-motion text button must wrap with its status at 360–699px. */
@media(max-width:699px){
  .kv-controls{grid-template-columns:minmax(0,1fr);min-width:0}
  .kv-auto{min-width:0;flex-wrap:wrap}
  .kv-auto-label{white-space:normal;flex:1 1 120px}
}