/*
 * Components specific to Product Feeds, on top of styles.css (Polaris-like)
 * and glass.css (the standalone skin). Colours come only from the tokens
 * those files define, so light/dark and both skins follow automatically.
 */

/* ── Small utilities ────────────────────────────────────────────────────── */
.spacer { flex: 1; }
.wrap { flex-wrap: wrap; }
.text-warning { color: var(--warning-strong); }
.text-success { color: var(--success-strong); }
.plain-list { margin: 0; padding-left: 1.1em; }
.plain-list li + li { margin-top: 2px; }
.is-stale { opacity: 0.6; transition: opacity .2s; }
.input.input-code { font-family: var(--mono); font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.input-sm, .select-sm { min-height: 30px; padding-top: 3px; padding-bottom: 3px; font-size: 13px; }
.select-sm { padding-right: 28px; }
.input-num { max-width: 140px; }
.upgrade-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--text-2); margin: 0; }
.upgrade-line .icon { color: var(--attention-strong); }
.radio-card.is-on { box-shadow: 0 0 0 2px var(--text) inset; background: var(--surface-2); }
.radio-card input { margin-top: 3px; }
.chip-x { background: none; border: 0; padding: 0 0 0 2px; color: var(--text-2); cursor: pointer; display: inline-flex; border-radius: 50%; }
.chip-x:hover { color: var(--text); }
.chip-x-wrap { max-width: 260px; }
.file-input { font: inherit; font-size: 13px; }
code { font-family: var(--mono); font-size: 0.92em; }
del { background: var(--critical-bg); color: var(--critical-text); text-decoration: line-through; border-radius: 3px; padding: 0 1px; }
ins { background: var(--success-bg); color: var(--success-text); text-decoration: none; border-radius: 3px; padding: 0 1px; }

/* ── Channel marks and market chips ─────────────────────────────────────── */
.channel-mark {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center;
  font-weight: 700; font-size: 11.5px; letter-spacing: -0.02em; color: #fff; background: #6b7280;
}
.channel-mark.tone-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.channel-mark.tone-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.channel-mark.tone-green { background: linear-gradient(135deg, #10b981, #047857); }
.channel-mark.tone-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.channel-mark.tone-pink { background: linear-gradient(135deg, #ec4899, #be185d); }
.channel-mark.tone-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.channel-mark.tone-yellow { background: linear-gradient(135deg, #f59e0b, #b45309); }
.channel-mark.tone-grey { background: linear-gradient(135deg, #6b7280, #374151); }
.market-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--surface-3); color: var(--text-2); font-size: 12px; white-space: nowrap; }
.market-chip .icon { width: 14px; height: 14px; }

/* ── Home ───────────────────────────────────────────────────────────────── */
.home-top { align-items: stretch; }
.home-top > .card { display: flex; flex-direction: column; }
.home-top > .card > .card-section { flex: 1; }
.stat-pair { display: flex; gap: var(--s6); }
.stat-pair > div, .feed-stats > div { display: flex; flex-direction: column; }
.stat-big { font-size: 26px; line-height: 32px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat-mid { font-size: 16px; line-height: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.feed-card { position: relative; transition: transform .15s var(--spring, ease), box-shadow .15s; }
.feed-card:hover { box-shadow: var(--shadow-pop); }
.feed-card.is-paused { opacity: 0.8; }
.feed-card-head { display: flex; align-items: center; gap: var(--s3); }
.cover-link { color: inherit; }
.cover-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cover-link:focus-visible { outline: none; }
.cover-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.feed-card .btn, .feed-card .tip-wrap { position: relative; z-index: 1; }
.feed-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.url-row { display: flex; align-items: center; gap: var(--s2); background: var(--surface-2); border-radius: var(--radius); padding: 4px 4px 4px 10px; min-width: 0; }
.url-row .truncate { flex: 1; }

/* ── New feed ───────────────────────────────────────────────────────────── */
.step-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-primary); color: var(--btn-primary-text); font-weight: 700; }
.channel-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.channel-group legend { padding: 0; margin-bottom: var(--s2); }
.channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); }
.channel-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: 0 0 0 1px var(--border-strong) inset; cursor: pointer; transition: box-shadow .15s, background .15s;
}
.channel-card:hover { background: var(--surface-hover); }
.channel-card.is-selected { box-shadow: 0 0 0 2px var(--focus) inset; background: var(--surface-2); }
.channel-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.channel-card-head { display: flex; align-items: center; gap: var(--s2); }
.sr-only-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.about-channel { background: var(--surface-2); border-radius: var(--radius); padding: var(--s3); }
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.note-list li { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.note-list .icon { flex: none; margin-top: 2px; color: var(--text-3); }
.new-preview { min-height: 28px; }

/* ── Editor shell ───────────────────────────────────────────────────────── */
.editor .page-header { margin-bottom: var(--s3); }
.pipeline { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: 4px; counter-reset: none; }
.pipeline li { display: inline-flex; align-items: center; gap: 2px; }
.pipeline li + li::before { content: "→"; color: var(--text-3); margin: 0 4px 0 2px; }
.pipeline a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: var(--radius-full); color: var(--text-2); font-size: 12.5px; font-weight: 550; background: var(--surface-3); }
.pipeline a:hover { color: var(--text); text-decoration: none; }
.pipeline .pipe-n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: 11px; font-weight: 700; }
.pipeline li.is-active a { background: var(--btn-primary); color: var(--btn-primary-text); }
.pipeline li.is-active .pipe-n { background: var(--btn-primary-text); color: var(--btn-primary); }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--s5); align-items: start; }
.editor-full { display: block; }
.editor-aside { position: sticky; top: calc(var(--topbar-h) + var(--s3)); max-height: calc(100vh - var(--topbar-h) - var(--s6)); overflow: auto; border-radius: var(--radius-lg); }
@media (max-width: 1150px) {
  .editor-layout { grid-template-columns: minmax(0, 1fr); }
  .editor-aside { position: static; max-height: none; }
}
.editor-tabs { overflow-x: auto; scrollbar-width: thin; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-card); }
.editor-tabs .tab { text-decoration: none; }
.tab-step { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.tab[aria-selected="true"] .tab-step { background: var(--btn-primary); color: var(--btn-primary-text); }
.tab-explain { margin: var(--s3) 0; color: var(--text-2); max-width: 760px; }
.tab-panel:focus { outline: none; }
.save-bar-note { opacity: 0.75; }
@media (max-width: 640px) { .save-bar-note { display: none; } }

/* Errors pinned to the place the server named */
.has-config-error { box-shadow: 0 0 0 2px var(--critical-strong) inset !important; border-radius: var(--radius); }
.config-error { margin: 0 0 var(--s2); padding: 4px 8px; }
.has-draft-error { box-shadow: 0 0 0 1.5px var(--attention-strong) inset !important; border-radius: var(--radius); }
.draft-error { display: flex; gap: 4px; align-items: center; margin: 0 0 4px; padding: 2px 8px; color: var(--attention-text); }
.is-flash { animation: flash 2.2s ease-out; border-radius: var(--radius); }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--focus); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .is-flash { animation: none; box-shadow: 0 0 0 3px var(--focus); } }

/* ── Mapping ────────────────────────────────────────────────────────────── */
.map-toolbar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.map-toolbar .search-field { min-width: 220px; }
.map-list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.map-row { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr); gap: var(--s4); padding: var(--s3) var(--s4); border-top: 1px solid var(--border); }
.map-row:first-child { border-top: 0; }
.map-row.is-off .map-field { opacity: 0.75; }
.map-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.map-field code { color: var(--text-2); }
.map-meta, .map-enum { color: var(--text-2); }
.map-enum code { color: inherit; }
.map-value { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.value-type { width: auto; min-width: 200px; }
@media (max-width: 760px) { .map-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); } .value-type { min-width: 0; width: 100%; } }

.source-btn {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 36px; padding: 4px 10px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-input); border-radius: var(--radius); font: inherit;
}
.source-btn:hover { background: var(--surface-hover); }
.source-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.source-btn.is-empty { border-style: dashed; color: var(--text-2); }
.source-btn > .icon { margin-left: auto; flex: none; color: var(--text-2); }
.source-main { display: flex; flex-direction: column; min-width: 0; line-height: 17px; }
.source-label { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-main code { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-example { margin-left: auto; max-width: 40%; font-size: 12px; color: var(--text-2); background: var(--surface-3); padding: 1px 8px; border-radius: var(--radius-full); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-btn.is-compact { width: auto; min-width: 180px; max-width: 280px; min-height: 30px; }
.template-row { display: flex; gap: var(--s2); align-items: flex-start; }
.template-row .input, .template-row .textarea { flex: 1; }
.template-row .textarea { min-height: 56px; }
.first-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.first-list li { display: flex; align-items: center; gap: 6px; }
.first-list .source-btn { flex: 1; width: auto; min-width: 0; }
.first-num { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.row-tools { display: inline-flex; gap: 0; flex: none; }
.row-tools .btn { min-height: 28px; min-width: 28px; padding: 2px; }

.tchain { display: flex; flex-direction: column; gap: 6px; }
.tchain-list { list-style: none; margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.tstep { background: var(--surface-2); border-radius: var(--radius); padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.tstep-head { display: flex; align-items: center; gap: 6px; }
.tstep-head .select { flex: 1; min-width: 0; }
.tstep-num { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--surface); color: var(--text-2); }
.tstep-params { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding-left: 24px; }
.tstep-params .field { min-width: 140px; }
.tstep-params .template-field, .tstep-params .field:has(textarea) { flex: 1 1 100%; }
.field-inline { gap: 2px; }
.field-inline .field-label { font-size: 12px; font-weight: 500; color: var(--text-2); }
.select-add { width: auto; max-width: 100%; color: var(--text-2); border-style: dashed; background-color: transparent; }

/* ── Conditions ─────────────────────────────────────────────────────────── */
.cgroup { display: flex; flex-direction: column; gap: 6px; padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--surface-2); }
.cgroup.depth-1 { background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset; }
.cgroup.depth-2 { background: var(--surface-2); box-shadow: 0 0 0 1px var(--border) inset; }
.cgroup-head { display: flex; align-items: center; gap: var(--s2); }
.cgroup-head .select { width: auto; }
.cond-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cond-item { display: flex; flex-direction: column; gap: 4px; }
.joiner { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); padding-left: 4px; }
.cond-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cond-op { width: auto; min-width: 150px; }
.cond-value { flex: 1; min-width: 120px; }
.cond-value .input { width: 100%; }
.cgroup-foot { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ── Rules ──────────────────────────────────────────────────────────────── */
.rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.rule-card { overflow: visible; }
.rule-card.is-disabled .rule-body { opacity: 0.6; }
.rule-card.is-dragging { opacity: 0.5; }
.rule-card.is-drop { box-shadow: 0 0 0 2px var(--focus), var(--shadow-card); }
.rule-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.grip { cursor: grab; color: var(--text-3); display: inline-flex; padding: 4px 0; }
.grip:active { cursor: grabbing; }
.rule-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-primary); color: var(--btn-primary-text); font-size: 11.5px; font-weight: 700; }
.rule-name { flex: 1; min-width: 160px; font-weight: 600; }
.rule-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.rule-branch { display: flex; gap: var(--s3); align-items: flex-start; }
.branch-label { flex: none; width: 48px; padding-top: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--text-2); }
.seg-sm button { min-height: 22px; font-size: 12.5px; }
.actions-edit { display: flex; flex-direction: column; gap: 6px; }
.action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.action-row { background: var(--surface-2); border-radius: var(--radius); padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; }
.action-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.action-head .select { width: auto; }
.action-field { width: 200px; max-width: 100%; }
.action-params { padding-left: 4px; }
@media (max-width: 640px) { .rule-branch { flex-direction: column; gap: 4px; } .branch-label { padding-top: 0; } }

/* ── Options / delivery ─────────────────────────────────────────────────── */
.utm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s2); }
.url-box { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; background: var(--surface-2); border-radius: var(--radius); padding: var(--s2) var(--s3); }
.url-box code { flex: 1; min-width: 200px; font-size: 12.5px; }
.secrets { border-top: 1px solid var(--border); padding-top: var(--s3); }
.secret-field { background: var(--surface-2); border-radius: var(--radius); padding: var(--s2) var(--s3); }
.danger-card { box-shadow: 0 0 0 1px var(--critical-bg) inset, var(--shadow-card); }

/* ── Preview ────────────────────────────────────────────────────────────── */
.preview-panel { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.preview-panel.is-loading .pv-items, .preview-panel.is-loading .preview-counts { opacity: 0.6; transition: opacity .2s; }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.preview-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 4px; }
.pcount {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 8px; border-radius: var(--radius); cursor: pointer;
  background: var(--surface-2); border: 0; color: var(--text-2); font: inherit; font-size: 11.5px; line-height: 14px; text-align: left; min-width: 0;
}
.pcount span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pcount-n { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pcount.tone-success .pcount-n { color: var(--success-strong); }
.pcount.tone-critical .pcount-n { color: var(--critical-strong); }
.pcount.tone-attention .pcount-n { color: var(--attention-strong); }
.pcount.is-on { box-shadow: 0 0 0 2px var(--text) inset; background: var(--surface); }
.pcount:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pv-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--border) inset; }
.pv-items li + li { border-top: 1px solid var(--border); }
.pv-item { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 8px 10px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pv-item:hover { background: var(--surface-hover); }
.pv-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pv-item > .icon { color: var(--text-3); flex: none; }
.pv-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.pv-dot.tone-success { background: var(--success-strong); }
.pv-dot.tone-critical { background: var(--critical-strong); }
.pv-dot.tone-attention { background: var(--attention-strong); }
.pv-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pv-title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-none { padding: var(--s3); }
.pv-sample summary { cursor: pointer; padding: 4px 0; }
.pv-sample .code-block { margin-top: var(--s2); }
.pv-sample pre { max-height: 360px; white-space: pre; }
.kv-table th { text-align: left; vertical-align: top; width: 38%; background: transparent; white-space: normal; text-transform: none; font-weight: 450; letter-spacing: 0; }
.kv-table th code { font-size: 12px; }
.kv-table td { vertical-align: top; overflow-wrap: anywhere; }
.row-error { background: var(--banner-critical); }
.out-value ol { padding-left: 1.2em; }
.issue-line { display: flex; gap: 4px; align-items: flex-start; font-size: 12px; flex-wrap: wrap; }
.issue-line.tone-critical { color: var(--critical-text); }
.issue-line.tone-warning { color: var(--warning-text); }
.issue-line .icon { flex: none; margin-top: 1px; }
@media (max-width: 480px) { .preview-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Picker ─────────────────────────────────────────────────────────────── */
.picker { display: flex; flex-direction: column; gap: var(--s2); }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: min(56vh, 520px); overflow: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--border) inset; }
.picker-group { position: sticky; top: 0; z-index: 1; padding: 6px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.picker-option { display: flex; align-items: center; gap: var(--s3); padding: 7px 12px; cursor: pointer; border-bottom: 1px solid var(--border); }
.picker-option:hover { background: var(--surface-hover); }
.picker-option.is-active { background: var(--surface-selected); box-shadow: 3px 0 0 var(--focus) inset; }
.picker-option.is-current .picker-label::after { content: " · current"; color: var(--success-strong); font-weight: 500; }
.picker-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.picker-label { font-weight: 550; }
.picker-path { font-size: 11.5px; color: var(--text-2); }
.picker-example { max-width: 45%; font-size: 12px; color: var(--text-2); background: var(--surface-3); padding: 1px 8px; border-radius: var(--radius-full); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-empty { padding: var(--s4); color: var(--text-2); }

/* ── Products ───────────────────────────────────────────────────────────── */
.product-list { list-style: none; margin: 0; padding: 0; }
.product-row { border-top: 1px solid var(--border); }
.product-main { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); }
.product-actions { flex-wrap: wrap; justify-content: flex-end; }
.thumb { flex: none; width: 40px; height: 40px; border-radius: var(--radius); overflow: hidden; background: var(--surface-3); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-initials { font-size: 13px; font-weight: 700; color: var(--text-2); }
.variant-list { list-style: none; margin: 0; padding: 0 var(--s4) var(--s2) calc(var(--s4) + 52px); display: flex; flex-direction: column; gap: 2px; }
.variant-row { display: flex; align-items: center; gap: var(--s2); padding: 6px 8px; border-radius: var(--radius); background: var(--surface-2); }
.ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ov-item { display: flex; align-items: center; gap: var(--s2); padding: 6px 10px; border-radius: var(--radius); background: var(--banner-critical); }
.ov-value { overflow-wrap: anywhere; max-width: 340px; }
@media (max-width: 640px) { .product-main { flex-wrap: wrap; } .variant-list { padding-left: var(--s4); } }

/* ── AI ─────────────────────────────────────────────────────────────────── */
.gen-pick { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.gen-results { max-height: 300px; overflow: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--border) inset; }
.check-list-plain { list-style: none; margin: 0; padding: 0; }
.check-list-plain li { display: flex; align-items: flex-start; gap: var(--s2); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.check-list-plain li:last-child { border-bottom: 0; }
.check-list-plain label { display: flex; flex-direction: column; cursor: pointer; flex: 1; min-width: 0; }
.check-list-plain input { margin-top: 3px; }
#gen-selected .chip-group { list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) { .gen-pick { grid-template-columns: minmax(0, 1fr); } }
.sugg-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--border); }
.sugg-card:first-child, .between + .sugg-card { border-top: 0; padding-top: 0; }
.diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.diff-col { display: flex; flex-direction: column; gap: 4px; padding: var(--s2) var(--s3); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.diff-col.is-new { box-shadow: 0 0 0 1px var(--success-strong) inset; }
.diff-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.diff-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 640px) { .diff { grid-template-columns: minmax(0, 1fr); } }

/* ── Glass skin touches ─────────────────────────────────────────────────── */
[data-skin="glass"] .map-list, [data-skin="glass"] .preview-panel, [data-skin="glass"] .editor-tabs {
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
[data-skin="glass"] .channel-card { background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-card); }
[data-skin="glass"] .channel-card.is-selected { box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-card); }
[data-skin="glass"] .source-btn { border-radius: 10px; }
[data-skin="glass"] .pipeline li.is-active a, [data-skin="glass"] .step-num, [data-skin="glass"] .rule-num { background: var(--accent); color: #fff; }
[data-skin="glass"] .pipeline li.is-active .pipe-n { background: #fff; color: var(--accent); }
[data-skin="glass"][data-transparency="reduced"] .map-list,
[data-skin="glass"][data-transparency="reduced"] .preview-panel,
[data-skin="glass"][data-transparency="reduced"] .editor-tabs,
[data-skin="glass"][data-transparency="reduced"] .channel-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }

/* ── Direct connect ─────────────────────────────────────────────────────── */
.how-card { overflow: visible; }
.how-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.how-choice.is-disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 640px) { .how-cards { grid-template-columns: minmax(0, 1fr); } }
.setup-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: var(--s2); }
.setup-steps li { counter-increment: step; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.setup-steps li::before { content: counter(step); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--text-2); margin-top: 1px; }
.setup-steps code { font-size: 12px; background: var(--surface-3); padding: 0 4px; border-radius: 4px; }
.target-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.target-list legend { padding: 0; margin-bottom: 4px; }
.target-option { display: flex; gap: var(--s2); align-items: flex-start; padding: 8px 10px; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--border) inset; cursor: pointer; background: var(--surface); }
.target-option:hover { background: var(--surface-hover); }
.target-option.is-on { box-shadow: 0 0 0 2px var(--focus) inset; background: var(--surface-2); }
.target-option input { margin-top: 3px; }
.new-cat { padding-left: 30px; max-width: 420px; }
.remote-status { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-radius: var(--radius); background: var(--surface-2); box-shadow: 0 0 0 1px var(--border) inset; }
.remote-status.tone-success { box-shadow: 0 0 0 1px var(--success-strong) inset; }
.remote-status.tone-warning { box-shadow: 0 0 0 1px var(--warning-strong) inset; }
.remote-status.tone-critical { box-shadow: 0 0 0 1px var(--critical-strong) inset; }
.remote-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.remote-issues li { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.remote-issues .icon { flex: none; margin-top: 2px; }
.conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s4); align-items: start; }
.conn-card { display: flex; flex-direction: column; }
.conn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.conn-item { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius); background: var(--surface-2); }
@media (max-width: 420px) { .conn-grid { grid-template-columns: minmax(0, 1fr); } }