/* ── Palette & base ────────────────────────────────────────────────────── */
:root {
    --bg:            #f4f6fb;
    --bg-panel:      #ffffff;
    --border:        #e4e7ee;
    --border-strong: #cfd4df;
    --text:          #1c2233;
    --text-muted:    #6b7185;
    --accent:        #d63b25;         /* «кровельно-красный» */
    --accent-dark:   #a82814;
    --accent-soft:   #fdece8;
    --ok:            #1f8f5f;
    --shadow-sm:     0 1px 2px rgba(20, 27, 45, .06);
    --shadow-md:     0 8px 24px rgba(20, 27, 45, .08);
    --radius:        14px;
    --radius-sm:     8px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text",
                 "Helvetica Neue", Roboto, Inter, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
}

/* Единственный скролл-контейнер приложения (анти-zoom на iOS) */
#app-shell {
    height: 100%;
    height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    background: var(--bg);
}

img, svg, picture {
    max-width: 100%;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    pointer-events: none;
}
.bitumen-collection-thumb-btn,
.bitumen-collection-thumb-btn img,
.metaltile-profile-thumb-btn,
.metaltile-profile-thumb-btn img,
.falz-profile-thumb-btn,
.falz-profile-thumb-btn img,
.profnastil-profile-thumb-btn,
.profnastil-profile-thumb-btn img,
.ondulin-profile-thumb-btn,
.ondulin-profile-thumb-btn img,
.bitumen-preview-lightbox-stage,
.bitumen-preview-lightbox-stage * {
    pointer-events: auto;
}

/* Все текстовые блоки — переносим длинные слова, ссылки, «непрерывные» строки */
h1, h2, h3, h4, p, span, label, a, td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 32px 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.brand {
    display: flex;
    gap: 14px;
    align-items: center;
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    padding: 4px 6px;
    transition: background .15s ease;
    min-width: 0;                             /* позволяем flex-контенту сжиматься */
}
.brand > div { min-width: 0; }                /* и его дочерний блок с h1/subtitle тоже */
.subtitle {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.brand:hover { background: rgba(214, 59, 37, .06); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    display: grid; place-items: center;
    box-shadow: var(--shadow-md);
}
h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.subtitle { margin: 2px 0 0; color: var(--text-muted); font-size: 13.5px; }
.header-note {
    color: var(--text-muted);
    font-size: 12.5px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* ── Screens ───────────────────────────────────────────────────────────── */
.screen { display: none; max-width: 100%; overflow: visible; }
.screen.active { display: block; animation: fade .2s ease; }

/* ── Главная: каталог калькуляторов ───────────────────────────────────── */
.home-intro {
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 28px 20px 0;
}
.home-intro h2 {
    margin: 0 0 8px;
    font-size: 26px;
    letter-spacing: -0.02em;
}
.home-intro p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14.5px;
    max-width: 46ch;
}
.home-grid {
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 20px 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.home-card {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 16px 16px 16px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-panel);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.home-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.home-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.home-card-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
}
.home-card.is-soon .home-card-icon {
    background: #eef1f6;
    color: var(--text-muted);
}
.home-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.home-card-body strong {
    font-size: 15px;
    font-weight: 700;
}
.home-card-body .muted {
    font-size: 12.5px;
    color: var(--text-muted);
}
.home-card-badge {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
}
.home-card.is-soon .home-card-badge {
    background: #e8ecf3;
    color: var(--text-muted);
}
.home-card.is-soon:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    transform: none;
}

@media (min-width: 720px) {
    .home-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        padding-top: 12px;
    }
}
@media (max-width: 720px) {
    .home-intro { padding: 16px 16px 0; }
    .home-intro h2 { font-size: 22px; }
    .home-grid { padding: 8px 16px 28px; }
    .home-card { padding: 14px 12px; gap: 12px; }
    .home-card-icon { width: 42px; height: 42px; border-radius: 10px; }
}
/* ── Welcome screen ────────────────────────────────────────────────────── */
.welcome-intro {
    max-width: 1280px;
    margin: 16px auto 0;
    padding: 24px 32px 4px;
    text-align: center;
    position: relative;
}
.welcome-intro h2 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.welcome-intro p {
    margin: 0 auto;
    max-width: 640px;
    color: var(--text-muted);
    font-size: 14.5px;
}

.welcome-step[hidden] { display: none !important; }

.welcome-steps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.welcome-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    background: #eef1f6;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
}
.welcome-step-dot.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.welcome-step-dot.done {
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-color: var(--accent);
}
.welcome-step-line {
    width: 36px;
    height: 2px;
    background: var(--border);
    border-radius: 1px;
}
.welcome-step-line.done { background: var(--accent); }

.welcome-back {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: 13px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.welcome-back:hover {
    color: var(--accent-dark);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.material-shape-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 520px;
    margin: 14px auto 0;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: left;
}
.material-shape-preview-img {
    flex: 0 0 96px;
    width: 96px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, #fbf6ed, #f4ecdc);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    touch-action: pan-y;
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
}
.material-shape-preview-text {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.45;
}
.material-shape-preview-text b { color: var(--text); }

/* Material cards: product photos (texture), slightly shorter crop */
#welcome-step-material .roof-card-image {
    aspect-ratio: 16 / 10;
}

.cards-grid {
    max-width: 1280px;
    margin: 24px auto 0;
    padding: 0 32px 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.cards-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1100px;
}
.cards-grid-shapes {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    max-width: 1280px;
}
.cards-grid-materials {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    max-width: 1280px;
}
.cards-grid-collections {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.bitumen-brand-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0 auto 22px;
    max-width: 1280px;
}
.bitumen-brand-chip {
    appearance: none;
    border: 1.5px solid var(--border-strong);
    background: #fff;
    color: var(--text-muted);
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bitumen-brand-chip:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
    background: var(--accent-soft);
}
.bitumen-brand-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.bitumen-brand-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.collection-card .roof-card-image {
    aspect-ratio: 3 / 2;
    cursor: zoom-in;
    position: relative;
    pointer-events: auto;
}
.collection-card .roof-card-image::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke-linecap='round'/%3E%3Cpath d='M11 8v6M8 11h6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    pointer-events: none;
    opacity: 0.9;
}
.collection-card .roof-card-body { padding: 12px 14px 6px; }
.collection-card .roof-card-title { font-size: 16px; margin-bottom: 2px; }
.collection-card .collection-brand {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.collection-card .collection-price {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f4f6f9;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}
.collection-card .collection-price.is-empty {
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
    padding-left: 0;
}
.collection-card .roof-card-cta { padding: 10px 14px 14px; }

/* Полная ширина ряда формы: селект слева, крупное превью справа */
.bitumen-collection-field,
.metaltile-profile-field,
.falz-profile-field,
.profnastil-profile-field,
.ondulin-profile-field {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}
.bitumen-collection-main,
.metaltile-profile-main,
.falz-profile-main,
.profnastil-profile-main,
.ondulin-profile-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bitumen-collection-caption,
.metaltile-profile-caption,
.falz-profile-caption,
.profnastil-profile-caption,
.ondulin-profile-caption {
    display: block;
    line-height: 1.25;
}
.bitumen-collection-main select,
.metaltile-profile-main select,
.falz-profile-main select,
.profnastil-profile-main select,
.ondulin-profile-main select {
    width: 100%;
    max-width: 420px;
}
.bitumen-collection-thumb-btn,
.metaltile-profile-thumb-btn,
.falz-profile-thumb-btn,
.profnastil-profile-thumb-btn,
.ondulin-profile-thumb-btn {
    flex-shrink: 0;
    display: block;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--border, #dde3ea);
    border-radius: 12px;
    background: #f1f5f9;
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bitumen-collection-thumb-btn:hover,
.metaltile-profile-thumb-btn:hover,
.falz-profile-thumb-btn:hover,
.profnastil-profile-thumb-btn:hover,
.ondulin-profile-thumb-btn:hover {
    border-color: var(--accent, #e85d04);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.bitumen-collection-thumb-btn:focus-visible,
.metaltile-profile-thumb-btn:focus-visible,
.falz-profile-thumb-btn:focus-visible,
.profnastil-profile-thumb-btn:focus-visible,
.ondulin-profile-thumb-btn:focus-visible {
    outline: 2px solid var(--accent, #e85d04);
    outline-offset: 2px;
}
.bitumen-collection-thumb-btn[hidden],
.metaltile-profile-thumb-btn[hidden],
.falz-profile-thumb-btn[hidden],
.profnastil-profile-thumb-btn[hidden],
.ondulin-profile-thumb-btn[hidden] { display: none; }
.bitumen-collection-thumb,
.metaltile-profile-thumb,
.falz-profile-thumb,
.profnastil-profile-thumb,
.ondulin-profile-thumb {
    display: block;
    width: 200px;
    height: 134px;
    object-fit: cover;
}
@media (max-width: 640px) {
    .bitumen-collection-field,
    .metaltile-profile-field,
    .falz-profile-field,
    .profnastil-profile-field,
    .ondulin-profile-field {
        flex-wrap: wrap;
    }
    .bitumen-collection-main,
    .metaltile-profile-main,
    .falz-profile-main,
    .profnastil-profile-main,
    .ondulin-profile-main {
        flex: 1 1 100%;
    }
    .bitumen-collection-main select,
    .metaltile-profile-main select,
    .falz-profile-main select,
    .profnastil-profile-main select,
    .ondulin-profile-main select {
        max-width: none;
    }
    .bitumen-collection-thumb-btn,
    .metaltile-profile-thumb-btn,
    .falz-profile-thumb-btn,
    .profnastil-profile-thumb-btn,
    .ondulin-profile-thumb-btn {
        margin-left: 0;
    }
    .bitumen-collection-thumb,
    .metaltile-profile-thumb,
    .falz-profile-thumb,
    .profnastil-profile-thumb,
    .ondulin-profile-thumb {
        width: 160px;
        height: 107px;
    }
}

.bitumen-preview-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    touch-action: none !important; /* зум/пан только внутри stage */
}
.bitumen-preview-lightbox[hidden] { display: none !important; }
.bitumen-preview-lightbox-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.82);
    cursor: zoom-out;
}
.bitumen-preview-lightbox-body {
    position: relative;
    z-index: 1;
    margin: 0;
    width: min(960px, 100%);
    height: min(100dvh - 32px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}
.bitumen-preview-lightbox-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* Кнопки и подпись вне stage — не ездят вместе с зумом/паном картинки */
.bitumen-preview-lightbox-chrome {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px 0;
    touch-action: manipulation;
}
.bitumen-preview-lightbox-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    touch-action: none !important;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.bitumen-preview-lightbox-stage.is-dragging { cursor: grabbing; }
.bitumen-preview-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    background: #fff;
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
}
.bitumen-preview-lightbox-caption {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.bitumen-preview-lightbox-hint {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-align: center;
}
.bitumen-preview-lightbox.is-gallery .bitumen-preview-lightbox-hint {
    display: none;
}
.bitumen-preview-lightbox-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    padding-top: 2px;
}
.bitumen-preview-lightbox-actions[hidden] { display: none !important; }
.bitumen-preview-lightbox-actions .btn {
    min-width: 120px;
    touch-action: manipulation;
}
.bitumen-preview-lightbox-close {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    touch-action: manipulation;
}
.bitumen-preview-lightbox-close:hover { background: #fff; }
.bitumen-preview-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    touch-action: manipulation;
}
.bitumen-preview-lightbox-nav:hover { background: #fff; }
.bitumen-preview-lightbox-nav[hidden] { display: none !important; }
.bitumen-preview-lightbox-nav:disabled {
    opacity: 0.45;
    cursor: default;
}
.bitumen-preview-lightbox-prev { left: 6px; }
.bitumen-preview-lightbox-next { right: 6px; }
@media (max-width: 560px) {
    .bitumen-preview-lightbox {
        padding: 10px;
    }
    .bitumen-preview-lightbox-prev { left: 2px; }
    .bitumen-preview-lightbox-next { right: 2px; }
    .bitumen-preview-lightbox-nav {
        width: 40px;
        height: 40px;
    }
    .bitumen-preview-lightbox-actions .btn {
        flex: 1 1 140px;
        min-width: 0;
    }
}
body.bitumen-preview-open,
body.bitumen-preview-open #app-shell { overflow: hidden; }

@media (max-width: 960px) {
    .cards-grid-3 {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

.cover-fields {
    margin-bottom: 8px;
}
.cover-fields[hidden] { display: none !important; }

.roof-card {
    appearance: none;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font: inherit;
    color: var(--text);
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    width: 100%;
}
.roof-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(20, 27, 45, .12);
    border-color: var(--border-strong);
}
.roof-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.roof-card-image {
    aspect-ratio: 4 / 3;
    background: linear-gradient(180deg, #fbf6ed, #f4ecdc);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    display: grid;
    place-items: center;
    touch-action: pan-y;
    pointer-events: none;
}
.roof-card-image picture {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.roof-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
    pointer-events: none;
    -webkit-touch-callout: none;
    user-select: none;
}
.roof-card:hover .roof-card-image {
    transform: scale(1.04);
    transition: transform .3s ease;
}

.roof-card-body { padding: 16px 18px 4px; flex: 1; }
.roof-card-title {
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.roof-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}
.roof-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tag {
    display: inline-block;
    padding: 3px 9px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.5;
}
.roof-card-cta {
    padding: 12px 18px 16px;
    color: var(--accent);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color .15s ease, gap .15s ease;
}
.roof-card:hover .roof-card-cta { color: var(--accent-dark); gap: 8px; }

/* ── Calc topbar (Back + Tabs) ─────────────────────────────────────────── */
.calc-topbar {
    max-width: 1280px;
    margin: 12px auto 0;
    padding: 0 32px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: nowrap;
}
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    font-size: 13.5px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.back-btn:hover { color: var(--accent-dark); border-color: var(--accent); background: var(--accent-soft); }

.calc-selection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    max-width: min(420px, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
}
.calc-selection-sep { opacity: .55; font-weight: 500; flex-shrink: 0; }
.calc-selection-shape { flex-shrink: 0; }
.calc-selection-mat {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
}
.tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 10px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab:hover  { background: #fff; color: var(--text); }
.tab.active {
    background: var(--bg-panel);
    color: var(--accent-dark);
    border-color: var(--border);
    border-bottom-color: var(--bg-panel);
    box-shadow: var(--shadow-sm);
    position: relative;
    top: 1px;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 32px 32px;
    display: grid;
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
}

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    min-width: 0;                             /* важно для grid-child, чтобы не расширялся */
    /* Не смешивать overflow-x:clip + overflow-y:visible — браузер делает y=auto
       и панель становится вложенным scrollport внутри #app-shell. */
    overflow: visible;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-preview {
    height: 140px;
    margin: -24px -24px 20px;
    background: linear-gradient(180deg, #fbf6ed, #f4ecdc);
    overflow: hidden;
    display: grid;
    place-items: center;
    border-bottom: 1px solid var(--border);
}
.form-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

.calc-form { display: none; }
.calc-form.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.calc-form h2 {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.grid   { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 600px) {
    .grid, .grid-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    position: relative;
}

/* ── Tooltip trigger («?» рядом с названием поля) ─────────────────────── */
.tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    border: 1.2px solid var(--border-strong);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    vertical-align: middle;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tip-btn:hover,
.tip-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Tooltip popover ──────────────────────────────────────────────────── */
.tip-popover {
    position: fixed;
    z-index: 1000;
    width: min(300px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 27, 45, .18);
    padding: 14px;
    font-size: 13px;
    color: var(--text);
    animation: tipIn .15s ease;
}
@keyframes tipIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.tip-popover .tip-title {
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 8px;
    color: var(--text);
}
.tip-popover .tip-svg-wrap {
    background: #fafbff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 10px;
}
.tip-popover .tip-svg-wrap svg { display: block; width: 100%; height: auto; }
.tip-popover .tip-note {
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 12.5px;
}
.tip-popover .tip-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}
.tip-popover .tip-close:hover { background: var(--bg); color: var(--text); }

/* ── Hip roof: mode toggle (auto ↔ manual) ────────────────────────────── */
.mode-toggle {
    display: inline-flex;
    padding: 4px;
    margin-bottom: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 2px;
    max-width: 100%;
    overflow: hidden;
}
.mode-btn {
    flex: 0 1 auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.active {
    background: #fff;
    color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hip-mode[hidden] { display: none !important; }

/* Метка со встроенным чек-боксом «авто (L − W)» */
.label-with-check .label-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.auto-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.auto-toggle input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Отображение авто-рассчитанных величин */
.computed-box {
    margin-top: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fbfcfe, #f4f6fb);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
}
.computed-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}
.computed-row + .computed-row { border-top: 1px dashed var(--border); }
.computed-label { color: var(--text-muted); }
.computed-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.computed-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Поле R в auto-режиме — read-only-вид, когда чек-бокс включён */
#form-hip input[disabled] {
    background: var(--bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

input, select {
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
    width: 100%;
}
input:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
select { cursor: pointer; }

fieldset {
    margin: 16px 0 0;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px 14px;
}
legend {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 0 6px;
}

.actions { margin-top: 20px; display: flex; gap: 10px; }

/* Доп. опции расчёта (утеплитель / софит / стропила / инструменты) */
.calc-options {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0, 0, 0, 0.015);
}
.calc-options[hidden] { display: none !important; }
.calc-option {
    display: flex;
    flex-direction: row; /* перекрываем общий label { flex-direction: column } */
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.calc-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}
.calc-option .tip-btn {
    margin-left: 2px;
    flex-shrink: 0;
}

/* Переключатель в настройках */
.settings-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.settings-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.settings-switch-ui {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 999px;
    background: #c8cdd3;
    transition: background .18s ease;
}
.settings-switch-ui::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .18s ease;
}
.settings-switch input:checked + .settings-switch-ui {
    background: var(--accent);
}
.settings-switch input:checked + .settings-switch-ui::after {
    transform: translateX(18px);
}
.settings-switch input:focus-visible + .settings-switch-ui {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.settings-switch-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.settings-switch-text strong {
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
}
.settings-switch-text small {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-muted);
    font-weight: 400;
}

/* Виджеты встраивания */
.widgets-auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.widgets-auth label { max-width: 420px; }
.widgets-auth-hint { margin: 0; font-size: 12.5px; }
.widgets-toolbar {
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 14px;
}
.widgets-filters {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto;
}
.widgets-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
.widgets-filter-label { white-space: nowrap; }
#widgets-calc-filter,
#widgets-mode-filter {
    font-size: 13px;
    padding: 7px 11px;
}
#widgets-calc-filter {
    min-width: 180px;
    max-width: 280px;
}
#widgets-mode-filter {
    min-width: 110px;
}
.widgets-table-wrap {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: auto;
    background: rgba(0,0,0,.015);
}
.widgets-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.widgets-table thead th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,.02);
    white-space: nowrap;
}
.widgets-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.widgets-table tbody tr:last-child td { border-bottom: 0; }
.widgets-table-actions-th { text-align: right; }
.widgets-table-actions-td { text-align: right; white-space: nowrap; }
.widgets-table-empty {
    padding: 16px 12px !important;
    text-align: center;
}
.widgets-table .widget-card-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.widget-row-menu-wrap { position: relative; display: inline-flex; }
.widget-row-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.widget-row-menu-trigger:hover,
.widget-row-menu-trigger[aria-expanded="true"] {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--bg);
}
.widget-row-menu-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.widget-row-menu {
    position: fixed;
    min-width: 168px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(20, 27, 45, .16);
    padding: 6px;
    z-index: 2000;
    display: none;
    animation: menuIn .16s ease;
}
.widget-row-menu.open { display: block; }
.widget-row-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.widget-row-menu-item:hover { background: var(--bg); }
.widget-row-menu-item--danger { color: var(--accent); }
.widget-row-menu-item--danger:hover { background: rgba(214, 59, 37, .08); }
.widgets-table td strong { font-size: 14px; }
.widgets-table .muted { font-size: 12px; word-break: break-all; }
.widget-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.015);
}
.widget-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.widget-card-main strong { font-size: 14px; }
.widget-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.widget-card-main .muted { font-size: 12px; word-break: break-all; }
.widget-row--clickable { cursor: pointer; }
.widget-row--clickable:hover td { background: rgba(15, 23, 42, 0.03); }
.widget-flag-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.widget-flag-badge.is-on {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}
.widget-flag-badge.is-off {
    background: rgba(148, 163, 184, 0.18);
    color: #64748b;
}
.widget-flag-badge.is-na {
    background: transparent;
    color: var(--text-muted, #94a3b8);
    padding-left: 0;
}
.widget-calc-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(214, 59, 37, .1);
    color: var(--accent, #D63B25);
    white-space: nowrap;
}
.widget-calc-badge.is-soon {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.widget-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.widget-form {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.widget-form[hidden] { display: none !important; }
.widget-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -22px;
    padding: 12px 24px 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 28px rgba(20, 27, 45, .08);
    border-radius: 0 0 var(--radius) var(--radius);
}
.settings-modal-dialog .settings-card:has(#widget-form-overlay:not([hidden])) {
    padding-bottom: 0;
}
.user-card .widget-card-main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.user-role-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}
.user-role-badge.user-role-admin {
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-color: var(--accent);
}
.user-role-badge.user-role-manager {
    background: #eef6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.user-branch-name {
    font-size: 12.5px;
    margin-top: 2px;
}
.branches-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}
.branch-card {
    align-items: flex-start;
}
.branch-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.branch-card-meta-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: 12.5px;
    line-height: 1.4;
}
.branch-card-meta-label {
    color: #6b7280;
    font-weight: 500;
}
.branch-card-meta-value {
    color: #1f2937;
    word-break: break-word;
    white-space: pre-line;
}
.branch-card-meta-value a {
    color: #1d4ed8;
    text-decoration: none;
    word-break: break-all;
}
.branch-card-meta-value a:hover { text-decoration: underline; }
.branch-card-logo-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.branch-card-logo {
    display: block;
    max-width: min(220px, 100%);
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px;
}
@media (max-width: 640px) {
    .branch-card-meta-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}
.branch-form-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.branch-form-overlay[hidden] { display: none !important; }
.branch-form-overlay-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(20, 27, 45, .45);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.branch-form-overlay-panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(92vh, 920px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(20, 27, 45, .35);
    overflow: hidden;
    animation: pickerIn .18s ease;
}
.branch-form-overlay-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.branch-form-overlay-head h4 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
}
.branch-form-overlay-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.branch-form-overlay-close:hover {
    background: var(--bg);
    color: var(--text);
}
.branch-form-sheet {
    margin: 0;
    padding: 16px 16px 12px;
    border: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    flex: 1 1 auto;
}
.branch-form-sheet-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 8px -16px -12px;
    padding: 12px 16px 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
    .branch-form-overlay {
        padding: 0;
        align-items: stretch;
    }
    .branch-form-overlay-panel {
        width: 100%;
        max-height: none;
        height: 100%;
        border-radius: 0;
        animation: none;
    }
}
.branch-webhook-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.branch-webhook-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.branch-webhook-edit[hidden],
.branch-webhook-set[hidden] {
    display: none !important;
}
.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
}
.print-company-maps {
    margin-top: 4px;
}
.print-company-maps a {
    color: inherit;
    text-decoration: underline;
}
.widget-snippet {
    width: 100%;
    font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    resize: vertical;
    background: #fafbfc;
}
.widget-color-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.widget-color-field-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.widget-color-swatch {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.widget-color-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
}
.widget-color-swatch::-webkit-color-swatch {
    border: 0;
    border-radius: 12px;
}
.widget-color-swatch::-moz-color-swatch {
    border: 0;
    border-radius: 12px;
}
.widget-color-swatch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.widget-color-swatch.is-white {
    box-shadow: inset 0 0 0 1px #111;
}
.widget-color-swatch.is-white::-webkit-color-swatch {
    box-shadow: inset 0 0 0 1px #111;
}
.widget-color-swatch.is-white::-moz-color-swatch {
    box-shadow: inset 0 0 0 1px #111;
}
.widget-color-hex {
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
}
.widget-palette {
    margin-top: 4px;
    padding-top: 4px;
}
.widget-palette-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.widget-palette-swatch {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 0;
    padding: 0;
    cursor: pointer;
    appearance: none;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    position: relative;
    flex: 0 0 auto;
}
.widget-palette-swatch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.widget-palette-swatch.is-active {
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 5px #1c2233,
        inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
.widget-palette-swatch.is-custom {
    box-shadow: none;
    border: 1.5px dashed #c5ccd8;
    background-color: #f3f6f9;
}
.widget-palette-swatch.is-custom.is-active {
    border-style: solid;
    border-color: transparent;
    box-shadow:
        0 0 0 3px #fff,
        0 0 0 5px #1c2233;
}
.widget-palette-custom {
    margin-top: 14px;
}
.widget-palette-custom[hidden] { display: none !important; }

@media (max-width: 720px) {
    .widget-palette-swatch,
    .widget-color-swatch { width: 36px; height: 36px; border-radius: 10px; }
}
.widget-help-steps {
    margin: 0;
    padding-left: 1.25em;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text);
}
.widget-help-steps li { padding-left: 2px; }
.widget-help-code {
    display: block;
    margin: 8px 0 0;
    padding: 10px 12px;
    font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #fafbfc;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    color: var(--text);
}
/* Embed: хаб калькуляторов скрыт, кроме режима home=1 (RoofCalc.openHome). */
body.embed-mode:not(.embed-home) #screen-home {
    display: none !important;
}
/* Админка: крестик виджета скрыт. .header-mobile-only { display:inline-flex!important }
   иначе перебивает HTML [hidden] на мобиле. */
#btn-embed-close,
#btn-embed-close[hidden],
body:not(.embed-popup) #btn-embed-close {
    display: none !important;
}
body.embed-mode.embed-popup #btn-embed-close.header-mobile-only {
    display: none !important; /* десктоп: крестик остаётся на оверлее родителя */
}
@media (max-width: 720px) {
    body.embed-mode.embed-popup #btn-embed-close.header-mobile-only:not([hidden]) {
        display: inline-flex !important;
        position: fixed;
        top: max(10px, env(safe-area-inset-top, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        z-index: 5000;
        margin: 0;
        background: #fff;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.14);
    }
    /* Пока открыт просмотр изображения — прячем крестик закрытия виджета */
    body.embed-mode.embed-popup.bitumen-preview-open #btn-embed-close {
        display: none !important;
    }
    /* В iframe на iOS вложенный scroll у .table-wrap ломается —
       таблица должна расти вместе со страницей. */
    html.embed-mode,
    body.embed-mode {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    html.embed-mode #app-shell,
    body.embed-mode #app-shell {
        height: auto;
        max-height: none;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
    }
    body.embed-mode {
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    }
    body.embed-mode .table-wrap {
        max-height: none;
        overflow: visible;
    }
    body.embed-mode .table-wrap thead th {
        position: static;
    }
}

/* Логин на индексной странице */
body.role-manager #btn-settings,
body.role-manager .header-menu-item[data-action="settings"] {
    display: none !important;
}
body.auth-locked {
    overflow: hidden;
}
body.auth-locked #app-shell {
    overflow: hidden;
}
body.auth-locked #app-shell > *:not(#auth-gate):not(#toast-container) {
    visibility: hidden !important;
    pointer-events: none !important;
}
body.auth-locked #toast-container {
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 10050;
}
body.auth-locked #auth-gate,
body:not(.auth-locked) #auth-gate[data-force-show] {
    visibility: visible !important;
    pointer-events: auto !important;
}
body:not(.auth-locked) #auth-gate,
body.embed-mode #auth-gate {
    display: none !important;
}
.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(214, 59, 37, 0.12), transparent 55%),
        linear-gradient(160deg, #f7f5f2 0%, #ebe7e1 100%);
}
.auth-gate-card {
    width: min(400px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md, 0 16px 40px rgba(15, 23, 42, 0.12));
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.auth-gate-brand {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: rgba(214, 59, 37, 0.08);
    margin-bottom: 4px;
}
.auth-gate-card h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -0.02em;
}
.auth-gate-desc {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.45;
}
.auth-gate-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}
.auth-gate-label input {
    font: inherit;
    font-size: 14px;
    color: var(--text);
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}
.auth-gate-error {
    margin: 0;
    color: var(--accent);
    font-size: 13px;
}
.auth-gate-submit {
    margin-top: 4px;
    width: 100%;
}

.btn {
    appearance: none;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform .05s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    box-shadow: 0 3px 10px rgba(214, 59, 37, .25);
}
.btn.primary:hover { transform: translateY(-1px); }
.btn.primary:disabled,
.btn.primary.is-loading {
    opacity: 0.85;
    cursor: wait;
    transform: none;
}
.btn.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}
.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes btnSpin {
    to { transform: rotate(360deg); }
}
.btn.ghost {
    background: #fff;
    color: var(--text-muted);
    border-color: var(--border-strong);
}
.btn.ghost:hover { color: var(--text); border-color: var(--text-muted); }

/* ── Result panel ──────────────────────────────────────────────────────── */
.result-panel {
    position: relative;
}
.calc-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 20px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    border-radius: inherit;
}
.calc-loading[hidden] { display: none !important; }
.calc-loading-card {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 360px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.calc-loading-card .btn-spinner {
    width: 20px;
    height: 20px;
    border-color: rgba(214, 59, 37, 0.2);
    border-top-color: var(--accent);
}
.calc-loading-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.calc-loading-text strong {
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
}
.calc-loading-text span {
    font-size: 12.5px;
    color: var(--text-muted);
}
.result-panel.is-calculating .result-gate,
.result-panel.is-calculating .print-actions {
    opacity: 0.45;
    pointer-events: none;
}
.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.result-header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.muted { color: var(--text-muted); font-size: 13px; margin: 4px 0 0; }

.total-box {
    text-align: right;
    background: var(--accent-soft);
    border: 1px solid #f5c9c0;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    min-width: 160px;
    flex-shrink: 0;
}
.total-label { font-size: 11.5px; color: var(--accent-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.total-value { font-size: 22px; font-weight: 700; color: var(--accent-dark); margin-top: 2px; }

.table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* Один скролл — #app-shell. Не ставить overflow-x:auto + y:visible:
       браузер всё равно делает y=auto → вложенный scrollport и ломает sticky/смету. */
    max-height: none;
    overflow: visible;
}
table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 13.5px;
    table-layout: fixed;                      /* не даём длинным словам растягивать колонки */
}
.col-name { word-break: break-word; }
th, td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
thead th {
    position: sticky;
    top: 0;                                   /* sticky относительно #app-shell */
    background: #f8f9fc;
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    z-index: 1;
}
tbody tr:hover { background: #fafbff; }
tbody tr:last-child td { border-bottom: none; }

.col-qty, .col-price, .col-sum, .col-unit { text-align: right; white-space: nowrap; }
.col-unit { text-align: center; color: var(--text-muted); }
.col-sum  { font-weight: 600; color: var(--text); }
.zero-price { color: var(--text-muted); }

tbody tr.empty td {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 12px;
    font-style: italic;
}

.total-box.is-blurred,
#meta-info.is-blurred {
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
}

.result-gate {
    position: relative;
}
.result-gate.is-locked .result-gate-blur {
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
}
.contact-gate {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 16px 16px;
    background: rgba(255, 255, 255, 0.28);
}
.contact-gate[hidden] { display: none !important; }
.contact-gate-form {
    width: min(360px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 18px 16px 16px;
}
.contact-gate-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.01em;
}
.contact-gate-note {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
}
.contact-gate-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.contact-gate-field input {
    appearance: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: #fff;
}
.contact-gate-field input:focus {
    outline: 2px solid rgba(214, 59, 37, 0.25);
    border-color: var(--accent);
}
.contact-gate-error {
    margin: 0 0 10px;
    color: var(--accent-dark);
    font-size: 12.5px;
}
.contact-gate-consent {
    display: flex;
    flex-direction: row; /* перекрываем общий label { flex-direction: column } */
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text);
    font-weight: 400;
    cursor: pointer;
}
.contact-gate-consent input[type="checkbox"] {
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.contact-gate-consent-text {
    flex: 1;
    min-width: 0;
    color: var(--text);
}
.contact-policy-link {
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: normal;
}
.contact-policy-link:hover { color: var(--accent-dark, #b8321f); }

.privacy-policy-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.privacy-policy-modal[hidden] { display: none !important; }
.privacy-policy-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.privacy-policy-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(80vh, 640px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.privacy-policy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.privacy-policy-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.3;
}
.privacy-policy-close {
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
}
.privacy-policy-close:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.privacy-policy-body {
    padding: 16px;
    overflow: auto;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
}
.privacy-policy-body p { margin: 0 0 0.8em; }
.privacy-policy-empty {
    color: var(--text-muted);
    font-style: italic;
}

.contact-gate-submit {
    width: 100%;
    margin-top: 4px;
}

.print-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 32px 32px;
    color: var(--text-muted);
    font-size: 12.5px;
    text-align: center;
}

/* ── Mobile adaptation ────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Общие горизонтальные отступы уменьшаем 32 → 16 */
    .site-header,
    .welcome-intro,
    .cards-grid,
    .calc-topbar,
    .layout,
    .site-footer      { padding-left: 16px; padding-right: 16px; }

    .site-header {
        padding-top: 20px;
        padding-bottom: 4px;
        gap: 12px;
        flex-wrap: nowrap;
        align-items: center;
    }
    .brand { min-width: 0; flex: 1; gap: 10px; }
    .brand > div:last-child { min-width: 0; }
    h1 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .subtitle {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .logo { width: 40px; height: 40px; flex-shrink: 0; }

    /* Шестерню прячем — она внутри бургера */
    .header-desktop-only { display: none !important; }
    .header-mobile-only  { display: inline-flex !important; }
    .header-actions {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .welcome-intro { padding-top: 16px; }
    .welcome-intro h2 { font-size: 22px; }
    .welcome-intro p  { font-size: 13.5px; }

    .cards-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding-bottom: 24px;
    }
    .cards-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
    .cards-grid-shapes {
        grid-template-columns: minmax(0, 1fr);
    }
    .cards-grid-materials {
        grid-template-columns: minmax(0, 1fr);
    }
    .cards-grid-collections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .calc-selection {
        margin: 0 16px;
        align-self: flex-start;
        font-size: 12.5px;
        max-width: calc(100% - 32px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .welcome-back { margin-bottom: 10px; }

    .material-shape-preview {
        max-width: 100%;
        gap: 12px;
        padding: 10px 12px;
    }
    .material-shape-preview-img {
        flex-basis: 80px;
        width: 80px;
        height: 60px;
    }
    .material-shape-preview-text { font-size: 13px; }

    /* Панели уже, отступы внутри уменьшены */
    .panel { padding: 16px; }
    .layout { padding-top: 4px; padding-bottom: 24px; gap: 14px; }

    /* Превью в форме — выравнивается по новому padding: 16 */
    .form-preview {
        height: 120px;
        margin: -16px -16px 16px;
    }

    /* Топбар: «Назад» на всю ширину, табы под ним со скроллом */
    .calc-topbar {
        padding: 0;                           /* полная ширина, чтобы табы могли доходить до края */
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;                     /* страховка на iOS Safari */
    }
    .back-btn { margin: 0 16px; align-self: flex-start; }
    .tabs {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        padding: 4px 16px 8px;
        scrollbar-width: none;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 999px;
        flex-shrink: 0;
    }
    .tab.active {
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
        top: 0;
    }

    /* Смета: заголовок и total в столбик, компактнее */
    .result-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .total-box {
        text-align: left;
        min-width: 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 8px 12px;
    }
    .total-value { font-size: 20px; margin-top: 0; }

    /* Скролл-зоны расчёта: явный запрет pinch (ниже fold / таблица сметы) */
    .layout,
    .form-panel,
    .result-panel,
    .panel,
    #screen-calc,
    .table-wrap,
    .result-gate,
    .result-gate-blur {
        touch-action: pan-x pan-y;
    }
    /* Таблица растёт со страницей — скролл только #app-shell */
    th, td { padding: 7px 6px; font-size: 12.5px; }
    thead th { font-size: 10.5px; }
    .col-name  { width: auto; }
    .col-qty   { width: 56px; }
    .col-unit  { width: 32px; }
    .col-sum   { width: 84px; }
    .col-price { display: none; }              /* на мобилке скрываем цену за ед., оставляем сумму */
    thead th.col-price { display: none; }

    /* Формы: заголовок компактнее */
    .calc-form h2 { font-size: 15.5px; margin-bottom: 12px; }

    /* Кнопки на всю ширину */
    .actions { flex-direction: row; }
    .actions .btn { flex: 1; padding: 12px 14px; }

    /* Свесы 4 → 2 (уже есть при 600px, дублируем чтобы не зависеть от порядка) */
    .grid, .grid-4 { grid-template-columns: 1fr 1fr; }

    /* Инпуты покрупнее для тач-таргета */
    input, select { padding: 10px 12px; font-size: 16px; }   /* 16px предотвращает зум Safari */
}

/* Очень узкие экраны (≤380px) — свесы в один столбец */
@media (max-width: 380px) {
    .grid-4 { grid-template-columns: 1fr; }
}

/* ── Header icon button (шестерёнка настроек) ─────────────────────────── */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: color .15s ease, border-color .15s ease, transform .2s ease;
    padding: 0;
    flex-shrink: 0;
    align-self: center;
}
.icon-btn:hover  { color: var(--accent); border-color: var(--accent); }
.icon-btn.header-desktop-only:hover svg { transform: rotate(45deg); }
.icon-btn.btn-logout:hover svg { transform: none; }
.pwa-install-btn:hover svg { transform: translateY(1px); }

/* Кнопка установки: скрыта по умолчанию; только вкладка браузера (не PWA / embed). */
[data-pwa-install] { display: none !important; }
html.pwa-standalone [data-pwa-install],
body.embed-mode [data-pwa-install] { display: none !important; }

@media (display-mode: browser) and (min-width: 721px) {
    /* Десктоп: иконка в шапке */
    html.pwa-install-available:not(.pwa-standalone) .icon-btn.header-desktop-only[data-pwa-install] {
        display: inline-flex !important;
    }
}
@media (display-mode: browser) {
    /* Мобилка: пункт только в бургер-меню */
    html.pwa-install-available:not(.pwa-standalone) .header-menu-item[data-pwa-install] {
        display: flex !important;
    }
}
/* На узком экране иконка в шапке никогда не показывается (есть в бургере) */
@media (max-width: 720px) {
    html.pwa-install-available:not(.pwa-standalone) .icon-btn.header-desktop-only[data-pwa-install],
    html.pwa-install-available .icon-btn[data-pwa-install],
    .icon-btn[data-pwa-install] { display: none !important; }
}

@media (display-mode: standalone) {
    body:not(.embed-mode) {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    body:not(.embed-mode) .site-header {
        padding-top: max(8px, env(safe-area-inset-top));
    }
    [data-pwa-install] { display: none !important; }
}
.icon-btn svg { transition: transform .35s ease; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Header actions / бургер / dropdown ───────────────────────────────── */
.header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
.header-actions-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-user-login {
    max-width: min(280px, 40vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.25;
    padding: 0 2px;
    text-align: right;
}
.header-user-login[hidden] { display: none !important; }
body.embed-mode #header-user-login { display: none !important; }

/* ── Уведомления (колокольчик) ─────────────────────────────────────────── */
.notifications-wrap { position: relative; }
.notifications-wrap .icon-btn { position: relative; }
.notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
.notifications-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    max-height: min(420px, 70vh);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 27, 45, .16);
    z-index: 1250;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: menuIn .16s ease;
    touch-action: pan-x pan-y;
}
@media (max-width: 720px) {
    /* Колокольчик слева от бургера — absolute+right уводит панель за край экрана.
       Фиксируем в пределах viewport. */
    .notifications-panel {
        position: fixed;
        top: max(56px, calc(env(safe-area-inset-top, 0px) + 52px));
        left: max(12px, env(safe-area-inset-left, 0px));
        right: max(12px, env(safe-area-inset-right, 0px));
        width: auto;
        max-width: none;
        max-height: min(70vh, calc(100dvh - 72px - env(safe-area-inset-bottom, 0px)));
        touch-action: pan-x pan-y;
    }
    .notifications-panel-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .notifications-backdrop {
        touch-action: none;
    }
}
.notifications-panel[hidden] { display: none !important; }
.notifications-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}
.notifications-panel-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.notifications-panel-head .btn-link {
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}
.notifications-panel-head .btn-link-danger {
    color: #b42318;
}
.notifications-list {
    overflow: auto;
    padding: 6px;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
.notifications-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    align-items: start;
}
.notifications-item:hover { background: #f8fafc; }
.notifications-item.unread { background: #fff7ed; }
.notifications-item.unread:hover { background: #ffedd5; }
.notifications-item-main {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    min-width: 0;
    width: 100%;
}
.notifications-item-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}
.notifications-item-body {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
.notifications-item-time {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.notifications-item-delete {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}
.notifications-item-delete:hover {
    background: #fee4e2;
    color: #b42318;
}
.notifications-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.notifications-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .25);
    z-index: 1240;
    touch-action: none;
}
body.notifications-open,
body.notifications-open #app-shell {
    overflow: hidden;
    touch-action: none;
}
body.embed-mode .header-admin-only { display: none !important; }
body.embed-mode .price-warnings-banner { display: none !important; }

/* ── Предупреждения о fallback-ценах в смете ───────────────────────────── */
.price-warnings-banner {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 13px;
    line-height: 1.45;
}
.price-warnings-banner strong { display: block; margin-bottom: 4px; }
.price-warnings-banner ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.price-warnings-banner li + li { margin-top: 2px; }

.header-mobile-only { display: none; }
.header-menu-wrap   { position: relative; }
.header-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(20, 27, 45, .16);
    padding: 6px;
    z-index: 1200;
    display: none;
    animation: menuIn .16s ease;
}
.header-menu.open { display: block; }
.header-menu-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px 12px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--border);
}
.header-menu-user[hidden] { display: none !important; }
.header-menu-user-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}
.header-menu-user-login {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
body.embed-mode #header-menu-user { display: none !important; }
.header-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.header-menu-item:hover  { background: var(--bg); }
.header-menu-item svg    { color: var(--text-muted); flex-shrink: 0; }
.header-menu-item:hover svg { color: var(--accent); }
.header-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: transparent;
}
.header-menu-backdrop.open { display: block; }
@keyframes menuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ── Settings modal ───────────────────────────────────────────────────── */
.topbar-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: none;
}
.settings-modal.open { display: block; animation: fadeBg .18s ease; }

.settings-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 27, 45, .45);
    backdrop-filter: blur(2px);
}
.settings-modal-dialog {
    position: absolute;
    inset: 40px;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--bg);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(20, 27, 45, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pickerIn .2s ease;
}
.settings-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.settings-modal-head .topbar-title {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* ── Табы настроек ────────────────────────────────────────────────────── */
.settings-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s ease, border-color .15s ease;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.settings-tab svg { flex-shrink: 0; }
.settings-tab-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.settings-tab.active .settings-tab-badge {
    color: var(--text);
    border-color: var(--border-strong);
}
.settings-tab-badge.is-complete {
    background: rgba(31, 143, 95, .12);
    border-color: rgba(31, 143, 95, .35);
    color: var(--ok);
}
.settings-tab-badge.is-empty {
    background: rgba(214, 59, 37, .08);
    border-color: rgba(214, 59, 37, .25);
    color: var(--accent);
}

/* Панели табов: скрываем неактивные, активная растягивается на всю высоту */
.settings-tabpanel[hidden] { display: none !important; }
.settings-tabpanel { min-width: 0; }

/* Настройки калькуляторов: список + подтабы */
.calc-settings-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    min-height: 0;
}
.calc-settings-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.calc-settings-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.calc-settings-nav-item:hover { border-color: var(--border-strong); background: var(--bg); }
.calc-settings-nav-item.active {
    border-color: var(--accent);
    background: rgba(214, 59, 37, .06);
    color: var(--accent);
    font-weight: 600;
}
.calc-settings-nav-item.is-soon { opacity: .85; }
.calc-settings-nav-title { min-width: 0; line-height: 1.35; }
.calc-settings-nav-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
    white-space: nowrap;
}
.calc-settings-main { min-width: 0; }
.calc-settings-calc-panel[hidden],
.calc-settings-soon[hidden],
.calc-settings-subpanel[hidden] { display: none !important; }
.calc-settings-subtabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.calc-settings-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s ease;
}
.calc-settings-subtab:hover { border-color: var(--border-strong); color: var(--text); }
.calc-settings-subtab.active {
    border-color: var(--accent);
    background: rgba(214, 59, 37, .08);
    color: var(--accent);
    font-weight: 600;
}
.calc-settings-subpanel { min-width: 0; }
.calc-settings-subpanel--mapping:not([hidden]) {
    display: flex;
    flex-direction: column;
}
.calc-settings-subpanel--mapping .mapping-table-wrap {
    flex: 1 1 auto;
    min-height: 320px;
    max-height: min(70vh, 720px);
}
.calc-settings-soon {
    padding: 28px 8px;
    text-align: center;
}
.calc-settings-soon h3 { margin: 0 0 8px; }
.settings-modal-back {
    display: inline-flex;
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.settings-modal-back:hover { background: var(--bg); color: var(--text); }
.settings-modal-close {
    display: inline-flex;
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}
.settings-modal-close:hover { background: var(--bg); color: var(--text); }
.settings-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Тело модалки — прокручиваемое, кроме шапки */
.settings-modal-dialog .settings-wrap {
    max-width: none;
    margin: 0;
    padding: 20px 24px 28px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: grid;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}
.settings-modal-dialog .settings-card {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}

/* блокируем скролл фона, когда модалка открыта */
body.settings-open,
body.settings-open #app-shell { overflow: hidden; }
body.settings-open .site-header,
body.settings-open .header-menu,
body.settings-open .header-menu-backdrop {
    display: none !important;
}

.settings-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 24px;
    min-width: 0;
}
.settings-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.settings-card-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.settings-card-desc {
    margin: 6px 0 16px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.5;
}
.settings-card-desc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: var(--bg);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.settings-card-desc.muted-hint {
    margin-top: -8px;
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 8px 12px;
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 16px;
    margin-bottom: 16px;
    min-width: 0;
}
.settings-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    min-width: 0;
}
.settings-grid input,
.settings-grid select { min-width: 0; max-width: 100%; }
.settings-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 13px;
}
.status-item { display: inline-flex; align-items: center; gap: 8px; }
.status-label { color: var(--text-muted); }
.status-value { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

.dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block;
    background: var(--border-strong);
    flex-shrink: 0;
}
.dot-idle   { background: var(--border-strong); }
.dot-ok     { background: var(--ok); box-shadow: 0 0 0 3px rgba(31, 143, 95, .15); }
.dot-error  { background: var(--accent); }
.dot-mapped { background: var(--ok); }

.settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-toolbar {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.mapping-search {
    min-width: 200px;
    padding: 7px 11px;
    font-size: 13px;
}
#mapping-filter { font-size: 13px; padding: 7px 11px; }

.mapping-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mapping-count { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── Прогресс сопоставления ───────────────────────────────────────────── */
.mapping-progress {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.mapping-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.mapping-progress-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.mapping-progress-count {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 12.5px;
}
.mapping-progress-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
.mapping-progress-bar {
    position: relative;
    height: 10px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.mapping-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--accent) 0%, var(--ok) 100%);
    border-radius: 999px;
    transition: width .35s ease;
}
.mapping-progress-fill.is-complete {
    background: var(--ok);
}
.mapping-progress-remain {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Таблица сопоставления ────────────────────────────────────────────── */
.mapping-table-wrap {
    width: 100%;
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    background: #fff;
}
.mapping-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 12.5px;
}
.mapping-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 10.5px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.mapping-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.mapping-table tbody tr:last-child td { border-bottom: none; }
.mapping-table tbody tr.is-mapped { background: #f6fbf8; }
.mapping-table tbody tr.is-unmapped { background: #fff; }
.mapping-table tbody tr.mapping-empty td {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
    font-style: italic;
}

.chip-variant {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: #334155;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    white-space: nowrap;
}
.cell-muted { color: var(--text-muted); font-size: 12px; }

.mapping-table .col-status    { width: 28px; text-align: center; }
.mapping-table .col-product   { min-width: 200px; }
.mapping-table .col-variant   { width: 150px; }
.mapping-table .col-cat       { width: 140px; }
.mapping-table .col-price     { width: 110px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mapping-table .col-1c        { min-width: 220px; }
.mapping-table .col-price-1c  { width: 110px; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--ok); }
.mapping-table .col-actions   { width: 130px; text-align: right; white-space: nowrap; }

.mapping-base-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 4px 8px;
    border: 1px dashed transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .15s ease, border-color .15s ease;
}
.mapping-base-price:hover,
.mapping-base-price:focus-visible {
    background: rgba(20, 27, 45, .05);
    border-color: var(--border-strong, #c9d0dc);
    outline: none;
}
.mapping-base-price.is-overridden {
    color: var(--accent, #d63b25);
    border-color: rgba(214, 59, 37, .28);
    background: rgba(214, 59, 37, .06);
}
.mapping-base-price-mark {
    font-size: 11px;
    opacity: .75;
}

.base-price-editor {
    position: fixed;
    inset: 0;
    z-index: 3500;
}
.base-price-editor-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(20, 27, 45, .28);
    cursor: pointer;
}
.base-price-editor-panel {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    padding: 14px 14px 12px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(20, 27, 45, .28);
    animation: pickerIn .16s ease;
}
.base-price-editor-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #141b2d);
}
.base-price-editor-name {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted, #6b7285);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.base-price-editor-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted, #6b7285);
}
.base-price-editor-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border, #d7dde8);
    border-radius: 10px;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.base-price-editor-input:focus {
    outline: none;
    border-color: var(--accent, #d63b25);
    box-shadow: 0 0 0 3px rgba(214, 59, 37, .15);
}
.base-price-editor-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}
.base-price-editor-actions .btn {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
}
.base-price-editor-reset {
    margin-right: auto;
}

.mapping-table tr.is-unmapped .col-price-1c { color: var(--text-muted); font-weight: 400; }

/* Мобильный текст статуса виден только на мобиле */
.mobile-status-text { display: none; }

.cell-product-name {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.cell-product-unit {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}
.cell-1c-name {
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    white-space: nowrap;
}
.cell-1c-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}
.cell-1c-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
}

/* ── Кнопка «Связать» и чипы действий ─────────────────────────────────── */
.btn-link-1c {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.btn-link-1c:hover {
    border-style: solid;
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.btn-link-arrow { transition: transform .15s ease; }
.btn-link-1c:hover .btn-link-arrow { transform: translateX(2px); }

.chip-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.chip-art { font-size: 11px; }
.chip-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip-btn:hover { background: var(--bg); border-color: var(--border-strong); }
.chip-btn-change:hover { color: var(--text); }
.chip-btn-remove { font-size: 18px; }
.chip-btn-remove:hover { color: var(--accent); background: var(--accent-soft); border-color: rgba(214, 59, 37, .3); }

/* ── Picker-модалка (поиск товара 1С) ─────────────────────────────────── */
.picker-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.picker-modal.open { display: flex; animation: fadeBg .18s ease; }
.picker-backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 27, 45, .45);
    backdrop-filter: blur(2px);
}
.picker-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    max-height: min(85vh, 720px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(20, 27, 45, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pickerIn .2s ease;
}
@keyframes fadeBg { from { opacity: 0; } to { opacity: 1; } }
@keyframes pickerIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}
.picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}
.picker-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.picker-close {
    position: relative;
    z-index: 2;
    width: 36px; height: 36px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}
.picker-close:hover { background: var(--bg); color: var(--text); }
.picker-close:focus-visible {
    outline: 2px solid rgba(214, 59, 37, .45);
    outline-offset: 1px;
}

.picker-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}
.picker-search input {
    flex: 1;
    border: none;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}
.picker-search input:focus { box-shadow: 0 0 0 2px rgba(214, 59, 37, .2); }

.picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--border);
    background: #fff;
}
.picker-filter {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    user-select: none;
}
.picker-filter input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.picker-filter .settings-switch-ui {
    flex-shrink: 0;
}

.picker-status {
    padding: 8px 18px;
    font-size: 12px;
    color: var(--text-muted);
    background: #fafbff;
    border-bottom: 1px solid var(--border);
}
.picker-list {
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    padding: 8px;
}
.picker-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background .1s ease, border-color .1s ease;
}
.picker-item:hover, .picker-item:focus-visible {
    background: var(--bg);
    border-color: var(--border);
    outline: none;
}
.picker-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}
.picker-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
    align-items: baseline;
}
.picker-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.picker-price { color: var(--ok); font-weight: 700; margin-left: auto; }
.picker-price--empty { color: var(--muted); font-weight: 500; }

/* ── Toast-уведомления ────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    right: 20px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2000;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 40px));
}
.toast {
    pointer-events: auto;
    background: #1c2233;
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20, 27, 45, .25);
    font-size: 13.5px;
    line-height: 1.4;
    animation: toastIn .2s ease;
    border-left: 3px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.toast-msg { min-width: 0; }
.toast-action {
    appearance: none;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}
.toast-action:hover { background: rgba(255, 255, 255, .22); }
.toast-ok    { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--accent); }
.toast.leave { animation: toastOut .35s ease forwards; }

/* ── Подтверждение выхода (HTML, не системный confirm) ───────────────── */
.logout-confirm {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px;
    pointer-events: auto;
}
.logout-confirm[hidden] { display: none !important; }
.logout-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}
.logout-confirm-card {
    position: relative;
    z-index: 1;
    width: min(340px, calc(100vw - 40px));
    background: #1c2233;
    color: #fff;
    padding: 16px 16px 14px;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(20, 27, 45, .35);
    border-left: 3px solid var(--accent);
    animation: toastIn .2s ease;
}
.logout-confirm-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 650;
}
.logout-confirm-note {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.72);
}
.logout-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.logout-confirm-actions .btn {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
}
.logout-confirm-actions .btn.ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.logout-confirm-actions .btn.ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

/* ── Отправка сметы в Bitrix24 ───────────────────────────────────────── */
.b24-send-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.b24-send-modal[hidden] { display: none !important; }
.b24-send-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.b24-send-card {
    position: relative;
    z-index: 1;
    width: min(420px, calc(100vw - 40px));
    background: #fff;
    color: var(--text);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(20, 27, 45, .28);
    padding: 18px 18px 16px;
}
.b24-send-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.b24-send-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 650;
}
.b24-send-portal {
    margin: -2px 0 12px;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-all;
}
.b24-send-portal[hidden] { display: none !important; }
.b24-send-portal strong {
    color: var(--text);
    font-weight: 600;
}
.b24-send-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.b24-send-desc {
    margin: 0 0 14px;
    font-size: 13px;
}
.b24-send-card select {
    appearance: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 36px 10px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
    cursor: pointer;
}
.b24-entity-type {
    display: flex;
    gap: 10px;
    margin: 14px 0;
}
.b24-radio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    color: var(--text-muted);
}
.b24-radio:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-dark);
}
.b24-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
}
.b24-radio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.b24-radio-icon svg {
    display: block;
}
.b24-send-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
#b24-create-fields,
#b24-attach-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#b24-create-fields[hidden],
#b24-attach-fields[hidden] {
    display: none !important;
}
.b24-send-card input[type="text"],
.b24-send-card input[type="tel"] {
    appearance: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: #fff;
}
.b24-send-error {
    margin: 10px 0 0;
    font-size: 13px;
    color: #b91c1c;
}
.b24-send-error[hidden] { display: none !important; }
.b24-send-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.b24-preview-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.b24-preview-card strong {
    font-size: 15px;
    line-height: 1.35;
}
body.embed-mode #btn-send-b24,
body.embed-mode #b24-send-modal {
    display: none !important;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateX(20px); }
}

/* ── Планшет: чуть уплотняем модалку ───────────────────────────────────── */
@media (max-width: 900px) {
    .settings-modal-dialog { inset: 20px; }
}

/* ── Мобильные адаптации ─────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Модалка настроек — во весь экран, как bottom-sheet */
    .settings-modal-dialog {
        inset: 0;
        border-radius: 0;
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: 100dvh;
        animation: sheetIn .22s ease;
        /* Важно: оба оси hidden. Если задать только overflow-x:hidden,
           overflow-y становится auto — появляется второй скролл поверх
           .settings-wrap, и на тач-устройствах список сопоставления
           «не скроллится». */
        overflow: hidden;
    }
    .settings-modal-dialog .settings-wrap {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        /* iOS: явная высота flex-ребёнка, иначе min-height:auto раздувает
           wrap и скролл «ломается» */
        flex: 1 1 auto;
        min-height: 0;
        height: 0; /* трюк: flex:1 + height:0 → занимает остаток и скроллится */
    }
    .calc-settings-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .calc-settings-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    .calc-settings-nav-item {
        flex: 0 0 auto;
        max-width: 240px;
    }
    .settings-modal-dialog .settings-card {
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible; /* не клипать длинный список карточек */
        overflow-wrap: anywhere;
    }
    .settings-modal-head {
        padding: 10px 12px;
        /* head вне scroll-контейнера — sticky не нужен */
        position: relative;
        top: auto;
        z-index: 1;
    }
    .settings-modal-head .topbar-title { font-size: 16px; }

    /* Табы на мобиле — горизонтальный скролл, не ломают ширину */
    .settings-tabs {
        padding: 6px 8px 0;
        position: relative;
        top: auto;
        z-index: 1;
        flex-shrink: 0;
        max-width: 100%;
    }
    .settings-tab  { padding: 8px 10px 10px; font-size: 12.5px; gap: 5px; }
    .settings-tab svg { width: 14px; height: 14px; }
    .settings-tab-badge { font-size: 10.5px; padding: 1px 6px; }

    .settings-modal-dialog .settings-wrap { padding: 12px 12px 28px; gap: 12px; }
    .settings-card { padding: 14px; border-radius: 12px; }
    .widget-form-actions {
        margin-left: -14px;
        margin-right: -14px;
        margin-bottom: -14px;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }
    .settings-card-head { align-items: flex-start; gap: 8px; }
    .settings-card-head h3 { font-size: 15.5px; }
    /* Заголовок карточки прячем на мобиле — его уже отражает активный таб */
    .settings-card-head h3 { display: none; }
    .settings-card-desc { font-size: 12.5px; margin-bottom: 12px; }
    .settings-card-desc.muted-hint { padding: 8px 10px; }

    .widget-form input,
    .widget-form select,
    .widget-form textarea,
    .widget-print-header input,
    .widget-print-header textarea,
    .widget-contact-form-cfg input,
    .widget-contact-form-cfg textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px; /* без зума iOS */
    }
    .widgets-table thead { display: none; }
    .widgets-table,
    .widgets-table tbody,
    .widgets-table tr,
    .widgets-table td { display: block; width: 100%; }
    .widgets-table tr {
        padding: 12px;
        border-bottom: 1px solid var(--border);
    }
    .widgets-table tr:last-child { border-bottom: 0; }
    .widgets-table td {
        padding: 4px 0;
        border: 0;
    }
    .widgets-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
    .widgets-table td[data-label="Действия"]::before { display: none; }
    .widgets-table .widget-row-menu-wrap { justify-content: flex-end; width: 100%; }

    .widget-card {
        flex-direction: column;
        align-items: stretch;
    }
    .widget-card-actions { width: 100%; }
    .widget-card-actions .btn { flex: 1; }

    /* Логи → карточки на мобиле */
    .logs-table-wrap {
        max-height: none;
        border: none;
        background: transparent;
        overflow: visible;
    }
    .logs-table {
        min-width: 0;
        width: 100%;
        display: block;
    }
    .logs-table thead { display: none; }
    .logs-table tbody { display: block; }
    .logs-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
    }
    .logs-table tbody tr.empty {
        display: block;
        text-align: center;
    }
    .logs-table tbody tr.empty td {
        border: none;
        padding: 16px 8px;
    }
    .logs-table tbody td {
        display: block;
        padding: 0;
        border: none;
        min-width: 0;
    }
    .logs-table tbody td:nth-child(1) {
        grid-column: 1 / -1;
        font-size: 11.5px;
        color: var(--text-muted);
    }
    .logs-table tbody td:nth-child(2) { grid-column: 1 / -1; }
    .logs-table tbody td:nth-child(3) { grid-column: 1 / -1; }
    .logs-table tbody td:nth-child(4) {
        font-weight: 650;
    }
    .logs-table tbody td:nth-child(5),
    .logs-table tbody td:nth-child(6) {
        grid-column: 1 / -1;
        font-size: 12px;
        color: var(--text-muted);
    }
    .logs-table tbody td:nth-child(7) {
        text-align: right;
        font-weight: 650;
    }
    .logs-utm {
        max-width: none;
    }
    .logs-pager {
        flex-wrap: wrap;
        justify-content: center;
    }

    .settings-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .settings-grid-2 {
        grid-template-columns: 1fr;
    }
    .settings-grid label { font-size: 12px; min-width: 0; }
    .settings-grid input,
    .settings-grid select {
        font-size: 16px;
        padding: 10px 12px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Длинные code внутри описаний — переносим по символам */
    .settings-card-desc code {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .settings-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 12px;
        font-size: 12.5px;
    }

    .settings-toolbar { width: 100%; flex-direction: column; align-items: stretch; }
    .mapping-search   { min-width: 0; width: 100%; font-size: 15px; padding: 10px 12px; }
    #mapping-filter   { width: 100%; font-size: 15px; padding: 10px 12px; }

    /* Легенду прячем: статус виден в каждой карточке */
    .mapping-legend .legend-item { display: none; }
    .mapping-count  { margin-left: 0; width: 100%; text-align: left; font-size: 12px; color: var(--text-muted); }

    /* Прогресс-бар */
    .mapping-progress { padding: 10px 12px; }
    .mapping-progress-title { font-size: 12px; }
    .mapping-progress-pct   { font-size: 14px; }

    /* ── Таблица → карточный список на мобиле ─────────────────────────── */
    .mapping-table-wrap {
        max-height: none;
        border: none;
        background: transparent;
        overflow: visible;
        /* скролл даёт .settings-wrap, не этот wrap */
        -webkit-overflow-scrolling: auto;
    }
    .mapping-table { min-width: 0; width: 100%; display: block; }
    .mapping-table thead { display: none; }
    .mapping-table tbody { display: block; }

    .mapping-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
    }
    .mapping-table tbody tr.is-mapped { background: #f6fbf8; border-color: rgba(31, 143, 95, .25); }
    .mapping-table tbody tr:last-child { margin-bottom: 0; }
    .mapping-table tbody tr.mapping-empty { display: block; text-align: center; }
    .mapping-table tbody tr.mapping-empty td { border: none; padding: 8px; }

    .mapping-table tbody td {
        display: block;
        padding: 0;
        border: none;
        white-space: normal;
        width: auto !important;
        min-width: 0;
        color: var(--text);
    }

    /* Статус — первый ряд, чип */
    .mapping-table .col-status {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .mobile-status-text { display: inline; }
    .mapping-table tr.is-mapped   .col-status { color: var(--ok); }
    .mapping-table tr.is-unmapped .col-status { color: var(--text-muted); }

    /* Название товара — крупно, полная ширина */
    .mapping-table .col-product {
        grid-column: 1 / -1;
        font-size: 14px;
    }
    .cell-product-name { font-size: 14px; max-width: none; white-space: normal; font-weight: 700; }
    .cell-product-unit { display: inline-block; margin-left: 6px; }

    /* Категория и Базовая цена — рядом */
    .mapping-table .col-cat,
    .mapping-table .col-variant,
    .mapping-table .col-price {
        font-size: 12px;
        color: var(--text-muted);
    }
    .mapping-table .col-cat::before,
    .mapping-table .col-variant::before,
    .mapping-table .col-price::before,
    .mapping-table .col-1c::before,
    .mapping-table .col-price-1c::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        margin-bottom: 2px;
        font-weight: 600;
    }
    .mapping-table .col-price { text-align: right; }
    .mapping-base-price {
        padding: 8px 10px;
        border-color: var(--border, #d7dde8);
        background: rgba(20, 27, 45, .03);
        min-height: 40px;
    }

    /* Товар в 1С */
    .mapping-table .col-1c {
        grid-column: 1 / -1;
        margin-top: 4px;
    }
    .cell-1c-name  { white-space: normal; max-width: none; font-size: 13px; }
    .cell-1c-empty { font-size: 12.5px; }

    /* Цена 1С — крупно, справа */
    .mapping-table .col-price-1c {
        grid-column: 1 / -1;
        text-align: right;
        font-size: 15px;
    }

    /* Действия — растянуть на всю ширину */
    .mapping-table .col-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 6px;
        margin-top: 8px;
    }
    .mapping-table .col-actions .btn-link-1c {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }
    .mapping-table .col-actions .chip-btn {
        width: 40px;
        height: 40px;
        margin-left: 0;
    }
    .mapping-table .col-actions .chip-btn-change { flex: 1; width: auto; }
    .mapping-table .col-actions .chip-btn-remove { flex: 0 0 40px; }

    /* Кнопки-действия — в столбик, каждая на всю ширину */
    .settings-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .settings-actions .btn {
        flex: none;
        width: 100%;
        padding: 12px 14px;
        font-size: 14px;
        white-space: normal;
    }
    .widgets-filters {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .widgets-filter {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    #widgets-calc-filter,
    #widgets-mode-filter {
        width: 100%;
        max-width: none;
        font-size: 15px;
        padding: 10px 12px;
    }

    .toast-container { right: 12px; left: 12px; max-width: none; bottom: 12px; }

    /* Picker-модалка тоже во весь экран на мобиле */
    .picker-modal { padding: 0; }
    .picker-dialog {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        animation: sheetIn .22s ease;
    }
    .picker-search input { font-size: 16px; }
}

@keyframes sheetIn {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
}

/* ── Print / PDF company header ────────────────────────────────────────── */
.widget-section-title {
    margin: 18px 0 0;
    font-size: 14px;
    font-weight: 650;
}
.widget-print-header,
.widget-contact-form-cfg {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.widget-print-header label,
.widget-contact-form-cfg label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.widget-print-header input,
.widget-print-header textarea,
.widget-contact-form-cfg input,
.widget-contact-form-cfg textarea {
    appearance: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: #fff;
    resize: vertical;
}

.print-company-header {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--accent);
}
.print-company-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.print-company-logo {
    max-height: 56px;
    max-width: 200px;
    object-fit: contain;
}
.print-company-contacts {
    text-align: right;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
}
.print-company-contacts a {
    color: inherit;
    text-decoration: none;
}
.print-company-messengers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}
.print-company-messengers a {
    font-weight: 600;
    color: var(--accent);
}
.print-company-offer {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.print-company-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 16px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
}
.print-company-meta-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.print-only { display: none !important; }

/* Offscreen-клон для PDF: фиксированная «десктопная» ширина A4, без мобильных сжатий */
.pdf-export-host {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 794px;
    background: #fff;
    color: var(--text);
    pointer-events: none;
    z-index: -1;
}
.pdf-export-host .pdf-export-panel {
    padding: 0;
    border: none;
    box-shadow: none;
    background: #fff;
}
.pdf-export-host .print-company-header,
.pdf-export-host .print-only {
    display: block !important;
}
.pdf-export-host .table-wrap {
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid #ddd;
}
.pdf-export-host thead th {
    position: static !important;
}
.pdf-export-host .result-header {
    flex-direction: row !important;
    align-items: flex-start !important;
}
.pdf-export-host .total-box {
    display: block !important;
    text-align: right !important;
    min-width: 160px;
}
.pdf-export-host .col-price,
.pdf-export-host thead th.col-price {
    display: table-cell !important;
}
.pdf-export-host .result-gate-blur,
.pdf-export-host .total-box,
.pdf-export-host #meta-info,
.pdf-export-host .muted {
    filter: none !important;
}

/* Логи Bitrix */
.logs-toolbar { gap: 8px; }
.logs-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    max-height: min(60vh, 520px);
}
.logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.logs-table th,
.logs-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.logs-table th {
    position: sticky;
    top: 0;
    background: #f8f9fc;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    z-index: 1;
}
.logs-table tr:last-child td { border-bottom: none; }
.logs-table .empty td {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    padding: 24px 12px;
}
.logs-event {
    display: inline-block;
    font-size: 11px;
    font-weight: 650;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.logs-event.is-created { background: #e8f7ee; color: #146c36; }
.logs-event.is-comment { background: #eef3ff; color: #274690; }
.logs-event.is-error { background: #fdecea; color: #b42318; }
.logs-utm {
    font-size: 11.5px;
    color: var(--text-muted);
    max-width: 180px;
    word-break: break-word;
}
.logs-error {
    color: #b42318;
    font-size: 11.5px;
    margin-top: 4px;
}
.logs-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }
    html, body {
        background: #fff !important;
        height: auto !important;
        overflow: visible !important;
    }
    #app-shell {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.is-printing .pdf-export-host { display: none !important; }
    .site-header, .calc-topbar, .form-panel, .print-actions, .site-footer, .actions,
    #settings-modal, #picker-modal, #b24-send-modal, .toast-container, .icon-btn,
    .contact-gate, #btn-embed-close, #auth-gate, .privacy-policy-modal,
    #bitumen-preview-lightbox, .base-price-editor, .branch-form-overlay, .widget-form-overlay { display: none !important; }
    .print-only { display: block !important; }
    .layout {
        display: block !important;
        grid-template-columns: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    .panel {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .result-panel {
        width: 100% !important;
        max-width: none !important;
    }
    .result-header {
        flex-direction: row !important;
        align-items: flex-start !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .total-box {
        display: block !important;
        text-align: right !important;
    }
    .table-wrap {
        max-height: none !important;
        overflow: visible !important;
        border: 1px solid #ddd;
    }
    thead { display: table-header-group; }
    thead th { position: static !important; }
    .col-price,
    thead th.col-price { display: table-cell !important; }
    tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    tbody tr:hover { background: transparent; }
    .print-company-header {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    #screen-home,
    #screen-welcome { display: none !important; }
    #screen-calc {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .result-gate,
    .result-gate-blur {
        filter: none !important;
        position: static !important;
        overflow: visible !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .result-gate.is-locked .result-gate-blur,
    .total-box.is-blurred,
    #meta-info.is-blurred {
        filter: none !important;
        pointer-events: auto !important;
        user-select: auto !important;
    }
}