/* ============================================
   Rekuperation.ru — калькулятор (v0.5)
   Профессиональный дизайн в стиле rekuperation.ru
   Bootstrap-like, Rubik, #7cae35 бренд
   ============================================ */

:root{
    --brand: #7cae35;
    --brand-dark: #5d8a22;
    --brand-light: #a5d467;
    --brand-bg: #f2f8e8;
    --accent-blue: #4aa3df;
    --accent-orange: #f39c12;

    --text: #1a1a1a;
    --muted: #6c757d;
    --subtle: #98a2a9;

    --bg: #f5f7f4;
    --card: #ffffff;
    --border: #e5e9e0;
    --border-soft: #eef1eb;
    --divider: #f0f2ed;

    --ok: #2e7d32;
    --warn: #ed6c02;
    --danger: #d32f2f;

    --r-sm: 6px;
    --r: 10px;
    --r-lg: 14px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.08);
}

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

html, body{
    margin:0;padding:0;
    font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-container{max-width:1280px;margin:0 auto;padding:0 24px}

/* =============== HEADER =============== */
.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;box-shadow:var(--shadow-xs)}
.site-header__bar{background:#fff}
.site-header__inner{display:flex;align-items:center;gap:28px;padding:14px 24px;min-height:68px}
.site-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700}
.site-brand__mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;box-shadow:var(--shadow-sm)}
.site-brand__name{font-size:17px;letter-spacing:-.015em}
.site-brand__name span{color:var(--brand)}
.site-nav{display:flex;gap:22px;flex:1;font-size:13.5px;overflow:hidden;flex-wrap:nowrap}
.site-nav a{color:var(--text);text-decoration:none;white-space:nowrap;padding:22px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-weight:500}
.site-nav a:hover{color:var(--brand-dark);border-bottom-color:var(--brand-light)}
.site-header__cta{display:inline-flex;align-items:center;gap:10px}
.site-header__link{padding:9px 18px;border-radius:8px;font-size:13.5px;font-weight:600;text-decoration:none;border:1.5px solid transparent;transition:.15s}
.site-header__link--active{background:var(--brand);color:#fff}
.site-header__link--active:hover{background:var(--brand-dark);box-shadow:var(--shadow-sm)}
@media(max-width:1100px){.site-nav{gap:16px;font-size:13px}.site-nav a:nth-child(n+5){display:none}}
@media(max-width:800px){.site-nav{display:none}.site-header__inner{padding:12px 20px;min-height:58px}.site-brand__name{font-size:15px}}

/* =============== HERO =============== */
.hero{background:linear-gradient(135deg,#fbfdf9 0%,#eef5dc 100%);padding:42px 0 36px;border-bottom:1px solid var(--border)}
.hero__row{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:center}
@media(max-width:900px){.hero__row{grid-template-columns:1fr}.hero{padding:32px 0 26px}}
.hero__eyebrow{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--brand-dark);padding:5px 12px;background:rgba(124,174,53,.15);border-radius:4px;margin-bottom:14px}
.hero__title{font-size:34px;font-weight:700;margin:0 0 12px;line-height:1.1;letter-spacing:-.02em}
@media(max-width:600px){.hero__title{font-size:26px}}
.hero__sub{font-size:15px;line-height:1.6;color:#3a3f3a;margin:0 0 18px;max-width:760px}
.hero__badges{display:flex;flex-wrap:wrap;gap:6px}
.hero__badge{font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:20px;background:#fff;color:#555;border:1px solid var(--border)}
.hero__badge--accent{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.hero__aside{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:900px){.hero__aside{grid-template-columns:repeat(3,1fr);max-width:360px}}
.hero__stat{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 10px;text-align:center;box-shadow:var(--shadow-xs)}
.hero__stat-val{font-size:28px;font-weight:700;color:var(--brand-dark);line-height:1}
.hero__stat-lbl{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.3}

/* =============== MAIN =============== */
.site-main{padding:28px 0 60px}

.panel{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;margin-bottom:20px;box-shadow:var(--shadow-xs)}
.panel--presets{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.panel__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 14px;border:1px solid var(--border);border-radius:20px;background:#fff;color:var(--text);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--brand);color:var(--brand-dark)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip--alt{background:#fafbf7;color:var(--muted);font-style:italic}
.chip--alt:hover{color:var(--brand-dark);font-style:normal}

/* =============== CALC FORM =============== */
.calc{display:flex;flex-direction:column;gap:16px}
.calc-section{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-xs);transition:box-shadow .15s}
.calc-section:hover{box-shadow:var(--shadow-sm)}
.calc-section__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--divider)}
.calc-section__num{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:var(--brand-bg);color:var(--brand-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.calc-section__title{margin:0 0 2px;font-size:16px;font-weight:600;line-height:1.3}
.calc-section__hint{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45}

.calc-grid{display:grid;gap:14px}
.calc-grid--5{grid-template-columns:repeat(5,1fr)}
.calc-grid--6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){.calc-grid--5,.calc-grid--6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.calc-grid--5,.calc-grid--6{grid-template-columns:repeat(2,1fr)}}

.field{display:flex;flex-direction:column;gap:4px;font-size:13px}
.field--wide{grid-column:span 2}
@media(max-width:1000px){.field--wide{grid-column:span 2}}
@media(max-width:600px){.field--wide{grid-column:span 2}}
.field>span{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.01em}
.field input[type=number],.field input[type=text],.field select{
    height:38px;padding:0 12px;border:1px solid var(--border);border-radius:7px;font:inherit;font-size:14px;background:#fff;color:var(--text);outline:none;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,174,53,.16)}
.field select{appearance:none;padding-right:30px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236c757d' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") right 10px center no-repeat;cursor:pointer}
.field--check{flex-direction:row;align-items:center;gap:8px;padding-top:20px}
.field--check input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand);cursor:pointer;margin:0;flex-shrink:0}
.field--check span{font-size:13.5px;color:var(--text);font-weight:500}
.field-note{color:var(--subtle);font-size:12px;padding-top:10px;font-style:italic}

/* Season matrix */
.season-matrix{width:100%;border-collapse:collapse;font-size:13.5px}
.season-matrix thead th{padding:6px 12px;text-align:center;font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--divider)}
.season-matrix tbody th{padding:10px 12px;text-align:right;font-weight:700;color:var(--brand-dark);font-size:13px;background:var(--brand-bg);border-radius:6px 0 0 6px;width:70px}
.season-matrix tbody td{padding:8px 10px;text-align:center}
.m-field{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--border);border-radius:7px;padding:0 10px;transition:border-color .15s}
.m-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,174,53,.16)}
.m-field input{border:none;outline:none;background:transparent;height:36px;width:68px;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:var(--text);text-align:center}
.m-field span{font-size:12px;color:var(--muted);font-weight:500}
@media(max-width:700px){.season-matrix thead th{font-size:10.5px;padding:4px 6px}.m-field input{width:52px;font-size:13px}.season-matrix tbody th{width:50px;padding:8px 6px;font-size:12px}}

/* =============== ACTIONS =============== */
.calc-actions{display:flex;gap:12px;flex-wrap:wrap;padding:8px 0 4px;justify-content:flex-end}
@media(max-width:700px){.calc-actions{flex-direction:column}.calc-actions .rk-btn{justify-content:center}}
.rk-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:none;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;line-height:1}
.rk-btn--lg{padding:14px 28px;font-size:15px}
.rk-btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.rk-btn--primary:hover{background:var(--brand-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.rk-btn--outline{background:#fff;color:var(--brand-dark);border:1.5px solid var(--brand)}
.rk-btn--outline:hover{background:var(--brand-bg)}
.rk-btn--sm{padding:6px 12px;font-size:12.5px;border-radius:6px}
.rk-btn-row{padding:3px 10px;font-size:12px;border:1px solid var(--brand);border-radius:5px;background:rgba(124,174,53,.08);color:var(--brand-dark);cursor:pointer;font-family:inherit;font-weight:600;transition:.12s}
.rk-btn-row:hover{background:var(--brand);color:#fff}

/* =============== RESULTS =============== */
.results{margin-top:28px}
.rk-loading{text-align:center;padding:48px 20px;color:var(--muted)}
.rk-loading__spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.err{background:#fff0f0;border-left:4px solid var(--danger);padding:14px 18px;border-radius:var(--r-sm);color:#8c1818;font-size:14px}
.warn{background:#fff7e6;border-left:4px solid var(--warn);padding:10px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:14px}
.warn b{color:var(--warn)}
.warn ul{margin:4px 0 0 20px;padding:0}

.result-head{margin-bottom:18px}
.result-title{font-size:22px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.result-sub{font-size:13.5px;color:var(--muted);margin:0}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:none;padding:10px 18px;font-family:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;white-space:nowrap;font-weight:500}
.tab:hover{color:var(--brand-dark)}
.tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.tab-print{margin-left:auto;font-size:12.5px;color:var(--muted);padding:7px 14px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;font-family:inherit;font-weight:500;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.tab-print:hover{color:var(--brand);border-color:var(--brand)}

/* Equivalents */
.equiv{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center;padding:10px 14px;background:#fafbf7;border:1px dashed var(--border);border-radius:var(--r-sm)}
.equiv__lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.equiv__item{padding:4px 12px;background:#fff;border:1px solid var(--border-soft);border-radius:20px;font-size:12.5px}
.equiv__item b{color:var(--brand-dark);font-weight:600}

/* Frost */
.frost{padding:12px 16px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.5;border-left:4px solid;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.frost-ok{background:#eef9ef;border-color:#66bb6a;color:#1b5e20}
.frost-warn{background:#fff7e6;border-color:#ffa726;color:#8a5200}
.frost-danger{background:#fdeeee;border-color:#ef5350;color:#a01a1a}
.frost__icon{font-size:18px;flex-shrink:0;line-height:1}

/* Seasons */
.seasons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
@media(max-width:800px){.seasons{grid-template-columns:1fr}}
.season{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;border-top:4px solid var(--border)}
.season--winter{border-top-color:var(--accent-blue)}
.season--summer{border-top-color:var(--accent-orange)}
.season__lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.season__lbl span.cond{color:var(--subtle);font-weight:500;text-transform:none;letter-spacing:0;font-size:12px}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.kpi{background:var(--bg);border-radius:var(--r-sm);padding:10px 12px}
.kpi__l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;line-height:1.2}
.kpi__v{font-size:22px;font-weight:700;line-height:1.1;margin-top:4px;letter-spacing:-.01em}
.kpi__v .u{font-size:12px;color:var(--muted);margin-left:3px;font-weight:400}

.erp{display:inline-block;font-size:10px;font-weight:700;padding:3px 7px;border-radius:3px;color:#fff;margin-left:6px;vertical-align:2px}
.erp.h1{background:#1e7e34}.erp.h2{background:#5cb85c}.erp.h3{background:#f0ad4e}.erp.h4{background:#d9534f}.erp.h5{background:#8a2a2a}
.eco-pass{color:var(--ok);font-weight:600;font-size:14px}
.eco-fail{color:var(--danger);font-weight:600;font-size:14px}

/* Candidates */
.cand{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-xs)}
.cand__head{background:#fafbf7;padding:12px 18px;font-size:13px;font-weight:600;border-bottom:1px solid var(--border)}
.cand table{width:100%;border-collapse:collapse;font-size:13px}
.cand th,.cand td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border-soft);font-variant-numeric:tabular-nums}
.cand th{background:#fafbf7;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.cand tr:last-child td{border-bottom:none}
.cand tr.best td{background:var(--brand-bg);font-weight:600}
.cand tr.best td:first-child::before{content:'★ ';color:var(--brand);font-size:14px}
.cand tr.fail td{color:var(--subtle);background:#fafafa}
.cand tr:hover:not(.best):not(.fail) td{background:#fafbf7}
.muted{color:var(--muted)}

/* Details */
.details-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.detail-block{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px}
.detail-block h4{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--brand-dark);border-bottom:1px solid var(--border-soft);padding-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.detail-row{display:flex;justify-content:space-between;padding:4px 0;font-size:12.5px;border-bottom:1px dotted #eee;gap:10px}
.detail-row:last-child{border-bottom:none}
.detail-row .dl{color:var(--muted)}
.detail-row .dv{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

/* Charts */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:800px){.chart-grid{grid-template-columns:1fr}}
.chart{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 18px;height:320px;display:flex;flex-direction:column;box-shadow:var(--shadow-xs)}
.chart h4{margin:0 0 8px;font-size:12.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.chart canvas{flex:1;min-height:0;max-height:100%}

/* Mollier */
.mollier{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:14px;overflow:auto;box-shadow:var(--shadow-xs)}
.mol-legs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.mol-legs{grid-template-columns:1fr}}
.mol-leg{background:var(--bg);padding:12px 14px;border-radius:var(--r-sm);font-size:13px}
.mol-leg .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.mol-leg ul{margin:6px 0 0 18px;padding:0;font-size:12px;color:var(--muted)}

/* Economy */
.econ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:900px){.econ-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.econ-grid{grid-template-columns:1fr}}
.econ{background:#fff;border:1px solid var(--border);border-top:4px solid var(--brand);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow-xs)}
.econ__l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.econ__v{font-size:26px;font-weight:700;margin-top:4px;line-height:1.1;letter-spacing:-.02em}
.econ__v .u{font-size:13px;color:var(--muted);margin-left:4px;font-weight:400}
.econ__s{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.4}

.bin{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-xs)}
.bin th,.bin td{padding:7px 12px;text-align:left;border-bottom:1px solid var(--border-soft);font-variant-numeric:tabular-nums}
.bin th{background:#fafbf7;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.bin tr:last-child td{border-bottom:none}
.bar{height:10px;background:var(--brand);border-radius:3px}
.bar.winter{background:var(--accent-blue)}
.bar.summer{background:var(--accent-orange)}
.bar.eco{background:var(--subtle)}

/* =============== FOOTER =============== */
.site-footer{background:#1f2624;color:#c9d1ce;margin-top:60px}
.site-footer__inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding:44px 24px 32px}
@media(max-width:900px){.site-footer__inner{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:500px){.site-footer__inner{grid-template-columns:1fr}}
.site-footer__col-title{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:14px}
.site-footer__brand{color:#fff;font-weight:700;font-size:18px;margin-bottom:8px}
.site-footer__col p{font-size:13.5px;line-height:1.6;color:#a6aeab;margin:0}
.site-footer__col a{display:block;color:#c9d1ce;text-decoration:none;font-size:13.5px;padding:3px 0;transition:color .12s}
.site-footer__col a:hover{color:var(--brand-light)}
.site-footer__bottom{background:rgba(0,0,0,.2);padding:16px 0}
.site-footer__bottom .site-container{display:flex;justify-content:space-between;gap:16px;font-size:11.5px;color:#7a847f;flex-wrap:wrap}

/* =============== PRINT =============== */
@media print{
    .site-header,.site-footer,.hero,.panel--presets,.calc,.tabs,.tab-print{display:none!important}
    body{background:#fff;font-size:10px}
    .site-main{padding:0}
    .results{margin-top:0}
    .season,.chart,.econ,.detail-block{break-inside:avoid}
    canvas{max-width:100%!important;height:auto!important}
}

/* ===== Matrix cards (выбор типа матрицы) ===== */
.field--full { display: block; margin-bottom: 4px; }
.field__label { font-size: 12px; color: var(--muted); font-weight: 500; letter-spacing: .01em; display: block; margin-bottom: 6px; }

.matrix-cards {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.matrix-card {
    background: #fff; border: 1.5px solid var(--border); border-radius: 7px;
    padding: 8px 10px 7px;
    text-align: left; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; gap: 2px;
    line-height: 1.3; transition: border-color .12s, background .12s;
}
.matrix-card:hover  { border-color: var(--brand-light); }
.matrix-card.active { border-color: var(--brand); background: var(--brand-bg); }
.matrix-card__row1  { display: flex; align-items: baseline; gap: 8px; }
.matrix-card__code  { font-size: 11px; font-weight: 700; color: var(--brand-dark); background: var(--brand-bg); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; }
.matrix-card.active .matrix-card__code { background: #fff; }
.matrix-card__name  { font-weight: 600; font-size: 12.5px; color: var(--text); }
.matrix-card__app   { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.matrix-card__recovers { font-size: 10px; color: var(--subtle); font-style: italic; margin-top: 1px; }
@media (max-width: 700px) { .matrix-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .matrix-cards { grid-template-columns: 1fr; } }

/* ===== v_face «светофор» ===== */
.vface {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px;
    font-size: 12.5px; line-height: 1.4;
    margin: 10px 0 14px;
    border-left: 3px solid;
}
.vface__icon { font-size: 16px; flex-shrink: 0; }
.vface__text b { font-weight: 600; }
.vface-ok       { background: #eef9ef; border-color: #66bb6a; color: #1b5e20; }
.vface-caution  { background: #fff7e6; border-color: #ffa726; color: #8a5200; }
.vface-warning  { background: #fff3e0; border-color: var(--warn); color: #7a3d00; }
.vface-danger   { background: #fdeeee; border-color: #ef5350; color: #a01a1a; }

/* ===== Series переключатель (RR/RS/Auto) ===== */
.panel--series {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #fafbf7, #f4f8ec);
    border-left: 3px solid var(--brand);
}
.panel--series .chips { margin: 0; }
.panel__hint {
    font-size: 12.5px; color: var(--muted); flex: 1 1 auto;
    font-style: italic;
}
.chip--series {
    padding: 7px 14px; font-weight: 600; font-size: 13px;
    min-width: 100px;
}

/* ===================================================================
   FULL-WIDTH LAYOUT + HEATEX-LIKE DESIGN (v0.8, 2026-04-19)
   Убираем sidebar темы rekuperation, конфигуратор на всю ширину
   =================================================================== */

/* Скрываем shop_page боковую панель и делаем main full-width */
.s-sidebar-wrapper { display: none !important; }
.s-main-wrapper--sidebar .row .col-md-8,
.s-main-wrapper--sidebar .row .col-lg-8,
.s-main-wrapper--sidebar > .container-xl > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
.s-main-wrapper--sidebar { max-width: 1440px !important; }

/* Скрываем h1 shop_page (у нас свой hero в контенте) */
.s-main-wrapper .s-content-wrapper > h1,
.s-main-wrapper .s-page__title { display: none !important; }

/* ===== Product Overview (SVG viz панель) ===== */
.calc-viz {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
    gap: 22px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin: 18px 0;
}
.calc-viz__canvas {
    position: relative;
    background: linear-gradient(180deg, #fafbfa 0%, #f2f6ec 100%);
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    min-height: 320px;
}
.calc-viz__canvas svg {
    width: 100%; height: 100%;
    display: block;
}
.calc-viz__title {
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--brand-dark);
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--brand);
}
.calc-viz__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    align-content: start;
}
.calc-viz__info-row {
    display: flex; justify-content: space-between;
    padding: 6px 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--border-soft);
}
.calc-viz__info-row--full { grid-column: 1 / -1; }
.calc-viz__info-label { color: var(--muted); }
.calc-viz__info-value {
    font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.calc-viz__info-value strong {
    color: var(--brand-dark);
    font-weight: 700;
}

/* SVG specific styles */
.rotor-svg .dim-line {
    stroke: var(--muted); stroke-width: 0.8;
    fill: none;
}
.rotor-svg .dim-label {
    fill: var(--text); font-size: 11px; font-weight: 500;
    text-anchor: middle;
    font-family: 'Rubik', sans-serif;
}
.rotor-svg .rotor-body {
    fill: #e8ebe3;
    stroke: var(--text); stroke-width: 1.2;
}
.rotor-svg .rotor-matrix-alu  { fill: #d8dcd0; }
.rotor-svg .rotor-matrix-epox { fill: #c8d5b0; }
.rotor-svg .rotor-matrix-hyb  { fill: #b0d0d8; }
.rotor-svg .rotor-matrix-siev { fill: #cdb0d8; }
.rotor-svg .casing-frame {
    fill: none; stroke: var(--brand);
    stroke-width: 1.8; stroke-dasharray: 3 2;
}
.rotor-svg .purge-sector {
    fill: var(--accent-orange); opacity: 0.6;
    stroke: #c87f00; stroke-width: 0.8;
}
.rotor-svg .arrow-flow {
    fill: var(--accent-blue);
    opacity: 0.8;
}
.rotor-svg .wave-line {
    stroke: var(--text); opacity: 0.15;
    stroke-width: 0.5; fill: none;
}
.rotor-svg .dim-ext {
    stroke: var(--subtle); stroke-width: 0.6;
    fill: none; stroke-dasharray: 1 1;
}
.rotor-svg .rotor-axis {
    stroke: var(--brand-dark); stroke-width: 1;
    stroke-dasharray: 3 3; fill: none;
}
.rotor-svg .tag {
    fill: var(--brand-dark);
    font-size: 10px; font-weight: 600;
    text-anchor: middle;
    font-family: 'Rubik', sans-serif;
}

/* Адаптив viz */
@media (max-width: 860px) {
    .calc-viz { grid-template-columns: 1fr; }
    .calc-viz__info { grid-template-columns: 1fr; }
}

/* ===================================================================
   v0.9 COMPACT LAYOUT — Heatex-style, минимум скролла
   =================================================================== */

/* Компактная основная область */
.site-main { padding: 12px 0 !important; }
.site-container { max-width: 1320px !important; padding: 0 14px !important; }

/* Top row: chips compact */
.top-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
}
.top-row__chips { display: flex; align-items: center; gap: 6px; }
.chips-lbl {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 600; margin-right: 6px;
}
.top-row .chip--series {
    padding: 3px 10px; font-size: 12px; min-width: 50px;
    font-weight: 600;
}

/* Calc-viz COMPACT mode */
.calc-viz--compact {
    padding: 10px 14px;
    margin: 0 0 10px 0;
    grid-template-columns: 260px 1fr;
    gap: 14px;
}
.calc-viz--compact .calc-viz__canvas {
    aspect-ratio: 1 / 1;
    min-height: 200px; max-height: 240px;
}
.calc-viz--compact .calc-viz__info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 16px;
    align-content: start;
    font-size: 12px;
}
.calc-viz--compact .calc-viz__info-row {
    flex-direction: column;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-soft);
    gap: 0;
}
.calc-viz--compact .calc-viz__info-row--full { grid-column: 1 / -1; }
.calc-viz--compact .calc-viz__info-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--muted); margin-bottom: 1px;
}
.calc-viz--compact .calc-viz__info-value {
    font-size: 13px;
}

/* Compact sections */
.calc-section {
    padding: 10px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
}
.calc-section__head {
    gap: 8px !important;
    margin-bottom: 6px !important;
}
.calc-section__num {
    width: 20px !important; height: 20px !important;
    font-size: 12px !important;
}
.calc-section__title {
    font-size: 14px !important; margin: 0 !important;
}
.calc-section__hint {
    font-size: 11px !important; margin: 0 !important; color: var(--muted) !important;
}

/* Compact field styling */
.calc-grid { gap: 8px !important; }
.field > span {
    font-size: 11px !important;
    margin-bottom: 2px !important;
    color: var(--muted);
}
.field input, .field select {
    padding: 5px 8px !important;
    font-size: 13px !important;
    height: 32px !important;
}

/* Season matrix compact */
.season-matrix {
    font-size: 12px !important;
}
.season-matrix th, .season-matrix td {
    padding: 4px 6px !important;
}

/* Matrix cards — compact 4-in-row */
.matrix-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
}
.matrix-card {
    padding: 6px 8px !important;
    font-size: 11px !important;
}

/* Panel presets compact */
.panel--presets {
    padding: 6px 10px !important;
    margin-bottom: 8px !important;
    font-size: 11px;
}

/* Action buttons */
.calc-actions {
    gap: 8px !important; margin-top: 10px !important;
}
.rk-btn--lg {
    padding: 8px 18px !important;
    font-size: 13px !important;
}

/* Убираем ВСЁ лишнее от shop_page (title, крошки, breadcrumbs) */
.s-main-wrapper .s-content-wrapper > h1,
.s-breadcrumbs,
.s-main-wrapper .s-page__title,
.s-main-wrapper__breadcrumbs,
nav[aria-label="breadcrumb"] { display: none !important; }

/* Rotor SVG v0.9 — proportional */
.rotor-svg-root { width: 100%; height: 100%; display: block; }
.rotor-svg-root .rotor-body { stroke: var(--text); stroke-width: 0.6; }
.rotor-svg-root .rotor-matrix-alu  { fill: #dfe2d8; }
.rotor-svg-root .rotor-matrix-epox { fill: #c8d5b0; }
.rotor-svg-root .rotor-matrix-hyb  { fill: #b0d0d8; }
.rotor-svg-root .rotor-matrix-siev { fill: #cdb0d8; }
.rotor-svg-root .rotor-edge { stroke: #444; stroke-width: 0.5; fill: none; }
.rotor-svg-root .wave-line { stroke: rgba(0,0,0,0.18); stroke-width: 0.3; fill: none; }
.rotor-svg-root .casing-frame {
    fill: none; stroke: var(--brand); stroke-width: 0.8; stroke-dasharray: 2 1.5;
}
.rotor-svg-root .purge-sector {
    fill: var(--accent-orange); opacity: 0.55;
    stroke: #c87f00; stroke-width: 0.5;
}
.rotor-svg-root .dim-line { stroke: var(--muted); stroke-width: 0.5; fill: none; }
.rotor-svg-root .dim-line-d { stroke: var(--muted); stroke-width: 0.5; fill: none; stroke-dasharray: 1 1; }
.rotor-svg-root .dim-label {
    fill: var(--text); font-size: 9px; font-weight: 500;
    text-anchor: middle; font-family: 'Rubik', sans-serif;
}
.rotor-svg-root .dim-label-d {
    fill: var(--muted); font-size: 8px;
    font-family: 'Rubik', sans-serif;
}
.rotor-svg-root .dim-label-big {
    fill: var(--brand-dark); font-size: 11px; font-weight: 700;
    text-anchor: middle; font-family: 'Rubik', sans-serif;
}
.rotor-svg-root .flow-label {
    font-size: 7.5px; font-weight: 600;
    font-family: 'Rubik', sans-serif;
}

/* Скрываем Webasyst shop_page H1 и breadcrumb над контентом */
h1.s-global-header, .s-global-header { display: none !important; }
.s-breadcrumbs, nav.breadcrumb, [aria-label="breadcrumb"] { display: none !important; }

/* breadcrumbs hide */
.b-breadcrumbs, [class*="b-breadcrumbs"] { display: none !important; }

/* ===================================================================
   v0.9.5 — compact header (перенос из alasca seller) + H1 hide
   =================================================================== */

/* rekuperation theme header — compact padding (перенос из seller) */
.b-header-global { padding-top: 0 !important; padding-bottom: 0 !important; }
.l-desktop-header-top__row { padding: 0.1rem 0 !important; }
.l-desktop-header-middle { padding: 0.25rem 0 !important; }
.l-desktop-header-bottom { padding: 0.1rem 0 !important; }

.b-nav-categories__nav-link {
    padding-top: 0.4rem !important; padding-bottom: 0.4rem !important;
    font-size: 0.9rem;
}
.b-nav-pages__nav-link {
    padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;
    font-size: 0.8rem;
}

/* H1 .s-global-header — hide completely on configurator page */
h1.s-global-header,
.s-global-header { display: none !important; }

/* Breadcrumbs hide */
.b-breadcrumbs, .breadcrumb, [class*="b-breadcrumbs"] { display: none !important; }

/* Content padding — убрать верхний отступ чтобы виз-блок сразу под шапкой */
.l-content-wrapper, .l-page-content,
.s-main-wrapper .s-content-wrapper { padding-top: 0 !important; }

/* Mobile-sticky bottom nav — скрываем на desktop ≥768px (забирает 72px снизу) */
@media (min-width: 768px) {
    .l-mobile-header__nav,
    .b-mobile-bottom-nav,
    .b-mobile-nav,
    .b-fixed-panel,
    [class*="mobile-bottom"],
    [class*="mobile-nav"] { display: none !important; }
}

/* Cookies banner — сделать компактным, не плавающим */
#s-cookies-info, [class*="cookie"][class*="banner"],
.js-close-cookie { font-size: 11px; }

/* ===================================================================
   v0.9.6 AGGRESSIVE header compact — target total 80px (было 150px)
   =================================================================== */

/* TOP bar — верхняя навигация: 50px → ~22px */
.l-desktop-header-top {
    padding: 0 !important;
    min-height: 22px !important;
    font-size: 11px !important;
}
.l-desktop-header-top * {
    line-height: 1.2 !important;
}
.b-nav-pages__nav-link, .b-nav-pages a {
    padding: 0.2rem 0.5rem !important;
    font-size: 11.5px !important;
}

/* MIDDLE — logo + catalog + search + icons: 53px → ~36px */
.l-desktop-header-middle {
    padding: 0.2rem 0 !important;
    min-height: 36px !important;
}
.l-desktop-header-middle__row { gap: 0.75rem !important; }
.b-logo__img, .b-logo img {
    max-height: 42px !important; width: auto !important;
}
.l-desktop-header-middle .b-text,
.l-desktop-header-middle__item p,
.l-desktop-header-middle__item span { font-size: 11px !important; line-height: 1.2 !important; }

.b-catalog__button.btn-lg {
    padding: 0.35rem 0.8rem !important;
    font-size: 12.5px !important;
    min-height: 30px;
}
.l-desktop-header-middle input[type="search"],
.l-desktop-header-middle input[type="text"] {
    height: 30px !important;
    font-size: 12.5px !important;
}
.l-desktop-header-middle .icon {
    width: 18px !important; height: 18px !important;
}

/* BOTTOM — category nav: как на alasca.ru (px-0 links + меньше gap) */
.l-desktop-header-bottom {
    padding: 0 !important;
    min-height: 30px !important;
}
/* Ссылки без горизонтального padding (как на alasca: 6.4px 0) */
.l-desktop-header-bottom .b-nav-categories__nav-link,
.l-desktop-header-bottom .b-nav-categories a,
.l-desktop-header-bottom .nav-link {
    padding: 0.4rem 0 !important;
    font-size: 13px !important;
}
/* ul navbar-nav — меньше gap чтобы все категории помещались */
.l-desktop-header-bottom ul.navbar-nav {
    gap: 0.75rem !important;        /* вместо 30px */
}
/* Убрать лишний flex-grow — пусть категории выстроятся компактно */
.l-desktop-header-bottom__item { flex: 0 1 auto !important; }

/* Убираем тень/border ниже хедера (занимает ещё пару px) */
.l-desktop-header { box-shadow: none !important; border-bottom: 1px solid var(--border-soft) !important; }

/* Content сразу за header */
.l-content-wrapper { padding-top: 0 !important; margin-top: 0 !important; }

/* Пересчитать fixed-top offset для body (чтобы контент не уехал под хедер) */
body.fixed-header { padding-top: 90px !important; }
.l-desktop-header.l-desktop-header--fixed ~ * { margin-top: 0 !important; }

/* ===================================================================
   v0.9.8 — ВОЗВРАЩАЕМ весь хедер как на alasca.ru (top + middle + bottom),
   применяем только COMPACT-стили из seller alasca-features.css
   Эталон: alasca.ru/ (TOP nav + LOGO row + CATEGORIES row)
   =================================================================== */
.l-desktop-header-top { display: flex !important; }
.l-desktop-header-bottom { display: flex !important; }
.l-desktop-header-middle__item .b-text,
.l-desktop-header-middle__item p { display: block !important; }

/* Middle: держим «Разработка...» текст видимым но уменьшенным */
.l-desktop-header-middle {
    padding: 0.25rem 0 !important;
    min-height: 52px !important;
}
.l-desktop-header-middle__item p,
.l-desktop-header-middle__item .b-text {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

/* ===================================================================
   v1.0 — 2-COLUMN LAYOUT (form LEFT + sticky viz RIGHT) — Heatex-style
   =================================================================== */
.cfg-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: start;
}
.cfg-layout__left { min-width: 0; }
.cfg-layout__right {
    align-self: start;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Sticky viz panel — compact mode */
.calc-viz--sticky {
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    grid-template-columns: none;
}
.calc-viz--sticky .calc-viz__canvas {
    aspect-ratio: 4 / 3;
    min-height: 180px;
    max-height: 220px;
}
.calc-viz--sticky .calc-viz__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: 11.5px;
    padding: 0;
}
.calc-viz--sticky .calc-viz__info-row {
    flex-direction: row;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-soft);
    gap: 6px;
}
.calc-viz--sticky .calc-viz__info-row--full { grid-column: 1 / -1; }
.calc-viz--sticky .calc-viz__info-label {
    font-size: 10.5px; text-transform: none;
    letter-spacing: 0; color: var(--muted); margin: 0;
}
.calc-viz--sticky .calc-viz__info-value {
    font-size: 11.5px; font-weight: 500;
}

/* Live metrics card */
.live-metrics {
    padding: 12px;
    background: linear-gradient(180deg, #fafbf7, #f4f8ec);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}
.live-metrics__title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--brand-dark); font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--brand);
}
.live-metrics__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.live-metrics__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 8px;
    background: #fff;
    border-radius: 4px;
    font-size: 12px;
}
.lm-lbl { color: var(--muted); font-weight: 500; }
.lm-val {
    font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.live-metrics__note {
    margin-top: 10px;
    font-size: 10.5px;
    color: var(--muted);
    font-style: italic;
    text-align: center;
}

/* Адаптив: на ≤1100px делаем одну колонку, viz идёт ПЕРЕД формой */
@media (max-width: 1100px) {
    .cfg-layout { grid-template-columns: 1fr; }
    .cfg-layout__right {
        position: static;
        order: -1;
        max-height: none;
    }
    .calc-viz--sticky .calc-viz__canvas { max-height: 200px; }
}

/* Сжатие полей ввода — убрать растянутость */
.calc-section .calc-grid { gap: 10px !important; }
.field input, .field select, .m-field input {
    max-width: 140px;    /* для числовых полей */
}
.field--full input, .field--full select,
.field--wide input, .field--wide select { max-width: none; }
.field { max-width: 180px; }
.field--wide, .field--full { max-width: none; }
.calc-grid--5 > .field, .calc-grid--6 > .field { max-width: none; }

/* ===================================================================
   v1.1 — Full Heatex-style metrics table в RIGHT-панели
   =================================================================== */
.cfg-layout { grid-template-columns: 1fr 520px !important; }  /* расширяем RIGHT */

.live-metrics {
    padding: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.rm-head {
    padding: 10px 14px;
    background: linear-gradient(180deg, #fafbf7, #f4f8ec);
    border-bottom: 1px solid var(--border);
}
.rm-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--brand-dark); font-weight: 700;
    margin-bottom: 4px;
}
.rm-model {
    font-size: 13px; font-weight: 600;
    color: var(--text);
}

.rm-table {
    width: 100%; border-collapse: collapse;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}
.rm-table th {
    background: #f7f9f3;
    padding: 5px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.rm-table thead th[colspan="2"] {
    background: var(--brand-bg);
    color: var(--brand-dark);
}
.rm-table tr.rm-sub th {
    font-size: 9.5px;
    color: var(--muted);
    background: #fafbf7;
    text-transform: none;
    font-weight: 500;
    padding: 3px 6px;
}
.rm-table th.rm-lbl,
.rm-table td.rm-lbl { text-align: left; }
.rm-table td {
    padding: 5px 6px;
    text-align: center;
    border-bottom: 1px solid var(--border-soft);
}
.rm-table td.rm-lbl {
    color: var(--text);
    font-weight: 500;
    text-align: left;
    padding-left: 10px;
}
.rm-table td.rm-u {
    font-size: 10px;
    color: var(--subtle);
    white-space: nowrap;
}
.rm-table tr.rm-sect td {
    background: var(--brand-bg);
    color: var(--brand-dark);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--brand);
}
.rm-table tr.rm-full td:last-child {
    text-align: left;
    padding-left: 10px;
}
.rm-table .ok { color: var(--ok); font-weight: 600; }
.rm-table .fail { color: var(--danger); font-weight: 600; }

/* Compact select-metrics mode */
.rm-compact {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.rm-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12px;
}
.rm-row span { color: var(--muted); }
.rm-row b { font-weight: 700; color: var(--text); }
.rm-row b.ok { color: var(--ok); }
.rm-row b.fail { color: var(--danger); }

.rm-hint {
    padding: 8px 14px;
    font-size: 10.5px;
    color: var(--muted);
    font-style: italic;
    background: #fafbf7;
    border-top: 1px solid var(--border-soft);
    line-height: 1.4;
}

/* Адаптив ≤1200px: right 420px, а на ≤1100 → одна колонка */
@media (max-width: 1400px) {
    .cfg-layout { grid-template-columns: 1fr 440px !important; }
    .rm-table { font-size: 10.5px; }
    .rm-table td { padding: 4px 4px; }
}
@media (max-width: 1100px) {
    .cfg-layout { grid-template-columns: 1fr !important; }
    .cfg-layout__right { position: static; max-height: none; order: 99; }
}

/* ===================================================================
   v1.2 — Tooltips для технических терминов
   =================================================================== */
.has-tip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--brand);
}
.has-tip .tip-icon {
    font-size: 8.5px;
    color: var(--brand);
    background: var(--brand-bg);
    border-radius: 50%;
    padding: 0 4px;
    margin-left: 3px;
    vertical-align: super;
    font-weight: 700;
    line-height: 1;
    position: static;
}
.has-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 320px;
    background: #2c3e2c;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 100;
    white-space: normal;
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
    pointer-events: none;
}
.has-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #2c3e2c;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s, visibility 0.18s;
    z-index: 100;
}
.has-tip:hover::after,
.has-tip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* muted helper в ячейках */
.rm-table .muted { color: var(--muted); font-style: italic; }

/* ===================================================================
   v1.3 — MEGA COMPACT FORM: чик-чик-чик ввёл, получил результат
   Цель: 5 секций с headers+hints (240px) → плоская сетка (280px total)
   =================================================================== */

/* Убираем большие заголовки секций и описания */
.calc-section__head { display: none !important; }
.calc-section__num, .calc-section__title, .calc-section__hint { display: none !important; }

/* Секции — минимальный padding */
.calc-section {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Компактные поля */
.calc-grid { gap: 6px 8px !important; }
.calc-grid--5, .calc-grid--6 {
    grid-template-columns: repeat(6, 1fr) !important;
}
.field {
    gap: 1px !important;
    font-size: 11.5px !important;
    max-width: none !important;
}
.field > span {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--muted);
    margin: 0 !important;
}
.field input[type=number],
.field input[type=text],
.field select {
    height: 26px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}
.field select { padding-right: 22px !important; }

/* Check field компактнее */
.field--check { padding-top: 13px !important; gap: 4px !important; }
.field--check input[type=checkbox] { width: 14px; height: 14px; }
.field--check span { font-size: 11px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* Matrix cards в один ряд мелкими */
.matrix-cards { gap: 4px !important; grid-template-columns: repeat(4, 1fr) !important; }
.matrix-card {
    padding: 4px 6px !important;
    font-size: 10px !important;
    min-height: 32px;
}
.matrix-card__code { font-size: 9px !important; }
.matrix-card__name { font-size: 10.5px !important; }
.matrix-card__app, .matrix-card__recovers { display: none !important; }

/* Season matrix компактнее */
.season-matrix { font-size: 11px !important; }
.season-matrix th, .season-matrix td { padding: 2px 4px !important; }
.season-matrix .m-field input { height: 22px !important; font-size: 11px !important; width: 50px !important; max-width: 50px !important; padding: 0 4px !important; }
.season-matrix .m-field span { font-size: 9.5px !important; }

/* Панель presets компактнее */
.panel--presets {
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    font-size: 10.5px !important;
    gap: 4px !important;
}
.panel--presets .chip { padding: 3px 8px !important; font-size: 10.5px !important; }

/* Actions compact */
.calc-actions { gap: 6px !important; margin-top: 8px !important; }
.rk-btn--lg { padding: 6px 14px !important; font-size: 12.5px !important; min-height: 30px; }
.rk-btn--lg svg { width: 12px; height: 12px; }

/* Top row compact */
.top-row { padding: 4px 10px !important; margin-bottom: 6px !important; }
.top-row .chip--series { padding: 2px 10px !important; font-size: 11px !important; min-width: 40px !important; }
.chips-lbl { font-size: 10px !important; }

/* ===================================================================
   v1.4 — HEATEX-STYLE horizontal fields (label слева, input справа)
   Каждое поле = 1 строка 24px. Grid 2 колонки внутри LEFT.
   =================================================================== */

/* Поля становятся HORIZONTAL */
.field {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    min-height: 22px !important;
    padding: 0 !important;
}
.field > span {
    flex: 0 0 auto;
    width: 110px;
    font-size: 10.5px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--muted);
    text-align: right;
    padding-right: 2px;
    line-height: 1.15 !important;
    font-weight: 500 !important;
}
.field input[type=number],
.field input[type=text],
.field select {
    flex: 1 1 auto;
    max-width: 120px !important;
    height: 22px !important;
    font-size: 11.5px !important;
    padding: 0 6px !important;
    border-radius: 3px !important;
}
.field select { padding-right: 18px !important; background-size: 10px !important; }

/* Checkbox inline */
.field--check {
    flex-direction: row !important;
    padding-top: 0 !important;
    min-height: 22px;
}
.field--check > input[type=checkbox] {
    order: -1;
    margin-right: 4px;
    width: 13px; height: 13px;
}
.field--check span {
    font-size: 10.5px !important;
    width: auto !important;
    text-align: left !important;
    color: var(--text) !important;
}
.field--wide, .field--full {
    grid-column: span 2 !important;
}
.field--wide input, .field--wide select {
    max-width: none !important;
    flex: 1 1 100% !important;
}

/* Grid внутри секций: 2 колонки */
.calc-grid--5, .calc-grid--6 {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 16px !important;
}

/* Секция padding ещё меньше */
.calc-section { padding: 6px 10px !important; margin-bottom: 4px !important; }

/* Matrix cards компактно — 4 в ряд inline */
.matrix-cards {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3px !important;
    margin-top: 2px;
}
.matrix-card {
    padding: 3px 5px !important;
    min-height: 26px;
    flex-direction: row !important;
    gap: 4px !important;
    align-items: center;
}
.matrix-card__row1 { flex: 1; display: flex; gap: 4px; align-items: center; }
.matrix-card__code {
    background: var(--brand-bg); color: var(--brand-dark);
    padding: 1px 4px; border-radius: 2px;
    font-size: 9px !important; font-weight: 700;
}
.matrix-card__name { font-size: 10.5px !important; font-weight: 500; }
.matrix-card__app, .matrix-card__recovers { display: none !important; }

/* Блок .field.field--full (для matrix cards) без flex row */
.field--full {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
}
.field--full .field__label, .field--full > span {
    width: 100% !important; text-align: left !important;
    font-size: 10px !important; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--muted);
}

/* Season matrix ещё плотнее */
.season-matrix { font-size: 10.5px !important; margin-top: 2px; }
.season-matrix th, .season-matrix td { padding: 1px 3px !important; }
.season-matrix thead th { font-size: 9.5px !important; }
.season-matrix .m-field {
    display: flex; align-items: center; gap: 2px;
    padding: 0;
}
.season-matrix .m-field input {
    height: 20px !important; width: 46px !important; max-width: 46px !important;
    font-size: 10.5px !important; padding: 0 3px !important;
}
.season-matrix .m-field span { font-size: 9px !important; color: var(--muted); }

/* Field note — маленьким */
.field-note { font-size: 9px !important; color: var(--subtle) !important; font-style: italic; }

/* ===================================================================
   v1.5 — Field widths ПО СОДЕРЖИМОМУ (правило feedback_design_quality)
   2 цифры ≠ 5-см окошко
   =================================================================== */

/* Ширины по классам — применяются точечно по name */
.field input[type=number][name="winter_outdoor"],
.field input[type=number][name="winter_extract"],
.field input[type=number][name="summer_outdoor"],
.field input[type=number][name="summer_extract"],
.field input[type=number][name="winter_outdoor_rh"],
.field input[type=number][name="winter_extract_rh"],
.field input[type=number][name="summer_outdoor_rh"],
.field input[type=number][name="summer_extract_rh"],
.field input[type=number][name="rpm"],
.field input[type=number][name="purge_deg"],
.field input[type=number][name="target_eta_t_pct"],
.field input[type=number][name="heat_source_eff"],
.field input[type=number][name="energy_price_rub_kwh"],
.field input[type=number][name="altitude_m"] {
    max-width: 60px !important;  /* 2-4 цифры */
}

.field input[type=number][name="supply_m3h"],
.field input[type=number][name="extract_m3h"],
.field input[type=number][name="max_dp_pa"],
.field input[type=number][name="hours_per_year"],
.field input[type=number][name="custom_diameter_mm"],
.field input[type=number][name="casing_W_mm"],
.field input[type=number][name="casing_H_mm"],
.field input[type=number][name="casing_L_mm"] {
    max-width: 80px !important;  /* 4-5 цифр */
}

.field input[type=number][name="pressure_pa"] {
    max-width: 90px !important;  /* 6 цифр (101325) */
}

/* Select под матрицу/тип — по тексту */
.field select[name="foil"],
.field select[name="depth_mm"],
.field select[name="n_wheels"],
.field select[name="purge_deg"],
.field select[name="casing_material"],
.field select[name="erp_min"],
.field select[name="economy_city"] {
    max-width: 130px !important;
}
.field select[name="casing_type"],
.field select[name="frost_strategy"],
.field select[name="model_id"] {
    max-width: 200px !important;
}

/* Season matrix — ещё уже под 2 цифры */
.season-matrix .m-field input { width: 36px !important; max-width: 36px !important; }

/* Ширина labels: short labels — 80px, длинные — 120px. Применить группировкой */
.field > span { width: 95px !important; }

/* "Глубина корпуса, мм" оверлы в 2 строчки, перенос нормально */
.field > span[title] { word-wrap: break-word; }

/* Labels чуть шире — "Глубина корпуса, мм" обрезалось */
.field > span { width: 105px !important; font-size: 10px !important; }

/* ===================================================================
   v1.6 — flex-wrap вместо 2-col grid: поля упаковываются компактно
   Убираем пустоту справа от коротких полей
   =================================================================== */
.calc-grid,
.calc-grid--5,
.calc-grid--6 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 14px !important;
    grid-template-columns: none !important;
}
.calc-grid > .field,
.calc-grid > label {
    flex: 0 0 auto !important;    /* не растягиваются */
}
.field { min-width: 0; }
.field--wide, .field--full {
    flex: 1 1 100% !important;
    grid-column: auto !important;
}

/* Секции — контент обжимает, не растягивает */
.calc-section { display: block; }

/* Matrix cards оставляем grid 4-col */
.field--full .matrix-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
}

/* ===================================================================
   v1.7 — fix season-matrix: inputs под "-25" + таблица по контенту
   =================================================================== */
.season-matrix {
    width: auto !important;       /* не 100% */
    border-collapse: collapse;
    table-layout: auto !important;
}
.season-matrix th, .season-matrix td {
    white-space: nowrap !important;
    padding: 1px 4px !important;
    width: 1% !important;         /* shrink-to-fit */
}
.season-matrix th:first-child, .season-matrix td:first-child {
    padding-right: 8px !important;
}
/* Temp inputs: -25, 22, 32 — 3 символа */
.season-matrix .m-field input[name*="outdoor"]:not([name*="_rh"]),
.season-matrix .m-field input[name*="extract"]:not([name*="_rh"]) {
    width: 44px !important; max-width: 44px !important;
}
/* RH inputs: 50, 85, 35 — 2-3 цифры без знака */
.season-matrix .m-field input[name*="_rh"] {
    width: 38px !important; max-width: 38px !important;
}
/* Убираем огромный padding справа от ° / % */
.season-matrix .m-field {
    gap: 1px !important;
}
.season-matrix .m-field span {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* ===================================================================
   v1.8 — ещё плотнее: table inline, секции впритык
   =================================================================== */
.season-matrix {
    display: inline-table !important;  /* не тянется на всю ширину */
}
.calc-section { margin-bottom: 3px !important; padding: 5px 10px !important; }

/* Чтобы .season-matrix могла быть в одном ряду с другими полями */
.calc-section:has(.season-matrix) {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

/* ===================================================================
   v1.9 — СЕКЦИИ сжимаются по контенту (width: fit-content)
   Не будет огромного белого бокса вокруг маленькой таблицы
   =================================================================== */
.cfg-layout__left {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;  /* секции ЛЕВЫМ краем, не растягиваются */
}
.calc-section {
    width: fit-content !important;
    max-width: 100%;
    min-width: 0;
}
/* панели тоже по контенту */
.cfg-layout__left .panel--presets,
.cfg-layout__left .top-row {
    width: fit-content !important;
    max-width: 100%;
}
/* Actions / results — full width */
.cfg-layout__left .calc-actions,
.cfg-layout__left #results {
    width: 100% !important;
}

/* ===================================================================
   v2.0 — ОДНА коробка для всей формы, не 7 отдельных
   Группы разделены тонкими линиями внутри
   =================================================================== */

/* Переопределяем всё — одна общая коробка вокруг формы */
.cfg-layout__left {
    align-items: stretch;   /* отменяем fit-content для под-элементов */
    gap: 5px;
}
.cfg-layout__left form.calc {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: var(--shadow-xs);
    width: fit-content;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Секции внутри — БЕЗ фона, без рамок, с тонким разделителем */
.cfg-layout__left .calc-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed var(--border-soft) !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}
.cfg-layout__left .calc-section:last-of-type {
    border-bottom: none !important;
    padding-bottom: 2px !important;
}

/* Top row и panel-presets тоже в fit-content как были */
.cfg-layout__left .top-row,
.cfg-layout__left .panel--presets {
    width: fit-content !important;
}

/* Actions по центру и на всю ширину формы */
.cfg-layout__left .calc-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 4px !important;
}

/* Results — отдельной коробкой если появятся */
.cfg-layout__left #results:not(:empty) {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 6px;
    box-shadow: var(--shadow-xs);
}

/* ===================================================================
   v2.1 — ВСЁ в ОДНОЙ коробке: chips серии + climate-preset + вся форма
   =================================================================== */
.cfg-layout__left {
    display: block !important;
    padding: 0;
}
.cfg-layout__left > form.calc {
    /* форма теперь обёртка ВСЕГО */
    width: fit-content;
    max-width: 100%;
}
/* Убираем собственные коробки у top-row и presets — теперь они ВНУТРИ одной общей */
.cfg-layout__left .top-row,
.cfg-layout__left .panel--presets {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    border-bottom: 1px dashed var(--border-soft) !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* ===================================================================
   v2.2 — cfg-layout__left САМА становится единой коробкой
   Всё внутри (top-row, presets, form.calc, results) БЕЗ своих коробок
   =================================================================== */
.cfg-layout__left {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    box-shadow: var(--shadow-xs) !important;
    width: fit-content !important;
    max-width: 100% !important;
    align-items: stretch !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Все дети cfg-layout__left — без бордера/фона, пунктирный разделитель снизу */
.cfg-layout__left > .top-row,
.cfg-layout__left > .panel--presets,
.cfg-layout__left > form.calc,
.cfg-layout__left > #results {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dashed var(--border-soft) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
}
/* Form внутри — раскладка та же */
.cfg-layout__left > form.calc {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* Последний элемент без нижней линии */
.cfg-layout__left > #results:empty { display: none !important; }
.cfg-layout__left > form.calc { border-bottom: none !important; }

/* ===================================================================
   v2.3 — ещё плотнее: labels уже, gap меньше, поля упакованы
   =================================================================== */
.field > span {
    width: 95px !important;
    font-size: 9.5px !important;
}
.calc-grid, .calc-grid--5, .calc-grid--6 { gap: 3px 10px !important; }
.field { gap: 5px !important; min-height: 20px !important; }
.field input, .field select { height: 20px !important; font-size: 11px !important; }

/* Season matrix чуть плотнее */
.season-matrix .m-field input { height: 18px !important; font-size: 10px !important; }
.season-matrix th { font-size: 9px !important; }

/* Matrix cards поменьше по высоте */
.matrix-card { min-height: 24px !important; padding: 2px 5px !important; }
.matrix-card__name { font-size: 10px !important; }

/* ===================================================================
   v2.8 — ОДИН набор правил для разделителей (убрал все старые)
   =================================================================== */
.l-desktop-header-bottom ul.navbar-nav { gap: 0 !important; }
.l-desktop-header-bottom ul.navbar-nav > li {
    border: none !important;
    padding: 0 14px !important;
    position: relative !important;
}
.l-desktop-header-bottom ul.navbar-nav > li:first-child { padding-left: 0 !important; }
.l-desktop-header-bottom ul.navbar-nav > li:last-child { padding-right: 0 !important; }
.l-desktop-header-bottom ul.navbar-nav > li:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 22% !important;
    bottom: 22% !important;
    width: 1px !important;
    background: var(--brand-dark) !important;
    opacity: 0.5 !important;
    display: block !important;
}

/* ===================================================================
   v3.0 — компактный список кандидатов после «Подобрать»
   =================================================================== */
.cand {
    font-size: 11.5px;
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
}
.cand th, .cand td {
    padding: 4px 8px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    text-align: center;
}
.cand th {
    background: #f7f9f3 !important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    font-weight: 600;
}
.cand tr:first-child td {
    background: var(--brand-bg);
    font-weight: 600;
}
.cand .rk-btn {
    padding: 2px 10px !important;
    font-size: 10.5px !important;
    min-height: 22px !important;
}
.cand td:first-child, .cand th:first-child {
    text-align: left; font-weight: 600;
}

/* Result section padding tighter */
#results { padding: 8px 12px !important; }
.result-head { padding: 0 0 6px 0 !important; border-bottom: 1px solid var(--divider); margin-bottom: 6px; }
.result-title { font-size: 14px !important; margin: 0 !important; }
.result-sub { font-size: 11px !important; margin: 2px 0 0 !important; color: var(--muted); }

/* ===================================================================
   v3.1 — Info panel: группы «Ротор» + «Габариты корпуса»
   =================================================================== */
.vz-group {
    margin-bottom: 8px;
}
.vz-group:last-child { margin-bottom: 0; }
.vz-group__title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-dark);
    font-weight: 700;
    padding: 3px 6px 2px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--brand-bg);
    background: var(--brand-bg);
}

/* Dim-label-big (Ø внутри SVG) — фон подложить для читаемости */
.rotor-svg-root .dim-label-big {
    font-size: 10px !important;
    paint-order: stroke fill;
    stroke: #fff;
    stroke-width: 3px;
}

/* ===================================================================
   v4.0 — Top switcher: Роторный / Пластинчатый
   =================================================================== */
.cfg-type-switcher {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px;
    background: var(--brand-bg);
    border-radius: 8px;
    width: fit-content;
}
.cfg-type-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.cfg-type-btn:hover { color: var(--brand-dark); }
.cfg-type-btn.active {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cfg-type-btn__icon {
    font-size: 18px;
    line-height: 1;
}
.cfg-type-btn__name {
    font-weight: 700;
}
.cfg-type-btn__hint {
    font-size: 10.5px;
    font-weight: 400;
    opacity: 0.75;
    margin-left: 4px;
    text-transform: none;
}
.chip--plate-model {
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

/* Badge для ×2 параллельно */
.badge-parallel {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--brand);
    color: #fff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}

/* ===== Copy protection flash notification ===== */
.protection-flash {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(24px);
    background: var(--brand);
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 99999;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.protection-flash--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Category badge in result header ===== */
.result-category {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 10px;
    background: rgba(124, 174, 53, 0.12);
    color: #5d8a22;
    border: 1px solid rgba(124, 174, 53, 0.35);
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* ===== Test method line under result title ===== */
.result-std {
    margin-top: 6px;
    font-size: 12.5px;
    color: #555;
    font-style: italic;
}
.result-std b { color: var(--brand-dark, #5d8a22); font-style: normal; }

/* ===== GOST 308 curve table — season headers highlighted ===== */
.cand--gost308 th.season-winter { background: #e3edf8; color: #1f4776; border-bottom: 2px solid #4a90e2; }
.cand--gost308 th.season-summer { background: #fdf0e3; color: #8a4a17; border-bottom: 2px solid #e87e25; }
.cand--gost308 th { font-size: 12px; }
.cand--gost308 td { font-variant-numeric: tabular-nums; }

/* ===== Защита от копирования: user-select disabled на результатах ===== */
#results, #live-metrics, #calc-viz, #calc-viz-plate {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* ... но цифровую выдачу оставляем выделяемой (ради UX — чтобы видеть что скопировал) */
#results .cand td, #results .cand th, #results .result-title, #results .result-sub {
    -webkit-user-select: text;
    user-select: text;
}

/* ===== Print media — выводим .print-doc как нормальную техничку ===== */
/* Старое правило (всё скрывалось, оставалась одна фраза) — заменено 2026-04-29 */
@media print {
    @page { size: A4; margin: 14mm 14mm 16mm 14mm; }
    html, body { background: #fff !important; color: #1c2620 !important; font-size: 10pt; line-height: 1.35; }
    body > *:not(.print-doc) { display: none !important; }
    .print-doc {
        display: block !important;
        font-family: 'Rubik', Arial, sans-serif;
        color: #1c2620;
        max-width: 100%;
    }
    .print-doc a { color: #1c2620; text-decoration: none; }
    .print-doc__hdr {
        display: flex; justify-content: space-between; align-items: flex-end;
        border-bottom: 2.5pt solid #7CAE35;
        padding-bottom: 6pt; margin-bottom: 10pt;
    }
    .print-doc__brand {
        font-family: Arial, sans-serif; font-weight: 800; font-size: 24pt;
        color: #7CAE35; letter-spacing: 0.04em; line-height: 1;
    }
    .print-doc__tagline {
        font-size: 7.5pt; color: #5d8a22; font-style: italic;
        margin-top: 2pt;
    }
    .print-doc__meta {
        text-align: right; font-size: 8.5pt; color: #4a544c; line-height: 1.5;
    }
    .print-doc__meta b { color: #1c2620; font-weight: 600; }

    .print-doc__title {
        font-size: 14pt; font-weight: 700; margin: 8pt 0 4pt;
        color: #1c2620;
    }
    .print-doc__sub { font-size: 9.5pt; color: #4a544c; margin-bottom: 12pt; }

    .print-doc__section { break-inside: avoid; margin-bottom: 9pt; }
    .print-doc__section h3 {
        font-size: 10.5pt; font-weight: 700; color: #5d8a22;
        text-transform: uppercase; letter-spacing: 0.04em;
        margin: 0 0 4pt; padding-bottom: 2pt;
        border-bottom: 0.5pt solid #d4dec4;
    }

    .print-doc__params {
        width: 100%; border-collapse: collapse; font-size: 9.5pt;
    }
    .print-doc__params td {
        padding: 2.5pt 6pt; vertical-align: top; line-height: 1.35;
    }
    .print-doc__params td:first-child {
        color: #4a544c; width: 42%;
    }
    .print-doc__params td:last-child { color: #1c2620; font-weight: 500; }
    .print-doc__params tr + tr td { border-top: 0.4pt solid #ecefe5; }

    .print-doc__seasons {
        width: 100%; border-collapse: collapse; font-size: 9.5pt;
        margin-top: 2pt;
    }
    .print-doc__seasons th, .print-doc__seasons td {
        padding: 4pt 6pt; border: 0.5pt solid #d4dec4; vertical-align: top;
    }
    .print-doc__seasons thead th {
        background: #E8F0DC; color: #1c2620; font-weight: 600; text-align: left;
    }
    .print-doc__seasons th[scope="row"] {
        background: #f7faef; font-weight: 600; color: #5d8a22; width: 38%;
    }
    .print-doc__seasons td.num { text-align: right; font-variant-numeric: tabular-nums; }

    .print-doc__cols { display: flex; gap: 14pt; }
    .print-doc__cols > * { flex: 1 1 0; }

    .print-doc__notice {
        margin-top: 10pt; padding: 6pt 8pt;
        border-left: 2pt solid #7CAE35; background: #f6f8f3;
        font-size: 8.5pt; color: #4a544c; line-height: 1.45;
    }
    .print-doc__ftr {
        margin-top: 14pt; padding-top: 6pt;
        border-top: 0.5pt solid #d4dec4;
        display: flex; justify-content: space-between;
        font-size: 8pt; color: #4a544c;
    }
    .print-doc__ftr b { color: #1c2620; }
}

/* ===== Mode toggle (Просто / Инженер) ===== */
.cfg-mode-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin: 6px 0 14px; padding: 9px 14px;
    background: #f6f8f3;
    border: 1px solid #e0e6d6;
    border-left: 3px solid var(--brand, #7CAE35);
    border-radius: 6px;
    font-size: 12.5px; color: #4d5a3a;
}
.cfg-mode-bar__left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cfg-mode-bar__hint { color: var(--muted, #5a6a52); font-size: 12px; }
.cfg-mode-toggle {
    display: inline-flex; padding: 2px;
    background: #fff; border: 1px solid #d4dec4; border-radius: 6px;
    overflow: hidden;
}
.cfg-mode-btn {
    appearance: none; border: 0; background: transparent;
    padding: 6px 14px; font-size: 12.5px; font-weight: 600;
    color: var(--muted, #5a6a52); cursor: pointer;
    border-radius: 4px; transition: background .12s, color .12s;
    font-family: inherit;
}
.cfg-mode-btn:hover { color: var(--brand-dark, #5D8A22); }
.cfg-mode-btn.active {
    background: var(--brand, #7CAE35); color: #fff;
}
.cfg-mode-bar__right {
    display: flex; align-items: center; gap: 8px; flex: 1 1 360px;
    justify-content: flex-end; min-width: 0;
    text-align: right;
}
.cfg-mode-bar__icon { color: var(--brand, #7CAE35); flex-shrink: 0; }
.cfg-mode-bar__text { font-size: 11.5px; line-height: 1.45; }
.cfg-mode-bar__text a { color: var(--brand-dark, #5D8A22); font-weight: 600; }

/* ===== Mode visibility rules ===== */
body.mode-simple .cfg-engineer-only,
body.mode-simple .mode-engineer-only { display: none !important; }
body.mode-engineer .mode-simple-only { display: none !important; }

/* В simple — подменяем заголовки таблицы температур на простые формулировки */
body.mode-simple .season-matrix th[data-simple] { font-size: 0; line-height: 0; }
body.mode-simple .season-matrix th[data-simple]::before {
    content: attr(data-simple);
    font-size: 13px; line-height: 1.3; font-weight: 600;
}
/* Чтобы info-кнопка в th[data-simple] не спряталась из-за font-size:0 */
body.mode-simple .season-matrix th[data-simple] .cfg-info-btn {
    font-size: 14px; line-height: 1; vertical-align: middle;
}

/* В simple — скрываем инженерные табы (Детали, h-x Mollier) */
body.mode-simple .tabs .tab[data-tab="details"],
body.mode-simple .tabs .tab[data-tab="mollier"] { display: none !important; }

/* Бейдж режима в шапке результата (визуальный маркер) */
.cfg-mode-bar .cfg-mode-btn[data-cfg-mode="engineer"].active ~ * { /* placeholder для будущих доработок */ }

/* Скрытие .print-doc в нормальном (экранном) режиме */
.print-doc { display: none; }

/* ========================================================================
   Info-кнопка и slide-in панель пояснений (UX как у Heatex Select)
   ======================================================================== */
.cfg-info-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 0 4px;
    width: 16px; height: 16px;
    color: var(--brand, #7CAE35);
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 50%;
    transition: transform .12s, color .12s;
}
.cfg-info-btn:hover {
    color: var(--brand-dark, #5D8A22);
    transform: scale(1.15);
}
.cfg-info-btn:focus-visible {
    outline: 2px solid var(--brand, #7CAE35);
    outline-offset: 2px;
}
.cfg-info-btn svg {
    display: block;
    width: 100%; height: 100%;
}

/* Затемняющий backdrop за панелью */
.cfg-info-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    z-index: 9998;
    transition: opacity .25s;
}
.cfg-info-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Slide-in панель справа */
.cfg-info-panel {
    position: fixed;
    top: 0; right: 0;
    width: min(420px, 100vw);
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0,0,0,.12);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    font-family: 'Rubik', sans-serif;
}
.cfg-info-panel.open { transform: translateX(0); }

.cfg-info-panel__hdr {
    flex-shrink: 0;
    padding: 18px 22px 14px;
    border-bottom: 1px solid #e0e6d6;
    background: linear-gradient(135deg, #fafbf7, #f4f8ec);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.cfg-info-panel__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 18px; font-weight: 700;
    color: var(--brand-dark, #5D8A22);
    line-height: 1.3;
}
.cfg-info-panel__close {
    flex-shrink: 0;
    appearance: none;
    border: 0;
    background: transparent;
    width: 32px; height: 32px;
    font-size: 24px; line-height: 1;
    color: #5a6a52;
    cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.cfg-info-panel__close:hover {
    background: rgba(124, 174, 53, .12);
    color: var(--brand-dark, #5D8A22);
}

.cfg-info-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px 24px;
    font-size: 14px; line-height: 1.55;
    color: #1c2620;
}
.cfg-info-panel__body p { margin: 0 0 11px; }
.cfg-info-panel__body p:last-child { margin-bottom: 0; }
.cfg-info-panel__body ul {
    margin: 0 0 11px;
    padding-left: 22px;
}
.cfg-info-panel__body ul li {
    margin-bottom: 5px;
    line-height: 1.45;
}
.cfg-info-panel__body b {
    color: var(--brand-dark, #5D8A22);
    font-weight: 600;
}
.cfg-info-panel__body i { color: #4a544c; }

/* Адаптив: на мобильном — почти на весь экран */
@media (max-width: 600px) {
    .cfg-info-panel { width: 100vw; }
    .cfg-info-panel__title { font-size: 16px; }
    .cfg-info-panel__body { font-size: 13px; }
}

/* В печать — info-инфраструктура не нужна */
@media print {
    .cfg-info-btn, .cfg-info-panel, .cfg-info-overlay { display: none !important; }
}

/* ===== Ghost button variant (used for Паспорт ГОСТ 308 button) ===== */
.rk-btn--ghost {
    background: #fff;
    color: var(--brand-dark, #5d8a22);
    border: 1.5px dashed var(--brand);
}
.rk-btn--ghost:hover {
    background: rgba(124, 174, 53, 0.08);
    border-style: solid;
}

/* ===== Engineering tool note — soft, neutral ===== */
.compliance-ribbon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    padding: 7px 12px;
    background: #f6f8f3;
    border: 1px solid #e0e6d6;
    border-left: 3px solid var(--brand, #7cae35);
    border-radius: 6px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #4d5a3a;
}
.compliance-ribbon__icon {
    font-size: 14px;
    color: var(--brand, #7cae35);
    flex-shrink: 0;
    line-height: 1;
}
.compliance-ribbon__text {
    flex: 1;
}
.compliance-ribbon__text a {
    color: var(--brand-dark, #5d8a22);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted var(--brand-dark, #5d8a22);
}
.compliance-ribbon__text a:hover { border-bottom-style: solid; }