/* ===========================================================================
   fastkart — صفحهٔ مقایسهٔ کالا (دور ۵۱، docs/59)
   ===========================================================================

   همان تصمیمِ `products-detail.css` و `plp.css`: رنگ‌ها از «کار»ِ هر رنگِ فروشگاه می‌آیند
   (`--theme-*`ِ `components/palette.css`) و مقدارِ ثابت فقط پشتوانهٔ `var()` است. رنگِ برند
   برای متن همیشه نسخهٔ تیره‌شده‌اش است (`--cmp-brand-strong`) تا روی سفید خوانا بماند.

   چیدمان:
     دسکتاپ  جدولِ واقعی؛ ستونِ نامِ ویژگی سمتِ راست و چسبان هنگامِ لغزشِ افقی
     موبایل  هر ردیف یک شبکه: نامِ ویژگی یک خطِ تمام‌عرض بالای مقدارها، و دو ستون در عرضِ
             صفحه با لغزش و «چسبیدن» به ستون‌ها (`scroll-snap`)
   هر انتخابگر زیرِ `.cmp` است تا صفحه‌های دیگر دست نخورند.
   =========================================================================== */

.cmp {
    --cmp-ink: var(--theme-ink, #0f172a);
    --cmp-surface: var(--theme-surface, #ffffff);
    --cmp-canvas: var(--theme-page, #f8fafc);
    --cmp-text: color-mix(in srgb, var(--cmp-ink) 82%, var(--cmp-surface));
    --cmp-muted: var(--theme-muted, #64748b);
    --cmp-line: var(--theme-border, #e2e8f0);
    --cmp-line-soft: color-mix(in srgb, var(--cmp-line) 55%, var(--cmp-surface));
    --cmp-brand: var(--theme-accent, #0da487);
    --cmp-brand-strong: color-mix(in srgb, var(--cmp-brand) 55%, #0b1220);
    --cmp-brand-soft: color-mix(in srgb, var(--cmp-brand) 8%, var(--cmp-surface));
    --cmp-cta: var(--theme-cta, #ff7a1a);
    --cmp-on-cta: var(--theme-on-cta, #ffffff);
    --cmp-sale: var(--theme-sale, #e5383b);
    --cmp-on-sale: var(--theme-on-sale, #ffffff);
    --cmp-sale-ink: var(--theme-sale-ink, #b42318);
    --cmp-ok: var(--theme-success-ink, #157347);
    --cmp-star: #f59e0b;
    --cmp-label-w: 200px;
    --cmp-col-min: 190px;
    --cmp-r: 16px;
    --cmp-r-sm: 10px;
    --cmp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
    --cmp-shadow-lg: 0 24px 64px -28px rgba(15, 23, 42, .45);
    color: var(--cmp-text);
}
@supports (color: oklch(from red l c h)) {
    .cmp { --cmp-brand-strong: oklch(from var(--cmp-brand) min(l, 0.5) c h); }
}
.cmp :focus-visible { outline: 2px solid var(--cmp-brand-strong); outline-offset: 2px; }
.cmp button { font: inherit; }

/* ---------- نوارِ ابزار ---------- */
.cmp-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px; padding: 12px 16px;
    background: var(--cmp-surface); border: 1px solid var(--cmp-line); border-radius: var(--cmp-r);
    box-shadow: var(--cmp-shadow);
}
.cmp-bar__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--cmp-text); }
.cmp-bar__family i { color: var(--cmp-brand-strong); margin-inline-end: 4px; }
.cmp-bar__family a { color: var(--cmp-brand-strong); font-weight: 700; }
.cmp-bar__count {
    padding: 2px 10px; border-radius: 999px; border: 1px solid var(--cmp-line);
    background: var(--cmp-canvas); color: var(--cmp-muted); font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.cmp-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.cmp-switch, .cmp-tool {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--cmp-line); border-radius: 999px; background: var(--cmp-surface);
    color: var(--cmp-ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cmp-switch:hover:not(:disabled), .cmp-tool:hover { border-color: var(--cmp-brand-strong); }
.cmp-tool--quiet { color: var(--cmp-muted); }
.cmp-tool--quiet:hover { color: var(--cmp-sale-ink); border-color: var(--cmp-sale); }
.cmp-switch:disabled { opacity: .55; cursor: not-allowed; }
.cmp-switch__track {
    position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px;
    background: var(--cmp-line); transition: background-color .2s ease;
}
.cmp-switch__track > span {
    position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--cmp-surface); box-shadow: 0 1px 3px rgba(15, 23, 42, .25); transition: transform .2s ease;
}
.cmp-switch[aria-checked="true"] { border-color: var(--cmp-brand-strong); background: var(--cmp-brand-soft); }
.cmp-switch[aria-checked="true"] .cmp-switch__track { background: var(--cmp-brand-strong); }
.cmp-switch[aria-checked="true"] .cmp-switch__track > span { transform: translateX(-16px); }
.cmp-switch__n {
    display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--cmp-brand-soft); color: var(--cmp-brand-strong); font-size: 11.5px; font-weight: 800;
}

.cmp-note {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 16px;
    border-radius: var(--cmp-r-sm); background: var(--cmp-brand-soft); color: var(--cmp-ink); font-size: 13.5px;
}
.cmp-note i { margin-top: 4px; color: var(--cmp-brand-strong); }
.cmp-note p { margin: 0; line-height: 1.8; }

/* ---------- جدول ---------- */
.cmp-scroll {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
    background: var(--cmp-surface); border: 1px solid var(--cmp-line); border-radius: var(--cmp-r);
    box-shadow: var(--cmp-shadow);
}
.cmp-table {
    width: 100%; min-width: calc(var(--cmp-label-w) + var(--cmp-n) * var(--cmp-col-min));
    border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 0;
}
.cmp-table thead > tr > * {
    padding: 16px 14px 18px; vertical-align: top; border-bottom: 1px solid var(--cmp-line); background: var(--cmp-surface);
}
.cmp-table tr > * + * { border-inline-start: 1px solid var(--cmp-line-soft); }
.cmp-corner, .cmp-row__label { width: var(--cmp-label-w); }
.cmp-corner { position: sticky; right: 0; z-index: 2; }
.cmp-corner__box {
    display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--cmp-r-sm);
    background: var(--cmp-canvas); color: var(--cmp-muted); font-size: 13px;
}
.cmp-corner__box b { color: var(--cmp-ink); font-size: 18px; font-weight: 800; margin-inline-end: 2px; }

/* ---------- کارتِ سرِ ستون ---------- */
.cmp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; text-align: center; }
.cmp-card__remove {
    position: absolute; top: -6px; left: -4px; z-index: 1; display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cmp-line);
    background: var(--cmp-surface); color: var(--cmp-muted); cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.cmp-card__remove:hover { color: var(--cmp-sale-ink); border-color: var(--cmp-sale); background: var(--cmp-canvas); }
.cmp-card__badges { position: absolute; top: -6px; right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cmp-badge {
    padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--cmp-brand) 28%, var(--cmp-surface));
    background: var(--cmp-brand-soft); color: var(--cmp-brand-strong);
}
.cmp-card__media {
    display: block; width: min(100%, 168px); aspect-ratio: 1; margin-top: 22px;
    border-radius: var(--cmp-r-sm); overflow: hidden; background: var(--cmp-surface);
}
.cmp-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.cmp-card:hover .cmp-card__media img { transform: scale(1.03); }
.cmp-card__brand { font-size: 12px; color: var(--cmp-muted); }
.cmp-card__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 3.4em; color: var(--cmp-ink); font-size: 14px; font-weight: 700; line-height: 1.7;
}
.cmp-card__name:hover { color: var(--cmp-brand-strong); }
.cmp-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--cmp-text); }
.cmp-card__rating .fa-solid { color: var(--cmp-star); }
.cmp-card__rating small { color: var(--cmp-muted); }
.cmp-card__price { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 48px; }
.cmp-card__was { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cmp-muted); }
.cmp-off { padding: 0 7px; border-radius: 999px; background: var(--cmp-sale); color: var(--cmp-on-sale); font-size: 11px; font-weight: 800; }
.cmp-card__now { color: var(--cmp-muted); font-size: 12px; }
.cmp-card__now b { color: var(--cmp-ink); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-card__out { color: var(--cmp-sale-ink); font-size: 13px; font-weight: 600; }
.cmp-card__cta { width: 100%; margin-top: auto; padding-top: 6px; }
.cmp-buy, .cmp-view {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px;
    border-radius: var(--cmp-r-sm); font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.cmp-buy { border: 0; background: var(--cmp-cta); color: var(--cmp-on-cta); }
.cmp-buy:hover { filter: brightness(.94); color: var(--cmp-on-cta); }
.cmp-view { border: 1px solid var(--cmp-brand-strong); background: var(--cmp-surface); color: var(--cmp-brand-strong); }
.cmp-view:hover { background: var(--cmp-brand-strong); color: #fff; }

.cmp-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 100%; min-height: 320px; padding: 16px;
    border: 2px dashed var(--cmp-line); border-radius: var(--cmp-r); background: var(--cmp-canvas);
    color: var(--cmp-muted); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cmp-slot:hover { border-color: var(--cmp-brand-strong); background: var(--cmp-brand-soft); color: var(--cmp-brand-strong); }
.cmp-slot b { color: var(--cmp-ink); font-size: 15px; }
.cmp-slot small { font-size: 12.5px; }
.cmp-slot__icon {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--cmp-surface); color: var(--cmp-brand-strong); font-size: 22px; box-shadow: var(--cmp-shadow);
    transition: transform .2s ease;
}
.cmp-slot:hover .cmp-slot__icon { transform: scale(1.06); }

/* ---------- بخش‌ها و ردیف‌ها ---------- */
.cmp-sec__head > th { padding: 0; background: var(--cmp-canvas); border-bottom: 1px solid var(--cmp-line); }
.cmp-sec__toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 16px;
    border: 0; background: none; color: var(--cmp-ink); text-align: start; cursor: pointer;
}
.cmp-sec__title { font-size: 14.5px; font-weight: 800; }
.cmp-sec__title::before {
    content: ''; display: inline-block; width: 4px; height: 16px; margin-inline-end: 8px; vertical-align: -2px;
    border-radius: 2px; background: var(--cmp-brand);
}
.cmp-sec__toggle small { color: var(--cmp-muted); font-size: 12.5px; }
.cmp-sec__toggle i { margin-inline-start: auto; color: var(--cmp-muted); transition: transform .2s ease; }
.cmp-sec__toggle[aria-expanded="false"] i { transform: rotate(90deg); }
.cmp-sec.is-collapsed .cmp-row, .cmp-sec.is-collapsed .cmp-sec__same { display: none; }

.cmp-row > * {
    padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--cmp-line-soft);
    background: var(--cmp-surface); color: var(--cmp-text); font-size: 13.5px; line-height: 1.8; overflow-wrap: anywhere;
}
.cmp-row:hover > * { background: var(--cmp-canvas); }
.cmp-row__label { position: sticky; right: 0; z-index: 1; color: var(--cmp-muted); font-weight: 600; text-align: start; font-size: 13px; }
/* ردیفِ متفاوت عادی است و ردیفِ یکسان کم‌رنگ با برچسبِ «یکسان» — بیشترِ ردیف‌ها متفاوت‌اند، پس رنگ کردنِ
   آن‌ها همه‌جا را رنگی می‌کرد؛ کم‌رنگ کردنِ استثنا چشم را به تفاوت‌ها می‌برد. */
.cmp-row.is-diff .cmp-row__label { color: var(--cmp-ink); }
.cmp-row[data-same] > td { color: var(--cmp-muted); }
.cmp-row__same {
    display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px;
    background: var(--cmp-canvas); border: 1px solid var(--cmp-line); color: var(--cmp-muted);
    font-size: 10.5px; font-weight: 600; line-height: 1.7; vertical-align: 1px;
}
.cmp-cell.is-empty { color: var(--cmp-muted); text-align: center; }
.cmp-cell--slot { background: var(--cmp-canvas) !important; }

.cmp-sec__same { display: none; }
.cmp-sec__same > td { padding: 14px 16px; text-align: center; color: var(--cmp-muted); font-size: 13px; border-bottom: 1px solid var(--cmp-line-soft); }
.cmp.is-diff-only .cmp-row[data-same] { display: none; }
.cmp.is-diff-only .cmp-sec[data-same] .cmp-sec__same { display: table-row; }

/* ---------- نوارِ چسبانِ سرِ ستون‌ها ---------- */
.cmp-sticky {
    position: fixed; top: 0; z-index: 1035; overflow: hidden; visibility: hidden;
    background: var(--cmp-surface); border: 1px solid var(--cmp-line); border-top: 0;
    border-radius: 0 0 var(--cmp-r-sm) var(--cmp-r-sm); box-shadow: 0 12px 28px -18px rgba(15, 23, 42, .4);
    transform: translateY(-100%); transition: transform .2s ease, visibility 0s linear .2s;
}
.cmp-sticky.is-on { visibility: visible; transform: none; transition: transform .2s ease; }
.cmp-sticky__track { display: flex; will-change: transform; }
.cmp-sticky__track > * + * { border-inline-start: 1px solid var(--cmp-line-soft); }
.cmp-sticky__corner {
    flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px;
    color: var(--cmp-muted); font-size: 12.5px;
}
.cmp-sticky__corner b { color: var(--cmp-brand-strong); font-size: 15px; }
.cmp-sticky__item { flex: none; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 8px 12px; min-width: 0; }
.cmp-sticky__item img { grid-row: span 2; width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
.cmp-sticky__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cmp-ink); font-size: 12.5px; font-weight: 700; }
.cmp-sticky__price { color: var(--cmp-ink); font-size: 12.5px; font-weight: 800; }
.cmp-sticky__price small { color: var(--cmp-muted); font-weight: 500; }
.cmp-sticky__out { color: var(--cmp-sale-ink); font-size: 12px; font-weight: 600; }

/* ---------- حالتِ خالی ---------- */
.cmp-empty {
    max-width: 680px; margin: 8px auto 0; padding: 40px 24px; text-align: center;
    background: var(--cmp-surface); border: 1px solid var(--cmp-line); border-radius: 20px; box-shadow: var(--cmp-shadow);
}
.cmp-empty__art {
    display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 18px;
    border-radius: 28px; background: var(--cmp-brand-soft); color: var(--cmp-brand-strong); font-size: 40px;
}
.cmp-empty__title { margin: 0; color: var(--cmp-ink); font-size: 20px; font-weight: 800; }
.cmp-empty__text { max-width: 48ch; margin: 10px auto 22px; color: var(--cmp-muted); line-height: 1.9; }
.cmp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.cmp-steps li {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px;
    border-radius: 14px; background: var(--cmp-canvas); color: var(--cmp-text); font-size: 13px; line-height: 1.7;
}
.cmp-steps b {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--cmp-brand-strong); color: #fff; font-size: 14px;
}
.cmp-empty__cta {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 24px;
    border-radius: 12px; background: var(--cmp-brand-strong); color: #fff; font-weight: 700; text-decoration: none;
}
.cmp-empty__cta:hover { color: #fff; filter: brightness(1.08); }

/* ---------- پنجرهٔ «افزودنِ کالا» ---------- */
.cmp-picker {
    width: min(560px, calc(100vw - 24px)); max-height: min(660px, calc(100dvh - 48px)); padding: 0;
    border: 0; border-radius: 18px; background: var(--cmp-surface); color: var(--cmp-ink); box-shadow: var(--cmp-shadow-lg);
}
.cmp-picker[open] { display: flex; }
.cmp-picker::backdrop { background: rgba(15, 23, 42, .45); }
.cmp-picker__box { display: flex; flex-direction: column; width: 100%; max-height: inherit; }
.cmp-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.cmp-picker__head h2 { margin: 0; color: var(--cmp-ink); font-size: 16px; font-weight: 800; }
.cmp-picker__close {
    display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: var(--cmp-canvas); color: var(--cmp-muted); cursor: pointer;
}
.cmp-picker__close:hover { color: var(--cmp-ink); }
.cmp-picker__hint { display: flex; gap: 6px; margin: 0 18px 12px; color: var(--cmp-muted); font-size: 12.5px; line-height: 1.8; }
.cmp-picker__hint i { margin-top: 4px; color: var(--cmp-brand-strong); }
.cmp-picker__search { position: relative; display: block; margin: 0 18px 10px; }
.cmp-picker__search i { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--cmp-muted); }
.cmp-picker__search input {
    width: 100%; min-height: 46px; padding: 0 42px 0 14px; border: 1px solid var(--cmp-line); border-radius: 12px;
    background: var(--cmp-canvas); color: var(--cmp-ink); font-size: 14px;
}
.cmp-picker__search input:focus { outline: 2px solid var(--cmp-brand-strong); outline-offset: 0; background: var(--cmp-surface); }
.cmp-picker__results { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 0 10px 14px; }
.cmp-picker__error { padding: 24px 12px; text-align: center; color: var(--cmp-sale-ink); }
.cmp-picker__loading { display: grid; gap: 10px; padding: 0 18px 18px; }
.cmp-picker__loading span {
    height: 64px; border-radius: 12px;
    background: linear-gradient(90deg, var(--cmp-canvas), var(--cmp-line-soft), var(--cmp-canvas));
    background-size: 200% 100%; animation: cmp-shimmer 1.2s ease-in-out infinite;
}
@keyframes cmp-shimmer { to { background-position: -200% 0; } }

.cmp-cands { margin: 0; padding: 0; list-style: none; }
.cmp-cand { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.cmp-cand + .cmp-cand { border-top: 1px solid var(--cmp-line-soft); }
.cmp-cand:hover { background: var(--cmp-canvas); }
.cmp-cand img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--cmp-line-soft); border-radius: 10px; background: var(--cmp-surface); }
.cmp-cand__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmp-cand__brand { color: var(--cmp-muted); font-size: 11.5px; }
.cmp-cand__name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--cmp-ink); font-size: 13.5px; font-weight: 700; line-height: 1.7;
}
.cmp-cand__price { color: var(--cmp-text); font-size: 12.5px; font-weight: 700; }
.cmp-cand__price small { color: var(--cmp-muted); font-weight: 500; }
.cmp-cand__out { color: var(--cmp-sale-ink); font-size: 12px; }
.cmp-cand__add {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--cmp-brand-strong); border-radius: 10px; background: var(--cmp-surface);
    color: var(--cmp-brand-strong); font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.cmp-cand__add:hover { background: var(--cmp-brand-strong); color: #fff; }
.cmp-cand__add.is-busy { opacity: .6; cursor: progress; }
.cmp-cands-empty { padding: 32px 16px; text-align: center; color: var(--cmp-muted); }
.cmp-cands-empty i { display: block; margin-bottom: 8px; font-size: 28px; }
.cmp-cands-empty p { margin: 0; line-height: 1.8; }

/* ---------- موبایل ---------- */
@media (max-width: 767.98px) {
    .cmp { --cmp-col-w: calc((100vw - 34px) / 2); }
    .cmp-bar { padding: 10px 12px; }
    .cmp-bar__tools { width: 100%; }
    .cmp-switch { flex: 1 1 auto; justify-content: center; }
    .cmp-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cmp-tool { width: 40px; padding: 0; justify-content: center; }

    .cmp-scroll { scroll-snap-type: x mandatory; border-radius: 14px; }
    .cmp-table { width: max-content; min-width: 0; table-layout: auto; }
    .cmp-table, .cmp-table thead, .cmp-table tbody { display: block; }
    .cmp-table tr { display: grid; grid-template-columns: repeat(var(--cmp-n), var(--cmp-col-w)); }
    .cmp-table thead > tr > * { padding: 12px 10px 14px; scroll-snap-align: start; }
    .cmp-table tr > * + * { border-inline-start: 1px solid var(--cmp-line-soft); }
    .cmp-corner { display: none; }
    .cmp-table thead > tr > .cmp-corner + * { border-inline-start: 0; }
    .cmp-card__media { width: 112px; margin-top: 26px; }
    .cmp-card__name { font-size: 13px; }
    .cmp-slot { min-height: 250px; }

    .cmp-sec__head { display: block; }
    .cmp-sec__head > th { display: block; }
    .cmp-sec__toggle { position: sticky; right: 0; width: calc(100vw - 34px); }

    .cmp-row > * { padding: 10px; font-size: 13px; }
    .cmp-row__label {
        grid-column: 1 / -1; position: static; width: auto; padding: 8px 12px 4px;
        border-bottom: 0; background: var(--cmp-canvas); font-size: 12.5px;
    }
    .cmp-row:hover > * { background: inherit; }
    .cmp-row__label span { position: sticky; right: 12px; display: inline-block; }
    .cmp-table tr > .cmp-row__label + td { border-inline-start: 0; }

    .cmp-table tr.cmp-sec__same { display: none; grid-template-columns: 1fr; }
    .cmp.is-diff-only .cmp-table tr[data-same] { display: none; }
    .cmp.is-diff-only .cmp-sec[data-same] tr.cmp-sec__same { display: grid; }
    .cmp-sec__same > td { position: sticky; right: 0; width: calc(100vw - 34px); }

    .cmp-steps { grid-template-columns: 1fr; }
    .cmp-empty { padding: 28px 16px; }

    .cmp-picker {
        width: 100vw; max-width: 100vw; max-height: 88dvh; margin: auto 0 0; border-radius: 18px 18px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmp *, .cmp *::before, .cmp *::after { transition: none !important; animation: none !important; }
}