/* Wizard „Nowy brand/produkt" (#/admin/brands/new) — design/VIEWS/admin-brand-new.md.
   Klasy per-widok; wartości wizualne z tokens.css (zero hex inline). */

.wizard-wrap { min-height: calc(100vh - var(--top-bar-h)); }

/* breadcrumb */
.wz-crumbs-row { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 36px; border-bottom: 1px solid var(--border); }
.wz-crumbs-row .crumbs { display: flex; align-items: center; gap: 9px;
  font-size: var(--font-size-base); color: var(--text-secondary); }
.wz-crumbs-row .crumbs a { color: var(--text-secondary); }
.wz-crumbs-row .crumbs a:hover { color: var(--text-primary); }
.wz-crumbs-row .crumbs b { color: var(--text-primary); font-weight: 600; }
.wz-crumbs-row .crumbs .sep { color: var(--text-faint); }
.wz-crumbs-row .faint { color: var(--text-faint); font-size: var(--font-size-sm); }

/* grid 300 / 1fr / 400 */
.wizard-grid { display: grid; grid-template-columns: 300px 1fr 400px; align-items: start; }

/* --- LEWA: stepper --- */
.wizard-rail { padding: 30px 26px; }
.wz-steps { display: flex; flex-direction: column; margin-top: 18px; }
.wz-step { display: grid; grid-template-columns: 16px 20px 1fr; gap: 12px; align-items: start;
  background: none; border: none; text-align: left; cursor: pointer; padding: 0 0 26px; position: relative; }
.wz-step:last-child { padding-bottom: 0; }
/* pionowa linia łącząca węzły */
.wz-node { justify-self: center; }
/* linia przechodzi PRZEZ środek węzła (kol.2 = 28–48px → środek 38px) */
.wz-step:not(:last-child)::before { content: ""; position: absolute; left: 37px; top: 22px; bottom: 4px;
  width: 1px; background: var(--border-ghost); }
.wz-step-num { font: 400 var(--font-size-sm) var(--font-mono); color: var(--text-ghost); line-height: 20px; }
.wz-node { width: 15px; height: 15px; border-radius: var(--radius-pill); border: 1.5px solid var(--text-disabled);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 3px;
  background: var(--surface-0); z-index: 1; font-size: 9px; font-weight: 700; }
.wz-step.is-active .wz-node { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim-bg); }
.wz-step.is-active .wz-node::after { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--accent); }
.wz-step.is-done .wz-node { border-color: var(--success); background: var(--success-dim-bg); color: var(--success); }
.wz-step-title { display: block; font-size: var(--font-size-md); font-weight: 500; color: var(--text-primary); }
.wz-step.is-pending .wz-step-title { color: var(--text-secondary); }
.wz-step-desc { display: block; font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: 1.5; margin-top: 3px; }
.wz-rail-note { margin-top: 26px; font: 400 var(--font-size-sm) var(--font-mono);
  color: var(--text-faint); line-height: 1.6; }

/* --- ŚRODEK: treść kroku --- */
.wizard-main { padding: 30px 40px 48px; border-right: 1px solid var(--border);
  border-left: 1px solid var(--border); min-height: calc(100vh - var(--top-bar-h) - 52px); }
.wz-h1 { font: 600 var(--font-size-xl) var(--font-ui); color: var(--text-primary); letter-spacing: -.01em; }
.wz-head-row { display: flex; align-items: center; justify-content: space-between; }
.wz-sub { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.5; margin-top: 8px; max-width: 640px; }
.wizard-main .field-label { margin-top: 20px; }
.wz-hint { color: var(--text-tertiary); font-weight: 400; }
.wizard-main .field, .wizard-main .wz-ta { width: 100%; box-sizing: border-box; }
.wz-ta { font: 400 var(--font-size-base)/1.5 var(--font-ui); resize: vertical; }
.wz-slug-view { color: var(--text-secondary); }
.wz-select { justify-content: space-between; max-width: 260px; cursor: pointer; }
.wz-err { color: var(--danger); font-size: var(--font-size-sm); min-height: 14px; margin-top: 4px; }

.wizard-actions { display: flex; align-items: center; gap: 20px; margin-top: 34px; }
.wz-foot-note { color: var(--text-tertiary); font-size: var(--font-size-base); margin-left: auto; }

/* logo sloty (reuse .own-master-drop z kreator.css jako baza) */
.logo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wz-logo-slot { min-height: 120px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; text-align: center; cursor: pointer; position: relative; }
.wz-logo-slot.is-filled { border-style: solid; }
.wz-up-ico { color: var(--text-secondary); display: inline-flex; }
.wz-drop-title { font-size: var(--font-size-base); color: var(--text-primary); }
.wz-drop-sub { font-size: var(--font-size-sm); color: var(--text-tertiary); }
.wz-pick { color: var(--accent-soft); }
.wz-logo-name { font: 500 var(--font-size-base) var(--font-mono); color: var(--text-primary); }

/* fonty */
.wz-fonts { display: flex; flex-direction: column; gap: 8px; }
.wz-font-row { display: flex; align-items: center; gap: 14px; background: var(--surface-inset);
  border: 1px solid var(--border-field); border-radius: var(--radius-2); padding: 10px 14px; }
.wz-font-key { font: 400 var(--font-size-sm) var(--font-mono); color: var(--text-tertiary); min-width: 68px; }
.wz-font-name { font-size: var(--font-size-base); color: var(--text-primary); flex: 1; }
.wz-font-pick { flex: 1; color: var(--accent-soft); }
.wz-font-tail { display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: var(--font-size-sm); color: var(--text-secondary); }
.wz-font-fallback { color: var(--text-faint); font-family: var(--font-mono); }

/* --- PRAWA: aside --- */
.wizard-aside { background: var(--surface-rail); padding: 30px 28px;
  min-height: calc(100vh - var(--top-bar-h) - 52px); }
.wizard-aside .section-label { display: block; margin-bottom: 14px; }
.wz-aside-foot { margin-top: 22px; font: 400 var(--font-size-sm) var(--font-mono);
  color: var(--text-faint); line-height: 1.6; }

/* krok1 aside — podgląd logo */
.wz-logo-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-logo-prev { aspect-ratio: 16/10; border: 1px solid var(--border-field); border-radius: var(--radius-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.wz-logo-prev.dark { background: var(--surface-inset); }
.wz-logo-prev.light { background: #EEF2F7; }
.wz-logo-ph { font: 400 10px var(--font-mono); color: var(--text-faint); border: 1px dashed var(--border-ghost);
  border-radius: var(--radius-1); padding: 6px 12px; }
.wz-logo-prev.light .wz-logo-ph { color: #57606E; border-color: #C7D1DE; }
.wz-prev-cap { font-size: var(--font-size-sm); color: var(--text-tertiary); }
.wz-logo-prev.light .wz-prev-cap { color: #57606E; }
.wz-logo-has { font: 500 11px var(--font-mono); color: var(--text-secondary); }
.wz-chip-prev { display: inline-flex; flex-direction: column; gap: 3px; border: 1px solid var(--border-field);
  border-radius: var(--radius-3); padding: 7px 12px; }
.wz-chip-logo { font: 400 10px var(--font-mono); color: var(--text-faint); border: 1px dashed var(--border-ghost);
  border-radius: var(--radius-1); padding: 2px 8px; align-self: flex-start; }
.wz-chip-name { font: 400 9.5px var(--font-ui); color: var(--text-tertiary); }

/* krok2 — kolory */
.wz-colors { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.wz-color-row, .wz-color-add { display: flex; align-items: center; gap: 14px; }
.wz-swatch { width: 34px; height: 34px; border-radius: var(--radius-2); border: 1px solid var(--border-field); flex: none; }
.wz-swatch.is-empty { border-style: dashed; background: var(--surface-inset); }
.wz-hex, .wz-newhex { width: 110px; text-transform: uppercase; }
.wz-color-role { font-size: var(--font-size-base); color: var(--text-secondary); }
.wz-axis-pill { margin-left: auto; font: 500 10px var(--font-mono); color: var(--accent-soft);
  border: 1px solid var(--accent-dim-border); border-radius: var(--radius-1); padding: 3px 9px; }
.wz-color-plus, .wz-color-add .link-action { color: var(--accent-soft); }
.wz-color-add { margin-top: 14px; }
.wz-axis-card { padding: 16px 18px; }
.wz-axis-head { font: 500 var(--font-size-md) var(--font-ui); color: var(--text-primary); }
.wz-axis-meta { font: 400 11px var(--font-mono); color: var(--text-tertiary); margin-left: 4px; }
.wz-osw-row { display: flex; gap: 10px; margin: 14px 0; }
.wz-osw { width: 34px; height: 34px; border-radius: var(--radius-2); border: 1px solid var(--border-field); }
.wz-osw.is-add { display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); border-style: dashed; }
.wz-axis-note { font-size: var(--font-size-sm); color: var(--text-tertiary); line-height: 1.5; }

/* krok3 — produkty */
.wz-prods { margin-top: 16px; }
.wz-prod-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); }
.wz-prod-thumb { width: 48px; height: 40px; flex: none; position: relative; }
.wz-hero-badge { position: absolute; top: -7px; left: -5px; font: 600 8.5px var(--font-mono);
  color: var(--on-accent); background: var(--accent); border-radius: var(--radius-1); padding: 1px 5px; }
.wz-prod-body { min-width: 180px; }
.wz-prod-name { font-size: var(--font-size-md); font-weight: 500; color: var(--text-primary); }
.wz-prod-cat { font: 400 11.5px var(--font-mono); color: var(--text-tertiary); margin-top: 2px; }
.wz-prod-count { color: var(--text-secondary); font-size: var(--font-size-sm); margin-left: auto; }
.wz-prod-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary); min-width: 82px; }
.wz-prod-plus { display: inline-block; margin-top: 14px; color: var(--accent-soft); }
.wz-empty { font-size: var(--font-size-base); color: var(--text-tertiary); padding: 14px 0; }

/* krok3 aside — formularz produktu */
.wz-cat-opts, .wz-cat-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-cat-opt { font-size: var(--font-size-sm); color: var(--text-secondary); background: var(--surface-inset);
  border: 1px solid var(--border-field); border-radius: var(--radius-2); padding: 6px 11px; cursor: pointer; }
.wz-cat-opt.is-sel { color: var(--accent-soft); border-color: var(--accent-dim-border); background: var(--accent-dim-bg); }
.wz-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.wz-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--text-secondary);
  background: var(--surface-1); border: 1px solid var(--border-field); border-radius: var(--radius-2); padding: 3px 8px; }
.wz-chip-x { cursor: pointer; color: var(--text-tertiary); }
.wz-chip-in { background: none; border: none; outline: none; color: var(--text-primary);
  font: 400 11px var(--font-ui); min-width: 60px; }
.wz-price-row { display: grid; grid-template-columns: 1fr 1fr 90px; gap: 12px; }
.wz-price-row .field { width: 100%; box-sizing: border-box; }
.wz-kv { width: 100%; box-sizing: border-box; }
.wz-pf-actions { margin-top: 22px; }

/* krok4 — assety i ingest */
.wz-dropzone { min-height: 96px; margin-top: 18px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.wz-dropzone.is-over { border-color: var(--accent); }
.wz-ing-head { display: flex; align-items: baseline; gap: 12px; margin-top: 26px; }
.wz-ing-meta { font: 400 11px var(--font-mono); color: var(--text-tertiary); }
.wz-ings { margin-top: 14px; }
.wz-ing-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); }
.wz-ing-thumb { width: 40px; height: 34px; flex: none; }
.wz-ing-main { flex: 1; }
.wz-ing-name { font-size: var(--font-size-base); color: var(--text-primary); }
.wz-ing-bar { margin-top: 8px; }
.wz-ing-bar .progress-fill.is-done { background: var(--success); }
.wz-ing-status { font-size: var(--font-size-sm); white-space: nowrap; }
.wz-ing-status.ok { color: var(--success); }
.wz-ing-status.run { color: var(--accent-soft); }
.wz-ing-status.q { color: var(--text-tertiary); }
.wz-hero-card { border: 1px solid var(--border-field); border-radius: var(--radius-3); padding: 16px; }
.wz-hero-name { font-size: var(--font-size-md); font-weight: 500; color: var(--text-primary); }
.wz-hero-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.wz-hero-thumb { width: 64px; height: 52px; position: relative; }
.wz-hero-score { position: absolute; bottom: 3px; left: 4px; font: 500 10px var(--font-mono); color: var(--accent-soft); }

/* krok5 — kategoria + defaulty */
.wz-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.wz-radio-card { display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer;
  background: var(--surface-inset); border: 1px solid var(--border-field); border-radius: var(--radius-3); padding: 16px 18px; }
.wz-radio-card.is-sel { border-color: var(--accent); box-shadow: var(--focus-ring); }
.wz-radio-dot { width: 15px; height: 15px; border-radius: var(--radius-pill); border: 1.5px solid var(--text-disabled);
  flex: none; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; }
.wz-radio-card.is-sel .wz-radio-dot { border-color: var(--accent); }
.wz-radio-card.is-sel .wz-radio-dot::after { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--accent); }
.wz-radio-title { display: block; font-size: var(--font-size-md); font-weight: 500; color: var(--text-primary); }
.wz-radio-sub { display: block; font-size: var(--font-size-sm); color: var(--text-tertiary); margin-top: 4px; line-height: 1.5; }
.wz-cat-pick { margin-top: 14px; }
.wz-pack-row { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.wz-pack-sel { flex: 1; max-width: 420px; justify-content: space-between; cursor: pointer; }
.wz-models { margin-top: 14px; }
.wz-model-row { display: grid; grid-template-columns: 120px 1fr 84px; gap: 16px; align-items: center; padding: 8px 0; }
.wz-model-step { font-size: var(--font-size-base); color: var(--text-secondary); }
.wz-model-sel { justify-content: space-between; cursor: pointer; }
.wz-model-cost { text-align: right; }

/* krok5 aside — podsumowanie */
.wz-sum { display: flex; flex-direction: column; gap: 10px; }
.wz-sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--font-size-base); color: var(--text-secondary); }
.wz-sum-row .mono { color: var(--text-primary); }
.wz-ok { color: var(--success); }
.wz-warn { color: var(--accent-soft); }
.wz-sum-note { margin-top: 18px; font: 400 11.5px/1.6 var(--font-mono); color: var(--text-secondary);
  border: 1px solid var(--border-field); border-radius: var(--radius-3); padding: 14px 16px; }

/* menu dropdowna (bindSelect) */
.wz-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; }
.field.select { position: relative; }

/* --- SUKCES --- */
.wz-success { max-width: 1000px; margin: 0 auto; padding: 70px 40px; text-align: center; }
.wz-success-check { width: 68px; height: 68px; border-radius: var(--radius-pill); border: 2px solid var(--success);
  color: var(--success); display: inline-flex; align-items: center; justify-content: center; }
.wz-success-check svg { width: 30px; height: 30px; }
.wz-success-title { font: 600 26px var(--font-ui); color: var(--text-primary); margin-top: 26px; }
.wz-success-sub { font-size: var(--font-size-lg); color: var(--text-secondary); margin-top: 10px; }
.wz-success-cta { display: flex; gap: 16px; justify-content: center; margin-top: 34px; }
.wz-next-label { display: block; margin: 60px 0 18px; text-align: left; }
.wz-next-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.wz-next-card { background: linear-gradient(180deg, var(--accent-dim-bg), transparent 42%) var(--surface-inset);
  border: 1px solid var(--border-field); border-radius: var(--radius-4); padding: 20px 22px; }
.wz-next-title { font: 600 var(--font-size-lg) var(--font-ui); color: var(--text-primary); }
.wz-next-body { font-size: var(--font-size-base); color: var(--text-secondary); line-height: 1.55; margin: 10px 0 14px; }
.wz-next-link { color: var(--accent-soft); }

/* degradacja 1024–1280: aside pod spód */
@media (max-width: 1279px) {
  .wizard-grid { grid-template-columns: 260px 1fr; }
  .wizard-aside { grid-column: 1 / -1; border-top: 1px solid var(--border); }
}