/* PicSeller 2.0 — стили модуля «Создание» (js/screens/create.js): главная (#/app), мастер «Создать» (#/create…), результат (#/result/:id).
   Только классы с префиксом cr-; токены и компоненты — из base.css. Брейкпоинты 600 · 900 · 1200.
   Module "create" styles: home, create wizard, result. cr- prefix only; tokens/components come from base.css. */

/* ==================================================================
   0. Общее / Shared
   ================================================================== */
.cr-page { min-width: 0; }
.cr-art { display: block; overflow: hidden; border-radius: 8px; background: #F7F3EC; box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-2) 85%, transparent), var(--shadow-1); }
.cr-art > svg { display: block; width: 100%; height: auto; }
.cr-grow { flex: 1 1 auto; }
.cr-btn-strong { --btn-fg: var(--primary); --btn-bd: color-mix(in srgb, var(--primary) 38%, var(--line-2)); }
.cr-kind-in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cr-kind-tick {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 2px var(--surface);
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.is-on > .cr-kind-tick { opacity: 1; transform: none; }
.cr-mock { margin-top: 14px; }

.cr-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cr-sec-title { margin: 0; font: 700 17px/1.3 var(--font-head); color: var(--ink); }
.cr-sec-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

.cr-fchip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; max-width: 100%; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  font: 500 12px/1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-fchip.is-more { color: var(--muted); }
.cr-fchip.is-warn { border-color: transparent; background: var(--warn-bg); color: var(--warn); }

@keyframes crFlash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 85%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes crIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes crPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.cr-flash { animation: crFlash .9s ease-out; }

/* ==================================================================
   1. Главная / Home
   ================================================================== */
.cr-home-head { margin-bottom: 18px; }
.cr-home-head .eyebrow { margin: 0 0 6px; }
.cr-brief { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.cr-brief a { color: var(--ink-2); font-weight: 500; text-decoration: none; }
.cr-brief a:hover { color: var(--primary); text-decoration: underline; }
.cr-dot { color: var(--muted); }

.cr-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 26px 30px 24px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line)); border-radius: var(--r-l);
  background:
    radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--accent-soft) 95%, transparent), transparent 70%),
    linear-gradient(120deg, var(--primary-soft) 0%, color-mix(in srgb, var(--primary-soft) 40%, var(--surface)) 55%, var(--surface) 100%);
}
@media (min-width: 1200px) { .cr-hero { grid-template-columns: minmax(0, 1fr) 340px; } }
.cr-hero-main { min-width: 0; }
.cr-hero-q { margin: 0 0 14px; font: 800 26px/1.15 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.cr-ask {
  position: relative; display: flex; align-items: center; gap: 10px; max-width: 720px; height: 60px; padding: 0 8px 0 16px;
  border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-2);
  transition: border-color .15s, box-shadow .15s;
}
.cr-ask:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent), var(--shadow-2); }
.cr-ask-ic { display: inline-flex; flex: none; color: var(--primary); }
.cr-ask-in { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 17px/1.2 var(--font); text-overflow: ellipsis; }
.cr-ask-in::placeholder { color: var(--muted); opacity: 1; }
.cr-ask-kbd { flex: none; }
.cr-ask-go { flex: none; height: 44px; padding: 0 18px; border-radius: 10px; }
.cr-parse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 28px; max-width: 720px; margin: 10px 0 14px; font-size: 13px; color: var(--muted); }
.cr-parse-hint { display: inline-flex; align-items: flex-start; gap: 6px; }
.cr-parse-hint .i { flex: none; margin-top: 2px; }
.cr-parse-lead { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); }
.cr-parse-lead .spinner { width: 14px; height: 14px; color: var(--primary); }
.cr-parse-lead .i { color: var(--ok); }
.cr-toks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cr-tok {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
  font: 600 13px/1 var(--font); animation: crPop .25s ease both;
}
.cr-tok.is-muted { color: var(--muted); font-weight: 500; }
.cr-tok-k { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--primary-soft); color: var(--primary); font: 600 12px/1 var(--font); }
.cr-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-quick-chip { background: color-mix(in srgb, var(--surface) 82%, transparent); }
.cr-quick-chip .i { color: var(--primary); }

.cr-hero-art { display: none; position: relative; height: 200px; }
@media (min-width: 1200px) { .cr-hero-art { display: block; } }
.cr-collage { position: absolute; inset: 0; }
.cr-col {
  position: absolute; display: block; overflow: hidden; border-radius: 8px; background: #F7F3EC;
  box-shadow: 0 16px 34px rgba(16, 32, 24, .2), 0 0 0 1px rgba(16, 32, 24, .06);
}
.cr-col > svg { display: block; width: 100%; height: auto; }
.cr-col-slide { left: 0; top: 74px; width: 206px; transform: rotate(-5deg); }
.cr-col-b { left: 226px; top: 26px; width: 112px; transform: rotate(7deg); }
.cr-col-a { left: 112px; top: 4px; width: 132px; transform: rotate(-1.5deg); z-index: 2; }

.cr-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
@media (min-width: 1200px) { .cr-home-grid { grid-template-columns: minmax(0, 1fr) 352px; } }
.cr-home-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cr-home-aside { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 700px) and (max-width: 1199px) { .cr-home-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.cr-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cr-block-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 700 18px/1.3 var(--font-head); color: var(--ink); }
.cr-block-title .count { background: var(--warn-bg); color: var(--warn); }

/* «Нужно внимание» / Attention */
.cr-att { margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.cr-att-item { display: flex; gap: 14px; padding: 16px 18px; }
.cr-att-item + .cr-att-item { border-top: 1px solid var(--line); }
.cr-att-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--info-bg); color: var(--info); }
.cr-att-ic.warn { background: var(--warn-bg); color: var(--warn); }
.cr-att-ic.err { background: var(--err-bg); color: var(--err); }
.cr-att-ic.ok { background: var(--ok-bg); color: var(--ok); }
.cr-att-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-att-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cr-att-title { margin: 0; font: 700 15px/1.35 var(--font-head); color: var(--ink); }
.cr-att-time { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cr-att-text { margin: 0; font-size: 14px; color: var(--ink-2); }
.cr-att-aff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cr-att-aff-l { font-size: 12px; color: var(--muted); }
.cr-aff {
  position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  font: 500 12px/1 var(--font); text-decoration: none;
}
.cr-aff span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cr-aff .i { flex: none; color: var(--muted); }
.cr-aff:hover { border-color: var(--primary); color: var(--ink); }
.cr-att-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 2px; }
.cr-att-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cr-att-empty { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r-l); background: var(--surface); }
.cr-att-empty > .i { flex: none; color: var(--ok); }
.cr-att-empty b { display: block; margin-bottom: 2px; font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.cr-att-empty span { font-size: 13px; color: var(--muted); }

/* «Продолжить работу» / Continue */
.cr-mats { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cr-mats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cr-mat {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: inherit; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .2s, transform .2s;
}
.cr-mat:hover { color: inherit; border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.cr-mat-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cr-stack { position: relative; display: block; height: 80%; aspect-ratio: 3 / 4; margin-right: 15%; }
.cr-stack-b, .cr-stack-f {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 6px; background: #F7F3EC;
  box-shadow: 0 6px 16px rgba(16, 32, 24, .14), 0 0 0 1px rgba(16, 32, 24, .07);
}
.cr-stack-b { transform: translateX(36%) rotate(7deg) scale(.94); transform-origin: 50% 100%; }
.cr-stack-b > svg, .cr-stack-f > svg { display: block; width: 100%; height: 100%; }
.cr-stack-wide { width: 72%; height: auto; aspect-ratio: 16 / 9; margin: 0 12% 0 0; }
.cr-stack-wide .cr-stack-b { transform: translate(15%, -14%) rotate(5deg) scale(.92); transform-origin: 50% 50%; }
.cr-mat-build {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-2);
  font-size: 12px; color: var(--ink-2);
}
.cr-mat-build-t { display: inline-flex; align-items: center; gap: 6px; }
.cr-mat-build .spinner { width: 12px; height: 12px; color: var(--info); }
.cr-mat-new { position: absolute; top: 10px; left: 10px; z-index: 2; }
.cr-mat-body { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; min-width: 0; }
.cr-mat-title { display: -webkit-box; min-height: 2.7em; overflow: hidden; font: 600 14px/1.35 var(--font); color: var(--ink); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cr-mat-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-mat-sub { font-size: 12px; color: var(--muted); }

/* Боковые карточки / Side cards */
.cr-side-card { padding: 18px 20px 20px; }
.cr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cr-card-title { margin: 0; font: 700 16px/1.3 var(--font-head); color: var(--ink); }
.cr-card-head .status { font-size: 12px; }
.cr-none { margin: 0; font-size: 14px; color: var(--muted); }

.cr-jobs { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cr-job { display: flex; gap: 12px; }
.cr-job-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.cr-job.is-done .cr-job-ic { background: var(--ok-bg); color: var(--ok); }
.cr-job-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-job-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cr-job-title { min-width: 0; font: 600 14px/1.3 var(--font); color: var(--ink); }
.cr-job-pct { flex: none; font: 600 13px/1 var(--font); color: var(--ink-2); }
.cr-job.is-done .cr-job-pct { color: var(--ok); }
.cr-job-sub { font-size: 12px; line-height: 1.4; color: var(--muted); }
.cr-job-open { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font: 600 13px/1 var(--font); color: var(--primary); text-decoration: none; }
.cr-job-open:hover { text-decoration: underline; }
.cr-jobs-q { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--muted); }
.cr-jobs-q .i { flex: none; margin-top: 1px; }

.cr-site-body { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: start; }
.cr-site-pv { position: relative; display: block; border-radius: 16px; overflow: hidden; }
.cr-site-pv::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.cr-site-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-site-dom { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; margin-bottom: 6px; font: 600 13px/1.3 var(--font); color: var(--primary); text-decoration: none; }
.cr-site-dom:hover { text-decoration: underline; }
.cr-site-kpi { display: flex; align-items: baseline; gap: 8px; }
.cr-site-v { font: 800 26px/1.05 var(--font-head); letter-spacing: -.01em; color: var(--ink); }
.cr-site-l { font-size: 12px; color: var(--muted); }
.cr-site-spark { display: block; margin: 4px 0 6px; }
.cr-site-dl { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cr-site-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 13px; }
.cr-site-dl dt { color: var(--muted); }
.cr-site-dl dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--ink); }
.cr-site-new { text-decoration: none; }
.cr-site .btn-block { margin-top: 16px; }

.cr-chs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cr-chs li + li { border-top: 1px solid var(--line); }
.cr-ch { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 0; color: inherit; text-decoration: none; }
.cr-ch:hover { color: inherit; }
.cr-ch:hover .cr-ch-name { color: var(--primary); }
.cr-ch-mono { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font: 800 12px/1 var(--font-head); }
.cr-ch-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-ch-name { font: 600 14px/1.3 var(--font); color: var(--ink); }
.cr-ch-sub { overflow: hidden; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.cr-ch-dot { flex: none; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.cr-ch-dot.off { background: var(--faint); box-shadow: none; }
.cr-ch.is-off .cr-ch-mono { border-style: dashed; color: var(--muted); }
.cr-ch-link { display: inline-flex; flex: none; align-items: center; gap: 4px; font: 600 13px/1 var(--font); color: var(--primary); }

/* ==================================================================
   2. Создать / Create hub
   ================================================================== */
.cr-q { margin-bottom: 28px; }
.cr-q-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.cr-q-n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font: 700 13px/1 var(--font); }
.cr-q-title { margin: 0; font: 700 20px/1.3 var(--font-head); color: var(--ink); }
.cr-q-opt { font-size: 13px; color: var(--muted); }
.cr-q-opt:empty { display: none; }

.cr-kinds { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199px) { .cr-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cr-kind {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
.cr-kind:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.cr-kind.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.cr-kind:has(.cr-kind-in:focus-visible), .cr-mp:has(.cr-kind-in:focus-visible), .cr-style:has(.cr-kind-in:focus-visible), .cr-tv:has(.cr-kind-in:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cr-kind-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cr-kind-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.cr-kind-title { display: flex; align-items: flex-start; gap: 6px; font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.cr-kind-title .i { flex: none; margin-top: 1px; color: var(--primary); }
.cr-kind-text { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cr-fan { position: relative; display: block; height: 84%; aspect-ratio: 3 / 4; margin-right: 18%; }
.cr-fan-b, .cr-fan-f { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 5px; background: #F7F3EC; box-shadow: 0 6px 14px rgba(16, 32, 24, .14), 0 0 0 1px rgba(16, 32, 24, .07); }
.cr-fan-b { transform: translateX(40%) rotate(8deg) scale(.92); transform-origin: 50% 100%; }
.cr-fan-b > svg, .cr-fan-f > svg { display: block; width: 100%; height: 100%; }
.cr-kind-slide { display: block; width: 84%; overflow: hidden; border-radius: 5px; box-shadow: 0 6px 14px rgba(16, 32, 24, .14), 0 0 0 1px rgba(16, 32, 24, .07); }
.cr-kind-slide > svg { display: block; width: 100%; height: auto; }
.cr-kind-site { position: absolute; left: 9%; right: 9%; top: 13%; bottom: -40%; overflow: hidden; border-radius: 6px; box-shadow: 0 6px 14px rgba(16, 32, 24, .14); }
.cr-kind-blank { display: grid; place-items: center; height: 80%; aspect-ratio: 3 / 4; border: 2px dashed var(--line-2); border-radius: 6px; background: var(--surface); color: var(--muted); }
.cr-kind-blank-in { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 12px/1.2 var(--font); text-align: center; }
.cr-blank { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--surface); }
.cr-blank-l { font: 600 13px/1 var(--font); color: var(--ink-2); }
.cr-chip-dim { margin-left: 2px; font-weight: 500; color: var(--muted); }
.chip[aria-checked="true"] .cr-chip-dim { color: inherit; }

.cr-by { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.cr-by-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink-2);
  font: 600 14px/1 var(--font); white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
.cr-by-tab span { overflow: hidden; text-overflow: ellipsis; }
.cr-by-tab:hover { border-color: var(--primary); color: var(--ink); }
.cr-by-tab.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.cr-by-panel { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); }
.cr-plist-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.cr-psearch { flex: 1 1 260px; max-width: 420px; }
.cr-plist { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1099px) { .cr-plist { grid-template-columns: minmax(0, 1fr); } }
.cr-prow {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 70px; padding: 10px 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .15s, background-color .15s;
}
.cr-prow:hover { border-color: var(--line-2); background: var(--surface-2); }
.cr-prow.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.cr-prow input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.cr-prow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cr-prow-name { font: 600 14px/1.3 var(--font); color: var(--ink); }
.cr-prow-meta { font-size: 12px; color: var(--muted); }
.cr-prow-issue { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warn); }
.cr-prow-issue .i { flex: none; }
.cr-prow-ch { flex: none; max-width: 40%; }
.cr-plist-empty { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); font-size: 13px; }
.cr-plist-empty > div { flex: 1 1 200px; }
.cr-plist-empty b { display: block; color: var(--ink); }
.cr-drop {
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px; padding: 18px; text-align: left; cursor: pointer;
  border: 1.5px dashed var(--line-2); border-radius: var(--r); background: var(--surface-2); color: var(--ink-2);
}
.cr-drop:hover { border-color: var(--primary); color: var(--ink); }
.cr-drop > .i { flex: none; color: var(--primary); }
.cr-drop b { display: block; font: 600 14px/1.3 var(--font); color: var(--ink); }
.cr-drop span span { font-size: 12px; color: var(--muted); }
.cr-drop-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cr-drop-files:empty { display: none; }
.cr-up { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); animation: crIn .3s ease both; }
.cr-up-img { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: var(--surface-2); }
.cr-up-img > svg { width: 100%; height: 100%; }
.cr-up-t { display: flex; flex-direction: column; font: 600 13px/1.3 var(--font); color: var(--ink); }
.cr-up-t span { font-size: 12px; font-weight: 400; color: var(--muted); }
.cr-by-panel > .hint { margin: 12px 0 0; }
.cr-sku { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.cr-sku .field { flex: 1 1 260px; max-width: 420px; }
.cr-sku-go { flex: none; }
.cr-sku-res { margin-top: 12px; }
.cr-sku-res:empty { display: none; }
.cr-sku-load { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.cr-found-card { display: flex; align-items: center; gap: 14px; max-width: 560px; padding: 12px 14px; border: 1.5px solid var(--primary); border-radius: var(--r); background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface)); animation: crIn .3s ease both; }
.cr-found-card-main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cr-found-card-main b { font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.cr-q2-skip { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--info-bg); color: var(--ink); font-size: 14px; }
.cr-q2-skip .i { flex: none; margin-top: 1px; color: var(--info); }

.cr-next-wrap { position: sticky; bottom: 16px; z-index: 10; display: flex; justify-content: flex-end; margin-top: 8px; pointer-events: none; }
.cr-next {
  display: flex; align-items: center; gap: 16px; max-width: 100%; padding: 10px 10px 10px 18px; pointer-events: auto;
  border: 1px solid var(--line); border-radius: var(--r-l); background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-3);
}
.cr-next-sum { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-next-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cr-next-k .i { color: var(--primary); }
.cr-next-v { max-width: 340px; overflow: hidden; font: 700 15px/1.3 var(--font-head); color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }

/* ==================================================================
   3. Мастер: общие части / Wizard shared parts
   ================================================================== */
.cr-wh { margin-bottom: 20px; }
.cr-wh .crumbs { margin-bottom: 10px; }
.cr-wh-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; }
.cr-wh-text { min-width: 0; max-width: 660px; }
.cr-wh-steps { padding-bottom: 4px; }
.cr-wiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1200px) { .cr-wiz { grid-template-columns: minmax(0, 1fr) 360px; } }
.cr-wiz-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cr-wiz-aside { min-width: 0; }
.cr-aside-in { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1200px) { .cr-aside-in { position: sticky; top: calc(var(--top-h) + 20px); } }
.cr-pv { padding: 16px; }
.cr-pv-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cr-pv-title { margin: 0; font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.cr-pv-art { border-radius: 10px; }
.cr-pv-note { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cr-pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-pv-nav { display: flex; gap: 8px; }
.cr-pv-nav .btn-lg { padding: 0 16px; }
@media (min-width: 600px) and (max-width: 1199px) {
  .cr-source .cr-pv { display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "art head" "art note"; column-gap: 20px; align-content: start; }
  .cr-source .cr-pv-head { grid-area: head; }
  .cr-source .cr-pv-art { grid-area: art; }
  .cr-source .cr-pv-note { grid-area: note; align-self: start; }
  .cr-pv-nav { justify-content: flex-end; }
  .cr-pv-nav .cr-grow { flex: 0 1 auto; }
}

/* Шаг 1 / Step 1 */
.cr-saved { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font); color: var(--muted); border-radius: var(--r-pill); padding: 4px 6px; }
.cr-saved .i { color: var(--ok); }
.cr-saved .spinner { width: 12px; height: 12px; }
.cr-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; align-items: start; }
.cr-ph { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-ph-btn {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface-2); transition: border-color .15s, box-shadow .15s;
}
.cr-ph-btn > svg { display: block; width: 100%; height: 100%; }
.cr-ph-btn:hover { border-color: var(--primary); }
.cr-ph.is-main .cr-ph-btn { cursor: default; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.cr-ph.is-dark .cr-ph-btn { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.cr-ph-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font: 600 12px/1 var(--font); pointer-events: none; }
.cr-ph-warn { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--warn-bg); color: var(--warn); pointer-events: none; }
.cr-ph-cap { font-size: 12px; color: var(--muted); }
.cr-ph.is-dark .cr-ph-cap { color: var(--warn); }
.cr-ph-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1; cursor: pointer;
  border: 1.5px dashed var(--line-2); border-radius: var(--r); background: transparent; color: var(--muted); font: 600 13px/1 var(--font);
  transition: border-color .15s, color .15s, background-color .15s;
}
.cr-ph-add:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.cr-ph-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: default; font-size: 12px; color: var(--muted); }
.cr-bgrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; }
.cr-bgrow .switch { min-height: 40px; }
.cr-tip { flex-wrap: wrap; align-items: center; margin-top: 8px; padding: 10px 12px 10px 14px; }
.cr-tip > .i { margin-top: 0; }
.cr-tip .callout-body { flex: 1 1 240px; }
.cr-tip-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cr-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.cr-meta a { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; text-decoration: none; }
.cr-meta a:hover { text-decoration: underline; }
.cr-pane { padding-top: 14px; }
.cr-facts { margin: 0; padding: 0; list-style: none; }
.cr-fact { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); border-radius: 6px; }
.cr-fact-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--primary); }
.cr-fact.is-unconf .cr-fact-ic { border-color: transparent; background: var(--warn-bg); color: var(--warn); }
.cr-fact-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-fact-text { font: 500 14.5px/1.35 var(--font); color: var(--ink); }
.cr-fact-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-fact-used { font-size: 12px; color: var(--muted); }
.cr-fact-hint { font-size: 12px; color: var(--warn); }
.cr-fact-acts { display: flex; flex: none; align-items: center; gap: 2px; }
.cr-fact-edit { max-width: 440px; }
.cr-facts-empty { display: flex; align-items: center; gap: 10px; padding: 18px 0; font-size: 14px; color: var(--muted); }
.cr-facts-empty .i { flex: none; }
.cr-addfact-wrap { margin-top: 14px; }
.cr-addfact { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-addfact .input { flex: 1 1 240px; max-width: 440px; }
.cr-addfact-wrap .hint { margin: 6px 0 0; }
.cr-find-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cr-find-row .mock-ctl { padding: 6px 10px; }
.cr-found-load { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.cr-found { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface-2); animation: crIn .3s ease both; }
.cr-found-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.cr-found-title { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.cr-found-title .i { color: var(--primary); }
.cr-found-text { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--primary); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--surface); font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.cr-hl { padding: 1px 3px; border-radius: 4px; background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent-2) 70%, var(--primary)); transition: outline-color .15s; outline: 2px solid transparent; }
.cr-hl.is-dup { background: color-mix(in srgb, var(--surface-3) 70%, transparent); box-shadow: inset 0 -2px 0 var(--line-2); }
.cr-hl.is-hot { outline-color: var(--primary); }
.cr-hl sup { margin-left: 2px; font: 700 12px/0 var(--font); color: var(--primary); }
.cr-found-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.cr-found-item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cr-found-item:hover { border-color: var(--line-2); }
.cr-found-item input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.cr-found-item.is-dup { cursor: default; }
.cr-found-item.is-dup .cr-found-t { color: var(--ink-2); }
.cr-found-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--ink); font: 700 12px/1 var(--font); }
.cr-found-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-found-t { font: 600 14px/1.35 var(--font); color: var(--ink); }
.cr-found-q { font-size: 12px; color: var(--muted); }
.cr-found-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Шаг 2 / Step 2 */
.cr-mps { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-mp {
  position: relative; display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 14px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-l); background: var(--surface); transition: border-color .15s, background-color .15s;
}
.cr-mp:hover { border-color: var(--line-2); }
.cr-mp.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.cr-mp-frame { display: grid; place-items: center; flex: none; width: 42px; height: 56px; border: 2px solid var(--ink-2); border-radius: 6px; color: var(--ink-2); font: 700 12px/1 var(--font); }
.cr-mp-frame.is-sq { height: 42px; margin-top: 7px; }
.cr-mp.is-on .cr-mp-frame { border-color: var(--primary); color: var(--primary); }
.cr-mp-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cr-mp-name { padding-right: 26px; }
.cr-mp-name { font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.cr-mp-size { font-size: 13px; color: var(--ink-2); }
.cr-mp-rule { font-size: 12px; color: var(--muted); }
.cr-mp-ch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.cr-mp-ch::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.cr-mp-ch.is-ok::before { background: var(--ok); }
.cr-mp-warn { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--warn); white-space: nowrap; }
.cr-mp-warn .i { flex: none; }
.cr-styles { display: grid; gap: 12px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cr-style { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer; }
.cr-style-art { border-radius: 8px; transition: box-shadow .15s, transform .15s; }
.cr-style:hover .cr-style-art { transform: translateY(-2px); }
.cr-style.is-on .cr-style-art { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.cr-style-name { font: 600 13px/1.25 var(--font); color: var(--ink); }
.cr-style-sub { margin-top: -3px; font-size: 12px; color: var(--muted); }
.cr-style.is-on .cr-style-sub { color: var(--primary); }
.cr-style .cr-kind-tick { top: 6px; right: 6px; width: 22px; height: 22px; }
.cr-fmt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--primary); border-radius: var(--r); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.cr-fmt > .i { flex: none; color: var(--primary); }
.cr-fmt b { display: block; color: var(--ink); }
.cr-count { display: flex; align-items: center; gap: 10px; }
.cr-plan { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr-pl { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.cr-pl-n { flex: none; width: 22px; font: 700 14px/1 var(--font-head); color: var(--muted); text-align: center; }
.cr-pl-thumb { flex: none; width: 46px; border-radius: 5px; }
.cr-pl-thumb.is-sq { width: 54px; }
.cr-pl-thumb.is-wide { width: 92px; }
.cr-pl-thumb.is-ghost { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1.5px dashed var(--line-2); color: var(--muted); }
.cr-pl-thumb.is-ghost.is-sq { aspect-ratio: 1; }
.cr-pl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-pl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--ink); }
.cr-pl-title b { font: 700 14px/1.3 var(--font-head); }
.cr-pl-roles { font-size: 12px; color: var(--muted); }
.cr-pl-facts { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-pl-warn { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--warn); }
.cr-pl-warn .i { flex: none; margin-top: 2px; }
.cr-pl-warn a { font-weight: 600; white-space: nowrap; }
.cr-pl.is-skip { border-style: dashed; background: transparent; }
.cr-pl.is-skip .cr-pl-title b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.cr-pl.is-empty { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); }
.cr-pl-move { display: flex; flex: none; gap: 2px; }
.cr-pl-lock { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); }
.cr-plan-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.cr-plan-note .i { flex: none; margin-top: 1px; color: var(--info); }
.cr-plan-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cr-plan-foot .switch { min-height: 40px; }
.cr-tvs { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-tvs.is-compact { grid-template-columns: minmax(0, 1fr); }
.cr-tv {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-l); background: var(--surface); transition: border-color .15s, background-color .15s;
}
.cr-tv:hover { border-color: var(--line-2); }
.cr-tv.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.cr-tv-text { padding-right: 26px; font: 600 17px/1.25 var(--font-brand-head); color: var(--ink); }
.cr-tvs.is-compact .cr-tv { padding: 12px 14px; gap: 8px; }
.cr-tvs.is-compact .cr-tv-text { font-size: 16px; }
.cr-tv-facts { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-tv .cr-kind-tick { top: 12px; right: 12px; }
.cr-pvgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); margin: 0; padding: 0; list-style: none; }
.cr-pvgrid.is-wide { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.cr-pvgrid-i { position: relative; min-width: 0; }
.cr-pvgrid-i .cr-art { border-radius: 6px; }
.cr-pvgrid-i.is-empty .cr-art { box-shadow: 0 0 0 2px var(--warn); }
.cr-pvgrid-n { position: absolute; left: 5px; bottom: 5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: rgba(31, 38, 34, .74); color: #fff; font: 700 12px/1 var(--font); }
.cr-est { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cr-est-main { font: 700 16px/1.35 var(--font-head); color: var(--ink); }
.cr-est-sub { font-size: 12.5px; color: var(--muted); }

/* Шаг 3 / Step 3 */
.cr-run { padding: 22px 24px; }
.cr-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cr-run-titles { min-width: 0; }
.cr-run-title { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 20px/1.3 var(--font-head); color: var(--ink); }
.cr-run-title .i { flex: none; }
.cr-spin { color: var(--primary); animation: spin 1s linear infinite; }
.cr-ok-ic { color: var(--ok); }
.cr-run-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.cr-run-pct { flex: none; font: 800 28px/1 var(--font-head); color: var(--ink); }
.cr-run-bar { margin-bottom: 20px; }
.cr-run.is-done .cr-run-bar > i { background: var(--ok); }
.cr-run-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1100px) { .cr-run-body { grid-template-columns: 330px minmax(0, 1fr); } }
.cr-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cr-step { position: relative; display: flex; gap: 12px; padding: 0 0 16px; }
.cr-step:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.cr-step.is-done:not(:last-child)::before { background: var(--primary); }
.cr-step-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--muted); font: 700 12px/1 var(--font); }
.cr-step.is-done .cr-step-ic { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.cr-step.is-cur .cr-step-ic { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.cr-step.is-cur .spinner { width: 14px; height: 14px; }
.cr-step-main { min-width: 0; padding-top: 4px; }
.cr-step-label { font: 600 14px/1.35 var(--font); color: var(--muted); }
.cr-step.is-done .cr-step-label, .cr-step.is-cur .cr-step-label { color: var(--ink); }
.cr-step-sub { margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.cr-step-sub:empty { display: none; }
.cr-run-slides { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cr-run-gh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.cr-run-gname { font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.cr-run-grid { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cr-run-grid.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .cr-run-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cr-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-slot-art { display: block; aspect-ratio: 3 / 4; }
.cr-run-grid.is-sq .cr-slot-art { aspect-ratio: 1; }
.cr-run-grid.is-wide .cr-slot-art { aspect-ratio: 16 / 9; }
.cr-slot-art .skeleton { width: 100%; height: 100%; border-radius: 8px; }
.cr-slot.is-ready .cr-slot-art .cr-art { animation: crIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.cr-slot-cap { overflow: hidden; font-size: 12px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.cr-slot.is-ready .cr-slot-cap { color: var(--ink-2); }
.cr-run-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cr-run-notify { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); }
.cr-run-notify > .i { flex: none; margin-top: 2px; color: var(--primary); }
.cr-run-notify b { display: block; font-weight: 600; color: var(--ink); }
.cr-run-sw { min-height: 36px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.cr-run-acts { display: flex; gap: 8px; margin-left: auto; }
.cr-run [aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ==================================================================
   4. Результат / Result
   ================================================================== */
.cr-rh { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin: 4px 0 22px; }
.cr-rh-text { min-width: 0; max-width: 780px; }
.cr-rh-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cr-ver { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cr-ver .i { color: var(--ok); }
.cr-ver .spinner { width: 12px; height: 12px; }
.cr-rh-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-scores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cr-score {
  display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 7px 14px 7px 7px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
.cr-score:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.cr-score-v { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; font: 800 17px/1 var(--font-head); }
.cr-score.ok .cr-score-v { background: var(--ok-bg); color: var(--ok); }
.cr-score.warn .cr-score-v { background: var(--warn-bg); color: var(--warn); }
.cr-score-t { display: flex; flex-direction: column; gap: 2px; }
.cr-score-t b { font: 700 14px/1.2 var(--font-head); }
.cr-score-t span { font-size: 12px; color: var(--muted); }
.cr-score > .i { flex: none; color: var(--ok); }
.cr-score.warn > .i { color: var(--warn); }
.cr-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1200px) { .cr-res { grid-template-columns: minmax(0, 1fr) 360px; } .cr-res.is-single { grid-template-columns: minmax(0, 1fr); } }
.cr-res-main { min-width: 0; }
.cr-res-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cr-rslides-wrap { margin-top: 16px; }
.cr-rslides { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.cr-rslides.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-rslide { min-width: 0; }
.cr-rslide-btn { display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; cursor: zoom-in; transition: transform .15s, box-shadow .15s; }
.cr-rslide-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2), 0 0 0 1px var(--line-2); }
.cr-rslide.has-issue .cr-rslide-btn { box-shadow: 0 0 0 2px var(--warn), var(--shadow-1); }
.cr-rslide-cap { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.cr-rslide-n { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font: 700 12px/1 var(--font); }
.cr-rslide-l { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cr-rslide-cap .badge { flex: none; margin-left: auto; }
.cr-next-acts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 24px; }
.cr-na {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; color: inherit; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s;
}
.cr-na:hover { color: inherit; border-color: var(--primary); box-shadow: var(--shadow-2); }
.cr-na-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.cr-na > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-na b { font: 700 14px/1.3 var(--font-head); color: var(--ink); }
.cr-na span span { font-size: 12px; color: var(--muted); }
.cr-na > .i:last-child { flex: none; color: var(--muted); }
.cr-issues { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-issue { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); border-radius: var(--r); background: var(--warn-bg); }
.cr-issue-ic { flex: none; margin-top: 1px; color: var(--warn); }
.cr-issue-main { flex: 1 1 180px; min-width: 0; }
.cr-issue-text { font: 600 13.5px/1.4 var(--font); color: var(--ink); }
.cr-issue-meta { margin-top: 3px; font-size: 12px; color: var(--ink-2); }
.cr-issue .btn { margin-left: 26px; }
.cr-issues-ok { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r); background: var(--ok-bg); color: var(--ink); font-size: 14px; animation: crIn .3s ease both; }
.cr-issues-ok .i { flex: none; color: var(--ok); }
.cr-fixed { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.cr-fixed li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); }
.cr-fixed li > .i { flex: none; margin-top: 2px; color: var(--ok); }
.cr-fixed li > span:not(.badge) { flex: 1 1 auto; min-width: 0; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.cr-fixed .badge { flex: none; }
.cr-passed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.cr-passed-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: 600; color: var(--ink); }
.cr-passed-h .i { flex: none; color: var(--primary); }
.cr-passed ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cr-passed li { display: flex; justify-content: space-between; gap: 10px; }
.cr-passed li b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cr-rules-note { margin: 10px 0 0; }

/* Окна: скачать и слайд крупно / Modals: download and slide preview */
.cr-dl { display: flex; flex-direction: column; gap: 18px; }
.cr-dl-presets { min-width: 0; margin: 0; padding: 0; border: 0; }
.cr-dl-l { margin-bottom: 8px; padding: 0; font: 600 13px/1.3 var(--font); color: var(--ink-2); }
.cr-dl-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-dl-row { display: flex; align-items: flex-start; gap: 10px; min-height: 58px; padding: 10px 12px; cursor: pointer; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); transition: border-color .15s, background-color .15s; }
.cr-dl-row:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface)); }
.cr-dl-row input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); }
.cr-dl-row.is-off { cursor: not-allowed; opacity: .55; }
.cr-dl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-dl-main b { font: 600 14px/1.3 var(--font); color: var(--ink); }
.cr-dl-main > span { font-size: 12px; color: var(--muted); }
.cr-dl-main .badge { align-self: flex-start; height: auto; margin-top: 4px; padding: 3px 8px; line-height: 1.3; white-space: normal; }
.cr-dl-n { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cr-dl-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-dl .hint code { font-size: 12px; }
.cr-sp { display: grid; gap: 20px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
.cr-sp.is-wide { grid-template-columns: minmax(0, 1fr); }
.cr-sp-h { margin: 0 0 10px; font: 700 15px/1.3 var(--font-head); color: var(--ink); }
.cr-sp-facts { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.cr-sp-facts li { display: flex; align-items: flex-start; gap: 10px; }
.cr-sp-facts li > .i { flex: none; margin-top: 2px; color: var(--primary); }
.cr-sp-facts li.is-warn > .i { color: var(--warn); }
.cr-sp-facts li > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }

/* ==================================================================
   5. Адаптивность / Responsive
   ================================================================== */
@media (max-width: 1199px) {
  .cr-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-tvs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .cr-wh-row { flex-direction: column; align-items: flex-start; }
  .cr-mps { grid-template-columns: minmax(0, 1fr); }
  .cr-next-wrap { position: static; }
  .cr-next { width: 100%; }
  .cr-next .btn { flex: 1 1 auto; }
  .cr-next-v { max-width: none; }
  .cr-rh-acts { width: 100%; }
}
@media (max-width: 599px) {
  /* Касания не меньше 40 px / Touch targets of at least 40 px */
  .cr .btn-sm, .cr-modal .btn-sm { height: 40px; }
  .cr .btn-icon.btn-sm { width: 40px; }
  .cr .chip:not(.chip-static), .cr-modal .chip:not(.chip-static) { height: 40px; }
  .cr .seg > button { height: 40px; min-width: 44px; }
  .cr .switch { min-height: 40px; }
  .cr .link-more, .cr .crumbs a, .cr-job-open, .cr-site-dom, .cr-meta a { display: inline-flex; align-items: center; min-height: 40px; }
  .cr .stepper a { min-height: 40px; }
  .cr-aff::after, .cr-pl-warn a::after, .cr-site-new::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 40px; transform: translateY(-50%); }
  .cr-pl-warn a, .cr-site-new { position: relative; }

  .cr-brief { display: none; }
  .cr-parse-hint { display: none; }
  .cr-parse { min-height: 0; margin: 8px 0 12px; }
  .cr-att-acts { margin-left: 0; }
  .cr-home-head { margin-bottom: 14px; }
  .cr-hero { padding: 18px 16px 16px; }
  .cr-hero-q { font-size: 22px; margin-bottom: 12px; }
  .cr-ask { height: 54px; padding: 0 6px 0 12px; gap: 8px; }
  .cr-ask-in { font-size: 16px; }
  .cr-ask-kbd, .cr-ask-go > span { display: none; }
  .cr-ask-go { width: 44px; padding: 0; }
  .cr-quick { flex-wrap: nowrap; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .cr-quick::-webkit-scrollbar { display: none; }
  .cr-quick-chip { flex: none; scroll-snap-align: start; }
  .cr-att-item { padding: 14px; gap: 12px; }
  .cr-att-ic { width: 34px; height: 34px; }
  .cr-att-top { flex-direction: column; gap: 2px; }
  .cr-mats { gap: 10px; }
  .cr-mat-body { padding: 10px 12px 12px; }
  .cr-site-body { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }

  .cr-kinds { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cr-kind { flex-direction: row; align-items: stretch; }
  .cr-kind-art { flex: none; width: 104px; aspect-ratio: auto; min-height: 92px; border-right: 1px solid var(--line); border-bottom: 0; }
  .cr-kind-body { justify-content: center; padding: 10px 40px 10px 12px; }
  .cr-kind-tick { top: 50%; margin-top: -12px; }
  .cr-kind-site { left: 10%; right: 10%; top: 16%; }
  .cr-by { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-by-panel { padding: 12px; }
  .cr-prow-ch { display: none; }
  .cr-next { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }

  .cr-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cr-ph-add { grid-column: 1 / -1; flex-direction: row; aspect-ratio: auto; height: 44px; }
  .cr-tip-acts { margin-left: 0; }
  .cr-ph-badge { top: 6px; left: 6px; padding: 0 6px; }
  .cr-fact { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; column-gap: 10px; row-gap: 8px; }
  .cr-fact-acts { grid-column: 3; grid-row: 1; }
  .cr-fact.is-unconf .cr-fact-acts { grid-column: 2 / -1; grid-row: 2; }
  .cr-sec { position: relative; }
  .cr-saved { position: absolute; top: 14px; right: 12px; }
  .cr-source .cr-pv { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "art head" "art note"; column-gap: 14px; align-content: start; }
  .cr-source .cr-pv-head { grid-area: head; flex-direction: column; align-items: flex-start; }
  .cr-source .cr-pv-art { grid-area: art; }
  .cr-source .cr-pv-note { grid-area: note; }
  .cr-pv-nav .btn-lg { height: 48px; }
  .cr-styles { gap: 10px; }
  .cr-pl { flex-wrap: wrap; padding: 10px; gap: 10px; }
  .cr-pl-main { flex-basis: calc(100% - 100px); }
  .cr-pl-move { width: 100%; justify-content: flex-end; margin-top: -6px; }
  .cr-count { width: 100%; justify-content: space-between; }

  .cr-run { padding: 16px; }
  .cr-run-title { font-size: 17px; }
  .cr-run-pct { font-size: 22px; }
  .cr-run-acts { width: 100%; margin-left: 0; }
  .cr-run-acts .btn-lg { flex: 1 1 auto; }

  .cr-rh-acts .btn { flex: 1 1 auto; }
  .cr-score { flex: 1 1 100%; }
  .cr-rslides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cr-rslides.is-wide { grid-template-columns: minmax(0, 1fr); }
  .cr-issue .btn { margin-left: 0; width: 100%; }
  .cr-dl-grid { grid-template-columns: minmax(0, 1fr); }
  .cr-found { padding: 12px; }
  .cr-found-item { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; }
  .cr-found-item > .badge { grid-column: 3; justify-self: start; }
  .cr-sp { grid-template-columns: minmax(0, 1fr); }
  .cr-sp-art { width: min(100%, 260px); margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-flash, .cr-tok, .cr-up, .cr-found, .cr-found-card, .cr-issues-ok, .cr-slot.is-ready .cr-slot-art .cr-art { animation: none; }
  .cr-spin { animation-duration: 3s; }
}