:root {
    --bg: #f5f7fa;
    --bg-soft: #eef2f6;
    --card: #ffffff;
    --card-soft: #fafbfd;
    --text: #132238;
    --text-2: #31455f;
    --text-3: #607089;
    --line: #d9e1eb;
    --line-2: #c7d2df;
    --primary: #17335c;
    --primary-2: #274a7d;
    --primary-3: #4268a3;
    --accent: #d93025;
    --accent-2: #ef4738;
    --accent-soft: #fff0ee;
    --warning: #f59e0b;
    --success: #15803d;
    --danger: #dc2626;
    --shadow-sm: 0 10px 24px rgba(17, 34, 56, .06);
    --shadow-md: 0 20px 40px rgba(17, 34, 56, .10);
    --radius-xl: 26px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 12px;
    --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f7f9fc 0%, var(--bg) 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { border: 0; background: none; }
input, select, textarea { min-width: 0; }

.container { width: min(var(--container), calc(100% - 32px)); margin: 0 auto; }
.narrow { width: min(780px, calc(100% - 32px)); margin: 0 auto; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.section { padding: 56px 0; }
.section--muted { background: linear-gradient(180deg, #f2f5f9 0%, #edf1f5 100%); }
.section--tight { padding-top: 36px; padding-bottom: 36px; }

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--primary); line-height: 1.08; }
p { margin: 0; color: var(--text-2); line-height: 1.68; }
small { color: var(--text-3); }
strong { color: inherit; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow i { font-size: 12px; }

.card,
.package-card,
.catalog-card,
.work-card,
.feature-card,
.step-card,
.object-card,
.contact-highlight,
.result-card,
.admin-stat-card,
.auth-card,
.profile-card,
.orders-card,
.summary-card,
.preview-panel,
.callback-card,
.pricing-panel,
.layout-panel,
.sidebar-box,
.spec-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card, .auth-card, .profile-card, .orders-card, .contact-highlight, .callback-card, .pricing-panel, .layout-panel, .sidebar-box, .summary-card {
    padding: 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    box-shadow: 0 18px 36px rgba(217, 48, 37, .18);
}
.btn--primary:hover { box-shadow: 0 20px 42px rgba(217, 48, 37, .25); }
.btn--ghost {
    color: var(--primary);
    background: #fff;
    border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--line-2); background: var(--card-soft); }
.btn--secondary {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: #f5cdc9;
}
.btn--danger { color: #fff; background: linear-gradient(135deg, #ef4444, #dc2626); }
.btn--small { min-height: 40px; padding: 9px 14px; font-size: 13px; }
.btn--lg { min-height: 52px; padding: 14px 20px; }
.btn--full { width: 100%; }
.icon-link {
    width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: #fff; color: var(--primary);
}
.icon-link:hover { background: var(--card-soft); }

.topline {
    background: var(--primary);
    color: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.topline__inner {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.topline__items {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    min-width: 0;
}
.topline__items span, .topline__items a {
    display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.9);
}
.topline__items i { color: #ffb4ae; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.brand__mark {
    width: 48px; height: 48px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-3));
    box-shadow: 0 14px 28px rgba(23, 51, 92, .18);
    flex: 0 0 auto;
}
.brand__text { display: grid; gap: 2px; min-width: 0; }
.brand__text strong { font-size: 19px; font-weight: 800; color: var(--primary); }
.brand__text small { font-size: 12px; color: var(--text-3); }
.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.site-nav a {
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.site-nav a:hover, .site-nav a.is-active {
    background: var(--bg-soft);
    color: var(--primary);
}
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-toggle {
    display: none;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--bg-soft);
    color: var(--primary);
}

.flashes { padding-top: 18px; display: grid; gap: 10px; }
.flash {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
}
.flash i { font-size: 16px; }
.flash--success { border-color: #bce3c8; background: #f0fbf4; }
.flash--success i { color: var(--success); }
.flash--danger { border-color: #f6c1be; background: #fff1f0; }
.flash--danger i { color: var(--danger); }
.flash--warning { border-color: #f5dfb0; background: #fff8e7; }
.flash--warning i { color: var(--warning); }

.hero {
    padding: 44px 0 20px;
}
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
    gap: 28px;
    align-items: stretch;
}
.hero__content,
.hero__side { min-width: 0; }
.hero__content h1 {
    margin-top: 16px;
    font-size: clamp(34px, 5vw, 58px);
    letter-spacing: -.03em;
}
.hero__lead {
    margin-top: 16px;
    font-size: 18px;
    color: var(--text-2);
    max-width: 760px;
}
.hero__actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.hero__points {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.hero-point {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.hero-point strong { display: block; margin-bottom: 8px; font-size: 14px; }
.hero-point p { font-size: 13px; line-height: 1.5; color: var(--text-3); }
.hero-point i { color: var(--accent); margin-bottom: 10px; font-size: 18px; }

.hero-stage {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 18px;
    padding: 22px;
    background:
        radial-gradient(circle at top right, rgba(217,48,37,.12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    position: relative;
    overflow: hidden;
}
.hero-stage__top {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.hero-stage__title strong { display:block; font-size: 18px; color: var(--primary); }
.hero-stage__title small { color: var(--text-3); }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: #fff; color: var(--text-2); font-size: 12px; font-weight: 700;
}
.chip--accent { color: var(--accent); background: var(--accent-soft); border-color: #f3c0bb; }
.chip--dark { color: #fff; background: var(--primary); border-color: transparent; }
.brand-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-pill {
    padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
    background: #fff; font-size: 13px; font-weight: 800; color: var(--primary);
}

.hero-layout {
    min-height: 320px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #fdfefe 0%, #eef3f8 100%);
    position: relative;
}
.hero-layout__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.hero-layout__header strong { font-size: 15px; color: var(--primary); }
.hero-layout__header span { font-size: 12px; color: var(--text-3); }
.module-rack {
    display: grid;
    gap: 10px;
}
.module-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}
.module-cell {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid #cfd8e5;
    background: linear-gradient(180deg, #ffffff 0%, #edf3f8 100%);
}
.module-cell.is-group { background: linear-gradient(180deg, #2a5aa6 0%, #1f4b92 100%); border-color: #254a82; }
.module-cell.is-aux { background: linear-gradient(180deg, #f7aa25 0%, #ed9820 100%); border-color: #d58a1d; }
.module-cell.is-main { background: linear-gradient(180deg, #334b72 0%, #1f3556 100%); border-color: #273a5a; }
.hero-layout__notes {
    margin-top: 16px;
    display: grid; gap: 10px;
}
.hero-note {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.9);
}
.hero-note strong { font-size: 14px; }
.hero-note span { font-size: 12px; color: var(--text-3); }

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.section-head h1, .section-head h2 { margin-top: 8px; font-size: clamp(28px, 4vw, 42px); }
.section-head p { max-width: 640px; }
.section-head--compact h2, .section-head--compact h1 { font-size: 24px; }

.object-grid,
.feature-grid,
.steps-grid,
.catalog-grid,
.works-grid,
.dashboard-stats,
.admin-grid,
.package-grid,
.spec-grid,
.cta-grid,
.brand-grid,
.choice-grid,
.addons-grid,
.price-lines,
.info-grid {
    display: grid;
    gap: 18px;
}
.object-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.works-grid--full { grid-template-columns: 1fr; }
.dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.admin-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); }
.admin-grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.addons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.object-card,
.package-card,
.feature-card,
.step-card,
.catalog-card,
.work-card,
.admin-stat-card,
.spec-card { padding: 22px; }
.object-card__icon,
.feature-card i,
.step-card span,
.admin-stat-card i {
    width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: #f1f5fb; color: var(--accent); border: 1px solid var(--line);
    margin-bottom: 16px;
}
.object-card h3, .package-card h3, .feature-card h3, .step-card h3, .catalog-card h3, .work-card h3 { font-size: 22px; }
.object-card p, .package-card p, .feature-card p, .step-card p, .catalog-card p, .work-card p { margin-top: 12px; font-size: 14px; }
.object-card__meta, .meta-row, .work-card__meta, .catalog-card__meta { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.package-card--featured {
    border-color: #f3b1aa;
    box-shadow: 0 22px 40px rgba(217, 48, 37, .08);
    position: relative;
}
.package-card--featured::after {
    content: 'Рекомендуем'; position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 800; color: var(--accent);
    background: var(--accent-soft); padding: 7px 11px; border-radius: 999px; border: 1px solid #f1cbc7;
}
.check-list, .mini-specs, .timeline-list, .inline-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.check-list li, .mini-specs li, .inline-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); }
.check-list i, .mini-specs i, .inline-list i { color: var(--accent); margin-top: 2px; }
.check-list--compact { gap: 8px; }
.step-card span {
    font-size: 18px; font-weight: 800; color: var(--primary);
}
.feature-card--link { transition: transform .18s ease, box-shadow .18s ease; }
.feature-card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.catalog-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
button.chip { cursor: pointer; }
button.chip.is-active { background: var(--accent-soft); border-color: #f3c0bb; color: var(--accent); }
.catalog-card { display: flex; flex-direction: column; overflow: hidden; }
.catalog-card__image {
    aspect-ratio: 16 / 10; background: linear-gradient(180deg, #f9fbfe 0%, #eef2f6 100%); border-bottom: 1px solid var(--line);
}
.catalog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card__content { padding: 20px; display: grid; gap: 0; height: 100%; }
.catalog-card__meta span, .work-card__meta span {
    padding: 6px 10px; border-radius: 999px; background: #f4f7fb; border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text-2);
}
.catalog-card__bottom { margin-top: auto; padding-top: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.catalog-price { display: grid; gap: 5px; font-size: 22px; font-weight: 800; color: var(--primary); }
.catalog-price small { font-size: 12px; }

.work-card {
    display: grid;
    grid-template-columns: minmax(250px, .95fr) minmax(0, 1.05fr);
    gap: 0;
    overflow: hidden;
}
.work-card--large { grid-template-columns: minmax(340px, .95fr) minmax(0, 1.05fr); }
.work-card__image { background: linear-gradient(180deg, #f8fafc 0%, #eef2f5 100%); }
.work-card__image img { width: 100%; height: 100%; object-fit: cover; }
.work-card__content { padding: 24px; display: grid; gap: 0; }
.work-result { margin-top: 16px; padding: 14px 16px; background: #f8fafc; border-radius: 14px; border: 1px solid var(--line); }
.work-result strong { display: block; margin-bottom: 8px; font-size: 14px; }
.work-card__footer { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.about-grid,
.contacts-grid,
.dashboard-grid,
.success-layout,
.configurator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: 24px;
}
.timeline-list li {
    display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start;
}
.timeline-list span:first-child {
    width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: #f4f7fb; border: 1px solid var(--line); font-weight: 800; color: var(--accent);
}
.timeline-list p { margin-top: 6px; font-size: 14px; }

.contact-list { display: grid; gap: 14px; margin-top: 18px; }
.contact-row {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.contact-row:last-child { border-bottom: 0; }
.contact-row i {
    width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent); background: var(--accent-soft); border: 1px solid #f0c8c3;
}
.contact-row strong { display: block; font-size: 14px; }
.table-list { display: grid; gap: 0; margin-top: 18px; }
.table-list > div {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.table-list > div:last-child { border-bottom: 0; }
.table-list span { color: var(--text-3); }
.table-list strong { overflow-wrap: anywhere; }

.callback-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; }
.callback-card h2 { margin: 10px 0 12px; font-size: 32px; }
.callback-card p { max-width: 760px; }
.callback-highlights { margin-top: 18px; display: grid; gap: 12px; }
.callback-highlights div {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--line);
}
.callback-highlights i { color: var(--accent); margin-top: 3px; }

.field-grid { display: grid; gap: 16px; }
.field-grid--1 { grid-template-columns: 1fr; }
.field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field--full { grid-column: 1 / -1; }
.field--grow { flex: 1 1 auto; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 700; color: var(--text-2); }
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: #fff;
    color: var(--text);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: #f3a39d;
    box-shadow: 0 0 0 4px rgba(217, 48, 37, .08);
}
.hint-text { margin-top: 10px; font-size: 12px; color: var(--text-3); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.filters-row { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }

.auth-layout { display: grid; place-items: center; min-height: calc(100vh - 200px); }
.auth-card { width: min(520px, 100%); }
.auth-card h1 { margin: 10px 0 16px; font-size: 32px; }

.dashboard-grid { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: 24px; }
.profile-card h3, .orders-card h3 { margin-bottom: 16px; font-size: 24px; }

.success-box { text-align: center; padding: 34px 26px; }
.success-box__icon {
    width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px;
    display: inline-flex; align-items: center; justify-content: center; background: #edf8ef; color: var(--success); border: 1px solid #b8e3c2;
}
.success-box h1 { margin: 12px 0 14px; font-size: 34px; }
.success-box p + p { margin-top: 12px; }

.configurator-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: start;
}
.config-form {
    display: grid;
    gap: 18px;
}
.form-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 22px;
}
.form-section__title {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 16px;
}
.form-section__title > i {
    width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); border: 1px solid #efc0bc;
}
.form-section__title h3 { font-size: 22px; }
.form-section__title p { margin-top: 6px; font-size: 14px; }

.option-card,
.choice-box,
.addon-card {
    position: relative;
    display: block;
    min-width: 0;
    padding: 16px 16px 16px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.option-card:hover,
.choice-box:hover,
.addon-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.option-card input,
.choice-box input,
.addon-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card.is-selected,
.choice-box.is-selected,
.addon-card.is-selected {
    border-color: #f1b2ac;
    background: linear-gradient(180deg, #fff 0%, #fff4f3 100%);
    box-shadow: 0 12px 24px rgba(217, 48, 37, .08);
}
.option-card.is-disabled,
.addon-card.is-disabled { opacity: .72; cursor: not-allowed; background: #fafbfc; }
.option-card__top,
.addon-card__top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.option-card__title,
.addon-card__title { display: grid; gap: 6px; }
.option-card__title strong,
.choice-box strong,
.addon-card__title strong { font-size: 15px; }
.option-card__title small,
.choice-box small,
.addon-card__title small { font-size: 12px; line-height: 1.45; color: var(--text-3); }
.option-card__price,
.addon-card__price { font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.choice-box { height: 100%; display: grid; gap: 10px; align-content: start; }
.choice-box__icon,
.addon-card__icon {
    width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: #f4f7fb; border: 1px solid var(--line); color: var(--primary);
}
.choice-box__price { margin-top: auto; font-size: 13px; font-weight: 800; color: var(--accent); }
.addon-card__meta { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.addon-tag {
    padding: 6px 10px; border-radius: 999px; background: #f4f7fb; border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--text-2);
}
.segmented-row { display: flex; gap: 10px; flex-wrap: wrap; }
.segment {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line);
    background: #fff; font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment.is-selected { color: var(--accent); background: var(--accent-soft); border-color: #f1c5c1; }

.config-results { display: grid; gap: 18px; position: sticky; top: 96px; }
.result-packages { display: grid; gap: 12px; }
.result-card {
    padding: 18px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.result-card:hover { transform: translateY(-1px); }
.result-card.is-selected { border-color: #f1b2ac; box-shadow: 0 14px 28px rgba(217,48,37,.10); }
.result-card.is-recommended { position: relative; }
.result-card.is-recommended::before {
    content: 'рекомендуем';
    position: absolute; top: 14px; right: 14px;
    padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid #f1c2be;
    color: var(--accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.result-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.result-card__label { font-size: 12px; color: var(--text-3); font-weight: 700; }
.result-card__price { margin-top: 14px; font-size: 30px; font-weight: 800; color: var(--primary); }
.result-card__meta { margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.result-card__meta span { font-size: 12px; color: var(--text-2); font-weight: 700; }
.result-card__reason {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--line); font-size: 13px;
}
.result-card__features { margin-top: 14px; }

.summary-box {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    padding: 16px; border-radius: 16px; background: var(--primary); color: #fff;
}
.summary-box span { display: block; font-size: 12px; color: rgba(255,255,255,.75); }
.summary-box strong { display: block; margin-top: 5px; font-size: 18px; color: #fff; }
.summary-list { display: grid; gap: 10px; }
.summary-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
}
.summary-item span { font-size: 13px; color: var(--text-2); }
.summary-item strong { font-size: 13px; color: var(--primary); white-space: nowrap; }
.summary-empty {
    padding: 16px; border-radius: 12px; background: #f8fafc; border: 1px dashed var(--line-2); font-size: 13px; color: var(--text-3);
}
.price-table { display: grid; gap: 10px; }
.price-line {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--line);
}
.price-line:last-child { border-bottom: 0; }
.price-line__name { font-size: 13px; color: var(--text-2); }
.price-line__value { font-weight: 800; color: var(--primary); white-space: nowrap; }
.price-line.is-total { padding-top: 14px; font-size: 17px; }
.price-line.is-total .price-line__name, .price-line.is-total .price-line__value { color: var(--accent); }

.layout-panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.layout-panel__head strong { font-size: 18px; }
.layout-canvas {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #fdfefe 0%, #eef3f7 100%);
    border: 1px solid var(--line);
}
.layout-cabinet {
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #dfe5ec 0%, #c9d1db 100%);
    border: 1px solid #abb7c7;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.3), 0 16px 30px rgba(17,34,56,.10);
}
.layout-cabinet__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.layout-cabinet__header strong { font-size: 15px; color: var(--primary); }
.layout-cabinet__header span { font-size: 12px; color: var(--text-2); }
.layout-rows { display: grid; gap: 10px; }
.layout-row {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px;
}
.layout-module {
    min-height: 54px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; text-align: center; padding: 4px; overflow-wrap: anywhere;
    border: 1px solid rgba(17,34,56,.16); background: linear-gradient(180deg, #ffffff 0%, #edf2f7 100%); color: var(--primary);
}
.layout-module--main { background: linear-gradient(180deg, #354f77 0%, #233854 100%); color: #fff; }
.layout-module--protect { background: linear-gradient(180deg, #f8ae2b 0%, #eb9c1d 100%); color: #2f2a1d; }
.layout-module--group { background: linear-gradient(180deg, #2a5aa6 0%, #1f4b92 100%); color: #fff; }
.layout-module--spare { background: linear-gradient(180deg, #f7f9fc 0%, #e8edf4 100%); color: #8a99ad; }
.layout-legend { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(17,34,56,.16); }
.legend-swatch--main { background: #2c4568; }
.legend-swatch--protect { background: #f0a426; }
.legend-swatch--group { background: #28549c; }
.legend-swatch--spare { background: #edf2f7; }

.order-box {
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.order-box h3 { margin-bottom: 14px; font-size: 24px; }

.table-wrapper { width: 100%; overflow: auto; }
.table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table th, .table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 800; }
.table td { font-size: 14px; color: var(--text-2); }
.table td strong { color: var(--primary); }
.status-badge {
    display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid transparent;
}
.status-badge.is-new { background: #eef2ff; color: #3047a3; border-color: #d9e1ff; }
.status-badge.is-review { background: #fff7e6; color: #a05f00; border-color: #f7dfb0; }
.status-badge.is-quoted { background: #f3f0ff; color: #6a42cf; border-color: #d9cef8; }
.status-badge.is-paid { background: #ecfdf3; color: #15803d; border-color: #bee7cb; }
.status-badge.is-assembling { background: #eff6ff; color: #2463d8; border-color: #c8dafc; }
.status-badge.is-shipped { background: #eef7ff; color: #2463d8; border-color: #cadefa; }
.status-badge.is-completed { background: #ecfdf3; color: #15803d; border-color: #bee7cb; }
.status-badge.is-canceled { background: #fff1f0; color: #b42318; border-color: #f3c4bf; }

.admin-body { background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%); }
.admin-shell { min-height: 100vh; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.admin-sidebar {
    position: sticky; top: 0; height: 100vh; padding: 22px 18px; border-right: 1px solid var(--line);
    background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
    display: flex; flex-direction: column; gap: 18px;
}
.brand--admin .brand__mark { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.admin-nav { display: grid; gap: 8px; }
.admin-nav a {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; color: var(--text-2); font-weight: 700;
}
.admin-nav a:hover, .admin-nav a.is-active { background: var(--accent-soft); color: var(--accent); }
.admin-sidebar__footer { margin-top: auto; display: grid; gap: 12px; }
.admin-user { padding: 16px; border-radius: 16px; background: #f8fafc; border: 1px solid var(--line); }
.admin-user small { display: block; margin-top: 4px; }
.admin-main { padding: 28px; }
.admin-topbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-topbar h1 { font-size: 34px; }
.result-box { margin-top: 18px; padding: 16px; border-radius: 14px; background: #f8fafc; border: 1px solid var(--line); }
.json-grid { display: grid; gap: 10px; margin-top: 14px; }
.json-item {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.json-item:last-child { border-bottom: 0; }
.json-item span { color: var(--text-3); }
.settings-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.settings-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.settings-group h3 { margin-bottom: 14px; font-size: 20px; }

.footer-cta {
    margin-bottom: 26px;
    padding: 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary) 0%, #26486f 100%);
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}
.footer-cta h2 { margin: 10px 0 12px; font-size: clamp(28px, 4vw, 40px); color: #fff; }
.footer-cta p { color: rgba(255,255,255,.8); max-width: 760px; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.site-footer {
    margin-top: auto;
    padding: 28px 0 32px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, #f6f8fb 0%, #edf2f6 100%);
}
.footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .8fr));
    gap: 24px;
    padding: 8px 0 22px;
}
.brand--footer .brand__mark { background: linear-gradient(135deg, var(--primary), var(--primary-3)); }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col h4 { font-size: 16px; }
.footer-col a, .footer-col span { color: var(--text-2); font-size: 14px; }
.footer-col a:hover { color: var(--accent); }
.footer-note { margin-top: 14px; max-width: 520px; }
.footer-bottom {
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-3);
    font-size: 13px;
}
.footer-legal { overflow-wrap: anywhere; }

@media (max-width: 1180px) {
    .hero__grid,
    .configurator-layout,
    .about-grid,
    .contacts-grid,
    .dashboard-grid,
    .callback-grid,
    .admin-grid,
    .admin-grid--split,
    .footer-main,
    .footer-cta,
    .object-grid,
    .feature-grid,
    .steps-grid,
    .catalog-grid,
    .works-grid,
    .choice-grid,
    .choice-grid--4,
    .addons-grid,
    .package-grid,
    .dashboard-stats,
    .brand-grid {
        grid-template-columns: 1fr 1fr;
    }
    .config-results { position: static; }
    .hero__points { grid-template-columns: 1fr; }
    .work-card, .work-card--large { grid-template-columns: 1fr; }
    .site-nav { position: fixed; left: 16px; right: 16px; top: 86px; display: none; flex-direction: column; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.98); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
    .site-nav.is-open { display: flex; }
    .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
    .site-header__actions .btn--ghost { display: none; }
}

@media (max-width: 860px) {
    .topline { display: none; }
    .site-header__inner { min-height: 72px; }
    .site-header__actions { gap: 8px; }
    .site-header__actions .btn { display: none; }
    .site-header__actions .icon-link { display: inline-flex; }
    .hero__grid,
    .configurator-layout,
    .about-grid,
    .contacts-grid,
    .dashboard-grid,
    .callback-grid,
    .admin-grid,
    .admin-grid--split,
    .footer-main,
    .footer-cta,
    .object-grid,
    .feature-grid,
    .feature-grid--2,
    .steps-grid,
    .catalog-grid,
    .works-grid,
    .choice-grid,
    .choice-grid--4,
    .addons-grid,
    .package-grid,
    .dashboard-stats,
    .brand-grid,
    .field-grid--2,
    .field-grid--3,
    .field-grid--4 { grid-template-columns: 1fr; }
    .catalog-toolbar, .section-head, .admin-topbar { align-items: stretch; flex-direction: column; }
    .summary-box { grid-template-columns: 1fr; }
    .table-list > div, .json-item { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
    .work-card__footer, .catalog-card__bottom, .footer-cta__actions { align-items: stretch; justify-content: stretch; }
    .footer-cta__actions .btn, .catalog-card__bottom .btn { width: 100%; }
    .hero__actions .btn { width: 100%; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .admin-main { padding: 20px 16px 30px; }
}


/* --- v6.1 focused polish --- */
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid transparent;
    color: var(--text-2);
    background: transparent;
}
.site-nav a i { color: var(--text-3); font-size: 13px; }
.site-nav a:hover,
.site-nav a.is-active {
    background: #fff;
    color: var(--primary);
    border-color: var(--line);
    box-shadow: 0 10px 24px rgba(17,34,56,.05);
}
.site-nav a:hover i,
.site-nav a.is-active i { color: var(--accent); }
.brand__text strong,
.brand__text small,
.price-line__name,
.price-line__value,
.choice-box strong,
.choice-box small,
.result-card h3,
.result-card__reason,
.summary-item span,
.summary-item strong,
.layout-module,
.table td,
.table th,
.footer-col span,
.footer-col a,
.footer-note,
.hero-note span,
.hero-note strong {
    overflow-wrap: anywhere;
}
.hero { padding-top: 34px; }
.hero__grid--balanced { align-items: start; }
.hero__content h1 { max-width: 760px; }
.hero__lead { max-width: 740px; }
.trust-strip--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero__side--stack { display: grid; gap: 16px; }
.hero-stage--v2 { padding: 22px; }
.hero-side-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.hero-side-card {
    padding: 16px 16px 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
    box-shadow: var(--shadow-sm);
}
.hero-side-card span { display: block; font-size: 12px; color: var(--text-3); }
.hero-side-card strong { display: block; margin-top: 7px; font-size: 24px; color: var(--primary); }
.hero-side-card small { display: block; margin-top: 4px; font-size: 12px; }
.section-head--narrow p { max-width: 560px; }
.feature-card--tight, .feature-card--tight p { min-height: auto; }
.section-actions { margin-top: 18px; display: flex; justify-content: center; }
.section-actions--left { justify-content: flex-start; }
.section-top-gap-sm { margin-top: 14px; }
.inline-note {
    min-height: 50px;
    padding: 13px 14px;
    border-radius: 12px;
    border: 1px dashed var(--line-2);
    background: #f8fafc;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.55;
}
.choice-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.choice-box__bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.choice-box__bottom .addon-tag { max-width: 100%; }
.choice-box__price small { display: block; font-size: 11px; color: var(--text-3); }
.summary-box--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#summaryMeta { font-size: 14px; line-height: 1.45; }
.layout-meta {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--text-2);
}
.result-card__actions { margin-top: 14px; }
.price-line__name { padding-right: 8px; }
.config-form { min-width: 0; }
.config-form .form-section { overflow: hidden; }
.work-card__footer span,
.catalog-card__bottom small,
.object-card__meta .chip,
.result-card__meta span,
.legend-item,
.layout-panel__head span,
.hero-stage__title small,
.summary-box span { overflow-wrap: anywhere; }
.callback-card textarea::placeholder { color: var(--text-3); }
@media (max-width: 1180px) {
    .hero-side-cards,
    .choice-grid--5,
    .trust-strip--wide,
    .summary-box--triple { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .site-nav a { width: 100%; justify-content: flex-start; }
    .hero-side-cards,
    .choice-grid--5,
    .trust-strip--wide,
    .summary-box--triple { grid-template-columns: 1fr; }
    .hero-stage--v2 { padding: 18px; }
}

/* --- v7 polish --- */
body { overflow-x: hidden; }
.container, .site-header__inner > *, .footer-main > *, .configurator-layout > *, .section-head > * { min-width: 0; }
.section-head h1, .section-head h2, .hero__content h1, .callback-card h2, .footer-cta h2 {
    letter-spacing: -.025em;
}
.site-header {
    box-shadow: 0 10px 28px rgba(17, 34, 56, .05);
}
.site-header__inner {
    gap: 14px;
}
.site-nav {
    flex: 1 1 auto;
    justify-content: center;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f3f7fb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.site-nav a {
    min-height: 42px;
    padding: 10px 12px;
    font-weight: 800;
}
.site-nav a i {
    display: none;
    color: var(--accent);
    opacity: .9;
}
.site-nav a span {
    overflow-wrap: anywhere;
}
.site-nav a:hover,
.site-nav a.is-active {
    border-color: #ebd8d6;
    box-shadow: 0 12px 24px rgba(17,34,56,.06);
}
.site-header__actions {
    flex: 0 0 auto;
}
.hero__content {
    display: grid;
    align-content: start;
    gap: 0;
}
.hero__content .trust-strip {
    margin-top: 22px;
}
.trust-item {
    min-width: 0;
}
.trust-item strong {
    font-size: 15px;
}
.trust-item span {
    font-size: 12px;
    line-height: 1.45;
}
.hero-stage--v2 {
    border-color: #dfe6ee;
}
.hero-layout__header strong,
.hero-layout__header span,
.hero-note,
.hero-note strong,
.hero-note span {
    overflow-wrap: anywhere;
}
.hero-note {
    min-width: 0;
}
.object-card,
.feature-card,
.work-card,
.catalog-card,
.result-card,
.summary-card,
.pricing-panel,
.layout-panel,
.callback-card {
    border-color: #dde5ef;
}
.object-card h3,
.catalog-card h3,
.work-card h3,
.result-card h3,
.summary-card h2,
.summary-card h3,
.callback-card h2 {
    color: var(--primary);
}
.object-card p,
.catalog-card p,
.work-card p,
.result-card p,
.callback-card p,
.summary-card p {
    color: var(--text-2);
}
.choice-box__icon,
.addon-card__icon {
    background: linear-gradient(180deg, #f8fbff 0%, #edf3fa 100%);
    border-color: #d8e1ec;
}
.choice-box strong,
.addon-card__title strong {
    color: var(--primary);
}
.choice-box small,
.addon-card__title small {
    min-height: 34px;
}
.choice-box__price {
    font-size: 12px;
}
.summary-card--accent {
    background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
}
.price-structure {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.price-structure__item {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}
.price-structure__item i {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid #f3c7c2;
    flex: 0 0 auto;
}
.hint-text--dim {
    color: var(--text-2);
}
.pricing-panel {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.price-line {
    gap: 16px;
}
.price-line__name {
    line-height: 1.45;
}
.price-line__value {
    text-align: right;
}
.price-line.is-divider {
    padding-top: 16px;
    margin-top: 2px;
    border-bottom-style: dashed;
}
.price-line.is-divider .price-line__name,
.price-line.is-divider .price-line__value {
    color: var(--text-3);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em;
}
.price-line--logic .price-line__name {
    color: var(--text-2);
}
.price-line--choice .price-line__name,
.price-line--choice .price-line__value {
    color: var(--primary);
}
.price-line--addon .price-line__name,
.price-line--addon .price-line__value {
    color: var(--accent);
}
.price-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px dashed var(--line-2);
    background: #f8fafc;
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.6;
}
.layout-panel__head strong,
.layout-panel__head span,
.layout-meta,
.legend-item {
    overflow-wrap: anywhere;
}
.layout-module {
    min-width: 0;
}
.summary-item {
    gap: 14px;
}
.summary-item strong {
    text-align: right;
}
.callback-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.footer-cta {
    border-color: #dde5ef;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.footer-main,
.footer-bottom,
.footer-col,
.footer-note,
.footer-legal {
    overflow-wrap: anywhere;
}
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 860px) {
    .price-structure {
        grid-template-columns: 1fr;
    }
    .site-nav a i {
        display: inline-flex;
    }
}

/* v8 simplified configurator */
.configurator-layout--plain { align-items: start; }
.configurator-form-plain { display: block; }
.config-form--plain { display: grid; gap: 18px; }
.config-results--plain { display: grid; gap: 18px; align-content: start; }
.module-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.module-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 88px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 700; color: var(--text); }
.module-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.module-chip.is-selected { border-color: rgba(196, 28, 36, .35); box-shadow: 0 0 0 1px rgba(196, 28, 36, .12); color: #971c1f; }
.breaker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.breaker-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-width: 0; }
.breaker-card__amp { font-size: 18px; font-weight: 800; color: var(--text); }
.breaker-card small { color: var(--text-3); }
.breaker-card input { width: 100%; min-width: 0; }
.toggle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.toggle-card { position: relative; display: grid; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; min-width: 0; }
.toggle-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.toggle-card.is-selected { border-color: rgba(196, 28, 36, .35); box-shadow: 0 0 0 1px rgba(196, 28, 36, .12); }
.toggle-card strong { color: var(--text); }
.toggle-card small { color: var(--text-3); }
.spec-preview-table { overflow-x: auto; }
.table--compact th, .table--compact td { padding: 10px 12px; vertical-align: top; }
.table-note { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; line-height: 1.45; }
.legal-order-card .legal-list { display: grid; gap: 10px; }
.legal-list__item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; color: var(--text-2); }
.legal-list__item i { color: var(--accent); margin-top: 2px; }
.result-box.is-error { border-color: rgba(196, 28, 36, .22); background: rgba(196, 28, 36, .04); }
.result-box.is-ok { border-color: rgba(24, 119, 65, .20); background: rgba(24, 119, 65, .05); }
.layout-cabinet--tight { width: 100%; }
.layout-rows--fixed { display: grid; gap: 10px; }
.layout-row--cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.layout-cell { min-height: 50px; border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 12px; font-weight: 700; color: var(--text); background: #fff; overflow: hidden; }
.layout-cell span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layout-cell--main { background: #fff1f2; border-color: rgba(196, 28, 36, .22); }
.layout-cell--protect { background: #fef3c7; border-color: rgba(217, 119, 6, .22); }
.layout-cell--group { background: #eff6ff; border-color: rgba(59, 130, 246, .22); }
.layout-cell--spare { background: #f8fafc; color: #9aa6b2; }
@media (max-width: 1080px) {
  .breaker-grid, .toggle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .breaker-grid, .toggle-grid { grid-template-columns: 1fr; }
  .module-choices { gap: 8px; }
  .module-chip { min-width: calc(50% - 4px); }
  .layout-row--cells { gap: 4px; }
  .layout-cell { min-height: 42px; font-size: 11px; }
}


/* v9 — каталог комплектующих */
.stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    margin-top: 20px;
}

.stat-pill {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--shadow-soft);
}

.stat-pill strong {
    font-size: 22px;
    line-height: 1;
    color: var(--primary);
}

.stat-pill span {
    color: var(--text-3);
    font-size: 13px;
}

.filter-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 22px;
}

.filter-panel--admin {
    margin-bottom: 16px;
}

.align-end {
    align-self: end;
}

.empty-state {
    background: #fff;
    border: 1px dashed var(--line-dark);
    border-radius: 24px;
    padding: 40px 24px;
    text-align: center;
    display: grid;
    gap: 12px;
    box-shadow: var(--shadow-soft);
}

.empty-state i {
    font-size: 28px;
    color: var(--primary);
}

.empty-state h2 {
    margin: 0;
    font-size: 24px;
}

.empty-state p {
    margin: 0 auto;
    max-width: 720px;
    color: var(--text-3);
}

.empty-state--compact {
    padding: 28px 20px;
}

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

.component-card {
    min-height: 100%;
}

.component-card__meta {
    gap: 8px;
}

.component-card__specs {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.component-card__specs div {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: #fbfcfe;
    min-width: 0;
}

.component-card__specs span {
    display: block;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 6px;
}

.component-card__specs strong {
    display: block;
    color: var(--text-1);
    overflow-wrap: anywhere;
}

.component-card__bottom {
    align-items: flex-end;
    gap: 14px;
}

.stock--good {
    color: #0f7b37;
}

.stock--empty {
    color: #c53b2a;
}

.inline-actions--stack {
    flex-direction: column;
    align-items: stretch;
}

.section-selector {
    display: grid;
    gap: 10px;
    max-height: 560px;
    overflow: auto;
    padding-right: 4px;
}

.check-field--boxed {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px 14px;
    background: #fff;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.check-field--boxed span {
    display: grid;
    gap: 4px;
}

.check-field--boxed small {
    color: var(--text-3);
    line-height: 1.45;
}

.info-box {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    background: #f7f8fc;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
}

.info-box i {
    color: var(--primary);
    font-size: 18px;
    margin-top: 2px;
}

.info-box p {
    margin: 6px 0 0;
    color: var(--text-3);
}

.badge-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.sync-log-list {
    display: grid;
    gap: 12px;
}

.sync-log-item {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    background: #fff;
}

.sync-log-item__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.sync-log-item p {
    margin: 0 0 8px;
    color: var(--text-2);
}

.sync-log-item small {
    color: var(--text-3);
}

.dashboard-stats--compact {
    margin-bottom: 22px;
}

@media (max-width: 1100px) {
    .component-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .component-card__specs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .component-grid {
        grid-template-columns: 1fr;
    }

    .stats-strip {
        flex-direction: column;
    }

    .sync-log-item__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

:root {
    --text-1: var(--text);
    --line-dark: #cbd5e1;
    --shadow-soft: var(--shadow-sm);
}

.table-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.table-link:hover { color: var(--accent); }

.table--components td { min-width: 0; }

.metric-chip {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    background: #fff;
    display: grid;
    gap: 6px;
}
.metric-chip span {
    font-size: 12px;
    color: var(--text-3);
}
.metric-chip strong {
    font-size: 18px;
    color: var(--primary);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.component-header-card__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}
.tabs-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 700;
    color: var(--text-2);
}
.tabs-nav a.is-active,
.tabs-nav a:hover {
    color: var(--primary);
    border-color: #f4c8c3;
    background: var(--accent-soft);
}
.tabs-nav--site { margin-top: 10px; }

.kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.kv-row {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    background: #fff;
    display: grid;
    gap: 6px;
}
.kv-row span {
    font-size: 12px;
    color: var(--text-3);
}
.kv-row strong {
    color: var(--primary);
    overflow-wrap: anywhere;
}

.log-details {
    margin-top: 12px;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}
.log-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary);
}
.log-block {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}
pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    max-height: 420px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.55;
}

.cron-box {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    background: #fbfcfe;
    display: grid;
    gap: 14px;
}
.cron-box__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.cron-box__head p {
    margin-top: 6px;
    color: var(--text-3);
}
.cron-box__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.cron-box__grid > div {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 8px;
    min-width: 0;
}
.cron-box__label {
    font-size: 12px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.cron-box code {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0f172a;
    color: #e2e8f0;
    white-space: normal;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.5;
}
.cron-box__note {
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.sync-log-list--dense .sync-log-item { padding: 12px 14px; }

.component-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 18px;
    align-items: start;
}
.component-hero-card h2 {
    margin-top: 12px;
    font-size: clamp(24px, 4vw, 34px);
}
.component-hero-side {
    display: grid;
    gap: 14px;
}
.component-card__specs--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-box--soft {
    background: #fbfcfe;
}
.sidebar-box--soft p {
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .component-header-card__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .component-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .cron-box__grid,
    .kv-grid,
    .component-card__specs--wide,
    .component-header-card__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tabs-nav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .cron-box__head { flex-direction: column; }
}