@layer components {
    /* ============================================================================
       CARD-SHEET — единый язык карточки для всех сущностей: айтем / аутфит /
       flat-lay / паспорт профиля. Эталон: prototypes/reference/card-sheet.html
       (README ## Design references) — этот файл и есть его боевое воплощение.

       Разметка:
         .modal-overlay.cs-overlay
           .card-sheet
             .cs-grab
             .cs-scroll                ← hero → .cs-foot → .cs-blk*
       Поведение (открытие/драг/коллапс/фейд) — js/lib/card-sheet.js.

       Осознанные отличия от старой .ie-newcard (решения эталона, 07-05):
       фото→кнопки 10px (было 4) · green-CTA→футбар 8px · spec-строки 15/16
       (было 14/15) · заголовки блоков 12px (было 11) · верхний скролл-фейд
       плавный по прогрессу (--csFade), не бинарный .is-scrolled.

       Мигрированы: профиль ✓ (шелл целиком) · аутфит ✓ (хром: рейл/«•••»/футбар/
       блоки/строки/deck) · айтем+flat-lay ✓ (хром + spec-блоки + deck). У айтема и
       аутфита СВОИ шеллы (peek/drag/свайп-дек) и hero — это поведенческая
       специфика, не дубль. Центр-пикеры всех сущностей тоже единые — cs-ed ниже
       (айтем/аутфит вешают .cs-ed-layer на transform-free корень своей модалки,
       профильные пикеры живут в .modal-overlay).
       ========================================================================== */

    .cs-overlay {
        /* Геометрия стека — те же значения, что CARD SHEET GEOMETRY в app.css. */
        --card-inset: 18px;                    /* бока фото и блоков (десктоп: и верх) */
        --card-btn-gap: 4px;                   /* шаг внутри кнопочной зоны */
        --card-blk-gap: 10px;                  /* фото→кнопки и блоки между собой */
        --card-title-size: var(--font-xl, 28px);
    }

    /* ── Шелл: десктоп = центр-карточка 440, ≤720 = bottom-sheet ─────────────── */
    .card-sheet {
        position: relative;
        width: 100%;
        max-width: 440px;
        height: min(780px, 92vh);
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
        overflow: hidden;
        animation: fadeScale var(--dur-base) var(--ease);
    }

    .cs-grab {
        display: none;                         /* мобильный грип — см. @media ниже */
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.14);
        margin: 8px auto 0;
        flex: none;
    }

    .cs-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: var(--card-inset) 0 calc(18px + env(safe-area-inset-bottom, 0px));
        scrollbar-width: none;
        /* Верхний фейд: прозрачность кромки = --csFade (JS ведёт её 1→0 по
           прогрессу первых ~40px скролла) — контент растворяется плавно, вместе
           с пальцем; в покое маска математически невидима, hero чёткий. */
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--csFade, 1)) 0, #000 18px);
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, var(--csFade, 1)) 0, #000 18px);
    }

    .cs-scroll::-webkit-scrollbar {
        display: none;
    }

    /* ── Hero: фото под грабом, бока inset, name-on-photo ────────────────────── */
    .cs-hero {
        position: relative;
        margin: 0 var(--card-inset);
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: var(--cs-hero-aspect, var(--aspect-flat-lay, 3 / 4));
        flex: none;
        background: linear-gradient(150deg, #cdd6e8, #e6dcec 60%, #d6e2ea);
    }

    .cs-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .cs-hero::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 52%;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.14) 55%, transparent);
    }

    .cs-title {
        position: absolute;
        left: 16px;
        right: 64px;
        bottom: 14px;
        z-index: 3;
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: var(--card-title-size);
        line-height: 1.05;
        letter-spacing: -0.01em;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
    }

    /* Glass-рейл (top-right: лайк/коллекции) + «•••» (top-left) */
    .cs-rail {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 4;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cs-iconbtn {
        width: 42px;
        height: 42px;
        flex: none;
        border-radius: 13px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.7));
        background: rgba(255, 255, 255, 0.62);
        color: var(--text);
        box-shadow: 0 4px 12px rgba(17, 21, 34, 0.10);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    /* Иконки без собственных width/height (боевой набор) — размер даёт кнопка. */
    .cs-iconbtn svg {
        width: 20px;
        height: 20px;
    }

    .cs-more .cs-iconbtn svg {
        width: 17px;
        height: 17px;
    }

    /* Хром карточки — tap-first: чёрное фокус-кольцо браузера на его кнопках не
       рисуем (Tab-навигация продолжает работать, просто без окаёмки). */
    .cs-iconbtn:focus,
    .cs-iconbtn:focus-visible,
    .cs-deck:focus,
    .cs-deck:focus-visible,
    .cs-blk-h:focus-visible,
    .cs-foot-ghost:focus-visible,
    .cs-foot-icon:focus-visible {
        outline: none;
    }

    .cs-more {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 5;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .cs-more .cs-iconbtn {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .cs-more-stack {
        display: flex;
        flex-direction: column;
        gap: 8px;
        transform-origin: top;
        transform: translateY(-8px) scale(0.96);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1.2);
    }

    .cs-more.open .cs-more-stack {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .cs-more.open > .cs-iconbtn {
        color: var(--accent);
    }

    .cs-more-stack .is-danger {
        color: var(--danger);
    }

    /* Лайк / коллекции — состояния */
    .cs-iconbtn.liked {
        color: var(--accent);
    }

    .cs-iconbtn.liked svg {
        fill: currentColor;
        stroke: currentColor;
    }

    .cs-coll {
        position: relative;
    }

    .cs-coll.has {
        color: var(--accent);
    }

    .cs-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: var(--accent);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
    }

    .cs-coll.has .cs-badge {
        display: inline-flex;
    }

    /* Plan (calendar) rail button — same badge behaviour as collections. */
    .cs-plan { position: relative; }
    .cs-plan.has { color: var(--accent); }
    .cs-plan.has .cs-badge { display: inline-flex; }

    /* Черновик flat-lay: лайк/коллекции приглушены до сохранения. */
    .card-sheet.is-draft .cs-rail .cs-iconbtn {
        opacity: 0.4;
        pointer-events: none;
        filter: grayscale(1);
    }

    /* Scroll-hint: двойной шеврон в правом нижнем углу фото. Не перехватывает
       тапы (под ним фото/жесты); тень — читаемость на светлых фото. */
    .cs-hint {
        position: absolute;
        right: 14px;
        bottom: 12px;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        opacity: 0.85;
        pointer-events: none;
        animation: csBob 1.6s ease-in-out infinite;
        transition: opacity 0.25s ease;
    }

    .cs-hint svg {
        display: block;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    }

    .cs-hint svg + svg {
        margin-top: -6px;
        opacity: 0.55;
    }

    @keyframes csBob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(4px); }
    }

    @media (prefers-reduced-motion: reduce) {
        .cs-hint {
            animation: none;
        }
    }

    /* Clean-shot: тап по фото гасит хром фото */
    .cs-title, .cs-rail, .cs-more, .cs-hint {
        transition: opacity 0.2s ease;
    }

    .cs-hero.is-bare .cs-title, .cs-hero.is-bare .cs-rail,
    .cs-hero.is-bare .cs-more, .cs-hero.is-bare .cs-hint {
        opacity: 0;
        pointer-events: none;
    }

    .cs-foot {
        display: flex;
        gap: 8px;
        margin: var(--card-btn-gap) var(--card-inset) 0;
        flex: none;
    }

    .cs-hero + .cs-foot {
        margin-top: var(--card-blk-gap);
    }

    .cs-foot-ghost {
        flex: 1 1 0;
        height: 46px;
        min-width: 0;
        padding: 0 12px;
        border: 0;
        border-radius: 13px;
        cursor: pointer;
        background: var(--accent-10);
        color: var(--accent);
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        text-decoration: none;                 /* футбар-кнопкой бывает и <a> */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    /* Отклик — как у «В гардероб» (кроссфейд тинт → сплошной акцент): hover
       заливает, нажатие темнее. Hover только там, где есть курсор, чтобы на
       таче состояние не залипало после тапа. */
    @media (hover: hover) {
        .cs-foot-ghost:hover,
        .cs-foot-icon:hover {
            background: var(--accent);
            color: #fff;
        }
    }
    .cs-foot-ghost:active,
    .cs-foot-icon:active {
        background: var(--accent-deep);
        color: #fff;
    }

    /* Green "Save" variant of the ghost — Studio Style-Scan result footbar. */
    .cs-foot-ghost.is-save {
        background: var(--save);
        color: #fff;
    }

    @media (hover: hover) {
        .cs-foot-ghost.is-save:hover {
            background: var(--save-deep, #0f7a3d);
        }
    }
    .cs-foot-ghost.is-save:active {
        background: var(--save-deep, #0f7a3d);
    }

    .cs-foot-icon {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 13px;
        cursor: pointer;
        background: var(--accent-10);
        color: var(--accent);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .cs-foot-icon svg, .cs-foot-ghost svg {
        width: 19px;
        height: 19px;
    }

    /* ── Framed-блок (язык .ie-sl-blk, шрифт заголовка 12px) ─────────────────── */
    .cs-blk {
        border: 1px solid rgba(26, 26, 46, 0.1);
        border-radius: 14px;
        margin: var(--card-blk-gap) var(--card-inset) 0;
        overflow: hidden;
        background: #fff;
        min-width: 0;
    }

    .cs-blk-h {
        cursor: pointer;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 13px 14px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--accent);
        border: 0;
        background: none;
        font-family: inherit;
        text-align: left;
    }

    .cs-chev {
        margin-left: auto;
        width: 8px;
        height: 8px;
        flex: 0 0 auto;
        border-right: 2px solid #b3b3c2;
        border-bottom: 2px solid #b3b3c2;
        transform: rotate(-45deg);
        transition: transform 0.2s;
    }

    .cs-blk.is-open .cs-chev {
        transform: rotate(45deg);
    }

    .cs-blk-body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cs-blk.is-open .cs-blk-body {
        grid-template-rows: 1fr;
    }

    /* inner — чистый клип (без паддинга/бордера), чтобы свёрнутый блок доезжал
       до честного 0; паддинг живёт на pad ВНУТРИ клипа. */
    .cs-blk-inner {
        overflow: hidden;
        min-height: 0;
        min-width: 0;
    }

    .cs-blk-pad {
        padding: 0 14px 8px;
    }

    /* ── Spec-строки (15/16 — решение эталона; ДВА ребёнка, без шевронов) ────── */
    .cs-row {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: space-between;
        padding: 12px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        cursor: pointer;
        transition: background 0.12s;
    }

    .cs-row:first-child {
        border-top: 0;
    }

    .cs-row:active {
        background: var(--accent-06, rgba(108, 92, 231, 0.06));
    }

    .cs-row.is-readonly {
        cursor: default;
    }

    .cs-row.is-readonly:active {
        background: none;
    }

    /* Temporarily inert row — e.g. purchase date while the item is a wishlist one.
       pointer-events:none also keeps the speclist click handler from opening it. */
    .cs-row.is-disabled {
        opacity: 0.45;
        pointer-events: none;
    }

    .cs-k {
        color: var(--text-secondary);
        font-size: 15px;
        flex: 0 0 auto;
    }

    .cs-v {
        font-weight: 600;
        font-size: 16px;
        text-align: right;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        color: var(--text);
    }

    .cs-v.muted {
        color: var(--text-tertiary);
        font-weight: 500;
    }

    .cs-v .cs-unit {
        color: var(--text-tertiary);
        font-weight: 700;
        font-size: 12px;
    }

    /* ── Блок-тип: свотчи (палитра + избегать) ───────────────────────────────── */
    .cs-swatches {
        display: flex;
        gap: 7px;
        flex-wrap: nowrap;
        margin-top: 4px;
    }

    .cs-sw {
        flex: 1 1 0;
        min-width: 0;
        max-width: 46px;
        aspect-ratio: 1 / 1;
        border-radius: 13px;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
    }

    .cs-swsub {
        margin: 14px 0 4px;
        font-size: 11px;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--text-tertiary);
        font-weight: 600;
    }

    .cs-swatches.is-avoid {
        flex-wrap: wrap;
    }

    .cs-swatches.is-avoid .cs-sw {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        opacity: 0.85;
        position: relative;
    }

    .cs-swatches.is-avoid .cs-sw::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 10px;
        background: linear-gradient(135deg, transparent 44%, rgba(255, 255, 255, 0.9) 46%, rgba(255, 255, 255, 0.9) 54%, transparent 56%);
    }

    /* ── Блок-тип: текст (✨ рекомендация и т.п.) ─────────────────────────────── */
    .cs-text {
        margin: 2px 0 4px;
        font-size: 14px;
        line-height: 1.6;
        color: var(--text);
        cursor: pointer;
    }

    .cs-text.muted {
        color: var(--text-tertiary);
    }

    /* ── Центр-пикер (cs-ed) — ЕДИНЫЙ редактор поля для всех карточек ──────────
       Айтем (атрибуты/цена/заметки), аутфит («Об образе»), профиль (паспорт) и
       выбор языка. Два контейнера на выбор:
         .cs-ed-layer  — свой fixed-слой + .cs-ed-scrim (айтем/аутфит: слой
                         вешается на transform-free корень модалки);
         .modal-overlay — профильные пикеры: оверлей сам центрирует и затемняет.
       Панель .cs-ed одна и та же. Reset-иконка выезжает только при изменении
       (.cs-ed-foot.changed). Значения сняты с боевого айтемного редактора. */
    .cs-ed-layer {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .cs-ed-layer:empty {
        display: none;
    }

    .cs-ed-scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: rgba(20, 22, 50, 0.36);
        animation: csEdFade 0.18s;
    }

    /* Центрированная панель фиксированной ширины — редактор каждого поля выглядит
       одинаково и встаёт в одну и ту же комфортную точку. */
    .cs-ed {
        position: relative;
        z-index: 2;
        width: min(340px, calc(100% - 40px));
        min-width: 0;
        max-width: none;
        border-radius: 16px;
        padding: 15px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 22px 54px -12px rgba(20, 22, 50, 0.45);
        animation: csEdPop 0.18s ease;
    }

    .cs-ed-lbl {
        font-size: 12px;
        font-weight: 700;
        color: var(--accent);
        margin-bottom: 10px;
    }

    /* (i)-сноска у заголовка панели: серая иконка; пояснение — собственный
       CSS-тултип из data-tip (ховер/тап-фокус), мгновенный, в стиле тостов. */
    .cs-ed-hint {
        position: relative;
        display: inline-flex;
        vertical-align: -3px;
        margin-left: 6px;
        width: 14px;
        height: 14px;
        color: var(--text-tertiary);
        cursor: default;   /* без «?» у курсора — подсказку даёт сам тултип */
    }
    .cs-ed-hint svg { width: 100%; height: 100%; }
    .cs-ed-hint::after {
        content: attr(data-tip);
        position: absolute;
        top: calc(100% + 7px);
        left: -6px;
        z-index: 20;
        background: #2b2740;
        color: #fff;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.35;
        padding: 6px 10px;
        border-radius: 8px;
        white-space: nowrap;
        box-shadow: 0 8px 20px -6px rgba(20, 22, 50, 0.4);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-2px);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
    .cs-ed-hint:hover::after,
    .cs-ed-hint:focus-visible::after {
        opacity: 1;
        transform: none;
    }

    .cs-ed-msg {
        font-size: 13.5px;
        color: var(--text-secondary);
    }

    /* Скролл-тело панели: overscroll-behavior не даёт внутреннему скроллу
       утаскивать шит позади (панель иначе «плывёт» при выборе). */
    .cs-ed-body {
        max-height: 46vh;
        overflow: auto;
        overscroll-behavior: contain;
    }

    .cs-ed-body:empty {
        display: none;
    }

    .cs-ed-opts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 230px;
        overflow: auto;
        padding: 1px;
    }

    .cs-ed-opt {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 14px;
        border-radius: 11px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: #fff;
        color: var(--text);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: 0.12s;
    }

    .cs-ed-opt.on {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    /* Colour dot on colour-bearing chips (metals / undertone / depth / contrast). */
    .cs-ed-dot {
        width: 15px;
        height: 15px;
        flex: none;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    }

    /* Row-value colour dot — the word stays, the colour sits right after it
       (same shape as the passport's .pp-cdot). Background is set inline from
       config swatches (config/items.py *.swatch → /config.js). */
    .cs-cdot {
        width: 20px;
        height: 20px;
        flex: none;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),
                    inset 2px 2px 5px rgba(255, 255, 255, 0.5);
    }

    /* Visual picker — 3×2 tile grid (face_shape). Reuses .cs-ed-opt so the
       staging / paint / save logic is untouched; only layout + tile skin differ.
       Selected = outline on an accent tint (no solid fill). */
    .cs-ed-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-height: none;
        overflow: visible;
    }
    .cs-ed-grid .cs-ed-opt {
        flex-direction: column;
        justify-content: center;
        gap: 9px;
        padding: 13px 6px 11px;
        border-radius: 15px;
        font-size: 12px;
        letter-spacing: -0.01em;
        color: #4a4658;
    }
    .cs-ed-grid .cs-ed-opt > span {
        color: #5b5870;
        line-height: 1;
    }
    .cs-ed-grid .cs-ed-opt.on {
        background: var(--accent-10);
        border-color: var(--accent);
        color: var(--accent);
        box-shadow: inset 0 0 0 2px var(--accent-25);
    }
    .cs-ed-grid .cs-ed-opt.on > span {
        color: var(--accent);
    }
    .cs-ed-glyph {
        display: block;
        width: 40px;
        height: 48px;
        fill: none;
        stroke: currentColor;
        stroke-width: 4.5;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

    .cs-ed-inp {
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 11px;
        padding: 11px 13px;
        font: inherit;
        font-size: 16px;
        font-weight: 600;
        background: #fff;
        outline: none;
    }

    .cs-ed-inp:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-10);
    }

    textarea.cs-ed-inp {
        resize: none;
        font-weight: 500;
        line-height: 1.5;
    }

    .cs-ed-foot {
        display: flex;
        align-items: stretch;
        margin-top: 12px;
    }

    .cs-ed-ok {
        flex: 1 1 auto;
        border: 0;
        background: var(--accent);
        color: #fff;
        font: inherit;
        font-weight: 700;
        font-size: 14px;
        padding: 12px;
        border-radius: 11px;
        cursor: pointer;
    }

    /* Готово без foot-обвязки (аутфитный пикер) — во всю ширину панели. */
    .cs-ed > .cs-ed-ok {
        width: 100%;
        margin-top: 12px;
    }

    /* Reset — сложен в ноль, выезжает при .changed (пик отличается от применённого). */
    .cs-ed-reset {
        flex: 0 0 auto;
        width: 0;
        min-width: 0;
        margin-left: 0;
        padding: 0;
        border: 1px solid transparent;
        background: #fff;
        color: var(--text-secondary);
        border-radius: 11px;
        cursor: pointer;
        opacity: 0;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: width 0.22s ease, opacity 0.16s ease, margin-left 0.22s ease, border-color 0.16s ease;
    }

    .cs-ed-foot.changed .cs-ed-reset {
        width: 48px;
        opacity: 1;
        margin-left: 8px;
        border-color: rgba(0, 0, 0, 0.1);
    }

    .cs-ed-foot.changed .cs-ed-reset:active {
        border-color: var(--accent);
        color: var(--accent);
    }

    .cs-ed-reset svg {
        width: 17px;
        height: 17px;
        display: block;
    }

    /* ── Collections picker rows inside the cs-ed panel (variant «строки-галочки»).
       Multi-select checklist that scrolls when long; the «new collection» row and the
       Готово/reset foot stay pinned. Shared by the item + outfit cards. ── */
    .cs-ed-rows {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0 -4px;
        padding: 2px 4px;
    }

    /* Scroll only past 5 collections (JS adds .scroll); fewer = show all, no cap.
       ~5.5 rows tall so the 6th peeks and hints there's more. */
    .cs-ed-rows.scroll {
        max-height: 208px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .cs-ed-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 9px 6px;
        border: 0;
        background: none;
        border-radius: 9px;
        font: inherit;
        text-align: left;
        color: var(--text);
        cursor: pointer;
    }

    .cs-ed-row:hover { background: var(--accent-05, rgba(108, 92, 231, 0.05)); }

    .cs-ed-chk {
        flex: none;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        border: 1.6px solid rgba(0, 0, 0, 0.14);
        display: grid;
        place-items: center;
    }

    .cs-ed-row.on .cs-ed-chk { background: var(--accent); border-color: var(--accent); }
    .cs-ed-chk svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; }
    .cs-ed-row.on .cs-ed-chk svg { opacity: 1; }

    .cs-ed-rowname {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cs-ed-newrow { display: flex; margin-top: 10px; }
    .cs-ed-newrow .cs-ed-inp { flex: 1; min-width: 0; }
    /* «+» сложен в ноль (как reset в футере) и выезжает при вводе, когда точного
       совпадения нет — имена коллекций уникальны. JS вешает .has-new на строку. */
    .cs-ed-newadd {
        flex: 0 0 auto;
        width: 0;
        min-width: 0;
        margin-left: 0;
        padding: 0;
        border: 0;
        border-radius: 11px;
        background: var(--accent);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        opacity: 0;
        overflow: hidden;
        transition: width 0.22s ease, opacity 0.16s ease, margin-left 0.22s ease;
    }

    .cs-ed-newrow.has-new .cs-ed-newadd { width: 44px; opacity: 1; margin-left: 8px; }

    /* ── Day picker (openDayPicker в card-sheet.js) — «Когда наденешь?»: лента-неделя
       ⇄ месяц в центр-плашке (.cs-ed). Строгое переключение + каскад строк месяца.
       Живёт на transform-free корне модалки (айтем/аутфит), пишет в planned_looks. ── */
    .dp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; min-height: 28px; }
    .dp-q { font-size: 12px; font-weight: 700; color: var(--accent); }
    .dp-seg { margin-left: auto; flex: none; display: inline-flex; background: rgba(120, 110, 160, 0.1); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 2px; gap: 2px; }
    .dp-seg button { border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--text-secondary); padding: 6px 11px; border-radius: 7px; cursor: pointer; }
    .dp-seg button.on { background: var(--accent); color: #fff; }

    .dp-stack { overflow: hidden; }
    .dp-stack.anim { transition: height 0.3s cubic-bezier(0.22, 1, 0.3, 1); }
    .dp-pane { display: none; }
    .dp-pane.on { display: block; }
    .dp-pane.dp-week.on { display: flex; }   /* лента = строка (иначе .on:block ломает flex) */

    .dp-week { gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 1px 3px; }
    .dp-week::-webkit-scrollbar { display: none; }
    .dp-pill { position: relative; flex: none; width: 44px; border-radius: 11px; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; padding: 8px 0 7px; text-align: center; cursor: pointer; color: var(--text); }
    .dp-pill small { display: block; font-size: 8.5px; text-transform: uppercase; color: var(--text-secondary); }
    .dp-pill b { display: block; font-family: var(--font-heading); font-size: 15px; font-weight: 700; margin-top: 2px; }
    .dp-pill .dp-mo { display: block; font-size: 8px; font-weight: 700; color: var(--accent); margin-top: 1px; text-transform: uppercase; }
    .dp-pill.today { border-color: var(--accent); }
    .dp-pill.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
    .dp-pill.sel small, .dp-pill.sel .dp-mo { color: rgba(255, 255, 255, 0.85); }

    .dp-cbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .dp-cbar h4 { flex: 1; text-align: center; font-family: var(--font-heading); font-size: 13px; font-weight: 600; }
    .dp-nv { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; display: grid; place-items: center; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
    .dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
    .dp-dow span { font-size: 8px; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); text-align: center; }
    .dp-rows { display: flex; flex-direction: column; gap: 4px; }
    .dp-crow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .dp-cell { position: relative; aspect-ratio: 1 / 1.02; border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; display: grid; place-items: center; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; color: var(--text); }
    .dp-cell.pad { border: 0; background: none; cursor: default; }
    .dp-cell.today { box-shadow: inset 0 0 0 1.4px var(--accent); border-color: var(--accent); color: var(--accent); }
    .dp-cell.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
    .dp-cell.sel::after { content: "✓"; position: absolute; top: 1px; right: 2px; font-size: 7px; }

    /* каскад строк месяца при въезде */
    @keyframes dpRow { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
    .dp-rows.cascade .dp-crow { animation: dpRow 0.34s cubic-bezier(0.22, 1, 0.3, 1) both; }
    .dp-rows.cascade .dp-crow:nth-child(1) { animation-delay: 0.02s; }
    .dp-rows.cascade .dp-crow:nth-child(2) { animation-delay: 0.05s; }
    .dp-rows.cascade .dp-crow:nth-child(3) { animation-delay: 0.08s; }
    .dp-rows.cascade .dp-crow:nth-child(4) { animation-delay: 0.11s; }
    .dp-rows.cascade .dp-crow:nth-child(5) { animation-delay: 0.14s; }
    .dp-rows.cascade .dp-crow:nth-child(6) { animation-delay: 0.17s; }

    .dp-done { width: 100%; margin-top: 12px; }

    @media (prefers-reduced-motion: reduce) {
        .dp-stack.anim { transition: none; }
        .dp-rows.cascade .dp-crow { animation: none; }
    }

    @keyframes csEdFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes csEdPop {
        from { opacity: 0; transform: scale(0.97); }
        to { opacity: 1; transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .cs-ed, .cs-ed-scrim {
            animation: none;
        }
    }

    /* ── Deck-стрелки prev/next — только десктоп, за краями карточки (440px:
       50% − 220 − 60). Скин общий; ПОКАЗ (display:inline-flex) включает сущность
       своим правилом (например .ie-has-deck / .oe-has-deck в app.css). ── */
    .cs-deck {
        display: none;
    }

    @media (min-width: 721px) {
        .cs-deck {
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 5;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.7));
            background: rgba(255, 255, 255, 0.9);
            color: var(--text);
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(17, 21, 34, 0.18);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            transition: background 0.15s ease;
        }

        .cs-deck:hover {
            background: #fff;
        }

        .cs-deck:active {
            background: var(--accent-10);
        }

        .cs-deck-prev {
            left: calc(50% - 220px - 60px);
        }

        .cs-deck-next {
            right: calc(50% - 220px - 60px);
        }
    }

    /* ── Мобильный bottom-sheet ≤720 (механика #sup-modal) ───────────────────── */
    @media (max-width: 720px) {
        .cs-overlay.modal-overlay {
            align-items: flex-end;
            padding: 0;
            animation: none;
            background: transparent;
            transition: background var(--dur-base) var(--ease);
        }

        .cs-overlay.modal-overlay.sheet-scrim-in {
            background: var(--overlay);
        }

        .card-sheet {
            max-width: none;
            height: 92vh;
            height: 92dvh;
            border-radius: 22px 22px 0 0;
            animation: none;
            transform: translateY(100%);
            transition: transform var(--dur-base) var(--ease);
        }

        .cs-overlay.sheet-scrim-in .card-sheet {
            transform: translateY(0);
        }

        .cs-grab {
            display: block;
        }

        /* Фото вплотную под грабом — верхний inset даёт граб. */
        .cs-scroll {
            padding-top: 8px;
        }
    }

    /* ══ Плавающий футбар (айтем / аутфит / паспорт стиля) ══════════════════════
       Кнопки действий прилипают к нижней кромке карточки поверх контента (геометрию
       каждой модалки задают её правила в app.css; паспорт — ниже). Скин: кнопки
       висят над контентом, полупрозрачному accent-10 нужна белая подложка + тень.
       :where() держит специфичность на (0,1,0), чтобы hover/active-заливка
       (.cs-foot-ghost:hover — шорткат background) продолжала побеждать. */
    :where(#item-edit-modal, #outfit-modal, #pp-modal) :is(.cs-foot-ghost, .cs-foot-icon) {
        background-color: #fff;
        background-image: linear-gradient(0deg, var(--accent-10), var(--accent-10));
        /* Тень мягкая: чистый фон под кнопками гарантирует scrim (эталон 9,
           prototypes/tmp/float-btn-skin.html), тяжёлое парение не нужно. */
        box-shadow: 0 6px 18px -8px rgba(28, 20, 55, 0.3);
    }

    /* Паспорт стиля: peek'а нет — футбар просто absolute к .card-sheet (position
       relative + overflow hidden; скроллер .cs-scroll — ребёнок, absolute не уезжает
       со скроллом и едет вместе с шитом при драге). Работает на обоих брейкпоинтах. */
    #pp-modal .cs-foot {
        position: absolute; left: 0; right: 0; z-index: 6;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        margin: 0 var(--card-inset);
    }
    /* Просвет под баром, чтобы последний блок не прятался. */
    #pp-modal .cs-scroll {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
    /* Scrim (эталон 9): НА ФУТБАРЕ (::before, z:-1 — под его кнопками, поверх
       контента) — маска .cs-scroll создаёт стекинг-контекст, scrim на шелле
       перекрыл бы кнопки. Футбар positioned (absolute к .card-sheet) всегда. */
    #pp-modal .cs-foot::before {
        content: ''; position: absolute; z-index: -1; pointer-events: none;
        left: calc(-1 * var(--card-inset)); right: calc(-1 * var(--card-inset));
        bottom: calc(-12px - env(safe-area-inset-bottom, 0px));
        height: calc(98px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45) 14px, rgba(255, 255, 255, 0.8) 24px, rgba(255, 255, 255, 0.97) 32px, #fff 40px);
    }
}