/* ============================================================================
   Tech Audit · Admin Panel — Design System
   ----------------------------------------------------------------------------
   Мова: Apple / iOS («Liquid Glass», закріплена користувачем).
   Правило матеріалу: скло — це хром (шапка, тулбари, модалки, шухляди),
   контент — непрозорий і швидкий. Жодного скла на скло.

   Архітектура файла:
     1. Токени (light / dark) + legacy-аліаси для JS-шаблонів
     2. Reset і база
     3. Утиліти (мінімальний load-bearing набір)
     4. Хром: топбар, вкладки, кнопки
     5. Екран входу (OTP)
     6. Домашній екран: KPI, розподіл, тулбар, картки аудитів, таблиця
     7. Стани (loading / empty / error)
     8. Екран аудиту: композиція, шапка, зведення, фільтри, навігатор,
        картки дефектів, inline-редактор, дропдауни, зум фото
     9. Модалки, toast, гарячі клавіші
    10. Аналітика · Навчання AI · Студія тем
    11. Адаптив: телефон (нижня навігація), планшет, desktop
    12. Доступність: reduced motion / transparency / contrast
   ========================================================================== */

/* ============================== 1. ТОКЕНИ ================================= */

:root {
    /* Типографіка: системний стек Apple; SF Pro несе оптичні розміри сам */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
        'Segoe UI Variable Text', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
        'Segoe UI Variable Display', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Code',
        'JetBrains Mono', Consolas, Menlo, monospace;

    /* Полотно і поверхні */
    --paper: #F2F4F8;
    --canvas-deep: #E9EDF3;
    --surface: #FFFFFF;
    --surface-2: #F4F5F7;

    /* Чорнило */
    --ink: #1D1D1F;
    --ink-2: #46464C;
    --ink-3: #6D6D76;

    /* Лінії: системні хейрлайни */
    --line: rgba(18, 20, 26, 0.16);
    --line-2: rgba(18, 20, 26, 0.08);

    /* Акценти Tech Audit: синій основний, бірюзовий допоміжний */
    --blue: #0071E3;
    --blue-press: #005BB8;
    --teal: #2E9BAD;

    /* Градації: семантичні системні кольори (текстобезпечні відтінки) */
    --crit: #D4302A;
    /* Оранжевий достатньо темний, щоб білий текст на суцільній заливці
       (сегменти смуги, бейдж рівня) проходив 4.5:1 */
    --warn: #A85800;
    --info: #0071E3;
    --repeat: #8440C9;
    --good: #1F8659;

    /* М'які заливки градацій (12–14%) */
    --crit-w: #FBEBEA;
    --warn-w: #F8F0E2;
    --info-w: #E6F0FB;
    --repeat-w: #F2EBFA;
    --good-w: #E6F3EC;

    /* Текст ПОВЕРХ тонованих заливок: та сама градація, але з контрастом ≥4.5.
       Чисті --crit/--warn/… підібрані як заливки й для дрібного тексту заслабкі. */
    --crit-ink: #B81E19;
    --warn-ink: #874800;
    --info-ink: #005EBE;
    --repeat-ink: #6B2CAE;
    --good-ink: #146848;
    --blue-ink: #0062C7;

    /* Текст ПОВЕРХ суцільних заливок градації (бейджі, сегменти смуги) */
    --on-fill: #FFFFFF;
    /* Суцільний синій під білий текст (кнопки) */
    --blue-solid: #0071E3;

    /* Відповідальні служби */
    --eng: #1F8659;
    --trc: #3A5FD0;
    --trade: #C46A02;

    /* Бренди мережі */
    --vk: #0B63CE;
    --velmart: #0E9F6E;
    --express: #E8960C;

    /* Скло (хром) */
    --glass: rgba(255, 255, 255, 0.64);
    --glass-strong: rgba(255, 255, 255, 0.80);
    --edge: rgba(255, 255, 255, 0.70);
    --glass-blur: 22px;

    /* Тіні: м'які, розсіяні, без бруду */
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 2px 6px rgba(16, 24, 40, 0.07), 0 16px 44px rgba(16, 24, 40, 0.12);
    --shadow-3: 0 8px 20px rgba(16, 24, 40, 0.10), 0 32px 80px rgba(16, 24, 40, 0.18);

    /* Концентричні радіуси */
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 11px;
    --r-pill: 999px;

    /* 8-pt простір */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* Рух: пружинні криві */
    --ease-surface: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 140ms;
    --dur-mid: 260ms;
    --dur-slow: 480ms;

    /* Safe areas: Telegram → системний fallback.
       Верх = системний відступ + панель керування Telegram. */
    --safe-top: calc(
        var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) +
        var(--tg-content-safe-area-inset-top, 0px)
    );
    --safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
    --safe-left: max(var(--tg-safe-area-inset-left, 0px), env(safe-area-inset-left, 0px));
    --safe-right: max(var(--tg-safe-area-inset-right, 0px), env(safe-area-inset-right, 0px));

    /* Макет */
    --content-max: 1440px;
    --topbar-h: 64px;

    color-scheme: light;
}

html.dark {
    --paper: #0D0F13;
    --canvas-deep: #08090C;
    --surface: #1B1D23;
    --surface-2: #26282F;

    --ink: #F2F3F7;
    --ink-2: #C6C8D1;
    --ink-3: #A6A9B4;

    --line: rgba(255, 255, 255, 0.16);
    --line-2: rgba(255, 255, 255, 0.08);

    --blue: #0A84FF;
    --blue-press: #3395FF;
    --teal: #4FC1D4;

    --crit: #FF5D55;
    --warn: #FFA028;
    --info: #409CFF;
    --repeat: #BF7AF0;
    --good: #3ACD8E;

    --crit-w: rgba(255, 93, 85, 0.16);
    --warn-w: rgba(255, 160, 40, 0.15);
    --info-w: rgba(64, 156, 255, 0.16);
    --repeat-w: rgba(191, 122, 240, 0.16);
    --good-w: rgba(58, 205, 142, 0.15);

    /* У темній темі самі градації вже світлі — вони і є текстом на тонованому.
       А от на СУЦІЛЬНІЙ заливці білий текст провалюється, тож там — темне чорнило. */
    --crit-ink: #FF7A73;
    --warn-ink: #FFB454;
    --info-ink: #5BAAFF;
    --repeat-ink: #CB93F5;
    --good-ink: #4FD79B;
    --blue-ink: #62B0FF;
    --on-fill: #10131A;
    --blue-solid: #0A6AD0;

    --eng: #3ACD8E;
    --trc: #7B96F2;
    --trade: #FFA028;

    --vk: #4C96EF;
    --velmart: #2FBE8C;
    --express: #F2B13F;

    --glass: rgba(26, 28, 34, 0.66);
    --glass-strong: rgba(26, 28, 34, 0.84);
    --edge: rgba(255, 255, 255, 0.09);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.32);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.32), 0 16px 44px rgba(0, 0, 0, 0.46);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.4), 0 32px 80px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* ============================== 2. RESET / БАЗА =========================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Амбієнтне поле: полотну є що заломлювати крізь скло */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(52% 44% at 12% -6%, rgba(0, 113, 227, 0.075), transparent 70%),
        radial-gradient(46% 40% at 94% 4%, rgba(46, 155, 173, 0.07), transparent 70%),
        linear-gradient(180deg, var(--paper), var(--canvas-deep));
}
html.dark body::before {
    background:
        radial-gradient(52% 44% at 12% -6%, rgba(10, 132, 255, 0.10), transparent 70%),
        radial-gradient(46% 40% at 94% 4%, rgba(79, 193, 212, 0.07), transparent 70%),
        linear-gradient(180deg, var(--paper), var(--canvas-deep));
}

img, svg, video { display: block; max-width: 100%; }
img { border: 0; }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}
button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(0, 113, 227, 0.22); }
html.dark ::selection { background: rgba(10, 132, 255, 0.35); }

/* Фокус клавіатури: синє кільце з відступом, тільки для клавіатури */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--blue) 65%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Тонкі системні скролбари */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink-3) 45%, transparent) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink-3) 40%, transparent); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Числа — завжди табличні */
.kpi-val, .mv, .n, .val, .zv, .v, .mono, td, .audit-navigator__position,
.trend-bar-val, #edCounter, #zoomCounter, .kpi-foot, .results-count {
    font-variant-numeric: tabular-nums;
}

/* ============================== 3. УТИЛІТИ ================================ */

.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.relative { position: relative; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.font-bold { font-weight: 700; }
.whitespace-nowrap { white-space: nowrap; }
.col-span-full, .col-span-2 { grid-column: 1 / -1; }
.gap-3 { gap: 12px; }
.gap-6 { gap: 24px; }
.mb-2 { margin-bottom: 8px; }
.mr-2 { margin-right: 8px; }
.opacity-0 { opacity: 0; }
.scale-95 { transform: scale(0.95); }
.mono { font-family: var(--font-mono); }
.cursor-pointer { cursor: pointer; }

/* Прихований, але доступний для скрінрідера текст */
.admin-sr-only, .otp-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@keyframes ta-spin { to { transform: rotate(360deg); } }


/* Матеріалізація контенту: приходить як матеріал, не як прозорість */
.animate-fade-in { animation: ta-fade-in var(--dur-mid) var(--ease-enter) both; }
@keyframes ta-fade-in { from { opacity: 0; } }

.animate-fade-in-up {
    animation: ta-materialize var(--dur-slow) var(--ease-enter) both;
    animation-delay: var(--card-delay, 0ms);
}
@keyframes ta-materialize {
    from { opacity: 0; transform: translateY(10px) scale(0.97); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* Екрани, що вже «теплі», перемикаються миттєво */
.view[data-warm] .animate-fade-in-up { animation: none; opacity: 1; }

/* ============================== 4. ХРОМ =================================== */

#appShell {
    display: none; /* JS перемикає на flex */
    flex-direction: column;
    min-height: 100dvh;
}

.app-aurora { display: none; }
#bgOverlay { display: none !important; }

/* --- Топбар: скляна рейка ---
   Скло живе на ::before: backdrop-filter на самому елементі зробив би його
   containing block, і нижня навігація (position:fixed .tabs) прилипала б
   до топбара замість вікна. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    padding-top: var(--safe-top);
    border-bottom: 1px solid var(--line-2);
    box-shadow: 0 1px 0 var(--edge) inset;
}
.topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}

.topbar-in {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(14px, 2.5vw, 28px);
    padding-left: calc(clamp(14px, 2.5vw, 28px) + var(--safe-left));
    padding-right: calc(clamp(14px, 2.5vw, 28px) + var(--safe-right));
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }

.brand-mark {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 10px;
    background: linear-gradient(160deg, var(--blue), color-mix(in srgb, var(--blue) 62%, var(--teal)));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 35%, transparent);
}
.brand-mark svg {
    width: 19px; height: 19px;
    stroke: #fff; stroke-width: 2.4; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.011em;
    line-height: 1.2;
    white-space: nowrap;
}

.brand-sub-row { display: flex; align-items: center; gap: 7px; margin-top: 1px; }

.brand-sub {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--good-w);
    color: var(--good-ink);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.live-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--good);
    animation: none;
}

/* --- Вкладки: сегментований перемикач --- */
.tabs {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 3px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    isolation: isolate;
}
html.dark .tabs { background: color-mix(in srgb, #fff 8%, transparent); }

.tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--ink-2);
    transition: color var(--dur-fast) ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); }
.tab .tab-ic { display: none; width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Індикатор їде за активною вкладкою (transform-only) */
.tab-indicator {
    position: absolute;
    z-index: 0;
    left: 0; top: 3px; bottom: 3px;
    width: 100px;
    transform-origin: left center;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    opacity: 0;
    transition: transform var(--dur-mid) var(--ease-surface), opacity var(--dur-fast) ease;
    pointer-events: none;
}
html.dark .tab-indicator { background: color-mix(in srgb, #fff 14%, var(--surface)); }

.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Нативний селектор циклу */
#cycleSelector {
    height: 36px;
    max-width: 190px;
    padding: 0 28px 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D6D76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 9px center / 13px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    text-overflow: ellipsis;
    cursor: pointer;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
#cycleSelector:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }

.iconbtn {
    width: 36px; height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    box-shadow: var(--shadow-1);
    transition: transform 100ms ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.iconbtn:hover { color: var(--ink); background: var(--surface-2); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn svg, .iconbtn i { width: 17px; height: 17px; stroke-width: 2; }

.logout-btn {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--crit-ink);
    box-shadow: var(--shadow-1);
    transition: transform 100ms ease, background-color var(--dur-fast) ease;
}
.logout-btn:hover { background: var(--crit-w); }
.logout-btn:active { transform: scale(0.94); }
.logout-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Текстова кнопка-логаут у таблиці навчання */
.logout-btn.learn-del {
    width: auto;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
}

/* --- Головна CTA --- */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--r-pill);
    background: var(--blue-solid);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.006em;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--blue) 38%, transparent);
    transition: transform 100ms ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.cta:hover { background: var(--blue-press); }
.cta:active { transform: scale(0.97); }
.cta svg, .cta i { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px 0 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-1);
    transition: transform 100ms ease, background-color var(--dur-fast) ease;
    white-space: nowrap;
}
.back-btn:hover { background: var(--surface-2); }
.back-btn:active { transform: scale(0.96); }

/* --- Контейнер застосунку --- */
.app {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: clamp(16px, 2.5vw, 28px);
    padding-left: calc(clamp(14px, 2.5vw, 28px) + var(--safe-left));
    padding-right: calc(clamp(14px, 2.5vw, 28px) + var(--safe-right));
    padding-bottom: calc(clamp(24px, 4vw, 48px) + var(--safe-bottom));
}

.view { display: none; flex-direction: column; }
.view.active { display: flex; }

/* --- Заголовок сторінки --- */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--blue);
    flex: 0 0 auto;
}

.page-head h1, .view > .page-head h1 {
    font-size: clamp(28px, 4vw, 34px);
    font-weight: 700;
    letter-spacing: -0.021em;
    line-height: 1.12;
}

.page-head .sub {
    margin-top: 6px;
    max-width: 520px;
    font-size: 14px;
    color: var(--ink-3);
    letter-spacing: -0.004em;
}

/* ========================= 5. ЕКРАН ВХОДУ ================================ */

.login-screen-wrapper {
    display: none; /* JS перемикає на flex */
    grid-template-columns: minmax(0, 520px) minmax(360px, 430px);
    align-items: center;
    justify-content: center;
    gap: clamp(48px, 8vw, 112px);
    min-height: 100dvh;
    padding: calc(clamp(28px, 5vw, 72px) + var(--safe-top)) max(var(--sp-5), var(--safe-left)) calc(clamp(28px, 5vw, 72px) + var(--safe-bottom));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--paper) 88%, #fff), color-mix(in srgb, var(--canvas-deep) 64%, #fff));
}

.login-screen-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--blue) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, transparent) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, #000 10%, transparent 76%);
    mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, #000 10%, transparent 76%);
}

.login-screen-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at var(--auth-page-x, 50%) var(--auth-page-y, 45%), color-mix(in srgb, var(--blue) 11%, transparent), transparent 32%);
}

.auth-aurora {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}

.auth-aurora span {
    position: absolute;
    width: min(52vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.42;
    filter: blur(62px);
    will-change: transform;
}
.auth-aurora span:nth-child(1) {
    left: -16%; top: -32%;
    background: color-mix(in srgb, var(--blue) 62%, #80dfff);
    animation: auth-aurora-one 18s ease-in-out infinite alternate;
}
.auth-aurora span:nth-child(2) {
    right: -20%; top: 4%;
    background: color-mix(in srgb, var(--teal) 66%, #adfff0);
    animation: auth-aurora-two 22s ease-in-out infinite alternate;
}
.auth-aurora span:nth-child(3) {
    left: 28%; bottom: -48%;
    background: color-mix(in srgb, var(--repeat) 48%, #b7c9ff);
    animation: auth-aurora-three 20s ease-in-out infinite alternate;
}
@keyframes auth-aurora-one { to { transform: translate3d(18vw, 10vh, 0) scale(1.12); } }
@keyframes auth-aurora-two { to { transform: translate3d(-16vw, 12vh, 0) scale(0.9); } }
@keyframes auth-aurora-three { to { transform: translate3d(8vw, -16vh, 0) scale(1.16); } }

.otp-page-heading {
    text-align: left;
    max-width: 520px;
    position: relative;
    z-index: 1;
}

.otp-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-bottom: var(--sp-6);
    text-align: left;
}
.otp-brand-mark {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--blue), color-mix(in srgb, var(--blue) 62%, var(--teal)));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--blue) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.42);
    position: relative;
    animation: auth-brand-float 4.8s ease-in-out infinite;
}
.otp-brand-mark::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
    border-radius: 17px;
    animation: auth-brand-ring 2.8s ease-out infinite;
}
@keyframes auth-brand-float { 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes auth-brand-ring {
    0% { opacity: .65; transform: scale(.82); }
    75%, 100% { opacity: 0; transform: scale(1.3); }
}
.otp-brand-mark svg {
    width: 22px; height: 22px;
    stroke: #fff; stroke-width: 2.2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.otp-brand-name {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.011em;
    line-height: 1.2;
}
.otp-brand-meta {
    display: block;
    font-size: 12px;
    color: var(--ink-3);
}

.otp-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--info-w) 84%, transparent);
    color: var(--info-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
    box-shadow: inset 0 1px 0 var(--edge);
}

.otp-page-heading h1 {
    max-width: 510px;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 800;
    letter-spacing: -0.052em;
    line-height: .98;
}
.otp-page-heading h1 span { color: var(--blue-ink); }

.otp-page-lead {
    max-width: 470px;
    margin-top: 18px;
    font-size: 16px;
    color: var(--ink-3);
    line-height: 1.6;
}

.auth-signal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}
.auth-signal {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 var(--edge);
    transition: transform 220ms var(--ease-surface), border-color 220ms ease, background-color 220ms ease;
}
.auth-signal:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
    background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.auth-signal-icon {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--blue) 10%, transparent);
    color: var(--blue-ink);
}
.auth-signal-icon svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}
.auth-signal strong, .auth-signal small { display: block; }
.auth-signal strong { font-size: 12.5px; color: var(--ink-2); }
.auth-signal small { margin-top: 2px; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

.login-screen-wrapper.auth-entered .otp-page-heading > * {
    animation: auth-reveal 680ms var(--ease-enter) both;
}
.login-screen-wrapper:not(.auth-entered) .otp-page-heading > *,
.login-screen-wrapper:not(.auth-entered) .otp-card { opacity: 0; }
.login-screen-wrapper.auth-entered .otp-page-heading > :nth-child(2) { animation-delay: 70ms; }
.login-screen-wrapper.auth-entered .otp-page-heading > :nth-child(3) { animation-delay: 120ms; }
.login-screen-wrapper.auth-entered .otp-page-heading > :nth-child(4) { animation-delay: 170ms; }
.login-screen-wrapper.auth-entered .otp-page-heading > :nth-child(5) { animation-delay: 220ms; }
@keyframes auth-reveal {
    from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: none; }
}

.otp-auth-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    width: min(430px, 100%);
    position: relative;
    z-index: 1;
}

@property --auth-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Авторизаційна картка: animated border + lightweight pointer spotlight */
.otp-card {
    --auth-x: 50%;
    --auth-y: 35%;
    width: 100%;
    padding: 30px 28px 26px;
    text-align: center;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    background: color-mix(in srgb, var(--glass-strong) 92%, transparent);
    -webkit-backdrop-filter: blur(32px) saturate(175%);
    backdrop-filter: blur(32px) saturate(175%);
    box-shadow: 0 28px 80px color-mix(in srgb, var(--ink) 14%, transparent), 0 6px 24px color-mix(in srgb, var(--blue) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.72);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform 320ms var(--ease-surface), box-shadow 320ms ease;
}
.otp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--auth-angle), transparent 0 18%, color-mix(in srgb, var(--blue) 72%, #8bdfff) 28%, color-mix(in srgb, var(--teal) 66%, #baffef) 39%, transparent 52% 78%, color-mix(in srgb, var(--repeat) 46%, #9ebaff) 90%, transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: auth-border-spin 8s linear infinite;
}
.otp-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(280px circle at var(--auth-x) var(--auth-y), color-mix(in srgb, var(--blue) 13%, transparent), transparent 68%);
    transition: opacity 280ms ease;
}
.otp-card:hover::after { opacity: 1; }
.otp-card > * { position: relative; z-index: 1; }
.otp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 94px color-mix(in srgb, var(--ink) 16%, transparent), 0 10px 34px color-mix(in srgb, var(--blue) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.76);
}
.login-screen-wrapper.auth-entered .otp-card {
    animation: auth-card-arrive 760ms 150ms var(--ease-enter) both;
}
@keyframes auth-border-spin { to { --auth-angle: 360deg; } }
@keyframes auth-card-arrive {
    from { opacity: 0; transform: translateY(30px) scale(.94); filter: blur(12px); }
    to { opacity: 1; transform: none; filter: none; }
}

.auth-card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 auto 14px;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--good-w) 82%, transparent);
    color: var(--good-ink);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.auth-card-status span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 36%, transparent);
    animation: auth-live-pulse 2.2s ease-out infinite;
}
@keyframes auth-live-pulse {
    65%, 100% { box-shadow: 0 0 0 8px transparent; }
}

.otp-icon-wrap {
    width: 52px; height: 52px;
    margin: 0 auto var(--sp-4);
    display: grid; place-items: center;
    border-radius: 15px;
    background: var(--info-w);
    color: var(--info-ink);
    position: relative;
    box-shadow: inset 0 1px 0 var(--edge);
}
.otp-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 19px;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
    animation: auth-icon-breathe 3.2s ease-in-out infinite;
}
.otp-icon-wrap svg {
    width: 26px; height: 26px;
    stroke: currentColor; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
@keyframes auth-icon-breathe {
    50% { transform: scale(1.06); opacity: .4; }
}

.otp-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.014em;
}
.otp-subtitle {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--ink-3);
}

.auth-form {
    display: grid;
    gap: 15px;
    margin-top: 14px;
    text-align: left;
}
.google-auth-block.hidden + .auth-form { margin-top: var(--sp-6); }

.auth-field {
    display: grid;
    gap: 7px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 700;
}

.auth-input-wrap {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 13px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--edge);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
                background-color var(--dur-fast) ease, transform 220ms var(--ease-surface);
    position: relative;
    overflow: hidden;
}
.auth-input-wrap::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), var(--teal));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 260ms var(--ease-enter);
}

.auth-input-wrap:focus-within {
    border-color: var(--blue);
    background: var(--surface-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent), inset 0 1px 0 var(--edge);
    transform: translateY(-2px);
}
.auth-input-wrap:focus-within::after { transform: scaleX(1); }
.auth-input-wrap:focus-within > svg { color: var(--blue-ink); transform: scale(1.08); }

.auth-input-wrap > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    margin-right: 11px;
    fill: none;
    color: var(--ink-3);
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 220ms ease, transform 220ms var(--ease-surface);
}

.auth-input-wrap input {
    min-width: 0;
    flex: 1;
    height: 49px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
}

.auth-input-wrap input:disabled { opacity: 0.62; }

.auth-password-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-right: -6px;
    border-radius: 10px;
    color: var(--ink-3);
    transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.auth-password-toggle:hover { color: var(--blue-ink); background: var(--info-w); }
.auth-password-toggle:disabled { opacity: 0.45; cursor: default; }
.auth-password-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-submit {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 2px;
    padding: 0 20px;
    border-radius: var(--r-md);
    background: linear-gradient(115deg, var(--blue), color-mix(in srgb, var(--blue) 72%, var(--teal)), var(--blue));
    background-size: 180% 180%;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 7px 20px color-mix(in srgb, var(--blue) 31%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
    transition: transform 160ms var(--ease-surface), filter var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    animation: auth-submit-gradient 6s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.auth-submit::before {
    content: '';
    position: absolute;
    inset: -2px auto -2px -45%;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
    transform: skewX(-18deg);
    transition: left 520ms var(--ease-enter);
}
.auth-submit:hover::before { left: 112%; }
.auth-submit:hover { filter: brightness(1.045); transform: translateY(-2px); box-shadow: 0 11px 28px color-mix(in srgb, var(--blue) 38%, transparent); }
.auth-submit:active { transform: scale(0.985); }
.auth-submit:disabled { opacity: 0.62; cursor: wait; transform: none; }
.auth-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 220ms var(--ease-surface);
}
.auth-submit:hover svg { transform: translateX(3px); }
@keyframes auth-submit-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.auth-form .otp-error { margin-top: -5px; }

.google-auth-block { margin-top: var(--sp-5); }
.google-auth-block:not(.hidden) { animation: auth-method-arrive 480ms 260ms var(--ease-enter) both; }
@keyframes auth-method-arrive {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    color: var(--ink-3);
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--line-2);
}

.google-auth-button {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 18px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--edge);
    transition: transform 120ms var(--ease-surface), border-color var(--dur-fast) ease,
                background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    position: relative;
    overflow: hidden;
}
.google-auth-button::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, color-mix(in srgb, var(--blue) 8%, transparent) 44%, color-mix(in srgb, var(--teal) 12%, transparent) 54%, transparent 74%);
    transform: translateX(-120%);
    transition: transform 620ms var(--ease-enter);
}

.google-auth-button:hover {
    border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
    background: var(--surface-2);
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge);
    transform: translateY(-2px);
}
.google-auth-button:hover::before { transform: translateX(120%); }

.google-auth-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 15%, transparent), var(--shadow-1);
}

.google-auth-button:active { transform: scale(0.985); }
.google-auth-button svg { width: 20px; height: 20px; flex: 0 0 auto; }
.google-auth-button span { flex: 1; text-align: center; }
.google-auth-button .google-auth-arrow {
    width: 18px; height: 18px;
    fill: none; stroke: var(--ink-3); stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 220ms var(--ease-surface), stroke 220ms ease;
}
.google-auth-button:hover .google-auth-arrow { transform: translateX(4px); stroke: var(--blue-ink); }

/* Клітинки коду */
.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: var(--sp-6) 0 var(--sp-2);
    cursor: text;
    position: relative;
}

.otp-box {
    position: relative;
    width: 42px; height: 60px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--surface);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
                transform var(--dur-fast) var(--ease-surface), background-color var(--dur-fast) ease;
}
.otp-boxes.is-focused .otp-box.active {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
}
/* Курсор у активній клітинці */
.otp-boxes.is-focused .otp-box.active::after {
    content: '';
    width: 2px; height: 26px;
    background: var(--blue);
    border-radius: 2px;
    animation: none;
}

.otp-box.filled {
    border-color: color-mix(in srgb, var(--ink) 35%, transparent);
    background: var(--surface-2);
}
.otp-box.filling {
    animation: ta-otp-fill 0.2s var(--ease-enter);
    animation-delay: var(--fill-delay, 0ms);
}
@keyframes ta-otp-fill {
    0% { transform: scale(0.92); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.otp-boxes.has-error .otp-box {
    border-color: var(--crit);
    animation: ta-shake 0.26s ease;
}
@keyframes ta-shake {
    20% { transform: translateX(-5px); }
    45% { transform: translateX(4px); }
    70% { transform: translateX(-3px); }
    90% { transform: translateX(2px); }
}
.otp-box .liquid-bubble, .otp-merged-shell { display: none; }

.otp-hidden-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    border: 0; padding: 0;
    pointer-events: none;
}

.otp-error {
    min-height: 18px;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--crit);
}

/* Стан перевірки */
.otp-submit-status {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--sp-3);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
}
.otp-card.is-verifying .otp-submit-status { display: flex; }
.otp-submit-spinner {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--blue);
    animation: ta-spin 0.8s linear infinite;
}

/* Результат перевірки */
.otp-result {
    display: none;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-2);
}
.otp-card.result-success .otp-result,
.otp-card.result-error .otp-result { display: block; animation: ta-fade-in var(--dur-mid) var(--ease-enter); }
.otp-card.result-success { animation: auth-success 620ms var(--ease-enter); }
.otp-card.result-error { animation: auth-error 360ms ease; }
@keyframes auth-success {
    45% { transform: translateY(-4px) scale(1.012); box-shadow: 0 34px 94px color-mix(in srgb, var(--good) 14%, transparent), 0 0 0 5px color-mix(in srgb, var(--good) 9%, transparent); }
}
@keyframes auth-error {
    22% { transform: translateX(-5px); }
    48% { transform: translateX(4px); }
    72% { transform: translateX(-2px); }
}

.otp-result-icon {
    width: 40px; height: 40px;
    margin: 0 auto 8px;
    display: grid; place-items: center;
    border-radius: 50%;
}
.otp-result-icon svg {
    width: 22px; height: 22px;
    stroke-width: 2.6; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.otp-card.result-success .otp-result-icon { background: var(--good-w); }
.otp-card.result-success .otp-result-icon svg { stroke: var(--good); }
.otp-card.result-error .otp-result-icon { background: var(--crit-w); }
.otp-card.result-error .otp-result-icon svg { stroke: var(--crit); }
.otp-result-icon .result-cross { display: none; }
.otp-card.result-error .otp-result-icon .result-check { display: none; }
.otp-card.result-error .otp-result-icon .result-cross { display: block; }

.otp-result-title { font-size: 15px; font-weight: 700; letter-spacing: -0.011em; }
.otp-result-copy { margin-top: 3px; font-size: 13px; color: var(--ink-3); }

.otp-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--sp-5);
    font-size: 13px;
    color: var(--ink-3);
}
.otp-footer-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 10%, transparent);
    animation: auth-footer-pulse 2.4s ease-in-out infinite;
}
@keyframes auth-footer-pulse { 50% { opacity: .55; transform: scale(.8); } }
.otp-resend {
    color: var(--blue-ink);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background-color var(--dur-fast) ease;
}
.otp-resend:hover { background: var(--info-w); }

.otp-security-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ink-3);
}
.otp-security-note svg {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ================== 6. ДОМАШНІЙ ЕКРАН (АУДИТИ) ============================ */

/* --- KPI-стрічка: непрозорі картки з табличними числами --- */
.kpi-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.kpi {
    position: relative;
    padding: 16px 18px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-fast) var(--ease-surface), box-shadow var(--dur-fast) ease,
                border-color var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.kpi[role="button"] { cursor: pointer; }
.kpi[role="button"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kpi[role="button"]:active { transform: scale(0.98); }

.kpi.active-filter { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent), var(--shadow-1); }
.kpi.tinted.d.active-filter { border-color: var(--crit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crit) 20%, transparent), var(--shadow-1); }
.kpi.tinted.c.active-filter { border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent), var(--shadow-1); }
.kpi.tinted.b.active-filter { border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 20%, transparent), var(--shadow-1); }
.kpi.tinted.e.active-filter { border-color: var(--repeat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--repeat) 20%, transparent), var(--shadow-1); }

.kpi-lab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.015em;
    color: var(--ink-3);
    white-space: nowrap;
}
.kpi-lab .ic {
    width: 28px; height: 28px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink-3);
}
.kpi-lab .ic svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.kpi.tinted.d .ic { background: var(--crit-w); color: var(--crit-ink); }
.kpi.tinted.c .ic { background: var(--warn-w); color: var(--warn-ink); }
.kpi.tinted.b .ic { background: var(--info-w); color: var(--info-ink); }
.kpi.tinted.e .ic { background: var(--repeat-w); color: var(--repeat-ink); }

.kpi-val {
    margin-top: 8px;
    font-family: var(--font-display);
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.021em;
    line-height: 1.05;
}
.kpi.tinted.d .kpi-val { color: var(--crit-ink); }
.kpi.tinted.c .kpi-val { color: var(--warn-ink); }
.kpi.tinted.b .kpi-val { color: var(--info-ink); }
.kpi.tinted.e .kpi-val { color: var(--repeat-ink); }

.kpi-foot {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--ink-3);
}

/* --- Розподіл градацій --- */
.distrib {
    padding: 18px 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--sp-4);
}

.distrib-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: 12px;
}
.distrib-h .l {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.distrib-h .v { font-size: 14px; color: var(--ink-2); }
.distrib-h .v b { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

.distrib-bar {
    display: flex;
    height: 26px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface-2);
}
.distrib-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--on-fill);
    transition: none;
}
.distrib-seg.zero { display: none; }
.distrib-seg.d { background: var(--crit); }
.distrib-seg.c { background: var(--warn); }
.distrib-seg.b { background: var(--info); }
.distrib-seg.e { background: var(--repeat); }
.distrib-seg + .distrib-seg { box-shadow: inset 2px 0 0 var(--surface); }

.distrib-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
}
.distrib-legend .li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.distrib-legend .sq {
    width: 9px; height: 9px;
    border-radius: 3px;
    flex: 0 0 auto;
}

/* --- Тулбар списку: скляна рейка --- */
.toolbar {
    position: sticky;
    top: calc(var(--topbar-h) + var(--safe-top) + 8px);
    z-index: 40;
    display: grid;
    grid-template-columns: auto auto minmax(200px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--edge);
    margin-bottom: var(--sp-3);
}

/* Перемикач вигляду */
.view-toggle {
    display: inline-flex;
    padding: 3px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}
html.dark .view-toggle { background: color-mix(in srgb, #fff 8%, transparent); }
.view-toggle button {
    width: 38px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--ink-3);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.view-toggle button:hover { color: var(--ink); }
.view-toggle button.active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}
.view-toggle svg, .view-toggle i { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Пошук */
.search-wrap { position: relative; min-width: 0; }
.search-wrap svg {
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    stroke: var(--ink-3); stroke-width: 2.1; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
}
.search-wrap input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 14px;
    color: var(--ink);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.search-wrap input::placeholder { color: var(--ink-3); }
.search-wrap input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--blue) 15%, transparent);
    outline: none;
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.results-count {
    margin: 2px 2px var(--sp-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink-3);
}

/* --- Сітка аудитів --- */
.audit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-4);
}

.audit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-surface), box-shadow var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.audit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.audit-card:active { transform: scale(0.985); }

.audit-img {
    position: relative;
    height: 158px;
    background-size: cover;
    background-position: center 32%;
    background-color: var(--surface-2);
}
.audit-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 16, 24, 0.34), transparent 34%, transparent 58%, rgba(12, 16, 24, 0.5));
    pointer-events: none;
}

.brand-chip {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: rgba(16, 19, 26, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.brand-chip.vk { background: color-mix(in srgb, var(--vk) 72%, #000); }
.brand-chip.velmart { background: color-mix(in srgb, var(--velmart) 56%, #000); }
.brand-chip.express { background: color-mix(in srgb, var(--express) 46%, #000); }

.date-chip {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 1;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #1D1D1F;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.code-stamp {
    position: absolute;
    left: 10px; bottom: 10px;
    z-index: 1;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(16, 19, 26, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.audit-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 12px; }

.audit-addr {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.audit-city {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.audit-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}
.audit-stat .n {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.audit-stat .l {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.audit-sev {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 12px;
}
.mini-sev {
    padding: 7px 4px 6px;
    text-align: center;
    border-radius: 9px;
}
.mini-sev .mv {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
}
.mini-sev .mk {
    margin-top: 1px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
}
.mini-sev.d { background: var(--crit-w); color: var(--crit-ink); }
.mini-sev.c { background: var(--warn-w); color: var(--warn-ink); }
.mini-sev.b { background: var(--info-w); color: var(--info-ink); }
.mini-sev.e { background: var(--repeat-w); color: var(--repeat-ink); }
.mini-sev.zero { background: var(--surface-2); color: var(--ink-3); opacity: 0.75; }

.audit-actions {
    display: flex;
    gap: 6px;
    padding: 10px 16px 14px;
    border-top: 1px solid var(--line-2);
    margin-top: 12px;
}
.audit-action {
    flex: 1;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform 100ms ease;
}
.audit-action:hover { background: var(--surface-2); color: var(--ink); }
.audit-action:active { transform: scale(0.94); }
.audit-action.danger { color: var(--crit-ink); }
.audit-action.danger:hover { background: var(--crit-w); }
.audit-action svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- Таблиця аудитів --- */
.table-wrap {
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow-x: auto;
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
    user-select: none;
}
.table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
}
.table tbody tr { cursor: pointer; transition: background-color var(--dur-fast) ease; }
.table tbody tr:hover { background: color-mix(in srgb, var(--blue) 4.5%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.sort-ic { color: var(--blue); font-size: 12px; }

.audit-table-facade {
    width: 38px; height: 38px;
    border-radius: 9px;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--surface-2);
    border: 1px solid var(--line-2);
}
.audit-table-facade img { width: 100%; height: 100%; object-fit: cover; }
.audit-table-store { font-weight: 600; font-size: 13.5px; letter-spacing: -0.006em; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ========================= 7. СТАНИ =========================== */

.admin-state, .admin-load-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 44px 24px;
    text-align: center;
}
.admin-state strong, .admin-load-state strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.008em;
}
.admin-state span, .admin-load-state span {
    font-size: 13px;
    color: var(--ink-3);
    max-width: 340px;
}
.admin-state--compact { padding: 22px 16px; }
.admin-state--loading strong { color: var(--ink-2); }
.admin-state--loading::before {
    content: '';
    width: 26px; height: 26px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 2.5px solid var(--line);
    border-top-color: var(--blue);
    animation: ta-spin 0.8s linear infinite;
}
.admin-state--error strong { color: var(--crit); }
.admin-load-state .back-btn { margin-top: 12px; }

/* Спінер-плитка для legacy loading-шаблонів */
.load-tile {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-3);
    box-shadow: var(--shadow-1);
}
.load-tile svg, .load-tile i { width: 18px; height: 18px; }
.load-note {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ================= 8. ЕКРАН АУДИТУ (DEFECTS) ============================== */

/* Композиція: [фільтри | контент | навігатор]. Успадковане рішення:
   sev-row і det-grid дублюють зведення і facet-бари — приховані. */
#defectsScreen.view.active {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr) 240px;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-4);
}
#defectsScreen > .audit-facet-sidebar { grid-column: 1; grid-row: 1 / span 4; }
#defectsScreen > .audit-command-row,
#defectsScreen > .det-hero,
#defectsScreen > .audit-compact-summary,
#defectsScreen > .w-full { grid-column: 2; min-width: 0; }
#defectsScreen > .audit-command-row { grid-row: 1; }
#defectsScreen > .det-hero { grid-row: 2; }
#defectsScreen > .audit-compact-summary { grid-row: 3; }
#defectsScreen > .w-full { grid-row: 4; }
#defectsScreen > .audit-navigator { grid-column: 3; grid-row: 1 / span 4; }
#defectsScreen > .sev-row,
#defectsScreen > .det-grid,
.legacy-facet-controls { display: none; }

/* --- Командний рядок: дії завжди окремим рядком, заголовок дихає --- */
.audit-command-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
}
.audit-command-row .detail-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.audit-mobile-facet-button {
    display: none; /* показується на ≤900px */
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-1);
}
.audit-mobile-facet-button i, .audit-mobile-facet-button svg { width: 15px; height: 15px; stroke-width: 2.1; }

.audit-heading { min-width: 0; }
.audit-heading__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.audit-heading__eyebrow span:first-child {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal);
}
.audit-heading__eyebrow b { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.audit-heading h1 {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    letter-spacing: -0.019em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.audit-heading p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-3);
    min-width: 0;
}
.audit-heading p > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-heading__icon {
    width: 28px; height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--ink-3);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.audit-heading__icon:hover { background: var(--surface-2); color: var(--ink); }
.audit-heading__icon i, .audit-heading__icon svg { width: 13px; height: 13px; }

/* --- Дії аудиту --- */
.detail-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.det-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--shadow-1);
    transition: transform 100ms ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.det-action:hover { background: var(--surface-2); color: var(--ink); }
.det-action:active { transform: scale(0.96); }
.det-action svg, .det-action i { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.det-action.audit-action-icon { width: 40px; padding: 0; justify-content: center; }
.det-action.audit-action-icon--danger { color: var(--crit-ink); }
.det-action.audit-action-icon--danger:hover { background: var(--crit-w); }

/* --- Контекст локації (фасад + прогрес) --- */
.det-hero {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.det-facade {
    position: relative;
    min-height: 190px;
    background: var(--surface-2);
    overflow: hidden;
}
.det-facade img#dtStoreFacade {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 1;
}
.det-facade .facade-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 16, 24, 0.4), transparent 32%, transparent 56%, rgba(12, 16, 24, 0.55));
}
.det-facade .brand-chip { top: 12px; left: 12px; z-index: 3; }
.loc-stamp {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #1D1D1F;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.facade-actions-container {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
}
.facade-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: var(--r-pill);
    background: rgba(16, 19, 26, 0.84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.facade-btn:hover { background: rgba(20, 24, 32, 0.8); }
.facade-btn:active { transform: scale(0.96); }

.det-hero-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 18px 20px;
    min-width: 0;
}
.det-hero-left h2 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.016em;
    line-height: 1.2;
}
.det-hero-left .meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-3);
}
.det-hero-left .meta .sep { color: var(--line); }
.det-hero-left .meta a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.det-hero-left .meta a svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.det-hero-left .meta .meta-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 7px;
    color: var(--ink-3);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.det-hero-left .meta .meta-edit:hover { background: var(--surface-2); color: var(--ink); }
.det-hero-left .meta .meta-edit svg { width: 13px; height: 13px; }

.det-progress .row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.det-progress .row .v {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}
.det-progress .track {
    height: 8px;
    margin-top: 7px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.det-progress .fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--teal), var(--blue));
    transition: none;
}
.det-progress .row.det-progress-note { font-size: 11px; justify-content: flex-end; margin-top: 4px; }

/* --- Компактне зведення --- */
.audit-compact-summary {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr) minmax(210px, 280px);
    align-items: center;
    gap: var(--sp-5);
    padding: 16px 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.audit-progress-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: var(--sp-5);
    border-right: 1px solid var(--line-2);
}
.audit-progress-ring {
    --audit-progress: 0deg;
    position: relative;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: conic-gradient(var(--blue) var(--audit-progress), var(--surface-2) 0deg);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.audit-progress-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--surface);
}
.audit-progress-ring strong {
    position: relative;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.audit-progress-summary > div:last-child span {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.audit-progress-summary > div:last-child strong {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.014em;
}

.audit-summary-severity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.audit-summary-severity button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 5px 12px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    transition: transform 100ms ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.audit-summary-severity button:active { transform: scale(0.97); }
.audit-summary-severity button b {
    font-family: var(--font-display);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.audit-summary-severity button.d { background: var(--crit-w); color: var(--crit-ink); }
.audit-summary-severity button.c { background: var(--warn-w); color: var(--warn-ink); }
.audit-summary-severity button.b { background: var(--info-w); color: var(--info-ink); }
.audit-summary-severity button.e { background: var(--repeat-w); color: var(--repeat-ink); }
.audit-summary-severity button.is-active { border-color: currentColor; box-shadow: 0 0 0 2.5px color-mix(in srgb, currentColor 22%, transparent); }

.audit-responsibility-summary { min-width: 0; }
.audit-responsibility-summary > span {
    display: block;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.audit-responsibility-bar {
    display: flex;
    height: 8px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface-2);
}
.audit-responsibility-bar i { display: block; height: 100%; }
.audit-responsibility-bar i + i { box-shadow: inset 2px 0 0 var(--surface); }
.audit-responsibility-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
}
.audit-responsibility-list span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: var(--ink-2);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.audit-responsibility-list span i {
    width: 8px; height: 8px;
    flex: 0 0 auto;
    border-radius: 3px;
}
.audit-responsibility-list span b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* --- Панель фільтрів (лівий рейл) --- */
.audit-facet-sidebar {
    position: sticky;
    top: calc(var(--topbar-h) + var(--safe-top) + 12px);
    max-height: calc(100dvh - var(--topbar-h) - var(--safe-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: 16px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--edge);
}

.audit-side-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.audit-side-heading > span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.audit-side-heading > div { display: flex; align-items: center; gap: 4px; }
#auditFacetReset {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--blue-ink);
    font-size: 12.5px;
    font-weight: 600;
    transition: background-color var(--dur-fast) ease;
}
#auditFacetReset:hover { background: var(--info-w); }
.audit-facet-close {
    display: none; /* тільки в мобільній шухляді */
    width: 34px; height: 34px;
    place-items: center;
    border-radius: 9px;
    color: var(--ink-3);
}
.audit-facet-close:hover { background: var(--surface-2); color: var(--ink); }
.audit-facet-close i, .audit-facet-close svg { width: 16px; height: 16px; }

.audit-side-search > span:first-child {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.audit-side-search__field { position: relative; display: block; }
.audit-side-search__field i, .audit-side-search__field svg {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    color: var(--ink-3);
    pointer-events: none;
}
.audit-side-search__field input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 33px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 13px;
}
.audit-side-search__field input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent);
    outline: none;
}

.audit-facet-group {
    margin: 0; padding: 0;
    border: 0;
    min-width: 0;
}
.audit-facet-group legend {
    padding: 0;
    margin-bottom: 7px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.audit-facet-list { display: flex; flex-direction: column; gap: 2px; }
.audit-facet-group--zones .audit-facet-list {
    max-height: 216px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.audit-facet-option {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) 42px auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 4px 7px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 12.5px;
    transition: background-color var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
}
.audit-facet-option:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.audit-facet-option input[type="checkbox"] {
    width: 16px; height: 16px;
    margin: 0;
    accent-color: var(--blue);
    flex: 0 0 auto;
}
.audit-facet-severity {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
}
.audit-facet-severity.d { background: var(--crit-w); color: var(--crit-ink); }
.audit-facet-severity.c { background: var(--warn-w); color: var(--warn-ink); }
.audit-facet-severity.b { background: var(--info-w); color: var(--info-ink); }
.audit-facet-severity.e { background: var(--repeat-w); color: var(--repeat-ink); }
.audit-facet-option__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--ink-2);
}
.audit-facet-option--zone { grid-template-columns: auto minmax(0, 1fr) 42px auto; }
.audit-facet-option__bar {
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
    min-width: 34px;
}
.audit-facet-option__bar i {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--blue);
}
.audit-facet-option > b {
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    min-width: 16px;
    text-align: right;
}

.audit-facet-selects { display: flex; flex-direction: column; gap: 4px; }
.audit-facet-selects label {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.audit-facet-selects select {
    width: 100%;
    height: 38px;
    padding: 0 30px 0 11px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D6D76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 9px center / 13px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 13px;
    color: var(--ink);
    text-overflow: ellipsis;
    cursor: pointer;
}
.audit-facet-selects select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent);
    outline: none;
}

.audit-map-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line-2);
}
.audit-map-setting strong { display: block; font-size: 13px; font-weight: 600; }
.audit-map-setting small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ink-3); }

/* iOS-перемикач */
.ed-toggle {
    position: relative;
    /* Пігулка лишається 42x26, але сама кнопка вища: 34px — це реальна
       дотикова ціль. Тло малюємо лише в content-box, тож вигляд не змінився. */
    width: 42px;
    height: 34px;
    padding: 4px 0;
    flex: 0 0 auto;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--ink) 16%, transparent);
    background-clip: content-box;
    cursor: pointer;
    transition: background-color var(--dur-mid) var(--ease-surface);
    -webkit-tap-highlight-color: transparent;
}
html.dark .ed-toggle { background: color-mix(in srgb, #fff 22%, transparent); }
.ed-toggle.active, .ed-toggle[aria-checked="true"] { background: var(--good); }
.ed-toggle-knob, .ed-toggle > span {
    position: absolute;
    top: 7px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--dur-mid) var(--ease-surface);
}
.ed-toggle.active .ed-toggle-knob, .ed-toggle[aria-checked="true"] .ed-toggle-knob { transform: translateX(16px); }

/* --- Навігатор (правий рейл) --- */
.audit-navigator {
    position: sticky;
    top: calc(var(--topbar-h) + var(--safe-top) + 12px);
    max-height: calc(100dvh - var(--topbar-h) - var(--safe-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-1), inset 0 1px 0 var(--edge);
}

.audit-navigator__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.audit-navigator__title strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.audit-navigator__title span { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.audit-navigator__progress { margin-top: 7px; }
.audit-navigator__progress small {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
.audit-navigator__progress-track {
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.audit-navigator__progress-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--blue));
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-surface);
}

.audit-navigator__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.audit-navigator__controls button {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.audit-navigator__controls button:hover { background: var(--surface-2); }
.audit-navigator__controls button:active { transform: scale(0.93); }
.audit-navigator__controls button svg { width: 15px; height: 15px; }
.audit-navigator__position {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
}

.audit-navigator__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 5px;
}
.audit-navigator__grid button {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid transparent;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    transition: transform 100ms ease, box-shadow var(--dur-fast) ease;
}
.audit-navigator__grid button:active { transform: scale(0.92); }
.audit-navigator__grid button.d { background: var(--crit-w); color: var(--crit-ink); }
.audit-navigator__grid button.c { background: var(--warn-w); color: var(--warn-ink); }
.audit-navigator__grid button.b { background: var(--info-w); color: var(--info-ink); }
.audit-navigator__grid button.e { background: var(--repeat-w); color: var(--repeat-ink); }
.audit-navigator__grid button.is-filtered-out { opacity: 0.32; filter: saturate(0.2); }
.audit-navigator__grid button.is-edited::after {
    content: '';
    position: absolute;
    right: 3px; top: 3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--good);
    box-shadow: 0 0 0 1.5px var(--surface);
}
.audit-navigator__grid button.is-active {
    border-color: currentColor;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, currentColor 25%, transparent);
}

.audit-navigator__legend { display: flex; flex-direction: column; gap: 2px; }
.audit-navigator__legend button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
    transition: background-color var(--dur-fast) ease;
}
.audit-navigator__legend button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.audit-navigator__legend button i {
    width: 9px; height: 9px;
    border-radius: 3px;
    flex: 0 0 auto;
}
.audit-navigator__legend button.d i { background: var(--crit); }
.audit-navigator__legend button.c i { background: var(--warn); }
.audit-navigator__legend button.b i { background: var(--info); }
.audit-navigator__legend button.e i { background: var(--repeat); }
.audit-navigator__legend button b { margin-left: auto; font-variant-numeric: tabular-nums; }
.audit-navigator__legend button.is-on { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--ink); }

.audit-navigator__hint {
    font-size: 11px;
    line-height: 1.45;
    color: var(--ink-3);
}
.audit-navigator__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.audit-navigator__stats span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    font-size: 10.5px;
    color: var(--ink-3);
}
.audit-navigator__stats b {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* --- Панель списку дефектів --- */
.panel {
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
}
.panel-head h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.006em;
}
.panel-head .meta { font-size: 12px; color: var(--ink-3); }

#defectsListPane { display: flex; flex-direction: column; overflow: visible; }
#defectsListPane .panel-head { border-bottom: 0; padding-bottom: 6px; }

.defect-toolbar { border-bottom: 1px solid var(--line-2); padding-bottom: 12px; }
.defect-toolbar .panel-head > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.filter-btn {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    transition: background-color var(--dur-fast) ease;
}
.filter-btn:hover { background: var(--surface-2); color: var(--ink); }
#btnMergeSelected {
    background: var(--warn);
    border-color: transparent;
    color: #fff;
}
#btnMergeSelected:hover { background: color-mix(in srgb, var(--warn) 85%, #000); }

/* --- Сітка дефектів --- */
.defects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: var(--sp-4);
    padding: 12px 18px 18px;
}

.defect-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-surface), box-shadow var(--dur-fast) ease,
                border-color var(--dur-fast) ease, opacity var(--dur-mid) ease;
    -webkit-tap-highlight-color: transparent;
}
.defect-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.defect-card[data-selected="true"] { border-color: var(--blue); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--blue) 22%, transparent), var(--shadow-1); }

/* Редактор відкритий: сусідні картки поступаються увагою */
body.focus-editor-open .defect-card:not(.card-inline-editor) { opacity: 0.62; }
body.focus-editor-open .defect-card:not(.card-inline-editor):hover { opacity: 1; }

.defect-card__media {
    position: relative;
    height: 210px;
    background: var(--surface-2);
    flex: 0 0 auto;
}
.defect-card__image {
    width: 100%; height: 100%;
    object-fit: cover;
}
.defect-card__empty-photo {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
}
.defect-card__empty-photo i, .defect-card__empty-photo svg { width: 26px; height: 26px; stroke-width: 1.7; }

.defect-card__badges {
    position: absolute;
    top: 10px; left: 10px; right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.defect-card__select-target {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-1);
    cursor: pointer;
}
html.dark .defect-card__select-target { background: rgba(30, 32, 40, 0.85); }
.defect-card__select {
    width: 16px; height: 16px;
    margin: 0;
    accent-color: var(--blue);
    cursor: pointer;
}
.defect-card__number {
    padding: 4px 9px;
    border-radius: var(--r-pill);
    background: rgba(16, 19, 26, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}
/* Status Badge · патерн @arihantcodes/status-badge: стан несе не лише колір,
   а й форма маркера — квадрат для «Редаговано», кільце для SD. Так статус
   лишається розрізненним при дальтонізмі й на чорно-білому друці звіту. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
}
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    background: currentColor;
}
.status-badge.edited { background: color-mix(in srgb, var(--good) 78%, #000); }
.status-badge.edited::before { border-radius: 1px; }
.status-badge.ticket { background: color-mix(in srgb, var(--info) 78%, #000); }
.status-badge.ticket::before {
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
}

.defect-card__priority-badge {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--on-fill);
    white-space: nowrap;
}
.defect-card__priority-badge.d { background: var(--crit); }
.defect-card__priority-badge.c { background: var(--warn); }
.defect-card__priority-badge.b { background: var(--info); }
.defect-card__priority-badge.e { background: var(--repeat); }

.defect-card__thumbs {
    position: absolute;
    bottom: 10px; left: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
}
.defect-card__thumb {
    width: 40px; height: 40px;
    border-radius: 9px;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-1);
    cursor: zoom-in;
}
.defect-card__thumbs > span {
    padding: 3px 8px;
    border-radius: var(--r-pill);
    background: rgba(20, 24, 32, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.defect-card__photo-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: zoom-in;
}

.defect-card__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 13px 15px 14px;
    min-width: 0;
}

.defect-card__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag.zone, .tag.cat, .tag.responsibility, .tag.ticket {
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}
.tag.zone { background: var(--surface-2); color: var(--ink-2); }
.tag.cat { background: var(--info-w); color: var(--info-ink); }
.tag.responsibility { background: var(--repeat-w); color: var(--repeat-ink); }
.tag.ticket { background: var(--good-w); color: var(--good-ink); }

.defect-card__description {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-2);
    letter-spacing: -0.004em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.defect-card__description strong { color: var(--ink); font-weight: 600; }

.defect-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line-2);
}
.defect-card__meta { display: flex; gap: 16px; min-width: 0; }
.defect-card__meta span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.defect-card__meta small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.defect-card__meta strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.defect-card__meta strong.is-created { color: var(--good-ink); }

.defect-card__actions { display: flex; align-items: center; gap: 5px; }
.defect-card__icon-action {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 9px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.defect-card__icon-action:hover { background: var(--surface-2); color: var(--ink); }
.defect-card__icon-action:active { transform: scale(0.93); }
.defect-card__icon-action i, .defect-card__icon-action svg { width: 14px; height: 14px; }

.defect-card__open-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 32px;
    border-radius: 9px;
    background: var(--info-w);
    color: var(--info-ink);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.defect-card__open-hint i, .defect-card__open-hint svg { width: 13px; height: 13px; }

/* Режим списку */
.defects.is-list { grid-template-columns: 1fr; }
.defects.is-list .defect-card:not(.card-inline-editor) { flex-direction: row; }
.defects.is-list .defect-card:not(.card-inline-editor) .defect-card__media {
    width: 236px;
    height: auto;
    min-height: 170px;
}
.defects.is-list .defect-card:not(.card-inline-editor) .defect-card__description { -webkit-line-clamp: 3; }

/* --- Inline-редактор картки --- */
.card-inline-editor {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(300px, 44%) minmax(0, 1fr);
    min-height: min(var(--editor-card-height, 560px), 72dvh);
    cursor: default;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge);
    overflow: hidden;
    animation: ta-editor-in var(--dur-mid) var(--ease-enter);
}
@keyframes ta-editor-in {
    from { opacity: 0; transform: scale(0.985); }
}
.card-inline-editor:hover { transform: none; box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge); }

.card-inline-editor__media {
    position: relative;
    height: auto;
    min-height: 320px;
    background: #101216;
}
.card-inline-editor__media .defect-card__image {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}
.card-inline-editor__media .defect-card__empty-photo { position: absolute; inset: 0; color: #8A8D96; }
.card-inline-editor__media .defect-card__badges { pointer-events: none; }

.editor-photo-count {
    position: absolute;
    bottom: 64px; left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: rgba(16, 19, 26, 0.84);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.card-inline-editor__photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(20, 24, 32, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.card-inline-editor__photo-nav:hover { background: rgba(20, 24, 32, 0.78); }
.card-inline-editor__photo-nav:active { transform: translateY(-50%) scale(0.92); }
.card-inline-editor__photo-nav.prev { left: 12px; }
.card-inline-editor__photo-nav.next { right: 12px; }
.card-inline-editor__photo-nav i, .card-inline-editor__photo-nav svg { width: 18px; height: 18px; }

.card-inline-editor__photo-tools {
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: var(--r-pill);
    background: rgba(20, 24, 32, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.card-inline-editor__photo-tool {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.card-inline-editor__photo-tool:hover { background: rgba(255, 255, 255, 0.16); }
.card-inline-editor__photo-tool:active { transform: scale(0.92); }
.card-inline-editor__photo-tool.danger:hover { background: color-mix(in srgb, var(--crit) 75%, transparent); }
.card-inline-editor__photo-tool i, .card-inline-editor__photo-tool svg { width: 15px; height: 15px; }

.card-inline-editor__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    min-width: 0;
    overflow-y: auto;
}

.card-inline-editor__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ed-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
    min-width: 0;
}
.ed-field .fl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ed-field select, .ed-field textarea, .ed-field input {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    width: 100%;
    outline: none;
}
.ed-field textarea { resize: none; line-height: 1.5; }

.card-inline-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.card-inline-editor__toolbar > label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.004em;
}
.card-inline-editor__draft {
    font-size: 11px;
    color: var(--ink-3);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-inline-editor__toolbar > div { display: flex; align-items: center; gap: 5px; margin-left: auto; }

.ai-action-model-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ai-action-model {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px 0 11px;
    border: 1px solid color-mix(in srgb, var(--repeat) 26%, var(--line-2));
    border-radius: 10px;
    background: color-mix(in srgb, var(--repeat-w) 64%, var(--surface));
    color: var(--repeat-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform 100ms ease;
    user-select: none;
    -webkit-user-select: none;
}

.ai-action-model:hover {
    background: color-mix(in srgb, var(--repeat-w) 90%, var(--surface));
    border-color: color-mix(in srgb, var(--repeat) 48%, var(--line-2));
}

.ai-action-model:active {
    transform: scale(0.98);
}

.ai-action-model[aria-expanded="true"] {
    border-color: var(--repeat);
    background: color-mix(in srgb, var(--repeat-w) 95%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--repeat) 20%, transparent);
}

.ai-action-model > i,
.ai-action-model > svg:first-child {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--repeat-ink);
}

.ai-action-model-current {
    font-weight: 750;
    font-size: 11.5px;
    letter-spacing: -0.01em;
    line-height: 1;
}

.ai-action-model .custom-dropdown-chevron {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.4;
    fill: none;
    flex-shrink: 0;
    margin-left: 1px;
    opacity: 0.75;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-action-model select {
    width: 74px;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.ai-action-model select option { color: var(--ink); background: var(--surface); }

/* Випадаюча панель моделей ШІ */
.ai-model-dropdown-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    left: auto;
    z-index: 120;
    width: 290px;
    max-width: calc(100vw - 32px);
    padding: 7px;
    border-radius: 16px;
    border: 1px solid var(--line-2);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24), 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: ta-dropdown-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark .ai-model-dropdown-panel {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.48), 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ai-model-dropdown-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 9px 8px;
    border-bottom: 1px solid var(--line-2);
    margin-bottom: 5px;
}

.ai-model-dropdown-heading {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--repeat-ink);
}

.ai-model-dropdown-subheading {
    font-size: 10px;
    font-weight: 450;
    color: var(--ink-3);
}

.ai-model-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(420px, 65dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-model-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform 100ms ease;
}

.ai-model-option:hover {
    background: color-mix(in srgb, var(--repeat-w) 55%, transparent);
    border-color: color-mix(in srgb, var(--repeat) 22%, transparent);
}

.ai-model-option:active {
    transform: scale(0.985);
}

.ai-model-option.active {
    background: color-mix(in srgb, var(--repeat-w) 85%, transparent);
    border-color: color-mix(in srgb, var(--repeat) 38%, transparent);
}

.ai-model-option__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

.ai-model-option__content {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    min-width: 0;
    flex: 1 1 auto;
}

.ai-model-option__top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-model-option__title {
    font-size: 13px;
    font-weight: 650;
    color: var(--ink);
    line-height: 1.2;
}

.ai-model-option__badge {
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
    line-height: 1.2;
}

.badge-inferencehub {
    background: rgba(234, 165, 54, 0.16);
    color: #86520d;
}
html.dark .badge-inferencehub {
    background: rgba(234, 165, 54, 0.22);
    color: #f2bf70;
}

.badge-vertex {
    background: rgba(66, 133, 244, 0.14);
    color: #1a62d6;
}
html.dark .badge-vertex {
    background: rgba(66, 133, 244, 0.25);
    color: #70a5f9;
}

.badge-openrouter {
    background: rgba(168, 85, 247, 0.14);
    color: #7c22d6;
}
html.dark .badge-openrouter {
    background: rgba(168, 85, 247, 0.25);
    color: #c99afc;
}

.badge-openai {
    background: rgba(16, 163, 127, 0.14);
    color: #0d7a5e;
}
html.dark .badge-openai {
    background: rgba(16, 163, 127, 0.25);
    color: #3ee1a8;
}

.ai-model-option__desc {
    font-size: 10.5px;
    font-weight: 450;
    color: var(--ink-3);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-model-option__check {
    width: 15px;
    height: 15px;
    stroke: var(--repeat);
    stroke-width: 2.8;
    fill: none;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.ai-model-option.active .ai-model-option__check {
    opacity: 1;
    transform: scale(1);
}

.ai-skip-learning {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
    white-space: nowrap;
}

.ai-skip-learning:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.ai-skip-learning:has(input:checked) {
    border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2));
    background: color-mix(in srgb, var(--warn-w) 65%, var(--surface));
    color: var(--warn-ink);
}

.ai-skip-learning input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--warn);
    cursor: pointer;
    flex-shrink: 0;
}

.card-inline-editor__tool {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform 100ms ease;
    white-space: nowrap;
}
.card-inline-editor__tool:hover { background: var(--surface-2); color: var(--ink); }
.card-inline-editor__tool:active { transform: scale(0.93); }
.card-inline-editor__tool i, .card-inline-editor__tool svg { width: 15px; height: 15px; flex: 0 0 auto; }
.card-inline-editor__tool.ai { color: var(--repeat-ink); }
.card-inline-editor__tool.ai:hover { background: var(--repeat-w); }
.card-inline-editor__tool.success { color: var(--good-ink); }
.card-inline-editor__tool.success:hover { background: var(--good-w); }
.card-inline-editor__tool.danger { color: var(--crit-ink); }
.card-inline-editor__tool.danger:hover { background: var(--crit-w); }
.card-inline-editor__tool:disabled { opacity: 0.4; }
/* Кнопки з текстом під час AI-запиту розширюються */
.card-inline-editor__tool.is-busy, .card-inline-editor__tool[disabled][aria-busy] { width: auto; padding: 0 12px; }

.card-inline-editor__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.card-inline-editor__description {
    flex: 1;
    min-height: 130px;
    padding: 11px 13px;
}
.card-inline-editor__description textarea { height: 100%; min-height: 110px; font-size: 14px; }

.editor-triggered-rules {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface-2);
    max-height: 180px;
    overflow-y: auto;
}
.editor-triggered-rules > span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.editor-triggered-rules > div { display: flex; flex-direction: column; gap: 6px; }

.card-inline-editor__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--line-2);
}
.card-inline-editor__ticket {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
}
.card-inline-editor__ticket .tl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}
#edCounter {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}
#unsavedIndicator { color: var(--warn); font-size: 16px; line-height: 1; }
.card-inline-editor__nav { display: flex; gap: 5px; margin-left: auto; }
.card-inline-editor__save {
    height: 40px;
    padding: 0 22px;
    border-radius: var(--r-pill);
    background: var(--blue-solid);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--blue) 35%, transparent);
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.card-inline-editor__save:hover { background: var(--blue-press); }
.card-inline-editor__save:active { transform: scale(0.96); }
.card-inline-editor__tool.save-next { color: var(--blue-ink); }
.card-inline-editor__tool.save-next:hover { background: var(--info-w); }

.card-inline-editor.is-fullscreen {
    position: fixed;
    inset: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
    z-index: 150;
    min-height: 0;
}

.defect-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(14, 18, 26, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-mid) ease;
}
.defect-editor-backdrop.open { opacity: 1; pointer-events: auto; }

/* --- Кастомні дропдауни (JS-генеровані) --- */
.custom-dropdown-container { position: relative; min-width: 0; }
.custom-dropdown-container.w-full { width: 100%; }

.custom-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.custom-dropdown-btn:hover { border-color: color-mix(in srgb, var(--ink) 26%, transparent); }
.custom-dropdown-btn.editor {
    border: 0;
    /* Було 24px: удвічі менше за мінімальну дотикову ціль. Вертикальні
       відступи від'ємним margin компенсуємо, щоб верстка не поїхала. */
    min-height: 40px;
    margin: -8px 0;
    padding: 0;
    background: transparent;
    font-weight: 500;
}
.custom-dropdown-btn.toolbar {
    border-radius: var(--r-sm);
    height: 40px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.custom-dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.custom-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 90;
    min-width: max(100%, 230px);
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--line-2);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge);
    animation: ta-dropdown-in 180ms var(--ease-enter);
}
@keyframes ta-dropdown-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.custom-dropdown-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    text-align: left;
    transition: background-color var(--dur-fast) ease;
}
.custom-dropdown-opt:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.custom-dropdown-opt.active { color: var(--ink); font-weight: 600; }
.custom-dropdown-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.custom-dropdown-search-wrap { padding: 4px 4px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.custom-dropdown-search-wrap input { height: 36px; font-size: 13px; }

/* --- Зум фото --- */
#photoZoomOverlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 14, 0.9);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    animation: ta-fade-in var(--dur-fast) ease;
}
#photoZoomImg {
    max-width: min(94vw, 1500px);
    max-height: 88dvh;
    object-fit: contain;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-3);
    animation: ta-zoom-in var(--dur-mid) var(--ease-enter);
}
@keyframes ta-zoom-in {
    from { opacity: 0.4; transform: scale(0.94); }
}
body.photo-zoom-open { overflow: hidden; }

.zoom-close, .zoom-download {
    position: absolute;
    top: calc(16px + var(--safe-top));
    z-index: 2;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.zoom-close { right: calc(16px + var(--safe-right)); }
.zoom-download { right: calc(68px + var(--safe-right)); }
.zoom-close:hover, .zoom-download:hover { background: rgba(255, 255, 255, 0.26); }
.zoom-close:active, .zoom-download:active { transform: scale(0.92); }
.zoom-close i, .zoom-download i, .zoom-close svg, .zoom-download svg { width: 19px; height: 19px; }

.zoom-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    transition: background-color var(--dur-fast) ease;
}
.zoom-btn:hover { background: rgba(255, 255, 255, 0.26); }
.zoom-btn.prev { left: calc(18px + var(--safe-left)); }
.zoom-btn.next { right: calc(18px + var(--safe-right)); }
.zoom-btn i, .zoom-btn svg { width: 21px; height: 21px; }

#zoomCounter {
    position: absolute;
    bottom: calc(22px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* =================== 9. МОДАЛКИ · TOAST · ХОТКЕЇ ========================== */

.brut-overlay {
    position: fixed;
    inset: 0;
    z-index: 160;
    align-items: center;
    justify-content: center;
    padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
    background: rgba(14, 18, 26, 0.44);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity 200ms ease;
}

/* Dialog transition: вікно не просто проявляється, а трохи наближається —
   так видно, що це модальний шар поверх сторінки, а не заміна вмісту. */
.brut-overlay:not(.hidden) .brut-modal {
    animation: motion-dialog-in 220ms var(--ease-enter) both;
}
@keyframes motion-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .brut-overlay:not(.hidden) .brut-modal { animation: none; }
}

.brut-modal {
    position: relative;
    width: min(480px, 100%);
    max-height: min(86dvh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-6);
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    box-shadow: var(--shadow-3), inset 0 1px 0 var(--edge);
    transition: transform var(--dur-fast) var(--ease-surface);
    text-align: left;
}
.brut-modal.large { width: min(780px, 100%); }

#confirmBox { text-align: center; width: min(400px, 100%); }
#confirmBox h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.011em; margin-bottom: 6px; }
#confirmBox p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin-bottom: var(--sp-5); }

.brut-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink-2);
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
}
.brut-modal-close:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); color: var(--ink); }
.brut-modal-close:active { transform: scale(0.92); }
.brut-modal-close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.3; fill: none; stroke-linecap: round; }

.brut-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--sp-4);
    padding-right: 34px;
}
.brut-modal-icon {
    width: 44px; height: 44px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 13px;
    background: var(--info-w);
    color: var(--info-ink);
}
.brut-modal-icon svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brut-modal-icon.warn-icon { background: var(--warn-w); color: var(--warn-ink); }
.brut-modal-icon.danger-icon { background: var(--crit-w); color: var(--crit-ink); }
.brut-modal-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.011em; }
.brut-modal-head p { margin-top: 2px; font-size: 13px; color: var(--ink-3); }

.brut-modal-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: var(--sp-5);
}

.brut-modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}
#confirmBox .brut-modal-actions { justify-content: center; }

.brut-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color var(--dur-fast) ease, transform 100ms ease;
    text-decoration: none;
}
.brut-modal-btn:hover { background: var(--surface-2); text-decoration: none; }
.brut-modal-btn:active { transform: scale(0.96); }
.brut-modal-btn.danger {
    background: var(--crit);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--crit) 32%, transparent);
}
.brut-modal-btn.danger:hover { background: color-mix(in srgb, var(--crit) 85%, #000); }
.brut-modal-btn.save {
    background: var(--blue-solid);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--blue) 32%, transparent);
}
.brut-modal-btn.save:hover { background: var(--blue-press); }

/* Модалка об'єднання */
.merge-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-right: 4px;
    margin-bottom: var(--sp-4);
}
.merge-step-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}
.merge-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 13px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--dur-fast) ease;
}
.merge-option:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.merge-option input[type="radio"] { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--blue); flex: 0 0 auto; }
.merge-option .merge-option__meta {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.merge-option .merge-option__text { font-size: 13px; line-height: 1.45; color: var(--ink); }

/* Пошук фасаду */
.facade-search-card {
    position: relative;
    border-radius: var(--r-sm);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--surface-2);
    cursor: pointer;
}
.facade-search-card img { width: 100%; height: 100%; object-fit: cover; }
.facade-search-card .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--blue) 40%, rgba(10, 14, 22, 0.4));
    opacity: 0;
    transition: opacity var(--dur-fast) ease;
}
.facade-search-card:hover .overlay, .facade-search-card:focus-visible .overlay { opacity: 1; }
.overlay-btn {
    padding: 8px 16px;
    border-radius: var(--r-pill);
    background: #fff;
    color: #1D1D1F;
    font-size: 12.5px;
    font-weight: 700;
}
#facadeSearchResults { grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* Toast */
#toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--safe-bottom));
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    opacity: 0;
    transform: translate(-50%, 20px);
    transition: transform var(--dur-mid) var(--ease-surface), opacity var(--dur-mid) ease;
    pointer-events: none;
}
#toast svg { width: 16px; height: 16px; flex: 0 0 auto; stroke: var(--good); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#toast.is-error svg { stroke: var(--crit); }

/* Модалка гарячих клавіш */
.shortcuts-grid { display: flex; flex-direction: column; gap: 4px; }
.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    padding: 4px 2px;
    border-bottom: 1px solid var(--line-2);
    font-size: 13.5px;
    color: var(--ink-2);
}
.shortcut-row:last-child { border-bottom: 0; }
.shortcut-row .keys { display: flex; gap: 4px; flex: 0 0 auto; }
kbd {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 7px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink);
}

/* ================= 10. АНАЛІТИКА · НАВЧАННЯ · ТЕМИ ======================== */

.kpi-strip--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.trend-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 210px;
    align-items: center;
    gap: var(--sp-5);
    padding: 13px 0;
    border-bottom: 1px solid var(--line-2);
}
.trend-row:last-child { border-bottom: 0; }
.trend-month {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: uppercase;
}
.trend-bars { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.trend-bar-wrap { display: flex; align-items: center; gap: 10px; }
.trend-bar-label {
    flex: 0 0 92px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-3);
}
.trend-bar-track {
    flex: 1;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.trend-bar-fill { height: 100%; border-radius: var(--r-pill); transition: none; }
.trend-bar-fill.total { background: var(--blue); }
.trend-bar-fill.edited { background: var(--good); }
.trend-bar-val {
    flex: 0 0 34px;
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.trend-avg { font-size: 12px; color: var(--ink-3); }
.trend-avg b { color: var(--ink); font-variant-numeric: tabular-nums; }

.chart-pad { padding: 18px 20px; }

/* Прогрес-смужка в таблиці локацій */
.loc-progress { display: inline-flex; align-items: center; gap: 8px; }
.loc-progress__track {
    width: 64px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.loc-progress__fill { height: 100%; background: var(--good); border-radius: var(--r-pill); }
.loc-progress__val {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}

/* Стовпчики зон/категорій (zonebars) */
.zonebars { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.zonebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 3px 10px;
    align-items: center;
}
.zonebar .zl {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zonebar .zv { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zonebar .ztr {
    grid-column: 1 / -1;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}
.zonebar .zfl { height: 100%; border-radius: var(--r-pill); background: var(--blue); }
.zonebar.acc-1 .zfl { background: var(--crit); }
.zonebar.acc-2 .zfl { background: var(--warn); }

/* --- Навчання AI --- */
.learn-container {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
}

.learn-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.learn-card h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.011em; }
.learn-card > p { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.prompt-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
    color: var(--ink);
}
.prompt-toggle h2 { font-size: 16px; }
.prompt-toggle svg { color: var(--ink-3); }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.form-control {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink);
    resize: vertical;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--blue) 15%, transparent);
}
.form-hint { font-size: 12px; color: var(--ink-3); }

.cta.cta--teal { background: var(--teal); box-shadow: 0 2px 10px color-mix(in srgb, var(--teal) 35%, transparent); }
.cta.cta--teal:hover { background: color-mix(in srgb, var(--teal) 85%, #000); }

/* Пісочниця: результати */
.sandbox-results {
    display: none;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--line-2);
    padding-top: var(--sp-4);
}
.sandbox-section-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 8px;
}
.sb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 12.5px;
}
.sb-cell {
    padding: 9px 11px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--line-2);
    min-width: 0;
}
.sb-cell span { color: var(--ink-3); }
.sb-cell strong { color: var(--ink); }
.sb-cell--full { grid-column: 1 / -1; margin-top: 2px; }
.sb-rules-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
}

.learn-table-wrap {
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.learn-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-2);
}
.learn-table-header h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.008em; }
.learn-scroll { max-height: 560px; overflow-y: auto; }
.learn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.learn-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-2);
}
.learn-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: top;
    line-height: 1.5;
}
.learn-table tbody tr:last-child td { border-bottom: 0; }

.l-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.l-badge.rule { background: var(--info-w); color: var(--info-ink); }
.l-badge.correction { background: var(--crit-w); color: var(--crit-ink); }

/* --- Студія персоналізації --- */
.theme-studio {
    position: fixed;
    inset: 0;
    z-index: 170;
    visibility: hidden;
    pointer-events: none;
}
.theme-studio.is-open { visibility: visible; pointer-events: auto; }

.theme-studio-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 18, 26, 0.44);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity var(--dur-mid) ease;
}
.theme-studio.is-open .theme-studio-backdrop { opacity: 1; }

.theme-studio-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    border-left: 1px solid var(--line-2);
    box-shadow: var(--shadow-3);
    transform: translateX(100%);
    transition: transform var(--dur-mid) var(--ease-surface);
    padding-top: var(--safe-top);
}
.theme-studio.is-open .theme-studio-panel { transform: translateX(0); }

.theme-studio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.theme-studio-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.theme-studio-title { font-size: 20px; font-weight: 700; letter-spacing: -0.016em; margin-top: 3px; }
.theme-studio-subtitle { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.theme-studio-close {
    width: 34px; height: 34px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink-2);
}
.theme-studio-close:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.theme-studio-close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }

.theme-studio-status {
    margin: 0 var(--sp-5) var(--sp-3);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: var(--good-w);
    color: var(--good-ink);
    font-size: 12px;
    font-weight: 600;
}
.theme-studio-status.is-dirty { background: var(--warn-w); color: var(--warn-ink); }
.theme-studio-status.is-error { background: var(--crit-w); color: var(--crit-ink); }

.theme-studio-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--sp-5) var(--sp-5);
}

.theme-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: var(--sp-4);
}
.theme-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--line-2);
    background: var(--surface);
    transition: border-color var(--dur-fast) ease, transform 100ms ease;
}
.theme-preset:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.theme-preset:active { transform: scale(0.96); }
.theme-preset[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--blue) 18%, transparent); }
.theme-preset-swatches { display: flex; gap: 3px; }
.theme-preset-swatches span {
    width: 16px; height: 16px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-preset-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

.theme-contrast-note {
    display: none;
    margin: 0 0 var(--sp-3);
    padding: 9px 12px;
    border-radius: var(--r-sm);
    background: var(--warn-w);
    color: var(--warn-ink);
    font-size: 12px;
    line-height: 1.4;
}
.theme-contrast-note.is-visible { display: block; }

.theme-section {
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface);
    margin-bottom: 10px;
    overflow: hidden;
}
.theme-section summary {
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.theme-section summary::-webkit-details-marker { display: none; }
.theme-section summary::after {
    content: '';
    float: right;
    width: 14px; height: 14px;
    margin-top: 3px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--ink-3);
    transition: transform var(--dur-fast) ease;
}
.theme-section[open] summary::after { transform: rotate(180deg); }
.theme-section-body { padding: 2px 14px 12px; }

.theme-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-2);
}
.theme-field:last-child { border-bottom: 0; }
.theme-field-copy { min-width: 0; }
.theme-field-label { display: block; font-size: 13px; font-weight: 500; }
.theme-field-help { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ink-3); }
.theme-field-control { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.theme-color {
    width: 36px; height: 28px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}
.theme-color::-webkit-color-swatch-wrapper { padding: 2px; }
.theme-color::-webkit-color-swatch { border: none; border-radius: 5px; }
.theme-range { width: 120px; accent-color: var(--blue); }
.theme-select {
    height: 34px;
    padding: 0 26px 0 10px;
    border: 1px solid var(--line-2);
    border-radius: 9px;
    background: var(--surface-2)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D6D76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 8px center / 12px;
    appearance: none;
    -webkit-appearance: none;
    font-size: 12.5px;
    cursor: pointer;
}
.theme-switch { width: 18px; height: 18px; accent-color: var(--blue); }
.theme-value {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-3);
    min-width: 46px;
    text-align: right;
}

.theme-studio-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--sp-3) var(--sp-5) calc(var(--sp-4) + var(--safe-bottom));
    border-top: 1px solid var(--line-2);
}
.theme-studio-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    transition: background-color var(--dur-fast) ease;
}
.theme-studio-btn:hover { background: var(--surface-2); }
.theme-studio-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.theme-studio-btn.primary {
    margin-left: auto;
    background: var(--blue-solid);
    border-color: transparent;
    color: #fff;
}
.theme-studio-btn.primary:hover { background: var(--blue-press); }
.theme-studio-btn.primary:disabled { opacity: 0.5; }

/* Сортування дефектів: компактний дропдаун у шапці панелі */
.defect-toolbar .custom-dropdown-container { width: auto; min-width: 186px; }
.defect-toolbar .custom-dropdown-container .custom-dropdown-btn { height: 34px; min-height: 34px; font-size: 12.5px; border-radius: var(--r-pill); padding: 0 12px; }

/* Тулбарні дропдауни аудитів */
.toolbar-dropdown-wrap { min-width: 158px; }
.toolbar-dropdown-wrap.sort { min-width: 186px; }

/* Вимкнення декоративного руху з персоналізації */
#appShell.ui-motion-off *, #appShell.ui-motion-off *::before, #appShell.ui-motion-off *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
}
#appShell.ui-motion-off .animate-fade-in-up,
#appShell.ui-motion-off .animate-fade-in { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }

/* ============================ 11. АДАПТИВ ================================= */

/* --- Широкий desktop: більше повітря --- */
@media (min-width: 1600px) {
    #defectsScreen.view.active { grid-template-columns: 280px minmax(0, 1fr) 260px; }
}

/* --- Компактний desktop / ландшафтний планшет --- */
@media (max-width: 1280px) {
    #defectsScreen.view.active { grid-template-columns: 244px minmax(0, 1fr); }
    #defectsScreen > .audit-navigator { display: none; }
    .audit-compact-summary { grid-template-columns: auto minmax(0, 1fr); }
    .audit-responsibility-summary { grid-column: 1 / -1; }
}

/* Планшет: шапка стискається, щоб вкладки не наїжджали на бренд */
@media (max-width: 1000px) {
    .brand-sub-row { display: none; }
    .brand-name { font-size: 15px; }
    .tab { padding: 0 13px; font-size: 12.5px; }
    #cycleSelector { max-width: 150px; font-size: 12px; }
    .top-actions .iconbtn[title^="Гарячі"] { display: none; }
}

@media (max-width: 1100px) {
    .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .trend-row { grid-template-columns: 76px minmax(0, 1fr); }
    .trend-avg { grid-column: 1 / -1; padding-left: 76px; }
    .learn-container { grid-template-columns: 1fr; }
}

/* --- Планшет: фільтри стають шухлядою --- */
@media (max-width: 900px) {
    body.audit-facets-open { overflow: hidden; }

    #defectsScreen.view.active { grid-template-columns: minmax(0, 1fr); }
    #defectsScreen > .audit-facet-sidebar {
        position: fixed;
        z-index: 180;
        top: 0; left: 0; bottom: 0;
        width: min(340px, calc(100vw - 48px));
        max-height: none;
        border-radius: 0 var(--r-lg) var(--r-lg) 0;
        border: 0;
        border-right: 1px solid var(--line-2);
        background: var(--glass-strong);
        padding: calc(16px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));
        padding-left: calc(16px + var(--safe-left));
        transform: translateX(-105%);
        transition: transform var(--dur-mid) var(--ease-surface);
        box-shadow: none;
    }
    #defectsScreen > .audit-facet-sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--shadow-3);
    }
    .audit-facet-close { display: grid; }
    .audit-mobile-facet-button { display: inline-flex; }
    .audit-facet-overlay {
        position: fixed;
        inset: 0;
        z-index: 179;
        display: block;
        background: rgba(14, 18, 26, 0.4);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--dur-fast) ease, visibility var(--dur-fast) ease;
    }
    .audit-facet-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

    .audit-command-row { grid-template-columns: auto auto; }
    .audit-command-row .detail-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    /* У горизонтальному скролері кнопки не стискаються нижче touch-мінімуму */
    .audit-command-row .detail-actions > .det-action { flex: 0 0 auto; }
    .audit-command-row .detail-actions > .det-action.audit-action-icon { width: 44px; }
    .audit-heading { grid-column: 1 / -1; order: 3; }
    .audit-heading__icon { width: 44px; height: 44px; }
    .audit-facet-close { width: 44px; height: 44px; }
    #auditFacetReset { min-height: 44px; padding: 6px 12px; }
    .det-hero-left .meta .meta-edit { width: 44px; height: 44px; }
    .facade-btn { height: 44px; padding: 0 14px; }
    .audit-summary-severity button { min-height: 44px; }
    .audit-navigator__legend button { min-height: 44px; }
    .audit-facet-option { min-height: 44px; }
    .card-inline-editor { grid-template-columns: 1fr; min-height: 0; }
    .card-inline-editor__media { min-height: 300px; max-height: 42dvh; }
}

/* --- Телефон --- */
@media (max-width: 700px) {
    :root { --topbar-h: 56px; }

    /* Нижня навігація iOS-стилю */
    .tabs {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 130;
        margin: 0;
        padding: 8px max(14px, var(--safe-left)) calc(8px + var(--safe-bottom)) max(14px, var(--safe-right));
        border-radius: 0;
        background: var(--glass-strong);
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
        backdrop-filter: blur(var(--glass-blur)) saturate(180%);
        border-top: 1px solid var(--line-2);
        justify-content: space-around;
        gap: 4px;
    }
    .tab {
        flex: 1;
        flex-direction: column;
        gap: 3px;
        height: 50px;
        padding: 0 6px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0;
        color: var(--ink-3);
        border-radius: var(--r-sm);
    }
    .tab .tab-ic { display: block; }
    .tab.active { color: var(--blue); background: none; }
    .tab-indicator { display: none; }

    .app { padding-bottom: calc(84px + var(--safe-bottom)); }

    .topbar-in { gap: 8px; }
    .brand { min-width: 0; flex-shrink: 1; }
    .brand-name { font-size: 15px; }
    .brand-sub { max-width: 92px; }
    .live-pill { display: none; }
    .top-actions { gap: 6px; }
    #cycleSelector { max-width: 122px; font-size: 12px; padding-left: 9px; }
    .top-actions .iconbtn[title^="Гарячі"] { display: none; }

    .page-head { gap: var(--sp-4); margin-bottom: var(--sp-5); }
    .page-head .cta { width: 100%; }

    .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #statTotalCard { grid-column: 1 / -1; }
    .kpi { padding: 13px 15px; }
    .kpi-val { font-size: 25px; }

    .distrib { padding: 15px 16px; }
    .distrib-legend { gap: 6px 14px; }

    .toolbar {
        position: static;
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 8px;
    }
    .toolbar .search-wrap { grid-column: 1 / -1; order: 4; }
    .toolbar > .custom-dropdown-container:not(.sort) { min-width: 0; }

    .audit-grid { grid-template-columns: 1fr; }
    .defects { grid-template-columns: 1fr; padding: 10px 12px 14px; }

    .defects.is-list .defect-card:not(.card-inline-editor) { flex-direction: column; }
    .defects.is-list .defect-card:not(.card-inline-editor) .defect-card__media { width: 100%; height: 200px; }

    .det-hero { grid-template-columns: 1fr; }
    .det-facade { min-height: 172px; }
    .det-hero-bottom { padding: 15px 16px; }

    .audit-compact-summary { grid-template-columns: 1fr; gap: var(--sp-4); padding: 14px 16px; }
    .audit-progress-summary {
        padding-right: 0;
        padding-bottom: var(--sp-4);
        border-right: 0;
        border-bottom: 1px solid var(--line-2);
    }

    .defect-toolbar .panel-head { padding: 12px 12px 6px; }
    #defectsListPane .panel-head h3 { width: 100%; }
    /* Touch-мінімум 44px для керування списком і картками */
    .defect-toolbar .custom-dropdown-container .custom-dropdown-btn { height: 44px; min-height: 44px; }
    .defect-toolbar .filter-btn { height: 44px; }
    .view-toggle button { width: 44px; height: 40px; }
    .defect-card__icon-action { width: 44px; height: 44px; flex: 0 0 auto; }
    .defect-card__open-hint { height: 44px; flex: 0 0 auto; }
    /* Футер картки переноситься замість того, щоб душити кнопки */
    .defect-card__footer { flex-wrap: wrap; }
    .defect-card__actions { flex-wrap: wrap; }
    .audit-action { height: 44px; }
    .audit-navigator__controls button { width: 44px; height: 44px; }
    .audit-navigator__grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    .card-inline-editor__tool { width: 44px; height: 44px; }
    .card-inline-editor__photo-tool { width: 44px; height: 44px; }
    .brut-modal-close, .theme-studio-close { width: 44px; height: 44px; }

    .card-inline-editor__fields { grid-template-columns: 1fr; }
    .card-inline-editor__media { min-height: 240px; max-height: 38dvh; }
    .card-inline-editor__content { padding: 14px; }
    .card-inline-editor__footer { gap: 7px; }
    .card-inline-editor__save { flex: 1; order: 10; }

    .brut-modal { padding: var(--sp-5); border-radius: var(--r-lg); }
    #facadeSearchResults { grid-template-columns: repeat(2, 1fr); }

    .learn-table thead { display: none; }
    .learn-table tbody td { display: block; border-bottom: 0; padding: 4px 16px; }
    .learn-table tbody td:first-child { padding-top: 14px; }
    .learn-table tbody td:last-child { padding-bottom: 14px; border-bottom: 1px solid var(--line-2); text-align: left; }
    .learn-table tbody tr:last-child td:last-child { border-bottom: 0; }

    .kpi-strip--three { grid-template-columns: 1fr; }
    #statTotalCard.kpi { grid-column: 1 / -1; }

    .trend-row { grid-template-columns: 1fr; gap: 8px; }
    .trend-avg { padding-left: 0; }
    .trend-bar-label { flex-basis: 86px; font-size: 11px; }

    .theme-studio-panel { width: 100vw; border-left: 0; }

    .zoom-download { right: calc(68px + var(--safe-right)); }
    .zoom-btn.prev { left: calc(10px + var(--safe-left)); }
    .zoom-btn.next { right: calc(10px + var(--safe-right)); }

    .otp-card { padding: var(--sp-6) var(--sp-4); }
    .otp-box { width: 36px; height: 54px; }
}

/* Дуже вузькі екрани */
@media (max-width: 374px) {
    .otp-boxes { gap: 4px; }
    .otp-box { width: 33px; height: 50px; font-size: 22px; }
    .brand-sub-row .live-pill { display: none; }
    #cycleSelector { max-width: 104px; }
}

/* Landscape-телефон: нижня навігація лишається, контент компактніший */
@media (max-width: 900px) and (max-height: 500px) {
    .det-facade { min-height: 140px; }
    .card-inline-editor__media { max-height: 70dvh; }
}

@media (max-width: 1050px) {
    .login-screen-wrapper {
        grid-template-columns: minmax(0, 440px) minmax(350px, 410px);
        gap: clamp(32px, 5vw, 56px);
    }
    .otp-page-heading h1 { font-size: clamp(36px, 5vw, 48px); }
}

@media (max-width: 820px) {
    .login-screen-wrapper {
        grid-template-columns: minmax(0, 440px);
        align-content: start;
        gap: 28px;
        overflow-x: hidden;
        overflow-y: auto;
        padding-top: calc(28px + var(--safe-top));
    }
    .otp-page-heading { text-align: center; }
    .otp-brand { justify-content: center; margin-bottom: 18px; }
    .otp-page-heading h1, .otp-page-lead { margin-left: auto; margin-right: auto; }
    .otp-page-heading h1 { font-size: clamp(34px, 9vw, 44px); }
    .otp-page-lead { margin-top: 12px; font-size: 14px; line-height: 1.5; }
    .auth-signal-list { display: none; }
    .otp-auth-panel { width: min(430px, 100%); }
    .auth-aurora span { width: 92vw; opacity: .34; filter: blur(52px); }
}

@media (max-width: 480px) {
    .login-screen-wrapper { gap: 22px; padding-left: 14px; padding-right: 14px; }
    .otp-brand-name { font-size: 16px; }
    .otp-kicker { margin-bottom: 8px; }
    .otp-page-heading h1 { font-size: clamp(31px, 10vw, 39px); }
    .otp-page-heading h1 br { display: none; }
    .otp-card { padding: 24px 18px 22px; border-radius: 24px; }
    .auth-card-status { margin-bottom: 12px; }
    .otp-icon-wrap { width: 48px; height: 48px; margin-bottom: 13px; }
    .auth-form { gap: 12px; }
    .auth-input-wrap, .auth-submit, .google-auth-button { min-height: 50px; }
    .otp-security-note { text-align: center; justify-content: center; }
}

/* ========================= 12. ДОСТУПНІСТЬ ================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    /* Контент, що проявляється анімацією, лишається видимим */
    .animate-fade-in-up, .animate-fade-in { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
    html { scroll-behavior: auto; }
}

@media (prefers-reduced-transparency: reduce) {
    .topbar, .toolbar, .audit-facet-sidebar, .audit-navigator,
    .brut-modal, .card-inline-editor, .custom-dropdown-panel,
    .theme-studio-panel, #toast, .otp-card, .tabs {
        background: var(--surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-contrast: more) {
    :root, html.dark {
        --line: currentColor;
        --line-2: color-mix(in srgb, currentColor 40%, transparent);
    }
    .topbar, .toolbar, .audit-facet-sidebar, .audit-navigator,
    .brut-modal, .card-inline-editor, .custom-dropdown-panel,
    .theme-studio-panel, #toast, .otp-card, .tabs {
        background: var(--surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .kpi, .panel, .audit-card, .defect-card, .learn-card, .distrib { border-width: 1.5px; }
}

/* ============================================================================
   13. CONCEPT D · LIQUID OPERATIONS
   Новий операційний шар поверх production-сумісної розмітки. Скло лишається
   хромом; інформаційні картки мають щільну основу й виразний контур.
   ========================================================================== */

html.concept-d-live {
    /* Exact Concept D light palette. Keep legacy aliases in sync so every
       production component uses the same material, not the old grey system. */
    --paper: #D9EFFF;
    --canvas-deep: #D8F6ED;
    --surface: rgba(253, 254, 255, 0.92);
    --surface-2: rgba(239, 249, 255, 0.68);
    --ink: #071323;
    --ink-2: #31445D;
    --ink-3: #62738A;
    --line: rgba(25, 74, 120, 0.18);
    --line-2: rgba(25, 74, 120, 0.11);
    --blue: #0878F9;
    --blue-press: #0058D6;
    --blue-solid: #0878F9;
    --teal: #06A47D;
    --glass: rgba(247, 252, 255, 0.82);
    --glass-strong: rgba(253, 254, 255, 0.92);
    --edge: rgba(255, 255, 255, 0.68);
    --shadow-1: 0 3px 9px rgba(18, 59, 96, 0.10), 0 10px 28px rgba(20, 65, 108, 0.10);
    --shadow-2: 0 22px 58px rgba(20, 65, 108, 0.20), 0 3px 9px rgba(18, 59, 96, 0.10);
    --shadow-3: 0 28px 80px rgba(0, 48, 101, 0.27), 0 2px 7px rgba(19, 59, 96, 0.12);
    --d-blue: #0878F9;
    --d-blue-deep: #0058D6;
    --d-teal: #06A47D;
    --d-blue-soft: rgba(8, 120, 249, 0.13);
    --d-panel: rgba(247, 252, 255, 0.82);
    --d-panel-strong: rgba(253, 254, 255, 0.92);
    --d-edge: rgba(48, 100, 146, 0.22);
    --d-edge-bright: rgba(255, 255, 255, 0.84);
    --d-shadow: 0 22px 58px rgba(20, 65, 108, 0.20),
        0 3px 9px rgba(18, 59, 96, 0.10), inset 0 1px 0 rgba(255,255,255,.84);
    --d-radius-xl: 32px;
    --d-radius-lg: 24px;
}

html.dark.concept-d-live {
    --paper: #06111F;
    --canvas-deep: #07382D;
    --surface: rgba(7, 21, 37, 0.94);
    --surface-2: rgba(28, 48, 70, 0.70);
    --ink: #F7FBFF;
    --ink-2: #D1DFEF;
    --ink-3: #9CB0C8;
    --line: rgba(206, 230, 255, 0.16);
    --line-2: rgba(206, 230, 255, 0.10);
    --blue: #49A4FF;
    --blue-press: #1384FF;
    --blue-solid: #1384FF;
    --teal: #39D4A5;
    --glass: rgba(10, 29, 49, 0.88);
    --glass-strong: rgba(7, 21, 37, 0.94);
    --edge: rgba(255, 255, 255, 0.14);
    --d-blue: #49A4FF;
    --d-blue-deep: #1384FF;
    --d-teal: #39D4A5;
    --d-blue-soft: rgba(73, 164, 255, 0.18);
    --d-panel: rgba(10, 29, 49, 0.88);
    --d-panel-strong: rgba(7, 21, 37, 0.94);
    --d-edge: rgba(176, 216, 255, 0.18);
    --d-edge-bright: rgba(255, 255, 255, 0.12);
    --d-shadow: 0 24px 68px rgba(0, 0, 0, 0.36),
        0 3px 10px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.12);
}

.concept-d-live body {
    background: linear-gradient(145deg, #EAF8FF 0%, #B8DCFF 43%, #D8F6ED 100%);
    background-attachment: fixed;
}

.dark.concept-d-live body {
    background: linear-gradient(145deg, #071422 0%, #092A49 48%, #07382D 100%);
}

.concept-d-live body::before {
    opacity: .72;
    background:
        radial-gradient(circle at 10% -10%, rgba(255,255,255,.94) 0%, rgba(91,190,255,.46) 27%, rgba(12,116,245,.08) 48%, transparent 67%),
        radial-gradient(circle at 102% 18%, rgba(75,240,223,.70) 0%, rgba(6,129,255,.25) 36%, transparent 62%),
        radial-gradient(ellipse at 50% 112%, rgba(255,255,255,.80), rgba(32,201,151,.24) 43%, transparent 68%);
}

.dark.concept-d-live body::before {
    opacity: .42;
    background:
        radial-gradient(circle at 9% -8%, rgba(21,104,184,.62), transparent 58%),
        radial-gradient(circle at 101% 17%, rgba(5,135,120,.48), transparent 56%),
        radial-gradient(ellipse at 50% 112%, rgba(12,84,73,.40), transparent 62%);
}

.concept-d-live #appShell { isolation: isolate; }
.concept-d-live #appShell::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .42;
    background-image: radial-gradient(circle at 1px 1px, rgba(37, 98, 148, .14) 1px, transparent 0);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.concept-d-live #appShell::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--d-ambient-image);
    background-size: cover;
    background-position: center;
    opacity: .075;
    mix-blend-mode: multiply;
    transform: scale(1.055);
    filter: saturate(1.2) contrast(.9);
}

.dark.concept-d-live #appShell::after {
    opacity: .10;
    mix-blend-mode: screen;
    filter: saturate(1.02) brightness(.52);
}

.concept-d-live .d-glass {
    position: relative;
    background: var(--d-panel);
    border: 1px solid var(--d-edge);
    box-shadow: var(--d-shadow);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    backdrop-filter: blur(28px) saturate(150%);
}

.concept-d-live .d-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--d-edge-bright);
}

.d-ops-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.d-focus-hero {
    grid-column: span 8;
    min-height: 336px;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--d-radius-xl);
}

.d-focus-hero::after {
    content: '';
    position: absolute;
    inset: 0 0 0 38%;
    z-index: -2;
    background-image: linear-gradient(90deg, transparent 2%, rgba(255,255,255,.04)), var(--d-hero-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: saturate(1.06) contrast(1.04);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    transition: opacity 180ms var(--ease-enter), transform 240ms var(--ease-enter);
    transform: scale(1.025);
}

.d-focus-hero.has-image::after { opacity: 1; transform: scale(1); }
.d-focus-hero > .d-focus-hero__content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(108deg, rgba(255,255,255,.78) 0%, rgba(248,253,255,.73) 43%, rgba(248,253,255,.12) 75%);
}
.dark .d-focus-hero > .d-focus-hero__content::before {
    background: linear-gradient(108deg, rgba(10,25,42,.96) 0%, rgba(10,25,42,.86) 43%, rgba(10,25,42,.14) 76%);
}

.d-focus-hero__content {
    position: relative;
    z-index: 1;
    width: 61%;
    min-height: 336px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.d-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--d-blue-deep);
    font-size: 12px;
    line-height: 1;
    font-weight: 760;
    letter-spacing: .01em;
}
.dark .d-kicker { color: #8CC8FF; }
.d-kicker svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-focus-hero h2 { max-width: 530px; margin: 13px 0 8px; font-size: clamp(31px, 3vw, 48px); line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.d-focus-hero p { max-width: 470px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.d-focus-hero__actions { margin-top: 18px; }

.d-primary {
    position: relative;
    overflow: hidden;
    min-height: 44px;
    padding: 0 15px 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: linear-gradient(145deg, #0875E1, #075FC5 62%, #1548C7);
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(0, 104, 225, .28), inset 0 1px 1px rgba(255,255,255,.46);
    font-size: 13px;
    font-weight: 720;
    transition: transform var(--dur-fast) var(--ease-enter), box-shadow var(--dur-mid) var(--ease-enter);
}
.d-primary svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-mid) var(--ease-enter); }
.d-primary:hover { transform: translateY(-1px); box-shadow: 0 17px 34px rgba(0, 104, 225, .34), inset 0 1px 1px rgba(255,255,255,.55); }
.d-primary:hover svg { transform: translateX(2px); }
.d-primary:active { transform: scale(.97); }
.d-primary:disabled { opacity: .55; cursor: wait; }

.d-primary, .concept-d-live .cta, .concept-d-live .iconbtn,
.concept-d-live .logout-btn, .concept-d-live .tab,
.concept-d-live .audit-action, .concept-d-live .filter-btn,
.concept-d-live .back-btn, .concept-d-live .view-toggle button { position: relative; overflow: hidden; isolation: isolate; }
.d-press-ripple {
    position: absolute;
    z-index: 8;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: rgba(255,255,255,.50);
    pointer-events: none;
    transform: scale(0);
    display: none;
    animation: none;
}

.d-focus-hero__stats {
    width: 100%;
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
/* Смуга цифр доїжджає до фото, а діагональний скрім контенту в цьому місці
   вже майже прозорий — останні показники читались поверх фасаду. Даємо самій
   смузі власну підкладку: фото лишається видимим вище, цифри — розбірливими. */
.d-focus-hero__stats { position: relative; }
.d-focus-hero.has-image .d-focus-hero__stats::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -14px -28px -28px -28px;
    background: linear-gradient(to top, rgba(250,253,255,.94) 0%, rgba(250,253,255,.86) 62%, rgba(250,253,255,0) 100%);
    pointer-events: none;
}
.dark .d-focus-hero.has-image .d-focus-hero__stats::before {
    background: linear-gradient(to top, rgba(8,22,38,.95) 0%, rgba(8,22,38,.88) 62%, rgba(8,22,38,0) 100%);
}
.d-focus-hero__stats > div { padding-top: 10px; border-top: 1px solid var(--d-edge); }
.d-focus-hero__stats strong { display: block; font-size: 21px; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.d-focus-hero__stats span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 10.5px; }

.d-cycle-panel, .d-attention-panel, .d-trend-panel { border-radius: var(--d-radius-xl); padding: 20px; overflow: hidden; }
.d-cycle-panel { grid-column: span 4; min-height: 336px; }
.d-attention-panel { grid-column: span 4; min-height: 350px; }
.d-trend-panel { grid-column: span 8; min-height: 350px; }

.d-panel-head { position: relative; z-index: 1; min-height: 24px; display: flex; align-items: center; gap: 10px; }
.d-panel-head h3 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.d-panel-head > span { margin-left: auto; color: var(--ink-3); font-size: 10.5px; font-weight: 650; }

.d-cycle-main { margin-top: 23px; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 17px; align-items: center; }
.d-cycle-ring {
    width: 128px;
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--d-blue) calc(var(--d-pct) * 1%), rgba(69,116,155,.13) 0);
    box-shadow: inset 0 0 0 1px var(--d-edge-bright), 0 18px 38px rgba(0, 98, 218, .20);
    transition: none;
}
.d-cycle-ring::before { content: ''; width: 94px; aspect-ratio: 1; border-radius: 50%; background: var(--d-panel-strong); border: 1px solid var(--d-edge); box-shadow: inset 0 1px 0 var(--d-edge-bright); }
.d-cycle-ring > span { position: absolute; text-align: center; }
.d-cycle-ring strong { display: block; font-size: 29px; line-height: 1; letter-spacing: -.055em; }
.d-cycle-ring small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.d-cycle-copy strong { display: block; font-size: 16px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.d-cycle-copy p { margin: 6px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.45; }

.d-severity-stack { height: 11px; margin: 22px 0 12px; display: flex; overflow: hidden; border-radius: 999px; background: rgba(65,113,154,.11); box-shadow: inset 0 1px 2px rgba(9,42,77,.12); }
.d-severity-stack i { min-width: 0; height: 100%; transform-origin: left center; }
.d-severity-stack .d, .d-severity-legend .d { background: var(--crit); }
.d-severity-stack .c, .d-severity-legend .c { background: var(--warn); }
.d-severity-stack .b, .d-severity-legend .b { background: var(--info); }
.d-severity-stack .e, .d-severity-legend .e { background: var(--repeat); }
.d-severity-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-severity-legend > span { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 10.5px; }
.d-severity-legend i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.d-severity-legend b { margin-left: auto; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }

.d-attention-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.d-attention-row {
    width: 100%;
    min-height: 66px;
    padding: 8px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    color: var(--ink);
    background: rgba(255,255,255,.72);
    border: 1px solid var(--d-edge);
    border-radius: 18px;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    transition: transform var(--dur-fast) var(--ease-enter), background var(--dur-fast) ease, box-shadow var(--dur-mid) ease;
}
.dark .d-attention-row { background: rgba(29,51,73,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.d-attention-row:hover { transform: translateY(-2px); background: var(--d-panel-strong); box-shadow: 0 11px 22px rgba(32, 88, 137, .12); }
.d-attention-row:active { transform: scale(.985); }
.d-attention-row img, .d-attention-placeholder { width: 50px; height: 50px; border-radius: 14px; }
.d-attention-row img { object-fit: cover; background: var(--surface-2); }
.d-attention-placeholder { display: grid; place-items: center; color: var(--ink-3); background: var(--surface-2); }
.d-attention-placeholder svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.d-attention-name { min-width: 0; }
.d-attention-name strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.d-attention-name span { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-3); font-size: 10px; }
.d-attention-score { text-align: right; }
.d-attention-score strong { display: block; color: var(--crit-ink); font-size: 17px; line-height: 1; }
.d-attention-score span { display: block; margin-top: 4px; color: var(--ink-3); font-size: 8px; font-weight: 720; text-transform: uppercase; letter-spacing: .06em; }

.d-skeleton-row {
    position: relative;
    height: 66px;
    overflow: hidden;
    border-radius: 18px;
    background: color-mix(in srgb, var(--d-blue-soft) 28%, var(--d-panel-strong));
}
.d-skeleton-row:nth-child(-n+2)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 18%, rgba(255,255,255,.48) 50%, transparent 82%);
    transform: translateX(-110%);
    animation: d-shimmer-transform 1.35s ease-in-out infinite;
}
@keyframes d-shimmer-transform { to { transform: translateX(110%); } }

.d-trend-wrap { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 14px; }
.d-trend-card { min-width: 0; min-height: 255px; padding: 15px 17px 12px; border: 1px solid var(--d-edge); border-radius: 22px; background: rgba(255,255,255,.70); box-shadow: inset 0 1px 0 rgba(255,255,255,.58); }
.dark .d-trend-card { background: rgba(5, 19, 34, .70); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.d-trend-legend { min-height: 26px; display: flex; align-items: center; gap: 16px; color: var(--ink-2); font-size: 10.5px; font-weight: 680; }
.d-trend-legend span { display: inline-flex; align-items: center; gap: 7px; }
.d-trend-legend i { width: 18px; height: 7px; border-radius: 999px; }
.d-trend-legend .found { color: var(--d-blue); background: linear-gradient(90deg, #40B4FF, #1767EE); box-shadow: 0 4px 12px currentColor; }
.d-trend-legend .done { color: var(--d-teal); background: linear-gradient(90deg, #43E7C4, #05866D); box-shadow: 0 4px 12px currentColor; }
.d-trend-chart { height: 198px; padding: 29px 8px 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); align-items: end; gap: clamp(8px, 1.4vw, 15px); border-bottom: 1px solid var(--d-edge); background: repeating-linear-gradient(to bottom, transparent 0, transparent 48px, rgba(70,112,151,.11) 49px); }
.d-trend-month { min-width: 0; height: 169px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.d-trend-pair { width: 100%; height: 143px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1vw, 11px); }
.d-trend-column { position: relative; width: clamp(16px, 2.2vw, 26px); height: 100%; display: flex; justify-content: center; align-items: flex-end; }
.d-trend-column::before { content: ''; position: absolute; inset: 0; border-radius: 999px 999px 7px 7px; background: rgba(72,119,159,.07); }
.d-trend-column b { position: absolute; z-index: 2; bottom: min(calc(var(--d-height, 0%) + 5px), calc(100% - 16px)); font-size: 9px; font-variant-numeric: tabular-nums; }
.d-trend-column i { position: relative; z-index: 1; width: 100%; height: var(--d-height); min-height: 5px; border-radius: 999px 999px 7px 7px; transform-origin: bottom; }
.d-trend-column i.found { background: linear-gradient(180deg, #49B9FF, #0878F9 58%, #1555D5); box-shadow: 0 9px 20px rgba(8,120,249,.24), inset 0 1px 0 rgba(255,255,255,.48); }
.d-trend-column i.done { background: linear-gradient(180deg, #55EDCE, #08AD8A 58%, #08715D); box-shadow: 0 9px 20px rgba(6,164,125,.22), inset 0 1px 0 rgba(255,255,255,.42); }
.d-trend-month > strong { margin-top: 8px; font-size: 10px; font-weight: 680; text-transform: capitalize; }
.d-trend-side { display: flex; flex-direction: column; gap: 8px; }
.d-trend-side > div { flex: 1; padding: 14px; border-radius: 19px; border: 1px solid var(--d-edge); background: rgba(255,255,255,.70); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.dark .d-trend-side > div { background: rgba(5,19,34,.70); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.d-trend-side span { color: var(--ink-3); font-size: 9px; font-weight: 740; text-transform: uppercase; letter-spacing: .07em; }
.d-trend-side strong { display: block; margin-top: 7px; font-size: 24px; line-height: 1; letter-spacing: -.045em; }
.d-trend-side small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 9.5px; }
.d-empty-inline { padding: 24px 12px; color: var(--ink-3); font-size: 12px; text-align: center; }

/* Дані проявляються послідовно, без декоративного руху самого контенту. */
.d-ops-grid.is-ready .d-severity-stack i,
.d-ops-grid.is-ready .d-trend-column i,
.d-ops-grid.is-ready .d-trend-column b,
.d-ops-grid.is-ready > article { animation: none; }

/* Production-компоненти отримують чіткіші межі й глибину Concept D. */
.concept-d-live #homeScreen > .kpi-strip {
    gap: 10px;
    margin-top: 2px;
    margin-bottom: 12px;
}
.concept-d-live #homeScreen > .kpi-strip .kpi {
    min-height: 104px;
    padding: 15px 16px;
    background: var(--d-panel-strong);
    border-color: var(--d-edge);
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(31,78,121,.10), inset 0 1px 0 var(--d-edge-bright);
}
.concept-d-live #homeScreen > .kpi-strip .kpi:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31,78,121,.14), inset 0 1px 0 var(--d-edge-bright); }
.concept-d-live #homeScreen > .distrib { margin-bottom: 14px; background: var(--d-panel-strong); border-color: var(--d-edge); border-radius: 20px; box-shadow: 0 10px 28px rgba(31,78,121,.09); }
.concept-d-live .toolbar { border-color: var(--d-edge); border-radius: 20px; box-shadow: var(--d-shadow); }
.concept-d-live .audit-card, .concept-d-live .panel, .concept-d-live .learn-card {
    border-color: var(--d-edge);
    box-shadow: 0 14px 34px rgba(27,75,118,.12), inset 0 1px 0 var(--d-edge-bright);
}
.concept-d-live .audit-card:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(27,75,118,.18), inset 0 1px 0 var(--d-edge-bright); }
.concept-d-live .defect-card { border-color: var(--d-edge); box-shadow: 0 14px 34px rgba(15,47,77,.14); }
.concept-d-live .defect-card__priority-badge {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.34);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
}
.concept-d-live .card-inline-editor {
    background: var(--d-panel-strong);
    border: 1px solid var(--d-edge);
    border-radius: 26px;
    box-shadow: 0 26px 70px rgba(11,40,69,.22), inset 0 1px 0 var(--d-edge-bright);
}
.concept-d-live .card-inline-editor__content { background: var(--d-panel-strong); }
.concept-d-live .card-inline-editor__description {
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.concept-d-live .card-inline-editor__description textarea { background: transparent; border: 0; box-shadow: none; font-size: 15px; line-height: 1.55; }

@media (min-width: 1180px) {
    .concept-d-live #appShell { padding-left: 104px; }
    .concept-d-live .topbar {
        position: fixed;
        top: 18px;
        bottom: 18px;
        left: max(18px, calc(var(--safe-left) + 12px));
        width: 82px;
        z-index: 150;
        padding: 0;
        border: 1px solid var(--d-edge);
        border-radius: 29px;
        box-shadow: var(--d-shadow);
    }
    .concept-d-live .topbar::before { border-radius: inherit; background: var(--d-panel); }
    .concept-d-live .topbar-in { width: 100%; height: 100%; padding: 11px 8px; flex-direction: column; gap: 10px; }
    .concept-d-live .brand { justify-content: center; }
    .concept-d-live .brand-mark { width: 46px; height: 46px; border-radius: 15px; }
    .concept-d-live .brand > div:last-child { display: none; }
    .concept-d-live .tabs { width: 100%; margin: 3px 0 0; padding: 0; flex-direction: column; gap: 6px; background: transparent; }
    .concept-d-live .tab { width: 100%; min-height: 58px; height: auto; padding: 7px 3px; flex-direction: column; gap: 4px; border-radius: 18px; font-size: 9px; line-height: 1.05; }
    .concept-d-live .tab .tab-ic { display: block; width: 21px; height: 21px; }
    .concept-d-live .tab.active { color: var(--d-blue-deep); background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 9px 20px rgba(35,98,156,.13); }
    .dark.concept-d-live .tab.active { color: #A7D4FF; background: rgba(62,130,196,.20); }
    .concept-d-live .tab-indicator { display: none; }
    .concept-d-live .top-actions { width: 100%; margin: auto 0 0; flex-direction: column; gap: 7px; }
    .concept-d-live .top-actions .iconbtn, .concept-d-live .top-actions .logout-btn { width: 46px; height: 46px; border-radius: 15px; }
    .concept-d-live #cycleSelectorWrapper {
        position: fixed;
        top: 30px;
        right: 340px;
        z-index: 155;
        margin: 0 !important;
    }
    .concept-d-live #cycleSelector { max-width: 190px; height: 42px; padding-left: 13px; background: var(--d-panel-strong); border-color: var(--d-edge); border-radius: 999px; box-shadow: 0 9px 24px rgba(30,77,119,.12); }
    .concept-d-live #appShell:not(:has(#homeScreen.active)) #cycleSelectorWrapper { display: none !important; }
    .concept-d-live .app { width: 100%; max-width: 1560px; margin: 0 auto; padding-top: 18px; }
    .concept-d-live .view > .page-head {
        position: sticky;
        top: 18px;
        z-index: 105;
        min-height: 72px;
        margin-bottom: 16px;
        padding: 11px 17px;
        align-items: center;
        background: var(--d-panel);
        border: 1px solid var(--d-edge);
        border-radius: 24px;
        box-shadow: var(--d-shadow);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        backdrop-filter: blur(28px) saturate(160%);
    }
    .concept-d-live .view > .page-head h1 { font-size: 24px; }
    .concept-d-live .view > .page-head .eyebrow { margin-bottom: 2px; font-size: 9px; }
    .concept-d-live .view > .page-head .sub { display: none; }
    .concept-d-live .view > .page-head .cta { margin-right: 0; }
}

@media (max-width: 1179px) {
    .d-focus-hero { grid-column: span 7; }
    .d-cycle-panel { grid-column: span 5; }
    .d-attention-panel { grid-column: span 5; }
    .d-trend-panel { grid-column: span 7; }
    .d-trend-wrap { grid-template-columns: 1fr; }
    .d-trend-side { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .d-focus-hero, .d-cycle-panel, .d-attention-panel, .d-trend-panel { grid-column: span 12; }
    .d-focus-hero { min-height: 320px; }
    .d-focus-hero__content { min-height: 320px; }
    .d-trend-wrap { grid-template-columns: minmax(0, 1fr) 160px; }
    .d-trend-side { display: flex; }
}

@media (max-width: 640px) {
    .d-ops-grid { gap: 12px; margin-bottom: 14px; }
    .d-focus-hero, .d-cycle-panel, .d-attention-panel, .d-trend-panel { border-radius: 24px; }
    .d-focus-hero { min-height: 390px; }
    .d-focus-hero::after { inset: 0; opacity: .48; -webkit-mask-image: none; mask-image: none; }
    .d-focus-hero > .d-focus-hero__content::before { background: linear-gradient(to bottom, rgba(250,253,255,.88) 0%, rgba(250,253,255,.74) 58%, rgba(250,253,255,.90) 100%); }
    .dark .d-focus-hero > .d-focus-hero__content::before { background: linear-gradient(to bottom, rgba(8,22,38,.92) 0%, rgba(8,22,38,.76) 58%, rgba(8,22,38,.94) 100%); }
    .d-focus-hero__content { width: 100%; min-height: 390px; padding: 21px; }
    .d-focus-hero h2 { max-width: 330px; font-size: 35px; }
    .d-focus-hero p { max-width: 340px; }
    .d-focus-hero__stats { gap: 7px; }
    .d-focus-hero__stats strong { font-size: 18px; }
    .d-focus-hero__stats span { font-size: 9px; }
    .d-cycle-panel, .d-attention-panel, .d-trend-panel { padding: 17px; }
    .d-cycle-main { grid-template-columns: 112px minmax(0,1fr); gap: 13px; }
    .d-cycle-ring { width: 112px; }
    .d-cycle-ring::before { width: 82px; }
    .d-cycle-ring strong { font-size: 25px; }
    .d-trend-wrap { grid-template-columns: 1fr; }
    .d-trend-side { display: grid; grid-template-columns: 1fr 1fr; }
    .d-trend-card { padding-left: 10px; padding-right: 10px; }
    .d-trend-chart { gap: 5px; padding-left: 0; padding-right: 0; }
    .d-trend-column { width: clamp(10px, 3.3vw, 18px); }
    .d-trend-pair { gap: 3px; }
    .d-trend-column b { display: none; }
    .concept-d-live #homeScreen > .kpi-strip .kpi { min-height: 96px; }
}

@media (max-width: 374px) {
    .d-focus-hero h2 { font-size: 31px; }
    .d-focus-hero__stats > div:nth-child(3) { display: none; }
    .d-focus-hero__stats { grid-template-columns: 1fr 1fr; }
    .d-attention-row { grid-template-columns: 46px minmax(0,1fr) auto; gap: 8px; }
    .d-attention-row img, .d-attention-placeholder { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .d-skeleton-row { animation: none; }
    .d-ops-grid.is-ready .d-severity-stack i,
    .d-ops-grid.is-ready .d-trend-column i,
    .d-ops-grid.is-ready .d-trend-column b,
    .d-ops-grid.is-ready > article,
    .d-press-ripple { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
    .concept-d-live .d-glass,
    .concept-d-live .view > .page-head,
    .concept-d-live .topbar { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* ============================================================================
   15. CONCEPT D · OPERATIONAL REFINEMENT D5
   Цикли, останній аудит, risk ranking, progress charts and evidence workspace.
   ========================================================================== */

/* Cycle switcher: the same compact glass popover used in the approved concept. */
.concept-d-live #cycleSelectorWrapper { width: 232px; }
.concept-d-live #cycleSelectorWrapper .cycle-dropdown { width: 100%; min-width: 0; }
.concept-d-live #cycleSelectorWrapper .custom-dropdown-btn.toolbar {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    color: var(--ink);
    background: var(--d-panel-strong);
    border: 1px solid var(--d-edge);
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(30,77,119,.12), inset 0 1px 0 var(--d-edge-bright);
    font-size: 13px;
    font-weight: 720;
}
.concept-d-live #cycleSelectorWrapper .custom-dropdown-chevron { width: 17px !important; height: 17px !important; }
.concept-d-live .cycle-dropdown-panel {
    right: 0;
    left: auto;
    width: 318px;
    max-height: none;
    padding: 9px;
    overflow: visible;
    background: color-mix(in srgb, var(--d-panel-strong) 94%, transparent);
    border-color: var(--d-edge);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(18,58,94,.22), inset 0 1px 0 var(--d-edge-bright);
}
.concept-d-live .cycle-dropdown-heading {
    padding: 7px 10px 6px;
    color: var(--ink-3);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.concept-d-live .cycle-dropdown-option {
    position: relative;
    min-height: 62px;
    padding: 10px 34px 10px 11px;
    border-radius: 15px;
}
.concept-d-live .cycle-dropdown-option:hover { background: color-mix(in srgb, var(--d-blue-soft) 48%, transparent); }
.concept-d-live .cycle-dropdown-option.active { background: color-mix(in srgb, var(--d-blue-soft) 64%, transparent); }
.concept-d-live .cycle-dropdown-option__copy { display: block; min-width: 0; }
.concept-d-live .cycle-dropdown-option__copy strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.15; }
.concept-d-live .cycle-dropdown-option__copy small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 9px; font-weight: 520; white-space: nowrap; }
.concept-d-live .cycle-dropdown-option__status {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ink-3);
    transform: translateY(-50%);
}
.concept-d-live .cycle-dropdown-option__status.is-live { background: var(--teal); box-shadow: 0 0 0 4px rgba(16,185,149,.12); }
.concept-d-live .cycle-dropdown-option > svg { position: absolute; right: 12px; bottom: 8px; }
.concept-d-live #cycleSelectorWrapper.is-loading .custom-dropdown-btn { opacity: .68; pointer-events: none; }
.concept-d-live #cycleSelectorWrapper.is-loading .custom-dropdown-chevron { animation: d-cycle-wait .7s linear infinite; }
@keyframes d-cycle-wait { to { transform: rotate(360deg); } }

@media (min-width: 1180px) {
    .concept-d-live #cycleSelectorWrapper { top: 29px; right: 340px; }
}

/* ---------------------------------------------------------------------------
   Фасад у hero.

   Задача складніша, ніж здається: рейка hero має пропорцію ~2.6:1, а фасади
   знімають у 4:3 / 3:2. Один `background-size: cover` на такій коробці
   збільшує знімок майже вдвічі й зрізає більшу частину кадру, а фіксований
   `background-position` не може обслужити 26 фото з різним ракурсом — для
   високої будівлі він потрапляє в небо, для знімка через дорогу зрізає вхід.

   Рішення з трьох шарів:
   1. Розмита підкладка того самого фото заповнює надширокий бокс, тому
      різкий шар більше не треба зумити — знімок лишається у своєму масштабі.
   2. Різкий шар займає праву частину (пропорція ~1.5:1 замість 2.6:1),
      а точку фокуса рахує JS із реальних пропорцій файлу.
   3. Спільна обробка: перо в бік тексту, легкий тон і завал світел, щоб
      26 знімків із різною експозицією читались однією родиною.
   --------------------------------------------------------------------------- */

.concept-d-live .d-focus-hero::after { display: none; }

.concept-d-live .d-focus-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 240ms var(--ease-enter);
    pointer-events: none;
    contain: paint;
    isolation: isolate;
}
.concept-d-live .d-focus-hero.has-image .d-focus-hero__media { opacity: 1; }

/* 1 · Підкладка: те саме фото, розмите й збільшене. Заповнює надширокий бокс,
       щоб різкому шару не довелося зумити. */
.concept-d-live .d-focus-hero__blur {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: blur(38px) saturate(1.3);
    transform: translateZ(0);
    z-index: 1;
}

/* 2 · Різкий шар. Права частина, м'яке перо в бік тексту. */
.concept-d-live .d-focus-hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 64%;
    height: 100%;
    object-fit: cover;
    /* Точку фокуса ставить JS за пропорціями конкретного знімка */
    object-position: var(--d-hero-focus, 50% 60%);
    filter: saturate(1.07) contrast(1.03);
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.42) 15%, #000 40%);
    mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.42) 15%, #000 40%);
    z-index: 2;
}

/* 3 · Спільний тон і захист тексту.

   Нижній скрим має бути в кольорі полотна, а не темним: рядок показників
   набраний темним чорнилом, тож затемнення низу знижувало б контраст, а не
   підвищувало. Тому це світла пляма в лівому нижньому куті — рівно під
   показниками — яка не вибілює решту знімка. */
.concept-d-live .d-focus-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(132% 64% at 20% 112%, rgba(248,253,255,.94) 0%, rgba(248,253,255,.50) 44%, transparent 74%),
        linear-gradient(180deg, rgba(226,241,255,.14) 0%, transparent 26%),
        radial-gradient(120% 92% at 88% 42%, transparent 52%, rgba(6,20,36,.08) 100%);
    z-index: 4;
}
.dark.concept-d-live .d-focus-hero__media::after {
    background:
        radial-gradient(132% 64% at 20% 112%, rgba(9,24,41,.95) 0%, rgba(9,24,41,.58) 44%, transparent 74%),
        linear-gradient(180deg, rgba(9,24,41,.44) 0%, transparent 34%),
        radial-gradient(120% 92% at 88% 42%, transparent 44%, rgba(4,12,22,.34) 100%);
}

/* На дуже широких екранах рейка витягується, і шар знову почав би зумити.
   Трохи вужчий шар тримає кроп біля одиниці навіть для знімків 4:3. */
@media (min-width: 1600px) {
    .concept-d-live .d-focus-hero__photo { width: 56%; }
}

/* Полотно під текстом. Права межа не обривається — доходить до нуля плавно. */
.concept-d-live .d-focus-hero::before {
    z-index: -1;
    background: linear-gradient(96deg,
        rgba(248,253,255,.985) 0%,
        rgba(248,253,255,.94) 28%,
        rgba(248,253,255,.68) 44%,
        rgba(248,253,255,.20) 60%,
        rgba(248,253,255,0) 76%);
    box-shadow: inset 0 1px 0 var(--d-edge-bright);
}
.dark.concept-d-live .d-focus-hero::before {
    background: linear-gradient(96deg,
        rgba(9,24,41,.985) 0%,
        rgba(9,24,41,.95) 30%,
        rgba(9,24,41,.72) 46%,
        rgba(9,24,41,.24) 62%,
        rgba(9,24,41,0) 78%);
}
.concept-d-live .d-focus-hero > .d-focus-hero__content::before { display: none; }
.concept-d-live .d-focus-hero__content { width: 72%; }
.concept-d-live .d-focus-hero__stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.concept-d-live .d-focus-hero__stats > div { min-width: 0; }
.concept-d-live .d-focus-hero__stats strong { font-size: 19px; }
.concept-d-live .d-focus-hero__stats span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Risk list: total volume plus explicit D/E signals. */
.concept-d-live .d-attention-row { grid-template-columns: 50px minmax(90px, 1fr) auto; }
.concept-d-live .d-attention-metrics { display: grid; grid-template-columns: repeat(3, 38px); gap: 5px; }
.concept-d-live .d-attention-metrics > span {
    min-height: 42px;
    display: grid;
    place-items: center;
    align-content: center;
    color: var(--ink-2);
    background: rgba(70,113,151,.08);
    border: 1px solid rgba(70,113,151,.09);
    border-radius: 12px;
}
.concept-d-live .d-attention-metrics b { font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.concept-d-live .d-attention-metrics small { margin-top: 3px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.concept-d-live .d-attention-metrics .d { color: var(--crit-ink); background: var(--crit-soft); }
.concept-d-live .d-attention-metrics .e { color: var(--repeat); background: var(--repeat-soft); }

/* Modern dual-curve metric chart inspired by 21st.dev progress metric cards. */
.concept-d-live .d-trend-chart {
    position: relative;
    height: 210px;
    padding: 0;
    display: block;
    overflow: hidden;
    border: 0;
    background: transparent;
}
.concept-d-live .d-trend-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.concept-d-live .d-trend-grid line { stroke: rgba(73,113,150,.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.concept-d-live .d-trend-area.found { fill: url(#dFoundArea); }
.concept-d-live .d-trend-area.done { fill: url(#dDoneArea); }
.concept-d-live .d-trend-line {
    fill: none;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1500;
    stroke-dashoffset: 0;
    animation: none;
}
.concept-d-live .d-trend-line.found { stroke: #1685FF; }
.concept-d-live .d-trend-line.done { stroke: #0BAA89; stroke-dasharray: 10 7; animation-name: d-line-draw-dashed; }
.concept-d-live .d-trend-point { outline: none; cursor: default; }
.concept-d-live .d-trend-point__halo { opacity: .12; transform-box: fill-box; transform-origin: center; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; }
.concept-d-live .d-trend-point.found .d-trend-point__halo { fill: #1685FF; }
.concept-d-live .d-trend-point.done .d-trend-point__halo { fill: #0BAA89; }
.concept-d-live .d-trend-point__dot { fill: var(--d-panel-strong); stroke-width: 3; vector-effect: non-scaling-stroke; }
.concept-d-live .d-trend-point.found .d-trend-point__dot { stroke: #1685FF; }
.concept-d-live .d-trend-point.done .d-trend-point__dot { stroke: #0BAA89; }
.concept-d-live .d-trend-point text { fill: var(--ink); font-size: 9px; font-weight: 800; opacity: 0; transition: opacity var(--dur-fast) ease; }
.concept-d-live .d-trend-point:hover text,
.concept-d-live .d-trend-point:focus text,
.concept-d-live .d-trend-point:last-of-type text { opacity: 1; }
.concept-d-live .d-trend-point:hover .d-trend-point__halo,
.concept-d-live .d-trend-point:focus .d-trend-point__halo { opacity: .22; transform: scale(1.5); }
.concept-d-live .d-trend-axis-label { fill: var(--ink-3); font-size: 10px; font-weight: 700; text-transform: capitalize; }
@keyframes d-line-draw { to { stroke-dashoffset: 0; } }
@keyframes d-line-draw-dashed { to { stroke-dashoffset: 0; } }

/* Audit cards expose processing progress before the severity row. */
.concept-d-live .audit-card-progress { margin: 12px 0 13px; }
.concept-d-live .audit-card-progress > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.concept-d-live .audit-card-progress b { color: var(--ink-2); font-size: 10px; font-weight: 760; }
.concept-d-live .audit-card-progress em { color: var(--ink-3); font-size: 9px; font-style: normal; font-weight: 680; font-variant-numeric: tabular-nums; }
.concept-d-live .audit-card-progress > div { height: 7px; margin-top: 7px; overflow: hidden; background: rgba(73,116,153,.12); border-radius: 999px; box-shadow: inset 0 1px 2px rgba(14,46,76,.1); }
.concept-d-live .audit-card-progress i { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, #0BAA89, #32D6B5); border-radius: inherit; box-shadow: 0 4px 12px rgba(11,170,137,.22); transition: none; }

/* Compact facade context is visible above the evidence workspace on every size. */
.concept-d-live #defectsScreen > .det-hero {
    min-height: 108px;
    height: 108px;
    grid-template-columns: minmax(280px, 36%) minmax(0, 1fr);
    background: var(--d-panel);
    border: 1px solid var(--d-edge);
    border-radius: 24px;
    box-shadow: var(--d-shadow), inset 0 1px 0 var(--d-edge-bright);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
}
.concept-d-live #defectsScreen .det-facade { min-height: 108px; height: 108px; }
.concept-d-live #defectsScreen .det-facade img#dtStoreFacade { object-position: center 55%; }
.concept-d-live #defectsScreen .det-facade .facade-shade { background: linear-gradient(180deg, rgba(6,18,31,.22), transparent 55%, rgba(6,18,31,.36)); }
.concept-d-live #defectsScreen .facade-actions-container { display: none; }
.concept-d-live #defectsScreen .det-hero-bottom { min-width: 0; padding: 13px 17px; display: grid; grid-template-columns: minmax(0,1fr) minmax(250px, .72fr); align-items: center; gap: 22px; }
.concept-d-live #defectsScreen .det-hero-left .eyebrow { font-size: 8px; }
.concept-d-live #defectsScreen .det-hero-left h2 { margin-top: 2px; font-size: 18px; }
.concept-d-live #defectsScreen .det-hero-left .meta { margin-top: 3px; font-size: 10px; }
.concept-d-live #defectsScreen .det-progress .track { height: 7px; background: rgba(72,117,155,.13); }
.concept-d-live #defectsScreen .det-progress .fill { background: linear-gradient(90deg, #0BAA89, #20CDA8, #1685FF); }

@media (min-width: 1180px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto 108px minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero { display: grid !important; grid-column: 1 / -1; grid-row: 2; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 3; height: calc(100dvh - 242px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 3; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 242px); }
    .concept-d-live #defectsScreen .card-inline-editor__media { min-height: calc(100dvh - 244px); }
    .concept-d-live #defectsScreen .card-inline-editor__content { max-height: calc(100dvh - 242px); }
}

@media (min-width: 901px) and (max-width: 1179px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto 104px minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero { display: grid !important; grid-column: 1 / -1; grid-row: 2; height: 104px; min-height: 104px; }
    .concept-d-live #defectsScreen .det-facade { height: 104px; min-height: 104px; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 3; height: calc(100dvh - 238px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 3; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 238px); }
}

@media (min-width: 641px) and (max-width: 900px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto 98px minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live body.focus-editor-open #defectsScreen > .det-hero { display: grid !important; grid-column: 1 / -1; grid-row: 2; order: initial; height: 98px; min-height: 98px; }
    .concept-d-live #defectsScreen .det-facade { height: 98px; min-height: 98px; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 3; height: calc(100dvh - 222px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 3; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 222px); }
}

/* Search field inside editor dropdowns: restore icon-safe padding overridden by .ed-field input. */
.concept-d-live .ed-field .custom-dropdown-search-wrap .search-wrap { position: relative; }
.concept-d-live .ed-field .custom-dropdown-search-wrap .search-wrap svg { z-index: 2; left: 13px; width: 16px; height: 16px; }
.concept-d-live .ed-field .custom-dropdown-search-wrap .search-wrap input {
    height: 40px;
    padding: 0 12px 0 39px;
    color: var(--ink);
    background: var(--d-panel-strong);
    border: 1px solid var(--d-edge);
    border-radius: 13px;
}

/* Portrait evidence keeps the whole photo; blurred image fill replaces black bars. */
.concept-d-live .card-inline-editor__media {
    isolation: isolate;
    overflow: hidden;
    contain: paint;
    background: color-mix(in srgb, var(--d-blue-soft) 28%, #0A1724);
}
.concept-d-live .card-inline-editor__media::before {
    content: '';
    position: absolute;
    inset: -24px;
    z-index: 0;
    background-image: linear-gradient(rgba(7,22,36,.18), rgba(7,22,36,.34)), var(--editor-photo-bg);
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(.86);
    opacity: .76;
    transform: scale(1.08);
}
.concept-d-live .card-inline-editor__media .defect-card__image { z-index: 1; }
.concept-d-live .card-inline-editor__media::after { z-index: 2; pointer-events: none; }

/* Edited state is a status, not a tiny decorative dot. */
.concept-d-live .d-defect-row.is-edited {
    border-color: color-mix(in srgb, var(--teal) 42%, var(--d-edge));
    background: color-mix(in srgb, var(--good-w) 54%, var(--d-panel));
}
.concept-d-live .d-defect-row.is-edited::after { display: none; }
.concept-d-live .d-defect-row__meta { min-width: 0; margin-top: 5px; display: flex; align-items: center; gap: 6px; }
.concept-d-live .d-defect-row__copy .d-defect-row__meta small { margin-top: 0; flex: 1; }
.concept-d-live .d-defect-row__meta em {
    flex: 0 0 auto;
    min-height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #087A64;
    background: rgba(16,185,149,.13);
    border-radius: 999px;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .02em;
}
.dark.concept-d-live .d-defect-row__meta em { color: #72E8CF; }
.concept-d-live .d-defect-row__meta em svg { width: 9px; height: 9px; stroke-width: 3; }

@media (max-width: 900px) {
    .concept-d-live #cycleSelectorWrapper { width: min(210px, 30vw); }
    .concept-d-live #cycleSelectorWrapper .custom-dropdown-btn.toolbar { height: 44px; padding: 0 12px; font-size: 11px; }
    .concept-d-live .cycle-dropdown-panel { width: min(318px, calc(100vw - 24px)); }
}

@media (max-width: 640px) {
    /* Телефон: горизонтальне перо тут не працює — рейка стає вертикальною, і
       фото неминуче опиняється під текстом. Тому знімок отримує власну смугу
       зверху, як обкладинка, а весь текст лягає на чисту поверхню. Фасад від
       цього видно краще, ніж крізь вуаль, і контраст тексту гарантований. */
    .concept-d-live .d-focus-hero { min-height: 0; }
    .concept-d-live .d-focus-hero__media {
        inset: 0 0 auto 0;
        height: 152px;
        border-radius: var(--d-radius-xl) var(--d-radius-xl) 0 0;
    }
    .concept-d-live .d-focus-hero__photo {
        width: 100%;
        -webkit-mask-image: none;
        mask-image: none;
        object-position: var(--d-hero-focus-narrow, 50% 52%);
        filter: saturate(1.05) contrast(1.02);
    }
    .concept-d-live .d-focus-hero__blur { display: none; }
    /* Тільки м'яка зустріч смуги з поверхнею картки — без вуалі поверх фото. */
    .concept-d-live .d-focus-hero__media::after {
        background: linear-gradient(180deg, transparent 62%, rgba(248,253,255,.55) 88%, rgba(248,253,255,.92) 100%);
    }
    .dark.concept-d-live .d-focus-hero__media::after {
        background: linear-gradient(180deg, transparent 62%, rgba(9,24,41,.6) 88%, rgba(9,24,41,.94) 100%);
    }
    .concept-d-live .d-focus-hero::before { background: none; }
    .dark.concept-d-live .d-focus-hero::before { background: none; }
    .concept-d-live .d-focus-hero__content {
        width: 100%;
        min-height: 0;
        padding: 164px 18px 18px;
    }
    .concept-d-live .d-focus-hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .concept-d-live .d-focus-hero__stats > div:nth-child(n+4) { margin-top: 5px; }
    .concept-d-live .d-attention-row { grid-template-columns: 46px minmax(76px, 1fr) auto; }
    .concept-d-live .d-attention-metrics { grid-template-columns: repeat(3, 31px); gap: 3px; }
    .concept-d-live .d-attention-metrics > span { min-height: 37px; border-radius: 10px; }
    .concept-d-live .d-attention-metrics b { font-size: 12px; }
    .concept-d-live #cycleSelectorWrapper { width: min(145px, 38vw); }
    .concept-d-live #cycleSelectorWrapper .custom-dropdown-btn.toolbar { height: 42px; font-size: 10px; }
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live body.focus-editor-open #defectsScreen > .det-hero {
        display: grid !important;
        height: 104px;
        min-height: 104px;
        grid-template-columns: 42% minmax(0,1fr);
        border-radius: 22px;
    }
    .concept-d-live #defectsScreen .det-facade { height: 104px; min-height: 104px; }
    .concept-d-live #defectsScreen .det-hero-bottom { padding: 11px 12px; display: block; }
    .concept-d-live #defectsScreen .det-hero-left .meta,
    .concept-d-live #defectsScreen .det-hero-left .eyebrow { display: none; }
    .concept-d-live #defectsScreen .det-hero-left h2 { margin: 0 0 10px; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
    .concept-d-live #defectsScreen .det-progress .row { font-size: 9px; }
    .concept-d-live #defectsScreen .det-progress .row .v { font-size: 12px; }
    .concept-d-live #defectsScreen .det-progress-note { display: none; }
}

@media (max-width: 374px) {
    .concept-d-live .d-focus-hero__stats > div:nth-child(3) { display: block; }
    .concept-d-live .d-focus-hero__stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .concept-d-live .d-attention-metrics > span:first-child { display: none; }
    .concept-d-live .d-attention-metrics { grid-template-columns: repeat(2, 32px); }
}

@media (prefers-reduced-motion: reduce) {
    .concept-d-live .d-trend-line { animation: none; stroke-dashoffset: 0; }
    .concept-d-live #cycleSelectorWrapper.is-loading .custom-dropdown-chevron { animation: none; }
}

/* ========================================================================== */
/* Concept D workspace v2 — full-panel transfer                              */
/* ========================================================================== */

.concept-d-live .d-defect-browser {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--d-panel);
    border: 1px solid var(--d-edge);
    border-radius: 28px;
    box-shadow: var(--d-shadow), inset 0 1px 0 var(--d-edge-bright);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
}
.concept-d-live .d-defect-browser__head {
    min-height: 76px;
    padding: 16px 17px 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.concept-d-live .d-defect-browser__head span,
.concept-d-live .d-inspector-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--d-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.concept-d-live .d-defect-browser__head h2 {
    margin: 0;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: -.035em;
}
.concept-d-live .d-defect-browser__head small {
    padding: 5px 8px;
    color: var(--ink-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 720;
    white-space: nowrap;
}
.concept-d-live .d-defect-browser__search {
    min-height: 44px;
    margin: 0 12px 10px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-3);
    background: var(--d-panel-strong);
    border: 1px solid var(--d-edge);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 var(--d-edge-bright);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.concept-d-live .d-defect-browser__search:focus-within {
    border-color: color-mix(in srgb, var(--d-blue) 55%, var(--d-edge));
    box-shadow: 0 0 0 3px rgba(28,126,246,.12), inset 0 1px 0 var(--d-edge-bright);
}
.concept-d-live .d-defect-browser__search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.concept-d-live .d-defect-browser__search input {
    min-width: 0;
    width: 100%;
    height: 42px;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 12px;
}
.concept-d-live .d-defect-browser__chips {
    padding: 0 12px 11px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}
.concept-d-live .d-defect-browser__chips button {
    min-width: 0;
    min-height: 44px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    transition: transform var(--dur-fast) var(--ease-enter), color var(--dur-fast) ease, background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.concept-d-live .d-defect-browser__chips button:hover { transform: translateY(-1px); }
.concept-d-live .d-defect-browser__chips button:active { transform: scale(.97); }
.concept-d-live .d-defect-browser__chips button b { font-size: 9px; opacity: .7; }
.concept-d-live .d-defect-browser__chips button.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #249CFF, #1262E7); box-shadow: 0 8px 18px rgba(17,104,232,.25); }
.concept-d-live .d-defect-browser__chips button.d.is-active { background: linear-gradient(135deg, #FF6A79, #D9384D); }
.concept-d-live .d-defect-browser__chips button.c.is-active { color: #3D2600; background: linear-gradient(135deg, #FFD45B, #F09A13); }
.concept-d-live .d-defect-browser__chips button.e.is-active { background: linear-gradient(135deg, #B76AF1, #7B36C8); }
.concept-d-live .d-defect-browser__list {
    min-height: 160px;
    padding: 5px 8px 8px;
    overflow: hidden auto;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(72,120,161,.3) transparent;
}
.concept-d-live .d-defect-row {
    position: relative;
    width: 100%;
    min-height: 70px;
    padding: 8px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    background: color-mix(in srgb, var(--d-panel-strong) 88%, transparent);
    border: 1px solid var(--d-edge);
    border-radius: 17px;
    text-align: left;
    box-shadow: inset 0 1px 0 var(--d-edge-bright);
    transition: transform var(--dur-fast) var(--ease-enter), background var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.concept-d-live .d-defect-row:hover { transform: translateX(2px); background: var(--d-panel-strong); box-shadow: 0 9px 22px rgba(23,73,117,.11), inset 0 1px 0 var(--d-edge-bright); }
.concept-d-live .d-defect-row:active { transform: scale(.985); }
.concept-d-live .d-defect-row.is-selected {
    border-color: rgba(27,126,246,.72);
    background: color-mix(in srgb, var(--d-blue-soft) 58%, var(--d-panel-strong));
    box-shadow: 0 0 0 3px rgba(27,126,246,.11), 0 10px 24px rgba(27,95,161,.13);
}
.concept-d-live .d-defect-row.is-selected::before {
    content: '';
    position: absolute;
    top: 17px;
    bottom: 17px;
    left: -1px;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--d-blue);
}
.concept-d-live .d-defect-row.is-edited::after {
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--d-panel-strong);
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 2px rgba(17,174,139,.14);
}
.concept-d-live .d-defect-row > img,
.concept-d-live .d-defect-browser__placeholder {
    width: 52px;
    height: 52px;
    border-radius: 13px;
}
.concept-d-live .d-defect-row > img { object-fit: cover; background: var(--surface-2); }
.concept-d-live .d-defect-browser__placeholder { display: grid; place-items: center; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); }
.concept-d-live .d-defect-browser__placeholder svg { width: 19px; height: 19px; }
.concept-d-live .d-defect-row__copy { min-width: 0; }
.concept-d-live .d-defect-row__copy strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--ink);
    font-size: 11px;
    font-weight: 720;
    line-height: 1.3;
}
.concept-d-live .d-defect-row__copy small { display: block; margin-top: 5px; overflow: hidden; color: var(--ink-3); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.concept-d-live .d-defect-row__grade { min-width: 0; text-align: center; }
.concept-d-live .d-defect-row__grade b { display: grid; width: 34px; height: 34px; margin: 0 auto; place-items: center; color: var(--info); background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 23%, transparent); border-radius: 11px; font-size: 15px; }
.concept-d-live .d-defect-row__grade small { display: none; }
.concept-d-live .d-defect-row__grade.d b { color: var(--crit); background: var(--crit-soft); }
.concept-d-live .d-defect-row__grade.c b { color: #B96D00; background: var(--warn-soft); }
.concept-d-live .d-defect-row__grade.e b { color: var(--repeat); background: var(--repeat-soft); }
.concept-d-live .d-defect-browser__footer { padding: 9px 12px 12px; border-top: 1px solid var(--d-edge); }
.concept-d-live .d-defect-browser__footer button {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-2);
    background: var(--d-panel-strong);
    border: 1px solid var(--d-edge);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 760;
}
.concept-d-live .d-defect-browser__footer button:hover { color: var(--d-blue); border-color: rgba(28,126,246,.35); }
.concept-d-live .d-defect-browser__footer svg { width: 16px; height: 16px; }
.concept-d-live .d-defect-browser__empty { min-height: 180px; padding: 20px; display: grid; place-content: center; gap: 5px; color: var(--ink-3); text-align: center; }
.concept-d-live .d-defect-browser__empty strong { color: var(--ink); font-size: 13px; }
.concept-d-live .d-defect-browser__empty span { font-size: 10px; }

.concept-d-live .d-inspector-heading {
    padding-bottom: 13px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}
.concept-d-live .d-inspector-heading strong { display: block; color: var(--ink); font-size: 18px; letter-spacing: -.035em; }
.concept-d-live .d-inspector-heading small { max-width: 52%; overflow: hidden; color: var(--ink-3); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }

/* Home: operational tiles stay real controls, but become one D-style library. */
.concept-d-live #homeScreen > .distrib { display: none; }
.concept-d-live #homeScreen > .kpi-strip {
    padding: 8px;
    background: var(--d-panel);
    border: 1px solid var(--d-edge);
    border-radius: 24px;
    box-shadow: var(--d-shadow), inset 0 1px 0 var(--d-edge-bright);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
}
.concept-d-live #homeScreen > .kpi-strip .kpi { min-height: 86px; border-radius: 17px; box-shadow: none; }
.concept-d-live #homeScreen > .kpi-strip .kpi:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(28,80,124,.10); }
.concept-d-live #homeScreen > .toolbar { margin-bottom: 0; border-bottom-color: transparent; border-radius: 24px 24px 0 0; box-shadow: var(--d-shadow); }
.concept-d-live #auditCountLabel {
    margin: 0;
    padding: 10px 16px 8px;
    background: var(--d-panel);
    border-right: 1px solid var(--d-edge);
    border-left: 1px solid var(--d-edge);
    color: var(--ink-3);
}
.concept-d-live #auditGridView,
.concept-d-live #auditTableView {
    margin: 0 0 18px;
    padding: 10px;
    background: var(--d-panel);
    border: 1px solid var(--d-edge);
    border-top: 0;
    border-radius: 0 0 26px 26px;
    box-shadow: 0 18px 42px rgba(27,75,118,.12), inset 0 -1px 0 var(--d-edge-bright);
    -webkit-backdrop-filter: blur(24px) saturate(155%);
    backdrop-filter: blur(24px) saturate(155%);
}
.concept-d-live #auditTableView { overflow: auto; }

/* Analytics, learning and modal surfaces inherit the same depth and edge model. */
.concept-d-live #dashboardScreen .kpi,
.concept-d-live #dashboardScreen .panel,
.concept-d-live #learningScreen .learn-card,
.concept-d-live #learningScreen .panel,
.concept-d-live .modal-card {
    background: var(--d-panel-strong);
    border-color: var(--d-edge);
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(24,70,111,.12), inset 0 1px 0 var(--d-edge-bright);
}
.concept-d-live #dashboardScreen .panel-head,
.concept-d-live #learningScreen .learn-card h2 { letter-spacing: -.025em; }
.concept-d-live #learningScreen input,
.concept-d-live #learningScreen textarea,
.concept-d-live #learningScreen select { background: var(--surface-2); border-color: var(--line); border-radius: 15px; }

@media (min-width: 1180px) {
    .concept-d-live #defectsScreen.view.active {
        display: grid !important;
        grid-template-columns: clamp(200px, var(--d-rail-w, 300px), 42vw) minmax(0, 1fr) 250px;
        grid-template-rows: auto minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }
    .concept-d-live #defectsScreen > .audit-command-row {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .concept-d-live #defectsScreen > .d-defect-browser {
        position: sticky;
        top: 102px;
        grid-column: 1;
        grid-row: 2;
        height: calc(100dvh - 122px);
    }
    .concept-d-live #defectsScreen > .w-full {
        grid-column: 2 / -1;
        grid-row: 2;
        min-width: 0;
    }
    .concept-d-live #defectsScreen > .audit-navigator {
        display: none !important;
    }
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live #defectsScreen > .audit-compact-summary,
    .concept-d-live #defectsScreen > .sev-row,
    .concept-d-live #defectsScreen > .det-grid { display: none !important; }
    .concept-d-live #defectsScreen > .audit-facet-sidebar {
        position: fixed;
        z-index: 250;
        top: 18px;
        bottom: 18px;
        left: 116px;
        width: min(340px, calc(100vw - 150px));
        max-height: none;
        transform: translateX(calc(-100% - 140px));
        visibility: hidden;
        opacity: 0;
        box-shadow: 0 26px 70px rgba(8,34,59,.25);
        transition: transform 260ms var(--ease-enter), opacity 180ms ease, visibility 0s linear 260ms;
    }
    .concept-d-live #defectsScreen > .audit-facet-sidebar.is-open {
        transform: none;
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
    .concept-d-live .audit-facet-close { display: grid; }
    .concept-d-live .audit-command-row {
        position: sticky;
        top: 18px;
        z-index: 120;
        min-height: 72px;
        padding: 9px 12px;
        display: grid;
        grid-template-columns: auto auto minmax(230px, 1fr) auto;
        align-items: center;
        gap: 8px;
        background: var(--d-panel);
        border: 1px solid var(--d-edge);
        border-radius: 24px;
        box-shadow: var(--d-shadow), inset 0 1px 0 var(--d-edge-bright);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        backdrop-filter: blur(28px) saturate(160%);
    }
    .concept-d-live .audit-mobile-facet-button { display: inline-flex; min-width: 44px; width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 14px; font-size: 0; }
    .concept-d-live .audit-mobile-facet-button svg { width: 18px; height: 18px; }
    .concept-d-live .audit-mobile-facet-button span { position: absolute; transform: translate(13px,-14px); min-width: 17px; min-height: 17px; padding: 2px; display: grid; place-items: center; color: #fff; background: var(--d-blue); border: 2px solid var(--d-panel-strong); border-radius: 999px; font-size: 8px; }
    .concept-d-live .audit-command-row .back-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 14px; font-size: 0; }
    .concept-d-live .audit-command-row .back-btn svg { width: 18px !important; height: 18px !important; }
    .concept-d-live .audit-heading { padding: 0 7px; }
    .concept-d-live .audit-heading__eyebrow { margin-bottom: 2px; font-size: 8px; }
    .concept-d-live .audit-heading h1 { font-size: 21px; line-height: 1.05; }
    .concept-d-live .audit-heading p { margin-top: 3px; font-size: 9px; }
    .concept-d-live .audit-command-row .detail-actions { grid-column: auto; min-width: 0; flex-wrap: nowrap; gap: 5px; }
    .concept-d-live .audit-command-row .detail-actions .det-action {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        overflow: hidden;
        border-radius: 14px;
        font-size: 0;
        white-space: nowrap;
    }
    .concept-d-live .audit-command-row .detail-actions .det-action svg { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; }
    .concept-d-live .audit-command-row .detail-actions .det-action:hover { transform: translateY(-2px); }
    .concept-d-live #defectsListPane {
        min-height: calc(100dvh - 122px);
        padding: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .concept-d-live #defectsListPane > .defect-toolbar { display: none; }
    .concept-d-live #defectsGrid.defects { padding: 0; grid-template-columns: 1fr; }
    .concept-d-live #defectsGrid > .defect-card:not(.card-inline-editor) { display: none !important; }
    .concept-d-live .card-inline-editor {
        min-height: calc(100dvh - 122px);
        height: auto !important;
        display: grid;
        grid-template-columns: minmax(0, 61%) minmax(330px, 39%);
        align-items: stretch;
        overflow: hidden;
        border-radius: 30px;
    }
    .concept-d-live .card-inline-editor__media { min-height: calc(100dvh - 124px); height: 100%; border-radius: 29px 0 0 29px; }
    .concept-d-live .card-inline-editor__media::after { background: linear-gradient(to bottom, rgba(5,18,31,.05), transparent 55%, rgba(5,18,31,.30)); }
    .concept-d-live .card-inline-editor__content { min-width: 0; height: 100%; max-height: calc(100dvh - 122px); overflow: hidden auto; padding: 17px; border-left: 1px solid var(--d-edge); }
    .concept-d-live .card-inline-editor__fields { grid-template-columns: 1fr; gap: 5px; }
    /* Фіксовані 190/170px разом із чотирма полями давали 167px зайвого на
       екрані 1280x720: опис ховався під липким футером і до нього треба було
       прокручувати. Прив'язуємо висоти до висоти вікна — на високих екранах
       лишається просторо, на низьких усе вміщається. */
    /* Мінус 8px висоти й такий самий відступ знизу: нижня межа поля опису
       більше не заходить під липкий футер, а загальна висота не зростає. */
    .concept-d-live .card-inline-editor__body { min-height: clamp(110px, 15.5vh, 182px); margin-bottom: 8px; }
    /* Жорсткий min-height: 130px не давав полю опису стискатись разом із
       контейнером — воно вилазило на 15px і заходило під липкий футер.
       Поріг тепер тримає сам контейнер, а поле просто заповнює його. */
    .concept-d-live .card-inline-editor__description { min-height: 0; }
    .concept-d-live .card-inline-editor__description textarea { min-height: 0; }
    .concept-d-live .card-inline-editor__footer { position: sticky; bottom: 0; z-index: 3; margin: auto -17px -17px; padding: 12px 17px calc(12px + var(--safe-bottom)); background: color-mix(in srgb, var(--d-panel-strong) 93%, transparent); border-top: 1px solid var(--d-edge); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
    .concept-d-live .audit-navigator {
        padding: 14px;
        background: var(--d-panel);
        border: 1px solid var(--d-edge);
        border-radius: 28px;
        box-shadow: var(--d-shadow), inset 0 1px 0 var(--d-edge-bright);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        backdrop-filter: blur(28px) saturate(160%);
    }
    .concept-d-live .audit-navigator__grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
    .concept-d-live .audit-navigator__grid button { min-width: 0; min-height: 38px; border-radius: 11px; }
}

@media (min-width: 901px) and (max-width: 1179px) {
    .concept-d-live #defectsScreen.view.active {
        display: grid !important;
        grid-template-columns: clamp(200px, var(--d-rail-w, 280px), 46vw) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: start;
        gap: 12px;
    }
    .concept-d-live #defectsScreen > .audit-command-row { grid-column: 1 / -1; grid-row: 1; }
    .concept-d-live #defectsScreen > .d-defect-browser { position: sticky; top: 104px; grid-column: 1; grid-row: 2; height: calc(100dvh - 124px); }
    .concept-d-live #defectsScreen > .w-full { grid-column: 2; grid-row: 2; min-width: 0; }
    .concept-d-live #defectsScreen > .audit-navigator,
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live #defectsScreen > .audit-compact-summary,
    .concept-d-live #defectsScreen > .sev-row,
    .concept-d-live #defectsScreen > .det-grid { display: none !important; }
    .concept-d-live #defectsScreen > .audit-facet-sidebar { position: fixed; z-index: 250; top: 14px; bottom: 14px; left: 14px; width: min(340px, calc(100vw - 28px)); max-height: none; transform: translateX(calc(-100% - 30px)); visibility: hidden; opacity: 0; transition: transform 250ms var(--ease-enter), opacity 180ms ease, visibility 0s linear 250ms; }
    .concept-d-live #defectsScreen > .audit-facet-sidebar.is-open { transform: none; visibility: visible; opacity: 1; transition-delay: 0s; }
    .concept-d-live .audit-facet-close { display: grid; }
    .concept-d-live .audit-command-row { position: sticky; top: 16px; z-index: 120; min-height: 72px; padding: 9px 11px; display: grid; grid-template-columns: auto auto minmax(180px,1fr) auto; align-items: center; gap: 7px; background: var(--d-panel); border: 1px solid var(--d-edge); border-radius: 22px; box-shadow: var(--d-shadow); -webkit-backdrop-filter: blur(25px) saturate(155%); backdrop-filter: blur(25px) saturate(155%); }
    .concept-d-live .audit-mobile-facet-button { display: inline-flex; width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 13px; font-size: 0; }
    .concept-d-live .audit-command-row .back-btn { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 13px; font-size: 0; }
    .concept-d-live .audit-heading__eyebrow, .concept-d-live .audit-heading p { display: none; }
    .concept-d-live .audit-heading h1 { font-size: 19px; }
    .concept-d-live .audit-command-row .detail-actions { flex-wrap: nowrap; gap: 4px; }
    .concept-d-live .audit-command-row .detail-actions .det-action { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; overflow: hidden; border-radius: 13px; font-size: 0; }
    .concept-d-live .audit-command-row .detail-actions .det-action svg { width: 16px; height: 16px; margin: 0; }
    .concept-d-live #defectsListPane { min-height: calc(100dvh - 124px); padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }
    .concept-d-live #defectsListPane > .defect-toolbar { display: none; }
    .concept-d-live #defectsGrid.defects { padding: 0; grid-template-columns: 1fr; }
    .concept-d-live #defectsGrid > .defect-card:not(.card-inline-editor) { display: none !important; }
    .concept-d-live .card-inline-editor { min-height: calc(100dvh - 124px); height: auto !important; grid-template-columns: 1fr; border-radius: 28px; }
    .concept-d-live .card-inline-editor__media { min-height: 390px; height: 48vh; border-radius: 27px 27px 0 0; }
    .concept-d-live .card-inline-editor__content { height: auto; padding: 17px; border-top: 1px solid var(--d-edge); }
}

@media (max-width: 900px) {
    .concept-d-live #defectsScreen > .d-defect-browser { display: none !important; }
    .concept-d-live #defectsScreen.view.active { display: flex !important; flex-direction: column; gap: 12px; }
    .concept-d-live #defectsScreen > .audit-command-row { order: -2; }
    .concept-d-live #defectsScreen > .det-hero { order: -1; }
    .concept-d-live #defectsScreen > .audit-compact-summary { order: 0; }
    .concept-d-live #defectsScreen > .w-full { order: 1; }
    .concept-d-live .audit-command-row { background: var(--d-panel); border: 1px solid var(--d-edge); box-shadow: var(--d-shadow); -webkit-backdrop-filter: blur(24px) saturate(155%); backdrop-filter: blur(24px) saturate(155%); }
    .concept-d-live .audit-command-row .detail-actions { scrollbar-width: none; }
    .concept-d-live .audit-command-row .detail-actions::-webkit-scrollbar { display: none; }
    .concept-d-live #defectsListPane { background: transparent; border: 0; box-shadow: none; }
    .concept-d-live #defectsGrid.defects { padding: 0; }
    .concept-d-live body.focus-editor-open #defectsScreen > .det-hero,
    .concept-d-live body.focus-editor-open #defectsScreen > .audit-compact-summary,
    .concept-d-live body.focus-editor-open #defectsListPane > .defect-toolbar,
    .concept-d-live body.focus-editor-open #defectsGrid > .defect-card:not(.card-inline-editor) { display: none !important; }
    .concept-d-live .card-inline-editor { height: auto !important; border-radius: 27px; }
    .concept-d-live .card-inline-editor__media { min-height: 52dvh; border-radius: 26px 26px 0 0; }
    .concept-d-live .card-inline-editor__content { padding: 16px; }
}

/* Compact tablets keep Concept D's evidence browser beside the photo stage. */
@media (min-width: 641px) and (max-width: 900px) {
    .concept-d-live #defectsScreen.view.active {
        display: grid !important;
        grid-template-columns: clamp(190px, var(--d-rail-w, 238px), 48vw) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: start;
        gap: 11px;
    }
    .concept-d-live #defectsScreen > .audit-command-row { grid-column: 1 / -1; grid-row: 1; order: initial; }
    .concept-d-live #defectsScreen > .d-defect-browser { position: sticky; top: 95px; grid-column: 1; grid-row: 2; height: calc(100dvh - 112px); display: flex !important; }
    .concept-d-live #defectsScreen > .w-full { grid-column: 2; grid-row: 2; min-width: 0; order: initial; }
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live #defectsScreen > .audit-compact-summary,
    .concept-d-live #defectsScreen > .audit-navigator,
    .concept-d-live #defectsScreen > .sev-row,
    .concept-d-live #defectsScreen > .det-grid { display: none !important; }
    .concept-d-live #defectsListPane > .defect-toolbar,
    .concept-d-live #defectsGrid > .defect-card:not(.card-inline-editor) { display: none !important; }
    .concept-d-live .d-defect-browser__head { padding-right: 13px; padding-left: 13px; }
    .concept-d-live .d-defect-browser__head h2 { font-size: 17px; }
    .concept-d-live .d-defect-browser__chips { grid-template-columns: repeat(5,1fr); padding-right: 8px; padding-left: 8px; }
    .concept-d-live .d-defect-browser__chips button { padding: 0 4px; }
    .concept-d-live .d-defect-row { grid-template-columns: 46px minmax(0,1fr) 34px; gap: 7px; min-height: 64px; padding: 7px; }
    .concept-d-live .d-defect-row > img,
    .concept-d-live .d-defect-browser__placeholder { width: 46px; height: 46px; }
    .concept-d-live .d-defect-row__grade b { width: 31px; height: 31px; }
    .concept-d-live .card-inline-editor { min-height: calc(100dvh - 112px); grid-template-columns: 1fr; border-radius: 27px; }
    .concept-d-live .card-inline-editor__media { min-height: 68dvh; height: calc(100dvh - 112px); border-radius: 26px; }
    .concept-d-live .card-inline-editor__content { border-top: 1px solid var(--d-edge); }
}

@media (max-width: 640px) {
    .concept-d-live #homeScreen > .kpi-strip { padding: 6px; border-radius: 21px; }
    .concept-d-live #homeScreen > .kpi-strip .kpi { min-height: 88px; }
    .concept-d-live #homeScreen > .toolbar { border-radius: 21px 21px 0 0; }
    .concept-d-live #auditGridView, .concept-d-live #auditTableView { padding: 7px; border-radius: 0 0 22px 22px; }
    .concept-d-live .d-inspector-heading { align-items: flex-start; flex-direction: column; }
    .concept-d-live .d-inspector-heading small { max-width: 100%; }
}

@media (prefers-reduced-transparency: reduce) {
    .concept-d-live .d-defect-browser,
    .concept-d-live .audit-command-row,
    .concept-d-live .audit-navigator,
    .concept-d-live #homeScreen > .kpi-strip,
    .concept-d-live #auditGridView,
    .concept-d-live #auditTableView { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* D5 final cascade: insert the compact facade row into workspace v2. */
@media (min-width: 1180px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto 108px minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero { display: grid !important; grid-column: 1 / -1; grid-row: 2; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 3; height: calc(100dvh - 242px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 3; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 242px); }
    .concept-d-live #defectsScreen .card-inline-editor__media { min-height: calc(100dvh - 244px); }
    .concept-d-live #defectsScreen .card-inline-editor__content { max-height: calc(100dvh - 242px); }
}

@media (min-width: 901px) and (max-width: 1179px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto 104px minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero { display: grid !important; grid-column: 1 / -1; grid-row: 2; height: 104px; min-height: 104px; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 3; height: calc(100dvh - 238px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 3; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 238px); }
}

@media (min-width: 641px) and (max-width: 900px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto 98px minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero { display: grid !important; grid-column: 1 / -1; grid-row: 2; order: initial; height: 98px; min-height: 98px; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 3; height: calc(100dvh - 222px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 3; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 222px); }
}

@media (max-width: 640px) {
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live body.focus-editor-open #defectsScreen > .det-hero { display: grid !important; }
}

@media (min-width: 641px) and (max-width: 900px) {
    .concept-d-live body.focus-editor-open #defectsScreen > .det-hero { display: grid !important; grid-column: 1 / -1; grid-row: 2; }
    .concept-d-live #defectsScreen .det-hero-bottom { grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; }
    .concept-d-live #defectsScreen .det-hero-left h2 { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
    .concept-d-live #defectsScreen .det-hero-left .meta { display: none; }
}

/* D6: one compact audit header; progress replaces the removed facade island. */
.concept-d-live .audit-command-progress {
    min-width: 0;
    width: 100%;
    padding: 5px 8px;
    display: grid;
    gap: 5px;
    align-self: center;
}
.concept-d-live .audit-command-progress__head {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink-3);
    font-size: 9px;
    font-weight: 760;
    line-height: 1;
}
.concept-d-live .audit-command-progress__head span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.concept-d-live .audit-command-progress__head svg { width: 13px; height: 13px; color: var(--teal); flex: 0 0 auto; }
.concept-d-live .audit-command-progress__head strong { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.concept-d-live .audit-command-progress__track {
    height: 7px;
    overflow: hidden;
    background: rgba(72,117,155,.13);
    border: 1px solid color-mix(in srgb, var(--d-edge) 70%, transparent);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(17,54,87,.08);
}
.concept-d-live .audit-command-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #0BAA89, #20CDA8 52%, #1685FF);
    border-radius: inherit;
    box-shadow: 0 3px 10px rgba(20,172,157,.26);
    transition: none;
}
.concept-d-live .audit-command-progress__count {
    overflow: hidden;
    color: var(--ink-3);
    font-size: 8px;
    font-weight: 680;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.concept-d-live .audit-command-row .audit-heading__icon { width: 44px; min-width: 44px; height: 44px; }

@media (min-width: 1180px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero { display: none !important; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 2; height: calc(100dvh - 122px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 2; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 122px); }
    .concept-d-live #defectsScreen .card-inline-editor__media { min-height: calc(100dvh - 124px); }
    .concept-d-live #defectsScreen .card-inline-editor__content { max-height: calc(100dvh - 122px); }
    .concept-d-live .audit-command-row { grid-template-columns: auto auto minmax(210px, 1fr) minmax(190px, 250px) auto; }
}

@media (min-width: 901px) and (max-width: 1179px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero { display: none !important; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 2; height: calc(100dvh - 124px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 2; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 124px); }
    .concept-d-live .audit-command-row { grid-template-columns: auto auto minmax(130px, 1fr) minmax(145px, 190px) auto; }
}

@media (min-width: 641px) and (max-width: 900px) {
    .concept-d-live #defectsScreen.view.active { grid-template-rows: auto minmax(0, 1fr); }
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live body.focus-editor-open #defectsScreen > .det-hero { display: none !important; }
    .concept-d-live #defectsScreen > .d-defect-browser { grid-row: 2; height: calc(100dvh - 164px); }
    .concept-d-live #defectsScreen > .w-full { grid-row: 2; }
    .concept-d-live #defectsScreen .card-inline-editor { min-height: calc(100dvh - 164px); }
    .concept-d-live .audit-command-row {
        grid-template-columns: auto auto minmax(150px, 1fr) minmax(145px, .65fr);
        grid-template-rows: auto auto;
    }
    .concept-d-live .audit-heading { grid-column: 3; grid-row: 1; order: initial; }
    .concept-d-live .audit-command-progress { grid-column: 4; grid-row: 1; }
    .concept-d-live .audit-command-row .detail-actions { grid-column: 1 / -1; grid-row: 2; padding-bottom: 0; }
}

@media (max-width: 640px) {
    .concept-d-live #defectsScreen > .det-hero,
    .concept-d-live body.focus-editor-open #defectsScreen > .det-hero { display: none !important; }
    .concept-d-live .audit-command-row {
        grid-template-columns: auto auto minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-items: center;
    }
    .concept-d-live .audit-heading { grid-column: 3; grid-row: 1; order: initial; padding-right: 2px; }
    .concept-d-live .audit-heading__eyebrow,
    .concept-d-live .audit-heading p { display: none; }
    .concept-d-live .audit-heading h1 { overflow: hidden; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; }
    .concept-d-live .audit-command-progress { grid-column: 1 / -1; grid-row: 2; padding: 3px 5px 5px; }
    .concept-d-live .audit-command-progress__head { font-size: 9px; }
    .concept-d-live .audit-command-progress__count { font-size: 8px; }
    .concept-d-live .audit-command-row .detail-actions { grid-column: 1 / -1; grid-row: 3; padding-bottom: 0; }
}

@media (max-width: 900px) {
    .concept-d-live .audit-command-row .audit-mobile-facet-button,
    .concept-d-live .audit-command-row .back-btn,
    .concept-d-live .audit-command-row .detail-actions .det-action { min-height: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .concept-d-live .audit-command-progress__fill { transition: none; }
}

/* ========================================================================== */
/* Motion system v1 · Concept D · 2026-08-11                                  */
/* Functional motion only: state, hierarchy, continuity and feedback.         */
/* ========================================================================== */

@property --d-pct {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@property --audit-progress {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.concept-d-live {
    --motion-press: 110ms;
    --motion-fast: 170ms;
    --motion-base: 240ms;
    --motion-panel: 280ms;
    --motion-data: 240ms;
    --motion-enter: cubic-bezier(.16, 1, .3, 1);
    --motion-exit: cubic-bezier(.4, 0, 1, 1);
    --motion-spring: cubic-bezier(.2, .9, .22, 1.16);
}

/* Screen navigation keeps spatial direction without moving the page layout. */
/* Кожен .view несе з розмітки ще й .animate-fade-in (ta-fade-in 260ms).
   Поки грає motion-view-enter, він переважає за специфічністю; щойно клас
   знімається через 300ms, ta-fade-in оживає й ВДРУГЕ веде прозорість з нуля.
   Звідси відчуття, що сторінка завантажується двічі. Лишаємо один вхід. */
.view.animate-fade-in:not(.motion-view-enter) { animation: none; }

.concept-d-live .view.motion-view-enter {
    animation: motion-view-enter var(--motion-panel) var(--motion-enter) both;
}
.concept-d-live .view.motion-view-enter[data-motion-direction='back'] {
    animation-name: motion-view-enter-back;
}
@keyframes motion-view-enter {
    from { opacity: 0; transform: translate3d(18px, 0, 0) scale(.995); }
    to { opacity: 1; transform: none; }
}
@keyframes motion-view-enter-back {
    from { opacity: 0; transform: translate3d(-18px, 0, 0) scale(.995); }
    to { opacity: 1; transform: none; }
}

/* Cycle refresh: old data yields first, then the updated dashboard settles in. */
.concept-d-live #dHomeOverview {
    transition: opacity var(--motion-fast) var(--motion-exit),
        transform var(--motion-panel) var(--motion-enter);
}
.concept-d-live #dHomeOverview.is-cycle-exiting {
    opacity: .34;
    transform: translate3d(0, -5px, 0) scale(.995);
    pointer-events: none;
}
.concept-d-live #dHomeOverview.is-cycle-entering {
    animation: motion-cycle-enter var(--motion-panel) var(--motion-enter) both;
}
@keyframes motion-cycle-enter {
    from { opacity: .25; transform: translate3d(0, 10px, 0) scale(.992); }
    to { opacity: 1; transform: none; }
}

/* Metrics update from their previous value and finish with a restrained settle. */
.concept-d-live .motion-metric-settle {
    animation: motion-metric-settle var(--motion-base) var(--motion-spring) both;
}
@keyframes motion-metric-settle {
    0% { transform: translateY(3px); opacity: .72; }
    70% { transform: translateY(-1px); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

.concept-d-live .d-cycle-ring,
.concept-d-live .audit-progress-ring { transition: none; }
.concept-d-live .d-cycle-ring.motion-ring-live { transition: --d-pct 300ms var(--motion-enter); }
.concept-d-live .audit-progress-ring.motion-ring-live { transition: --audit-progress 300ms var(--motion-enter); }
.concept-d-live .d-cycle-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 1px solid rgba(40, 199, 174, .0);
    opacity: 0;
    pointer-events: none;
}



.concept-d-live .audit-grid .animate-fade-in-up,
.concept-d-live #defectsGrid .animate-fade-in-up {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
}

.concept-d-live .audit-card:nth-child(n+9),
.concept-d-live .defect-card:nth-child(n+9) {
    --card-delay: 210ms !important;
}

/* FLIP filtering/sorting uses compositor-only transforms. */
.concept-d-live .motion-flip-active {
    position: relative;
    z-index: 2;
    will-change: transform;
}

/* Progress bars are transform-driven, preventing layout work during animation. */
.concept-d-live .audit-card-progress i,
.concept-d-live .audit-command-progress__fill {
    width: 100% !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: none;
}
.concept-d-live .audit-card-progress i.motion-progress-ready,
.concept-d-live .audit-command-progress__fill.motion-progress-ready {
    transform: scaleX(var(--motion-progress, 0));
}
.concept-d-live .audit-command-progress__fill.motion-progress-complete {
    position: relative;
    overflow: hidden;
}
.concept-d-live .audit-command-progress__fill.motion-progress-complete::after {
    content: '';
    position: absolute;
    inset: -40% auto -40% -28%;
    width: 24%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
    transform: skewX(-18deg) translateX(0);
    animation: motion-progress-glint 280ms var(--motion-enter) 1;
}
@keyframes motion-progress-glint { to { transform: skewX(-18deg) translateX(560%); } }

/* The modern SVG chart draws once per data refresh; points follow the curves. */
.concept-d-live .d-trend-area { transform-origin: center bottom; }

/* Editor and photo transitions maintain continuity with the selected evidence. */
.concept-d-live .card-inline-editor.motion-origin-active {
    will-change: transform, opacity;
}
.concept-d-live .card-inline-editor__media.motion-photo-swap .defect-card__image {
    will-change: transform, opacity;
}

.concept-d-live .card-inline-editor__save.is-saving {
    position: relative;
    pointer-events: none;
    color: transparent;
}
.concept-d-live .card-inline-editor__save.is-saving::after {
    content: '';
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ta-spin .72s linear infinite;
}
.concept-d-live .card-inline-editor__save.is-success {
    background: var(--good);
    animation: motion-save-success 240ms var(--motion-spring) both;
}
.concept-d-live .card-inline-editor__save.is-error {
    background: var(--crit);
    animation: ta-shake 260ms ease;
}
@keyframes motion-save-success {
    0% { transform: scale(.96); }
    55% { transform: scale(1.035); }
    100% { transform: none; }
}

/* Dropdown panels and options preserve the trigger-to-surface relationship. */
.concept-d-live .custom-dropdown-panel:not(.hidden) {
    transform-origin: var(--motion-origin-x, 50%) 0;
    animation: motion-popover-in var(--motion-base) var(--motion-enter) both;
}
@keyframes motion-popover-in {
    from { opacity: 0; transform: translateY(-5px) scale(.975); }
    to { opacity: 1; transform: none; }
}

/* One compact status surface replaces stacked blocking loaders. */
.motion-island {
    position: fixed;
    top: calc(12px + var(--safe-top));
    left: 50%;
    z-index: 520;
    min-width: 172px;
    max-width: min(420px, calc(100vw - 32px));
    min-height: 44px;
    padding: 8px 14px 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    background: rgba(9, 20, 34, .91);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(3, 16, 31, .24), inset 0 1px 0 rgba(255,255,255,.13);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    opacity: 0;
    transform: translate(-50%, -18px) scale(.92);
    transition: opacity var(--motion-fast) ease,
        transform var(--motion-panel) var(--motion-spring);
    pointer-events: none;
}
.motion-island.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.motion-island__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #72C6FF;
    background: rgba(64, 161, 255, .18);
    border-radius: 50%;
}
.motion-island__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.motion-island__label { overflow: hidden; font-size: 12px; font-weight: 720; white-space: nowrap; text-overflow: ellipsis; }
.motion-island.is-loading .motion-island__icon { animation: ta-spin .8s linear infinite; }
.motion-island.is-success .motion-island__icon { color: #5FE2B3; background: rgba(31, 134, 89, .22); }
.motion-island.is-error .motion-island__icon { color: #FF8D87; background: rgba(212, 48, 42, .22); }

/* Toasts form a small non-blocking queue and support swipe-away on touch. */
.motion-toast-stack {
    position: fixed;
    right: max(18px, var(--safe-right));
    bottom: calc(20px + var(--safe-bottom));
    z-index: 510;
    width: min(390px, calc(100vw - 32px));
    display: grid;
    gap: 9px;
    pointer-events: none;
}
.motion-toast {
    --motion-toast-x: 0px;
    min-height: 52px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    color: var(--ink);
    background: var(--glass-strong);
    border: 1px solid var(--edge);
    border-radius: 17px;
    box-shadow: var(--shadow-2), inset 0 1px 0 var(--edge);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    opacity: 0;
    transform: translate3d(calc(22px + var(--motion-toast-x)), 0, 0) scale(.97);
    transition: opacity var(--motion-fast) ease, transform var(--motion-panel) var(--motion-spring);
    pointer-events: auto;
    touch-action: pan-y;
}
.motion-toast.is-visible { opacity: 1; transform: translate3d(var(--motion-toast-x),0,0) scale(1); }
.motion-toast.is-leaving { opacity: 0; transform: translate3d(28px,0,0) scale(.96); }
.motion-toast__icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--good-ink); background: var(--good-w); border-radius: 10px; }
.motion-toast.is-error .motion-toast__icon { color: var(--crit-ink); background: var(--crit-w); }
.motion-toast__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.motion-toast strong { display: block; font-size: 12.5px; line-height: 1.25; }
.motion-toast span { display: block; margin-top: 2px; color: var(--ink-3); font-size: 10px; line-height: 1.35; }
#toast { display: none !important; }

/* One short shimmer is reserved for the active AI request. */
.motion-text-shimmer {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    color: currentColor;
}
.motion-text-shimmer::after {
    content: '';
    position: absolute;
    inset: -20% auto -20% -34%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
    transform: skewX(-18deg) translateX(0);
    animation: motion-text-shimmer 1.7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes motion-text-shimmer { to { transform: skewX(-18deg) translateX(540%); } }

/* Transition Panel: two compositor-only layers during previous/next navigation. */
.motion-inspector-clone {
    /* Клон копіює .card-inline-editor разом із його ta-editor-in і програвав
       власний вхід поверх від'їзду, який веде JS. Знімок має бути нерухомий. */
    animation: none !important;
    position: fixed !important;
    z-index: 505;
    margin: 0 !important;
    pointer-events: none !important;
    overflow: hidden;
    contain: paint;
    transform-origin: center center;
}

/* Hover remains feedback, never ambient motion. */
@media (hover:hover) and (pointer:fine) {
    .concept-d-live .d-primary:hover svg,
    .concept-d-live .cta:hover svg { transform: translateX(2px); }
    .concept-d-live .d-primary svg,
    .concept-d-live .cta svg { transition: transform var(--motion-fast) var(--motion-enter); }
}

@media (max-width: 640px) {
    .motion-island { top: calc(8px + var(--safe-top)); max-width: calc(100vw - 24px); }
    .motion-toast-stack { right: 12px; bottom: calc(78px + var(--safe-bottom)); width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
    .concept-d-live *,
    .concept-d-live *::before,
    .concept-d-live *::after {
        scroll-behavior: auto !important;
    }
    .concept-d-live .view.motion-view-enter,
    .concept-d-live #dHomeOverview.is-cycle-entering,
    .concept-d-live .motion-metric-settle,
    .concept-d-live .d-cycle-ring.is-complete::after,
    .concept-d-live .d-attention-row.motion-row-enter,
    .concept-d-live .d-defect-row.motion-row-enter,
    .concept-d-live .motion-data-ready .motion-data-row,
    .concept-d-live .d-trend-area,
    .concept-d-live .d-trend-point,
    .concept-d-live .d-defect-row.motion-edited-feedback,
    .concept-d-live .defect-card.motion-edited-feedback,
    .concept-d-live .card-inline-editor__save.is-success,
    .concept-d-live .custom-dropdown-panel:not(.hidden),
    .concept-d-live .custom-dropdown-panel:not(.hidden) .custom-dropdown-opt {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .concept-d-live #dHomeOverview,
    .concept-d-live .d-cycle-ring,
    .concept-d-live .audit-card-progress i,
    .concept-d-live .audit-command-progress__fill,
    .motion-island,
    .motion-toast {
        transition: none !important;
    }
    .motion-text-shimmer::after,
    .d-skeleton-row::after,
    .concept-d-live .audit-command-progress__fill.motion-progress-complete::after {
        animation: none !important;
        display: none !important;
    }
    .motion-inspector-clone { display: none !important; }
    .motion-island.is-visible { transform: translate(-50%, 0) !important; }
}


/* ==========================================================================
   Motion system v2 · впроваджені патерни з розбору 21st.dev
   Кожен блок має джерело й причину. Правила руху — MASTER.md, motion level 2:
   150-300ms, лише transform/opacity, 1-2 елементи на екран, reduced-motion.
   ========================================================================== */

/* --- 1. Number Ticker (@dillionverma/number-ticker) ----------------------
   Було: текст просто перемальовувався. Стало: цифра з'їжджає вертикально,
   тому оператор бачить, що число ЗМІНИЛОСЬ, а не просто інше.
   Анімується лише transform колонки; ширина тримається tabular-nums. */
.motion-ticker {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Хости лічильників уже мають правила виду `.stats span { font-size: 10.5px }`,
   тож внутрішні частини тікера піднімають специфічність і скидають шрифт —
   інакше цифри успадкували б розмір підпису й схлопнулись. */
.motion-ticker span.motion-ticker__col {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    height: 1em;
    line-height: 1;
    vertical-align: bottom;
}
.motion-ticker span.motion-ticker__strip {
    display: flex;
    flex-direction: column;
    /* Крок перекату дорівнює 1em, тож будь-який успадкований gap/padding
       розсинхронізував би зсув із висотою комірки — обнуляємо явно. */
    gap: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    transform: translateY(calc(var(--motion-digit, 0) * -1em));
    transition: transform var(--motion-ticker-dur, 260ms) var(--motion-enter);
    will-change: transform;
}
.motion-ticker .motion-ticker__strip > span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font: inherit;
    color: inherit;
    height: 1em;
    min-height: 0;
    line-height: 1;
    margin: 0;
    padding: 0;
}
.motion-ticker span.motion-ticker__sep {
    display: inline-flex;
    align-items: center;
    font: inherit;
    color: inherit;
    height: 1em;
    line-height: 1;
    vertical-align: bottom;
}

/* --- 2. Animated Tabs (@ibelick/animated-tabs) ---------------------------
   Було: активний чип просто перефарбовувався. Стало: одна пігулка їде під
   активний чип. Рухається лише transform, ширина через scaleX. */
.motion-segmented { position: relative; isolation: isolate; }
.motion-segmented__pill {
    position: absolute;
    z-index: 0;
    left: 0;
    top: var(--motion-pill-top, 0px);
    height: var(--motion-pill-h, 32px);
    /* Чипи однакової ширини, тож пігулка лише їде: анімується виключно
       transform. Жодних width/height — рух повністю на композиторі. */
    width: var(--motion-pill-w, 64px);
    border-radius: 999px;
    background: var(--d-pill-bg, rgba(11, 99, 206, .12));
    transform: translateX(var(--motion-pill-x, 0px));
    transition: transform var(--motion-base) var(--motion-enter);
    opacity: 0;
    pointer-events: none;
}
.motion-segmented.is-ready .motion-segmented__pill { opacity: 1; }
.motion-segmented > button { position: relative; z-index: 1; }

/* --- 3. Skeleton (@shadcn/skeleton) --------------------------------------
   Геометрія скелетона повторює реальну картку, інакше при підвантаженні
   макет стрибає. Shimmer — overlay з translateX, не background-position. */
.motion-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--d-skeleton-bg, rgba(15, 23, 42, .06));
    border-radius: 8px;
}
html.dark .motion-skeleton { background: rgba(255, 255, 255, .07); }
.motion-skeleton::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 -40%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(0);
    animation: motion-skeleton-sweep 1.15s linear infinite;
}
html.dark .motion-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
}
@keyframes motion-skeleton-sweep { to { transform: translateX(350%); } }

/* Скелетон рядка списку невідповідностей — та сама сітка, що й .d-defect-row */
.motion-skeleton-defect {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 26px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--d-hairline, rgba(15, 23, 42, .08));
}
.motion-skeleton-defect .s-thumb { width: 56px; height: 42px; border-radius: 7px; }
.motion-skeleton-defect .s-lines { display: grid; gap: 6px; }
.motion-skeleton-defect .s-lines i { display: block; height: 9px; border-radius: 5px; }
.motion-skeleton-defect .s-lines i:first-child { width: 92%; }
.motion-skeleton-defect .s-lines i:last-child { width: 54%; height: 7px; }
.motion-skeleton-defect .s-grade { width: 22px; height: 22px; border-radius: 7px; }

/* --- 4. Badge Delta (@serafimcloud/badge-delta) --------------------------
   Голе число не каже, добре це чи погано. Дельта — каже. */
.motion-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}
.motion-delta svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.motion-delta.is-up { color: var(--good-ink, #166848); background: var(--good-w, #E7F4EE); }
.motion-delta.is-down { color: var(--crit-ink, #B01B16); background: var(--crit-w, #FBEAE9); }
.motion-delta.is-flat { color: var(--ink-3, #64748B); background: var(--surface-2, #F1F5F9); }

/* --- 5. Inline Alert (@serafimcloud/alert) -------------------------------
   Помилка дії живе біля дії, а не лише в toast, який зникне за 4 секунди. */
.motion-alert {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: start;
    padding: 9px 11px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.4;
    animation: motion-alert-in var(--motion-base) var(--motion-enter) both;
}
.motion-alert svg { width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.motion-alert.is-error { color: var(--crit-ink, #B01B16); background: var(--crit-w, #FBEAE9); }
.motion-alert.is-warn { color: var(--warn-ink, #874800); background: var(--warn-w, #FAF0E4); }
.motion-alert.is-info { color: var(--info-ink, #005EBE); background: var(--info-w, #E8F0FB); }
.motion-alert__retry {
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 11px;
    font-weight: 700;
    color: inherit;
    background: transparent;
    cursor: pointer;
}
@keyframes motion-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* --- 6. Undo у toast (@shadcn/sonner) ------------------------------------
   Undo замість діалогу підтвердження: дія виконується одразу, скасування —
   один клік протягом кількох секунд. */
.motion-toast { grid-template-columns: 30px minmax(0,1fr) auto; }
.motion-toast__undo {
    align-self: center;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--border, #E2E8F0);
    background: var(--surface, #fff);
    color: var(--ink, #0F172A);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease;
}
.motion-toast__undo:hover { background: var(--surface-2, #F1F5F9); }

/* --- 8. Resizable (@shadcn/resizable) ------------------------------------
   Фото — це доказ, і оператор має могти віддати йому більше місця. Ручка живе
   на внутрішній правій межі рейки, бо сама панель має overflow: hidden. */
.concept-d-live .d-defect-browser { position: relative; }
.motion-resizer {
    position: absolute;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    width: 11px;
    display: none;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
}
@media (min-width: 901px) {
    .motion-resizer { display: block; }
}
.motion-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    width: 3px;
    height: 34px;
    margin-top: -17px;
    border-radius: 999px;
    background: var(--d-edge, rgba(15, 23, 42, .14));
    transition: background-color var(--motion-fast) ease, height var(--motion-fast) var(--motion-enter);
}
.motion-resizer:hover::before,
.motion-resizer:focus-visible::before,
.motion-resizer.is-dragging::before {
    height: 56px;
    margin-top: -28px;
    background: var(--primary, #0B63CE);
}
.motion-resizer:focus-visible { outline: 2px solid var(--primary, #0B63CE); outline-offset: -2px; border-radius: 8px; }
body.motion-resizing, body.motion-resizing * { cursor: col-resize !important; user-select: none !important; }

/* --- 9. Empty State (@serafimcloud/empty-state) --------------------------
   Фільтр "D 5" легко дає нуль результатів — без цього панель виглядає зламаною. */
.motion-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 34px 18px;
    text-align: center;
    animation: motion-alert-in var(--motion-base) var(--motion-enter) both;
}
.motion-empty__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--ink-3, #64748B);
    /* Панель напівпрозора, тож суцільний світлий фон на ній зникає —
       тримаємо іконку на власній підкладці з видимою межею. */
    background: rgba(15, 23, 42, .05);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .07);
}
html.dark .motion-empty__icon {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.motion-empty__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.motion-empty strong { font-size: 13.5px; font-weight: 700; }
.motion-empty span { max-width: 280px; color: var(--ink-3, #64748B); font-size: 12px; line-height: 1.45; }
.motion-empty button {
    margin-top: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border, #E2E8F0);
    background: var(--surface, #fff);
    color: var(--ink, #0F172A);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

/* --- Доступність: усе вище підпорядковане одному правилу ----------------- */
@media (prefers-reduced-motion: reduce) {
    /* Картка редактора має власний ta-editor-in зі зсувом і масштабом —
       при reduced-motion він грав попри все. */
    .card-inline-editor { animation: none !important; }
    .motion-ticker__strip,
    .motion-segmented__pill { transition: none !important; }
    .motion-skeleton::after { animation: none !important; }
    .motion-alert, .motion-empty { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Пігулка бере на себе тло активного чипа: сам чип лишає тільки колір тексту,
   тож перемикання рівня читається як рух, а не як перефарбовування. */
.concept-d-live .d-defect-browser__chips.is-ready button.is-active {
    background: transparent;
    box-shadow: none;
}
.concept-d-live .d-defect-browser__chips .motion-segmented__pill {
    background: linear-gradient(135deg, #249CFF, #1262E7);
    box-shadow: 0 8px 18px rgba(17, 104, 232, .25);
}
.concept-d-live .d-defect-browser__chips[data-motion-active="D"] .motion-segmented__pill {
    background: linear-gradient(135deg, #FF6A79, #D9384D);
    box-shadow: 0 8px 18px rgba(217, 56, 77, .25);
}
.concept-d-live .d-defect-browser__chips[data-motion-active="C"] .motion-segmented__pill {
    background: linear-gradient(135deg, #FFD45B, #F09A13);
    box-shadow: 0 8px 18px rgba(240, 154, 19, .25);
}
.concept-d-live .d-defect-browser__chips[data-motion-active="E"] .motion-segmented__pill {
    background: linear-gradient(135deg, #B76AF1, #7B36C8);
    box-shadow: 0 8px 18px rgba(123, 54, 200, .25);
}

/* Поле вводу в модалці підтвердження (showPrompt) --------------------------
   Заміна нативного prompt(), який не працює в Telegram WebView. */
.brut-modal-field {
    display: block;
    margin: 4px 0 16px;
}
.brut-modal-field input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.brut-modal-field input:focus-visible {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
}
.brut-modal-field input::placeholder { color: var(--ink-3); }

/* --- Компактний ритм інспектора -------------------------------------------
   Чотири поля по 61px + заголовок + панель + опис + футер не вміщались у
   вікно 720px заввишки. Стискаємо вертикальний ритм, не чіпаючи ширину:
   інспектор має лише 330px по горизонталі, тож два стовпці неможливі —
   «ДЕПАРТАМЕНТ ЕКСПЛУАТАЦІЇ ТРЦ» у 144px не поміститься. */
.concept-d-live .ed-field { padding: 5px 10px; gap: 1px; }
.concept-d-live .ed-field .fl { font-size: 9.5px; letter-spacing: .05em; }
.concept-d-live .ed-field select,
.concept-d-live .ed-field input,
.concept-d-live .ed-field textarea { font-size: 13px; }
.concept-d-live .d-inspector-heading { padding-bottom: 9px; }
.concept-d-live .d-inspector-heading strong { font-size: 16.5px; }
.concept-d-live .card-inline-editor__toolbar { gap: 7px; }
.concept-d-live .card-inline-editor__toolbar > label { font-size: 12px; }
.concept-d-live .card-inline-editor__footer { gap: 6px; padding-top: 9px; }
.concept-d-live .card-inline-editor__ticket { padding: 2px 9px; gap: 6px; }
.concept-d-live .card-inline-editor__save { height: 38px; padding: 0 18px; }
/* Індикатор чернетки порожній, поки правок немає, але як flex-елемент усе
   одно з'їдає проміжок — через ці 7px панель опису переносилась у два ряди. */
.card-inline-editor__draft:empty { display: none; }

/* --- Плавність прокрутки списків ------------------------------------------
   Під час прокрутки рядки проїжджають під нерухомим курсором, і кожен
   вмикає власний :hover. Вимір: 53 компонування й 152 перерахунки стилів
   на один прохід рейки; та сама прокрутка з курсором поза списком коштує 0.
   На час руху вимикаємо влучання курсора — hover не перемикається, макет
   не перераховується. Анімації при цьому лишаються всі: вони тут ні до чого.
   Тільки для точного вказівника: на дотику наведення не існує. */
@media (hover: hover) and (pointer: fine) {
    /* Глушимо влучання лише в самі рядки, не в контейнер: інакше зникає
       й смуга прокрутки, і її не перетягнути мишею. */
    .is-scroll-quiet > * { pointer-events: none; }
}

/* --- Border beam на вибраній невідповідності ------------------------------
   Перенесено з @rmahammad/border-beam-panel (Motiq). React сюди не ставиться:
   проєкт ванільний, без Tailwind і збірки, — перенесена сама поведінка.
   Дві комети 180° одна від одної на конічному кільці, вирізаному двошаровою
   АЛЬФА-маскою (mask-composite: exclude). Кут веде JS, бо швидкість пружинна:
   на наведенні комети розганяються й потім вибігаються, а не смикаються.
   Коралевий підпис оригіналу тут замінено на блакитний: у панелі аудиту
   червоно-помаранчеве означає критичність, і кольору не можна брехати. */
@property --mk-beam-a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
}

/* Власний контекст накладання, щоб ореол лягав НАД тлом рядка,
   але ПІД його вмістом. */
.concept-d-live .d-defect-row.is-beaming { isolation: isolate; }

.motion-beam,
.motion-beam-glow {
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    pointer-events: none;
    background: conic-gradient(from var(--mk-beam-a, 0deg),
        transparent 0deg,
        color-mix(in srgb, var(--mk-beam-tail) 4%, transparent) 18deg,
        color-mix(in srgb, var(--mk-beam-tail) 55%, transparent) 46deg,
        var(--mk-beam-head) 56deg,
        color-mix(in srgb, var(--mk-beam-head) 22%, #ffffff) 60deg,
        transparent 63deg,
        transparent 198deg,
        color-mix(in srgb, var(--mk-beam-alt) 4%, transparent) 216deg,
        color-mix(in srgb, var(--mk-beam-alt) 50%, transparent) 244deg,
        var(--mk-beam-alt) 254deg,
        color-mix(in srgb, var(--mk-beam-alt) 26%, #ffffff) 258deg,
        transparent 261deg,
        transparent 360deg);
}

/* Кольори комет = колір оцінки невідповідності. Ті самі пари, що на чипах
   рівнів і на бейджі рядка, тож промінь не вводить нової мови кольору,
   а повторює вже відому: темний кінець — хвіст, світлий — голова. */
.motion-beam, .motion-beam-glow {
    --mk-beam-tail: #1262E7;
    --mk-beam-head: #249CFF;
    --mk-beam-alt: #7CC4FF;
}
.d-defect-row[data-d-grade="D"] .motion-beam,
.d-defect-row[data-d-grade="D"] .motion-beam-glow {
    --mk-beam-tail: #D9384D;
    --mk-beam-head: #FF6A79;
    --mk-beam-alt: #FF9AA5;
}
.d-defect-row[data-d-grade="C"] .motion-beam,
.d-defect-row[data-d-grade="C"] .motion-beam-glow {
    --mk-beam-tail: #F09A13;
    --mk-beam-head: #FFD45B;
    --mk-beam-alt: #FFE79B;
}
.d-defect-row[data-d-grade="E"] .motion-beam,
.d-defect-row[data-d-grade="E"] .motion-beam-glow {
    --mk-beam-tail: #7B36C8;
    --mk-beam-head: #B76AF1;
    --mk-beam-alt: #D6A8FF;
}
.motion-beam {
    z-index: 2;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
}
.motion-beam-glow {
    z-index: -1;
    filter: blur(14px);
    opacity: .35;
}
@media (forced-colors: active) {
    .motion-beam, .motion-beam-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* Статичний варіант оригіналу: кільце просто підсвічене під кутом 40°,
       без руху й без ореолу. */
    .motion-beam-glow { display: none; }
}

/* --- Об'єднання невідповідностей у рейці ----------------------------------
   Вхід повернуто після редизайну: у концепті D панель фільтрів із кнопкою
   «Об'єднати» і чекбокси карток сітки приховані, тож функція була недосяжна
   на всіх вьюпортах. Тепер вибір живе там, де перелік. */
.concept-d-live .d-defect-browser__head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.concept-d-live .d-rail-select-toggle {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--d-edge);
    background: var(--d-panel-strong);
    color: var(--ink-2);
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.concept-d-live .d-rail-select-toggle svg { width: 15px; height: 15px; }
.concept-d-live .d-rail-select-toggle:hover { border-color: var(--d-blue); color: var(--d-blue); }
.concept-d-live .d-rail-select-toggle.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #249CFF, #1262E7);
}

/* Позначка вибору на рядку */
.concept-d-live .d-defect-browser.is-selecting .d-defect-row {
    grid-template-columns: 22px 52px minmax(0, 1fr) 42px;
}
.concept-d-live .d-defect-row__pick {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    border: 1.5px solid var(--d-edge-strong, rgba(15, 23, 42, .22));
    background: var(--d-panel-strong);
    color: #fff;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.concept-d-live .d-defect-row__pick svg { width: 13px; height: 13px; stroke-width: 3; }
.concept-d-live .d-defect-row.is-picked .d-defect-row__pick {
    border-color: transparent;
    background: var(--d-blue, #1B7EF6);
}
.concept-d-live .d-defect-row.is-picked {
    border-color: rgba(27, 126, 246, .6);
    background: color-mix(in srgb, var(--d-blue-soft) 42%, var(--d-panel-strong));
}

/* Панель дії */
.concept-d-live .d-rail-merge-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 9px 11px;
    border-radius: 14px;
    border: 1px solid var(--d-edge);
    background: var(--d-panel-strong);
    font-size: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--motion-base) var(--motion-enter),
                transform var(--motion-base) var(--motion-enter);
}
.concept-d-live .d-rail-merge-bar.is-open {
    opacity: 1;
    transform: none;
}
/* Вихід дзеркалить вхід — панель іде туди ж, звідки прийшла. */
.concept-d-live .d-rail-merge-bar.is-leaving {
    opacity: 0;
    transform: translateY(8px);
    transition-duration: var(--motion-fast);
    transition-timing-function: var(--motion-exit);
    pointer-events: none;
}
.concept-d-live .d-rail-merge-bar b { font-variant-numeric: tabular-nums; }
.concept-d-live .d-rail-merge-bar__cancel,
.concept-d-live .d-rail-merge-bar__go {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.concept-d-live .d-rail-merge-bar__cancel {
    margin-left: auto;
    border: 1px solid var(--d-edge);
    background: transparent;
    color: var(--ink-2);
}
.concept-d-live .d-rail-merge-bar__go {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #249CFF, #1262E7);
}
.concept-d-live .d-rail-merge-bar__go:disabled {
    opacity: .45;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .concept-d-live .d-rail-merge-bar,
    .concept-d-live .d-rail-merge-bar.is-leaving { transition-property: opacity; transform: none; }
}

/* Запасні зони від моделі: з фото цех часто неоднозначний, тож панель пропонує
   1-2 альтернативи одним дотиком замість вибору зі списку на 17 позицій. */
.ed-zone-alts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
}
.ed-zone-alts__label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ed-zone-alts__chip {
    font: inherit;
    font-size: 11.5px;
    line-height: 1.2;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    border: 1px dashed var(--line-2);
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.ed-zone-alts__chip:hover {
    border-style: solid;
    border-color: var(--blue);
    color: var(--blue-ink);
}
.ed-zone-alts__chip:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .ed-zone-alts__chip { transition: none; }
}

/* ==========================================================================
   Motion system v3 · 21st.dev-inspired audit storytelling
   - Hero stories use a restrained dissolve without a moving colour wash.
   - Progressive Carousel: timed story rail and decoded photo transitions.
   - Animated Gradient Border: the selected defect beam remains the only
     continuously moving contour, so severity colour keeps its meaning.
   ========================================================================== */

.concept-d-live .d-focus-story {
    width: min(390px, 100%);
    margin-top: 11px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
}
.concept-d-live .d-focus-story__label {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 9.5px;
    font-weight: 760;
    letter-spacing: .075em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.concept-d-live .d-focus-story__nav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.concept-d-live .d-focus-story__nav button {
    width: 19px;
    height: 19px;
    position: relative;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--d-blue) 22%, var(--d-edge));
    border-radius: 999px;
    background: color-mix(in srgb, var(--d-panel-strong) 78%, transparent);
    color: var(--ink-3);
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
    transition: width 260ms var(--motion-enter), color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
/* Крапка має 19px висоти — нижче за поріг у 32px, який тримає решта панелі.
   Видимий розмір лишаємо, а зону натискання розширюємо псевдоелементом:
   по 9px згори й знизу дають 37px із запасом на дробове позиціонування,
   по 2px з боків не перекривають сусідів при gap 5px. */
.concept-d-live .d-focus-story__nav button::after {
    content: '';
    position: absolute;
    inset: -9px -2px;
}
.concept-d-live .d-focus-story__nav button.is-active {
    width: 34px;
    color: #fff;
    border-color: transparent;
    background: var(--d-story-accent, #1685FF);
    box-shadow: 0 5px 16px color-mix(in srgb, var(--d-story-accent, #1685FF) 30%, transparent);
}
.concept-d-live .d-focus-story__progress {
    grid-column: 1 / -1;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--d-story-accent, #1685FF) 12%, transparent);
}
.concept-d-live .d-focus-story__progress i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--d-story-accent, #1685FF), color-mix(in srgb, var(--d-story-accent, #1685FF) 38%, #fff));
    transform: scaleX(0);
    transform-origin: left center;
}
.concept-d-live .d-focus-story__progress.is-running i {
    animation: d-focus-story-progress 7200ms linear forwards;
}
@keyframes d-focus-story-progress { to { transform: scaleX(1); } }

.concept-d-live .d-focus-hero[data-story="latest"] { --d-story-accent: #1685FF; }
.concept-d-live .d-focus-hero[data-story="critical"] { --d-story-accent: #E5485D; }
.concept-d-live .d-focus-hero[data-story="backlog"] { --d-story-accent: #F09A13; }
.concept-d-live .d-focus-hero[data-story="repeat"] { --d-story-accent: #8A4DE1; }
.concept-d-live .d-focus-hero[data-story="critical"] .d-kicker { color: #D9384D; }
.concept-d-live .d-focus-hero[data-story="backlog"] .d-kicker { color: #B96A00; }
.concept-d-live .d-focus-hero[data-story="repeat"] .d-kicker { color: #7B36C8; }
.dark.concept-d-live .d-focus-hero[data-story="critical"] .d-kicker { color: #FF8E9B; }
.dark.concept-d-live .d-focus-hero[data-story="backlog"] .d-kicker { color: #FFD275; }
.dark.concept-d-live .d-focus-hero[data-story="repeat"] .d-kicker { color: #D2A6FF; }

.concept-d-live .d-focus-hero__media::before {
    display: none;
}

/* Facade transition: the decoded incoming image rises above a fully opaque
   outgoing snapshot. There is never a transparent frame, even on a slow VPS. */
.concept-d-live .d-focus-hero__outgoing {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    transform: translateZ(0);
    pointer-events: none;
}
.concept-d-live .d-focus-hero__outgoing .d-focus-hero__blur,
.concept-d-live .d-focus-hero__outgoing .d-focus-hero__photo {
    animation: none !important;
}
.concept-d-live .d-focus-hero.is-facade-swapping > .d-focus-hero__media > .d-focus-hero__blur {
    animation: d-hero-facade-blur-in 680ms var(--motion-enter) both;
    will-change: opacity, transform;
}
.concept-d-live .d-focus-hero.is-facade-swapping > .d-focus-hero__media > .d-focus-hero__photo {
    animation: d-hero-facade-photo-in 680ms var(--motion-enter) both;
    will-change: opacity, transform, clip-path;
}
.concept-d-live .d-focus-hero.is-facade-swapping .d-focus-hero__outgoing {
    animation: d-hero-facade-out 680ms var(--motion-enter) both;
    will-change: opacity, transform;
}
@keyframes d-hero-facade-blur-in {
    from { opacity: 0; transform: scale(1.065) translate3d(12px,0,0); }
    to { opacity: 1; transform: translateZ(0); }
}
@keyframes d-hero-facade-photo-in {
    from {
        opacity: 0;
        transform: translate3d(18px,0,0) scale(1.026);
        clip-path: inset(0 0 0 13% round 34px 0 0 34px);
    }
    to { opacity: 1; transform: none; clip-path: inset(0); }
}
@keyframes d-hero-facade-out {
    0%, 16% { opacity: 1; transform: translateZ(0) scale(1); }
    to { opacity: 0; transform: translate3d(-7px,0,0) scale(1.012); }
}

.concept-d-live .d-focus-hero.is-story-entering .d-kicker,
.concept-d-live .d-focus-hero.is-story-entering h2,
.concept-d-live .d-focus-hero.is-story-entering p,
.concept-d-live .d-focus-hero.is-story-entering .d-focus-hero__actions {
    animation: d-focus-copy-enter 260ms var(--motion-enter) both;
}
.concept-d-live .d-focus-hero.is-story-entering h2 { animation-delay: 18ms; }
.concept-d-live .d-focus-hero.is-story-entering p { animation-delay: 32ms; }
.concept-d-live .d-focus-hero.is-story-entering .d-focus-hero__actions { animation-delay: 46ms; }
@keyframes d-focus-copy-enter {
    from { opacity: .35; transform: translate3d(0,4px,0); }
    to { opacity: 1; transform: none; }
}

/* Inspector: outgoing evidence stays in place while the next image decodes. */
.concept-d-live .card-inline-editor__media.motion-photo-swap { isolation: isolate; }
.concept-d-live .card-inline-editor__media.motion-photo-swap > .defect-card__image:not(.motion-photo-outgoing) { z-index: 2; }
.concept-d-live .motion-photo-outgoing {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    pointer-events: none;
    will-change: transform, opacity;
}
.concept-d-live .card-inline-editor.motion-inspector-entering { animation: none; }
.concept-d-live .card-inline-editor.motion-inspector-settled { animation: none !important; }
.motion-inspector-replacing .card-inline-editor { animation: none !important; }
.concept-d-live .card-inline-editor.motion-inspector-entering .card-inline-editor__media,
.concept-d-live .card-inline-editor.motion-inspector-entering .card-inline-editor__content { will-change: transform, opacity; }

.concept-d-live .editor-photo-count { bottom: 103px; }
.concept-d-live .editor-photo-strip {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 61px;
    max-width: calc(100% - 96px);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 13px;
    background: rgba(13, 18, 27, .56);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    transform: translateX(-50%);
    scrollbar-width: none;
}
.concept-d-live .editor-photo-strip::-webkit-scrollbar { display: none; }
.concept-d-live .editor-photo-thumb {
    position: relative;
    width: 34px;
    height: 25px;
    flex: 0 0 auto;
    padding: 0;
    /* Обрізання перенесено на сам <img>: overflow:hidden відрізав би
       псевдоелемент, яким розширено зону натискання (мініатюра 25px
       не дотягувала до порогу 32px). */
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 8px;
    background: #10151d;
    cursor: pointer;
    opacity: .6;
    transform: scale(.94);
    transition: width 280ms var(--motion-enter), opacity 180ms ease, transform 280ms var(--motion-enter), border-color 180ms ease;
}
.concept-d-live .editor-photo-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 7px; }
.concept-d-live .editor-photo-thumb::after {
    content: '';
    position: absolute;
    inset: -9px 0;
}
.concept-d-live .editor-photo-thumb[aria-current="true"] {
    width: 52px;
    border-color: rgba(255,255,255,.9);
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--d-blue) 72%, transparent);
}

/* The statistics scrim used to end at the content column, producing a hard
   vertical rectangle over the facade. Extend it across the photo and dissolve
   it as a wide ellipse, so the lower surface joins the image as a soft curve. */
.concept-d-live .d-focus-hero.has-image .d-focus-hero__stats::before {
    inset: -30px -48vw -28px -28px;
    border-radius: 0 78% 0 0 / 0 100% 0 0;
    background: radial-gradient(
        ellipse 72% 132% at 5% 112%,
        rgba(250,253,255,.98) 0%,
        rgba(250,253,255,.94) 39%,
        rgba(250,253,255,.76) 56%,
        rgba(250,253,255,.38) 71%,
        rgba(250,253,255,.10) 82%,
        transparent 92%
    );
}
.dark.concept-d-live .d-focus-hero.has-image .d-focus-hero__stats::before {
    background: radial-gradient(
        ellipse 72% 132% at 5% 112%,
        rgba(8,22,38,.985) 0%,
        rgba(8,22,38,.95) 39%,
        rgba(8,22,38,.78) 56%,
        rgba(8,22,38,.42) 71%,
        rgba(8,22,38,.12) 82%,
        transparent 92%
    );
}

@media (max-width: 640px) {
    .concept-d-live .d-focus-story { width: 100%; }
    .concept-d-live .d-focus-story__label { display: none; }
    .concept-d-live .d-focus-story__nav { grid-column: 1 / 3; }
    .concept-d-live .editor-photo-strip { max-width: calc(100% - 72px); }
}
@media (prefers-reduced-motion: reduce) {
    .concept-d-live .d-focus-story__progress { display: none; }
    .concept-d-live .d-focus-hero__media::before,
    .concept-d-live .d-focus-hero.is-story-entering .d-kicker,
    .concept-d-live .d-focus-hero.is-story-entering h2,
    .concept-d-live .d-focus-hero.is-story-entering p,
    .concept-d-live .d-focus-hero.is-story-entering .d-focus-hero__actions,
    .concept-d-live .d-focus-hero.is-story-entering .d-focus-hero__photo,
    .concept-d-live .d-focus-hero.is-facade-swapping > .d-focus-hero__media > .d-focus-hero__blur,
    .concept-d-live .d-focus-hero.is-facade-swapping > .d-focus-hero__media > .d-focus-hero__photo,
    .concept-d-live .d-focus-hero.is-facade-swapping .d-focus-hero__outgoing { animation: none !important; }
    .concept-d-live .d-focus-story__nav button,
    .concept-d-live .editor-photo-thumb { transition: none !important; }
}

/* ═══ Моторика режиму об'єднання ══════════════════════════════════════════
   Вхід у режим вибору змінює значення кліку по рядку: замість відкриття
   редактора рядок позначається. Це зміна режиму, і вона мусить бути
   помітною, інакше наступна дія користувача виявиться несподіваною. */

/* Позначка: пружина на появі, бо це підтвердження дії, а не декор. */
.concept-d-live .d-defect-row__pick {
    transition: background-color var(--motion-fast) ease,
                border-color var(--motion-fast) ease,
                transform var(--motion-fast) var(--motion-spring);
}
.concept-d-live .d-defect-row.is-picked .d-defect-row__pick {
    transform: scale(1.12);
}
.concept-d-live .d-defect-row__pick svg {
    transform-origin: center;
    animation: motion-pick-check var(--motion-fast) var(--motion-spring) both;
}
@keyframes motion-pick-check {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}

/* Підсвітка самого рядка вже покрита наявним переходом вище (transform,
   background, border-color, box-shadow) — дублювати його не треба. Працює
   вона тепер тому, що позначення більше не перемальовує список і елемент
   лишається тим самим. */

/* Хвиля появи позначок на вході в режим. Затримка обмежена шістьма кроками
   (--motion-index уже приходить із розмітки), інакше на 59 рядках хвиля
   тягнулася б секунди. */
.concept-d-live .d-defect-browser.is-selecting-enter .d-defect-row__pick {
    animation: motion-pick-in var(--motion-base) var(--motion-enter) both;
    animation-delay: calc(var(--motion-index, 0) * 34ms);
}
@keyframes motion-pick-in {
    from { opacity: 0; transform: scale(0.72) translateX(-6px); }
    to { opacity: 1; transform: none; }
}

/* Рядки, що злилися в один, згортаються перед підміною списку. */
.concept-d-live .d-defect-row.is-merging-out {
    animation: motion-merge-out 240ms var(--motion-exit) both;
    animation-delay: calc(var(--motion-index, 0) * 26ms);
    pointer-events: none;
}
@keyframes motion-merge-out {
    to { opacity: 0; transform: scale(0.96) translateX(10px); }
}

/* Кнопка режиму дихає, поки режим активний. Це єдина циклічна анімація тут,
   і вона позначає стан, що триває: поки вона йде, клік по рядку означає інше.
   4.2 с і мала амплітуда — щоб не перетягувати увагу з даних. */
.concept-d-live .d-rail-select-toggle.is-active {
    animation: motion-mode-breathe 4.2s ease-in-out infinite;
}
@keyframes motion-mode-breathe {
    0%, 100% { transform: none; }
    50% { transform: scale(1.06); }
}

/* Чипи запасних зон: власного входу не мають — їдуть разом із інспектором.
   Анімується лише натиск і зникнення після вибору. */
.ed-zone-alts__chip {
    transition: border-color var(--motion-fast) ease,
                color var(--motion-fast) ease,
                background-color var(--motion-fast) ease,
                transform var(--motion-press, 110ms) var(--motion-enter);
}
.ed-zone-alts__chip:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
    .concept-d-live .d-defect-row__pick,
    .concept-d-live .d-defect-row.is-picked .d-defect-row__pick { transform: none; }
    .concept-d-live .d-defect-row__pick svg,
    .concept-d-live .d-defect-browser.is-selecting-enter .d-defect-row__pick { animation: none; }
    .concept-d-live .d-defect-row.is-merging-out { animation: motion-merge-fade 200ms linear both; }
    @keyframes motion-merge-fade { to { opacity: 0; } }
    .concept-d-live .d-rail-select-toggle.is-active { animation: none; }
    .ed-zone-alts__chip:active { transform: none; }
}

/* ═══ Прояв даних ═════════════════════════════════════════════════════════
   Три гаки для цього вже лежали в розмітці ще з v2 (motion-row-enter,
   motion-data-row + motion-data-ready, --motion-index на точках графіка),
   але самі keyframes тоді видалили як невикористані. Повертаємо кадри до
   наявних гаків, нічого не переставляючи в JS. */

/* Графік тренду: лінії й заливка проступають зліва направо одним витиранням.
   clip-path не чіпає layout, тож обидві серії та обидві заливки їдуть разом
   і не розсинхронізовуються. Довше за 300 мс свідомо — це пояснювальний
   рух даних, а не відгук на дію. */
.concept-d-live .d-trend-reveal {
    animation: motion-trend-wipe 560ms var(--motion-enter) both;
}
@keyframes motion-trend-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* Точки сідають після того, як під ними вже є лінія. */
.concept-d-live .d-trend-point {
    transform-box: fill-box;
    transform-origin: center;
    animation: motion-trend-point var(--motion-base) var(--motion-spring) both;
    animation-delay: calc(300ms + var(--motion-index, 0) * 42ms);
}
@keyframes motion-trend-point {
    from { opacity: 0; transform: scale(0.45); }
    to { opacity: 1; transform: none; }
}

/* Рядки місячної статистики: гак motion-data-ready вже вішається з JS. */
.concept-d-live .motion-data-ready .motion-data-row {
    animation: motion-data-row-in var(--motion-base) var(--motion-enter) both;
    animation-delay: calc(var(--motion-index, 0) * 46ms);
}
@keyframes motion-data-row-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

/* Стовпці ростуть з нуля. scaleX замість width — ширина лишається
   інлайновою, а росте трансформація, тож layout не перераховується. */
.concept-d-live .motion-data-ready .trend-bar-fill {
    transform-origin: left center;
    animation: motion-bar-grow 460ms var(--motion-enter) both;
    animation-delay: calc(120ms + var(--motion-index, 0) * 46ms);
}
@keyframes motion-bar-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Рейка невідповідностей: хвиля лише при зміні складу списку. */
.concept-d-live #dDefectRailList.is-entering .d-defect-row {
    animation: motion-row-enter var(--motion-base) var(--motion-enter) both;
    animation-delay: calc(var(--motion-index, 0) * 38ms);
}
@keyframes motion-row-enter {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}

/* Поки для невідповідності летить переаналіз, її рядок у рейці пульсує.
   Це справжній стан «триває», тому цикл тут доречний — і він сам собою
   зникає, щойно відповідь прийшла. */
.concept-d-live .d-defect-row.is-reanalyzing {
    animation: motion-row-working 1.6s ease-in-out infinite;
}
@keyframes motion-row-working {
    0%, 100% { opacity: 1; }
    50% { opacity: .58; }
}

@media (prefers-reduced-motion: reduce) {
    .concept-d-live .d-trend-reveal { animation: none; }
    .concept-d-live .d-trend-point,
    .concept-d-live .motion-data-ready .motion-data-row,
    .concept-d-live #dDefectRailList.is-entering .d-defect-row {
        animation: motion-appear-plain var(--motion-fast) linear both;
        animation-delay: 0ms;
    }
    @keyframes motion-appear-plain { from { opacity: 0; } to { opacity: 1; } }
    .concept-d-live .motion-data-ready .trend-bar-fill { animation: none; }
    .concept-d-live .d-defect-row.is-reanalyzing { animation: none; opacity: .7; }
}

/* ═══ Швидкий перехід (Ctrl/Cmd+K) ════════════════════════════════════════
   Панель без анімації появи навмисно: її відкривають з клавіатури десятки
   разів на день, і рух тут читається як затримка. Анімовано лише те, що
   стається зрідка — наведення й натиск на рядку. */
/* .brut-overlay центрує вміст лише коли розкладка flex; базове правило
   задає align/justify, але display вмикається на показі. Палітру ставимо
   ближче до верху — так її звично шукати очима. */
#cmdkOverlay:not(.hidden) {
    display: flex;
    align-items: flex-start;
    padding-top: max(12vh, 64px);
}
.cmdk {
    width: min(560px, calc(100vw - 32px));
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    overflow: hidden;
}
.cmdk__field {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-2);
}
.cmdk__field svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ink-3); }
.cmdk__field input {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
}
.cmdk__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cmdk__row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 7px 9px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease;
}
.cmdk__row.is-active { background: var(--surface-2); }
.cmdk__row:active { transform: scale(.995); }
.cmdk__kind {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    padding: 3px 0;
    border-radius: var(--r-pill);
    color: #fff;
    background: var(--blue);
}
.cmdk__kind.defect { background: var(--eng, #6B54C8); }
.cmdk__title {
    min-width: 0;
    font-size: 13.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmdk__meta { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmdk__empty { margin: 0; padding: 26px 12px; text-align: center; color: var(--ink-3); font-size: 13px; }
.cmdk__hint {
    margin: 0;
    padding: 8px 14px;
    border-top: 1px solid var(--line-2);
    font-size: 11px;
    color: var(--ink-3);
}
.cmdk__hint kbd, .cmdk__esc {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    border: 1px solid var(--line-2);
    border-radius: 5px;
    background: var(--surface-2);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    color: var(--ink-3);
    text-align: center;
}
.cmdk__esc { flex: 0 0 auto; }
@media (max-width: 480px) {
    .cmdk__row { grid-template-columns: 52px minmax(0, 1fr); }
    .cmdk__meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cmdk__row { transition: none; }
    .cmdk__row:active { transform: none; }
}

/* Mobile evidence card v2: the photo is a focused stage, while the editor
   rises over it as a readable sheet instead of continuing as a hard rectangle. */
@media (max-width: 640px) {
    .concept-d-live body.focus-editor-open #defectsScreen.view.active { gap: 0; }
    .concept-d-live body.focus-editor-open #defectsScreen > .w-full,
    .concept-d-live body.focus-editor-open #defectsListPane,
    .concept-d-live body.focus-editor-open #defectsGrid.defects { overflow: visible; }

    .concept-d-live .card-inline-editor {
        min-height: 0;
        overflow: visible;
        border: 0;
        border-radius: 28px;
        background: transparent;
        box-shadow: none;
    }

    .concept-d-live .card-inline-editor__media {
        min-height: 0;
        height: clamp(360px, 44svh, 480px);
        max-height: none;
        border: 1px solid rgba(255,255,255,.54);
        border-radius: 28px;
        box-shadow: 0 18px 42px rgba(20,55,82,.20), inset 0 1px 0 rgba(255,255,255,.32);
        touch-action: pan-y pinch-zoom;
    }
    .concept-d-live .card-inline-editor__media::after {
        background: linear-gradient(to bottom, rgba(4,15,25,.10) 0%, transparent 42%, rgba(4,15,25,.08) 58%, rgba(4,15,25,.54) 100%);
    }
    .concept-d-live .card-inline-editor__media .defect-card__badges {
        top: 13px;
        right: 13px;
        left: 13px;
    }
    .concept-d-live .card-inline-editor__media .defect-card__number,
    .concept-d-live .card-inline-editor__media .defect-card__priority-badge {
        min-height: 36px;
        padding: 0 13px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(255,255,255,.42);
        box-shadow: 0 7px 18px rgba(0,0,0,.14);
        -webkit-backdrop-filter: blur(14px) saturate(145%);
        backdrop-filter: blur(14px) saturate(145%);
    }

    .concept-d-live .card-inline-editor__photo-nav {
        top: 48%;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255,255,255,.22);
        background: rgba(12,19,29,.50);
        box-shadow: 0 8px 22px rgba(0,0,0,.16);
    }
    .concept-d-live .card-inline-editor__photo-nav.prev { left: 10px; }
    .concept-d-live .card-inline-editor__photo-nav.next { right: 10px; }

    .concept-d-live .editor-photo-count {
        top: 58px;
        bottom: auto;
        left: 14px;
        min-height: 29px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        transform: none;
        background: rgba(12,19,29,.50);
        border: 1px solid rgba(255,255,255,.22);
    }
    .concept-d-live .editor-photo-strip {
        bottom: 68px;
        max-width: calc(100% - 28px);
        min-height: 42px;
        gap: 6px;
        padding: 5px 6px;
        border-radius: 15px;
        background: rgba(12,19,29,.58);
    }
    .concept-d-live .editor-photo-thumb { width: 38px; height: 28px; }
    .concept-d-live .editor-photo-thumb[aria-current="true"] { width: 57px; }

    .concept-d-live .card-inline-editor__photo-tools {
        right: 14px;
        bottom: 12px;
        left: 14px;
        width: auto;
        min-height: 48px;
        padding: 3px 5px;
        justify-content: space-between;
        gap: 2px;
        transform: none;
        border: 1px solid rgba(255,255,255,.20);
        background: rgba(12,19,29,.62);
        box-shadow: 0 10px 28px rgba(0,0,0,.18);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
    }
    .concept-d-live .card-inline-editor__photo-tool {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
    }
    .concept-d-live .card-inline-editor__photo-tool svg { width: 17px; height: 17px; }

    .concept-d-live .card-inline-editor__content {
        position: relative;
        z-index: 5;
        margin-top: -22px;
        padding: 26px 15px 16px;
        gap: 10px;
        overflow: visible;
        border: 1px solid var(--d-edge);
        border-radius: 27px 27px 22px 22px;
        background: color-mix(in srgb, var(--d-panel-strong) 96%, transparent);
        box-shadow: 0 -14px 34px rgba(23,66,96,.11), 0 18px 42px rgba(23,66,96,.13), inset 0 1px 0 var(--d-edge-bright);
        -webkit-backdrop-filter: blur(28px) saturate(155%);
        backdrop-filter: blur(28px) saturate(155%);
    }
    .concept-d-live .card-inline-editor__content::before {
        content: '';
        position: absolute;
        top: 9px;
        left: 50%;
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--ink-3) 28%, transparent);
        transform: translateX(-50%);
    }
    .concept-d-live .d-inspector-heading {
        min-height: 54px;
        padding: 0 1px 11px;
        align-items: center;
        flex-direction: row;
    }
    .concept-d-live .d-inspector-heading span { margin-bottom: 2px; }
    .concept-d-live .d-inspector-heading strong { font-size: 21px; }
    .concept-d-live .d-inspector-heading small {
        max-width: 58%;
        font-size: 10px;
        line-height: 1.35;
        text-align: right;
        white-space: normal;
    }

    .concept-d-live .card-inline-editor__fields { gap: 7px; }
    .concept-d-live .card-inline-editor__fields .ed-field {
        min-height: 62px;
        padding: 9px 13px;
        justify-content: center;
        border-radius: 17px;
        background: color-mix(in srgb, var(--surface) 91%, transparent);
    }
    .concept-d-live .card-inline-editor__fields .ed-field .fl { font-size: 10px; }
    .concept-d-live .card-inline-editor__fields .ed-field select { font-size: 14px; font-weight: 650; }
    .concept-d-live .card-inline-editor__toolbar { margin-top: 2px; }
    .concept-d-live .card-inline-editor__footer { padding-bottom: max(4px, var(--safe-bottom)); }
}

@media (max-width: 380px) {
    .concept-d-live .card-inline-editor__media { height: clamp(345px, 43svh, 430px); }
    .concept-d-live .card-inline-editor__photo-tool { width: 39px; height: 39px; flex-basis: 39px; }
    .concept-d-live .card-inline-editor__content { padding-right: 13px; padding-left: 13px; }
}

@media (max-width: 330px) {
    .concept-d-live .card-inline-editor__photo-tools {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .concept-d-live .card-inline-editor__photo-tools::-webkit-scrollbar { display: none; }
}

/* Tablet workflow rail: navigation and the two repetitive export actions live
   in one predictable place. It is intentionally hidden on wide desktop where
   the photo stage and footer navigation are already visible together. */
.editor-workflow { display: none; }

@media (max-width: 1179px) {
    .concept-d-live .editor-workflow {
        display: grid;
        grid-template-columns: minmax(102px, .85fr) minmax(170px, 1.25fr) auto auto;
        align-items: stretch;
        gap: 7px;
        padding: 7px;
        border: 1px solid var(--d-edge);
        border-radius: 18px;
        background: color-mix(in srgb, var(--surface-2) 74%, transparent);
        box-shadow: inset 0 1px 0 var(--d-edge-bright);
    }
    .concept-d-live .editor-workflow button {
        min-width: 0;
        min-height: 48px;
        border: 1px solid var(--d-edge);
        border-radius: 13px;
        background: var(--d-panel-strong);
        color: var(--ink-2);
        box-shadow: 0 5px 13px rgba(24,61,87,.07);
        transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
    }
    .concept-d-live .editor-workflow button:active { transform: scale(.975); }
    .concept-d-live .editor-workflow button:focus-visible { outline: 3px solid color-mix(in srgb, var(--d-blue) 28%, transparent); outline-offset: 1px; }
    .concept-d-live .editor-workflow button:disabled { opacity: .42; box-shadow: none; }
    .concept-d-live .editor-workflow svg { width: 17px; height: 17px; flex: 0 0 auto; }

    .concept-d-live .editor-workflow__photo {
        padding: 5px;
        display: grid;
        grid-template-columns: 42px minmax(0,1fr);
        align-items: center;
        gap: 7px;
        text-align: left;
    }
    .concept-d-live .editor-workflow__photo-preview {
        position: relative;
        width: 42px;
        height: 38px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 10px;
        color: rgba(255,255,255,.88);
        background-color: #183047;
        background-image: linear-gradient(rgba(7,22,36,.08),rgba(7,22,36,.24)), var(--editor-photo-bg);
        background-position: center;
        background-size: cover;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    }
    .concept-d-live .editor-workflow__photo-copy { min-width: 0; display: grid; gap: 2px; }
    .concept-d-live .editor-workflow__photo-copy strong { color: var(--ink); font-size: 11px; }
    .concept-d-live .editor-workflow__photo-copy small { overflow: hidden; color: var(--ink-3); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }

    .concept-d-live .editor-workflow__nav {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(46px,1fr) auto minmax(46px,1fr);
        align-items: stretch;
        gap: 4px;
        padding: 3px;
        border: 1px solid var(--d-edge);
        border-radius: 14px;
        background: color-mix(in srgb, var(--surface) 88%, transparent);
    }
    .concept-d-live .editor-workflow__nav button {
        min-height: 42px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--d-blue);
        font-size: 10px;
        font-weight: 760;
    }
    .concept-d-live .editor-workflow__progress {
        min-width: 46px;
        display: grid;
        place-content: center;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .concept-d-live .editor-workflow__progress b { color: var(--ink); font-size: 16px; line-height: 1; }
    .concept-d-live .editor-workflow__progress small { margin-top: 2px; color: var(--ink-3); font-size: 8px; }

    .concept-d-live .editor-workflow__action {
        min-width: 102px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: var(--d-blue) !important;
        font-size: 10px;
        font-weight: 760;
    }
    .concept-d-live .editor-workflow__action.is-success {
        color: var(--good-ink) !important;
        border-color: color-mix(in srgb, var(--good) 44%, var(--d-edge));
        background: var(--good-w);
    }
    .concept-d-live .card-inline-editor__footer .card-inline-editor__nav,
    .concept-d-live #edCopyBtn { display: none; }
}

/* A horizontal tablet split leaves enough width but very little height. In
   that state the large photo stage is replaced by its live thumbnail in the
   workflow rail; tapping it still opens the full viewer. */
@media (min-width: 641px) and (max-width: 1179px) and (max-height: 680px) {
    .concept-d-live #defectsScreen .card-inline-editor {
        --split-card-offset: 118px;
        min-height: calc(100dvh - var(--split-card-offset));
        height: calc(100dvh - var(--split-card-offset)) !important;
        display: block;
        overflow: hidden;
    }
    .concept-d-live #defectsScreen .card-inline-editor__media { display: none; }
    .concept-d-live #defectsScreen .card-inline-editor__content {
        height: 100%;
        max-height: none;
        padding: 12px;
        gap: 8px;
        overflow: hidden auto;
        border: 0;
        border-radius: inherit;
    }
    .concept-d-live #defectsScreen .d-inspector-heading {
        min-height: 43px;
        padding-bottom: 7px;
        align-items: center;
    }
    .concept-d-live #defectsScreen .d-inspector-heading strong { font-size: 16px; }
    .concept-d-live #defectsScreen .editor-workflow {
        position: sticky;
        top: 0;
        z-index: 7;
        grid-template-columns: minmax(102px,.8fr) minmax(158px,1.15fr) auto auto;
        padding: 5px;
        background: color-mix(in srgb, var(--d-panel-strong) 94%, transparent);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        backdrop-filter: blur(20px) saturate(150%);
    }
    .concept-d-live #defectsScreen .editor-workflow button { min-height: 44px; }
    .concept-d-live #defectsScreen .editor-workflow__nav button { min-height: 38px; }
    .concept-d-live #defectsScreen .card-inline-editor__fields {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 6px;
    }
    .concept-d-live #defectsScreen .card-inline-editor__fields .ed-field { min-height: 52px; padding: 6px 10px; }
    .concept-d-live #defectsScreen .card-inline-editor__toolbar { gap: 6px; }
    .concept-d-live #defectsScreen .card-inline-editor__body { min-height: 112px; margin-bottom: 4px; }
    .concept-d-live #defectsScreen .card-inline-editor__footer {
        position: sticky;
        bottom: -12px;
        z-index: 6;
        margin: auto -12px -12px;
        padding: 8px 12px calc(8px + var(--safe-bottom));
        background: color-mix(in srgb, var(--d-panel-strong) 94%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
    }
}

@media (min-width: 901px) and (max-width: 1179px) and (max-height: 680px) {
    .concept-d-live #defectsScreen .card-inline-editor { --split-card-offset: 130px; }
}

@media (max-width: 640px) {
    .concept-d-live .editor-workflow {
        grid-template-columns: minmax(0,1fr) 46px 46px;
        gap: 5px;
        padding: 5px;
        border-radius: 16px;
    }
    .concept-d-live .editor-workflow__photo { display: none; }
    .concept-d-live .editor-workflow__nav { grid-column: 1; }
    .concept-d-live .editor-workflow__nav button { padding: 0 4px; }
    .concept-d-live .editor-workflow__nav button span { display: none; }
    .concept-d-live .editor-workflow__action { min-width: 46px; width: 46px; padding: 0; }
    .concept-d-live .editor-workflow__action span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .concept-d-live .editor-workflow button { transition: none; }
    .concept-d-live .editor-workflow button:active { transform: none; }
}

/* Reliable operation feedback and a denser evidence workflow. */
.motion-toast.is-info .motion-toast__icon,
.motion-toast.is-loading .motion-toast__icon { color: var(--blue-ink); background: var(--info-w); }
.motion-toast.is-success .motion-toast__icon { color: var(--good-ink); background: var(--good-w); }

.ai-operation-status {
    display: none;
    min-height: 34px;
    padding: 7px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--d-edge);
    border-radius: 12px;
    background: var(--info-w);
    color: var(--blue-ink);
    font-size: 12px;
    font-weight: 700;
}
.ai-operation-status.is-visible { display: flex; }
.ai-operation-status.is-error { background: var(--crit-w); color: var(--crit-ink); border-color: color-mix(in srgb, var(--crit) 42%, var(--d-edge)); }
.ai-operation-status button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid currentColor;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
}
.concept-d-live .d-focus-story__pause {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--d-edge);
    border-radius: 999px;
    background: color-mix(in srgb, var(--d-panel-strong) 88%, transparent);
    color: var(--ink-2);
    font-size: 10px;
    font-weight: 760;
}
.concept-d-live .d-focus-story__pause svg { width: 14px; height: 14px; }
.concept-d-live .d-focus-story__pause[aria-pressed="true"] { color: var(--d-blue); background: var(--info-w); }
.card-inline-editor__tool.save-next {
    width: auto;
    min-width: 48px;
    padding: 0 13px;
    gap: 7px;
}
.card-inline-editor__tool.save-next span { white-space: nowrap; font-size: 11px; font-weight: 800; }
.card-inline-editor__photo-more { position: relative; }
.card-inline-editor__photo-more > summary { list-style: none; cursor: pointer; }
.card-inline-editor__photo-more > summary::-webkit-details-marker { display: none; }
.card-inline-editor__photo-more > div {
    min-width: 154px;
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 18;
    padding: 6px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--d-edge);
    border-radius: 14px;
    background: var(--d-panel-strong);
    box-shadow: 0 16px 36px rgba(12,35,55,.2);
}
.card-inline-editor__photo-more > div .card-inline-editor__photo-tool {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
}
.card-inline-editor__photo-more > div .card-inline-editor__photo-tool span { font-size: 11px; font-weight: 760; }

@media (min-width: 641px) and (max-width: 1360px) and (max-height: 680px) {
    .concept-d-live #defectsScreen .card-inline-editor {
        --split-card-offset: 118px;
        min-height: calc(100dvh - var(--split-card-offset));
        height: calc(100dvh - var(--split-card-offset)) !important;
        overflow: hidden;
    }
    .concept-d-live #defectsScreen .card-inline-editor__media { display: none; }
    .concept-d-live #defectsScreen .card-inline-editor__content { height: 100%; overflow: hidden auto; }
    .concept-d-live #defectsScreen .d-inspector-heading { order: 1; }
    .concept-d-live #defectsScreen .editor-workflow { order: 2; position: sticky; top: 0; z-index: 7; }
    .concept-d-live #defectsScreen .card-inline-editor__toolbar { order: 3; }
    .concept-d-live #defectsScreen .ai-operation-status { order: 4; }
    .concept-d-live #defectsScreen .card-inline-editor__body { order: 5; min-height: 118px; }
    .concept-d-live #defectsScreen .card-inline-editor__fields { order: 6; }
    .concept-d-live #defectsScreen .card-inline-editor__footer { order: 7; position: sticky; bottom: 0; z-index: 7; }
}

@media (max-width: 640px) {
    .concept-d-live .editor-workflow { grid-template-columns: minmax(150px,1fr) minmax(76px,auto) minmax(76px,auto); }
    .concept-d-live .editor-workflow__nav button span,
    .concept-d-live .editor-workflow__action span { display: inline; }
    .concept-d-live .editor-workflow__action { width: auto; min-width: 76px; padding: 0 7px; font-size: 10px; }
    .concept-d-live .editor-workflow__progress small { font-size: 10px; }
    .card-inline-editor__tool.save-next span { display: none; }
    .card-inline-editor__tool.save-next { width: 48px; padding: 0; }
}