/* =====================================================================
   THE TECHNICIAN – tool styles on top of layout.css
   Uses only the layout tokens (--text, --border, --soft-surface …) plus
   chart colours defined here for light and dark.
   ===================================================================== */

/* ── Chart and tool tokens: light ───────────────────────────────────── */
:root {
    --ink: var(--text);
    --ink2: var(--text-secondary);
    --muted: #8a93a3;
    --line: var(--border);
    --panel: var(--soft-surface);
    --field: var(--surface);
    --grid: #dfe2e8;
    --grid2: #c6ccd6;
    --bad: var(--error);

    --cyc: #2d56a3;
    --cycfill: rgba(45, 86, 163, .08);
    --air: #2d56a3;
    --air2: #1c3c78;
    --dome: #d23f3a;
    --sat: #d23f3a;
    --iso: #c98a3a;
    --isen: #2f8f6f;
    --ref: #6b3fc2;
    --warm: #b5650f;
    --cold: #1b7fa6;
    --heat: #c2410c;
    --liq: #0e7c86;
    --env: #1f8a5b;
    --envfill: rgba(31, 138, 91, .10);
    --barN: #a3adb8;

    --f-body: 'Inter', system-ui, sans-serif;
    --f-disp: 'Inter', system-ui, sans-serif;
    --f-mono: 'Inter', system-ui, sans-serif;
}

/* ── Chart and tool tokens: dark ────────────────────────────────────── */
[data-theme="dark"] {
    --muted: #8c9099;
    --field: #1f1f1f;
    --grid: #353535;
    --grid2: #474747;

    --cyc: #8ab5e3;
    --cycfill: rgba(138, 181, 227, .10);
    --air: #8ab5e3;
    --air2: #b7cde6;
    --dome: #ef6b65;
    --sat: #ef6b65;
    --iso: #d9a05a;
    --isen: #5cc39d;
    --ref: #b39cf2;
    --warm: #e09a45;
    --cold: #5bbbe0;
    --heat: #f08a4b;
    --liq: #4fc3cc;
    --env: #5cc39d;
    --envfill: rgba(92, 195, 157, .12);
    --barN: #5a636e;
}

[hidden] { display: none !important; }

/* ── Header: active page and menu icons ─────────────────────────────── */
.brand a.brand-home { display: flex; align-items: center; gap: 16px; color: inherit; }
.settings-row-icon svg { width: 18px; height: 18px; display: block; margin: 0 auto; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-row.active { border-color: var(--blue-300); box-shadow: inset 3px 0 0 var(--primary-600); }
[data-theme="dark"] .settings-row.active { box-shadow: inset 3px 0 0 var(--blue-300); }
.settings-row-sub { display: block; font-size: .72rem; font-weight: 400; color: var(--text-secondary); }

/* ── Tool page head inside the main card ────────────────────────────── */
.tool-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; }
.tool-head h2 { font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.tool-head .sub { margin-top: 4px; color: var(--text-secondary); font-size: 13px; max-width: 90ch; }
.tag { padding: 2px 9px; border: 1px solid var(--warn); border-radius: 20px; color: var(--warn); font-size: 11.5px; white-space: nowrap; }

.tool .main { display: flex; flex-direction: column; gap: 16px; }
.tool .panel { min-width: 0; }

/* ── Chart panel ────────────────────────────────────────────────────── */
.tool .diag { display: flex; flex-direction: column; padding: 12px 12px 8px; }
.diag-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 2px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
.diag-head > span:first-child, #dTitle { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.readout { font-size: 12px; color: var(--text-secondary); min-height: 18px; font-variant-numeric: tabular-nums; }
.svgbox { position: relative; height: clamp(420px, 52vw, 700px); overflow: hidden; }
.svgbox > svg { display: block; position: absolute; left: 0; top: 0; font-family: var(--f-body); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .svgbox { flex: none; min-height: 0; height: min(80vw, 460px); overflow-x: auto; overflow-y: hidden; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 6px 2px; font-size: 12px; color: var(--text-secondary); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .mk { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend .mk.ring { background: none; border: 1.6px solid var(--ink); width: 12px; height: 12px; }
.sw { width: 18px; height: 0; border-top: 2.5px solid; }

/* View switch (log p,h / T,s / Q,t) */
.vh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.views { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.views button { border: 0; padding: 5px 13px; background: var(--field); color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.views button + button { border-left: 1px solid var(--border); }
.views button:hover { background: var(--soft-surface-hover); color: var(--text); }
.views button[aria-pressed="true"] { background: linear-gradient(135deg, var(--primary-900), var(--primary-600)); color: #fff; }

/* ── Input panel: fieldsets in a grid, hairlines between them ───────── */
.tool form.form-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; padding: 0; overflow: hidden; background: var(--border); }
.tool fieldset { border: 0; margin: 0; padding: 16px 18px; background: var(--soft-surface); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; align-content: start; min-width: 0; }
.tool legend { float: left; width: 100%; grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 0 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.tool legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tool label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.tool label > input, .tool label > select { margin-top: auto; }
.tool label.full, .tool .wide { grid-column: 1 / -1; }
.tool fieldset input[type="number"], .tool fieldset input[type="text"], .tool fieldset select {
    width: 100%; min-width: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; outline: none; }
.tool fieldset input:focus, .tool fieldset select:focus { border-color: var(--blue-300); box-shadow: 0 0 0 3px rgba(138, 181, 227, .25); }
.unit { color: var(--muted); font-size: 11.5px; }
.hint { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.pn { font-weight: 600; color: var(--text); }
.btns { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.tool .btn-ghost { padding: 7px 14px; font-size: 12.5px; }

/* Segmented radio (h,x: t₀ from pressure / input) */
.segwrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.seglbl { font-size: 12.5px; color: var(--text-secondary); }
.segwrap .seg { margin-top: auto; }
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--field); }
.tool .seg label { flex: 1; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 7px 6px; cursor: pointer; font-size: 12.5px; }
.seg input { width: auto; margin: 0; accent-color: var(--primary-600); }
.tool .seg label:has(input:checked) { background: var(--soft-surface-hover); color: var(--text); font-weight: 600; }

/* Checkbox chips (refrigerant comparison) */
.cbs { display: contents; }
.tool label.cb { flex-direction: row; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--field); color: var(--text); font-size: 13px; cursor: pointer; }
.cb input { width: auto; margin: 0; accent-color: var(--primary-600); }
.cb small { margin-left: auto; color: var(--muted); font-size: 11px; }
.cb:has(input:checked) { border-color: var(--blue-300); }

/* Grid layouts at full width so every row closes flush */
@media (min-width: 1000px) {
    .tool form.form-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* log p,h: five blocks → last one spans two columns */
    .tool form.n5 > fieldset:last-of-type { grid-column: span 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tool form.n5 > fieldset:last-of-type .btns { grid-column: auto; align-self: end; }
    /* h,x: circuit block as one row below */
    #fsK { order: 5; grid-column: 1 / -1; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); }
    #fsK > .full, #fsK > .segwrap { grid-column: auto; }
    #fsK .seg label { padding: 7px 4px; }
    /* pipe sizing: duty row, three lines, pipe row */
    .tool form.rows.pipe > fieldset:first-of-type { grid-column: 1 / -1; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .tool form.rows.pipe > fieldset:last-of-type { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tool form.rows.pipe > fieldset:first-of-type > .wide, .tool form.rows.pipe > fieldset:last-of-type > .wide, .tool form.rows.pipe > fieldset:last-of-type > .btns { grid-column: auto; }
    .tool form.rows.pipe > fieldset:last-of-type > .btns { align-self: end; }
    /* comparison: operating point and refrigerant list as full rows */
    .tool form.rows.cmpf > fieldset { grid-column: 1 / -1; }
    .tool form.rows.cmpf > fieldset:first-of-type { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .tool form.rows.cmpf > fieldset:first-of-type > .wide, .tool form.rows.cmpf > fieldset:first-of-type > .btns { grid-column: auto; }
    .tool form.rows.cmpf > fieldset:first-of-type > .btns { align-self: end; }
    .tool form.rows.cmpf > fieldset:last-of-type { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ── Result panels ──────────────────────────────────────────────────── */
.res { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: stretch; }
.res.one { grid-template-columns: minmax(0, 1fr); }
.res > .panel { padding: 0; overflow-x: auto; }
.res > .panel > h2 { margin: 0 18px 4px; padding: 14px 0 10px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.tool table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tool td { padding: 6px 18px; border-bottom: 1px solid var(--border); }
.tool tr:last-child td { border-bottom: 0; }
.tool td.v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool th { padding: 8px 10px 4px; text-align: right; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.tool th:first-child { text-align: left; padding-left: 18px; }
.tool .pt td { padding: 6px 10px; }
.tool .pt td:first-child { padding-left: 18px; }
.tool .cmp th, .tool .cmp td { padding: 6px 10px; white-space: nowrap; }
.tool .cmp td:first-child, .tool .cmp th:first-child { padding-left: 18px; }
.tool tr.ref td, .tool tr.rec td { background: var(--cycfill); }
.notes { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 16px; font-size: 13px; }
.notes li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: baseline; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; transform: translateY(1px); }
.res .panel .notes { border-top: 1px solid var(--border); }
.res .panel h2 + .notes, .res .panel h2 + table + .notes { border-top: 0; }
.chip { display: inline-block; padding: 0 7px; border: 1px solid currentColor; border-radius: 20px; font-size: 10.5px; line-height: 1.6; white-space: nowrap; }
.chip.ok { color: var(--ok); } .chip.warn { color: var(--warn); } .chip.bad { color: var(--error); } .chip.rec { color: var(--cyc); margin-left: 4px; }
svg.ladder { display: block; position: static; width: 100%; height: auto; padding: 4px 10px 10px; font-family: var(--f-body); }

.foot { color: var(--muted); font-size: 12px; max-width: 95ch; }

/* ── Dashboard ──────────────────────────────────────────────────────── */
.dash-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.dash-hero .panel { display: flex; flex-direction: column; gap: 10px; }
.hero-title { font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: .02em; line-height: 1.25; color: var(--text); text-wrap: balance; }
.hero-text { color: var(--text-secondary); max-width: 62ch; }
.hero-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: auto; }
.fact { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--field); min-width: 120px; }
.fact b { font-size: 1.15rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.fact span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden; color: var(--text); transition: transform .15s ease, box-shadow var(--transition), border-color var(--transition); }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue-300); color: var(--text); }
[data-theme="dark"] .tile, [data-theme="dark"] .tile:hover { color: var(--text); }
.tile:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 2px; }
.tile-art { height: 132px; border-bottom: 1px solid var(--border); background: var(--field); }
.tile-art svg { display: block; width: 100%; height: 100%; }
.tile-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 18px 18px; flex: 1; }
.tile-body h3 { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.tile-body p { color: var(--text-secondary); font-size: 13px; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.tile-foot .badges { display: flex; flex-wrap: wrap; gap: 5px; }
.tile-go { font-size: 12.5px; font-weight: 600; color: var(--cyc); white-space: nowrap; }

.pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.pt-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-secondary); }
.pt-grid .input, .pt-grid .select { width: 100%; }
.pt-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.pt-out .fact { min-width: 0; }
.recent .list-row { font-size: 13px; padding: 8px 0; }
.recent .list-row a { font-weight: 500; }
.empty { color: var(--text-secondary); font-size: 13px; padding: 6px 0; }

@media (max-width: 900px) { .dash-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .tool fieldset { padding: 14px; } .pt-out .fact { padding: 8px; } .pt-out .fact b { font-size: .95rem; } }

/* Dashboard tiles: two large tiles on top, three below */
.dash .panel { min-width: 0; }
.dash .panel-row > .panel { min-width: 280px; }
@media (min-width: 1000px) {
    .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .tiles .tile { grid-column: span 2; }
    .tiles .tile.big { grid-column: span 3; }
    .tiles .tile.big .tile-art { height: 150px; }
}
.pt-out .fact b { font-size: 1.05rem; }
.recent .list-row .sum { color: var(--text-secondary); font-size: 12.5px; }
.recent .list-row { flex-wrap: wrap; }
.diag-head .nocase { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-secondary); }

/* ── Accent: blue gradient (default) or solid red ───────────────────── */
:root { --accent: var(--primary-700); }
[data-theme="dark"] { --accent: var(--blue-300); }
:root[data-accent="red"] {
    --primary-900: #e40613; --primary-800: #e40613; --primary-700: #e40613; --primary-600: #e40613;
    --blue-300: #e40613; --blue-50: #f39aa0; --accent: #e40613;
}
.tile-go { color: var(--accent); }
.chip.rec { color: var(--accent); }
.tile:hover { border-color: var(--blue-300); }
[data-accent="red"] .input:focus, [data-accent="red"] .select:focus,
[data-accent="red"] .tool fieldset input:focus, [data-accent="red"] .tool fieldset select:focus { box-shadow: 0 0 0 3px rgba(228, 6, 19, .18); }

/* ── Settings rows in the menu ──────────────────────────────────────── */
.settings-row.setting { cursor: default; flex-wrap: wrap; }
.settings-row.setting:hover { transform: none; }
.opt-group { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--soft-surface-hover); }
.opt-group button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: .76rem; font-weight: 500; cursor: pointer; }
.opt-group button + button { border-left: 1px solid var(--border); }
.opt-group button:hover { color: var(--text); }
.opt-group button[aria-pressed="true"] { background: linear-gradient(135deg, var(--primary-900), var(--primary-600)); color: #fff; }
.swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255, 255, 255, .5); }
.swatch.blue { background: linear-gradient(135deg, #244078, #456199); }
.swatch.red { background: #e40613; }
/* log p,h with heat recovery and economizer: seven blocks → last one spans the full row */
@media (min-width: 1000px) {
    .tool form.n7 > fieldset:last-of-type { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tool form.n7 > fieldset:last-of-type .btns { grid-column: auto; align-self: end; }
}

/* ── Water hydraulics: section table, full-width rows ───────────────── */
.tool #fsS .tblwrap { grid-column: 1 / -1; overflow-x: auto; margin: 0 -4px; }
.tool table.secs { min-width: 760px; }
.tool table.secs th { padding: 2px 4px 6px; text-align: left; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.tool table.secs th:first-child { padding-left: 4px; }
.tool table.secs td { padding: 3px 4px; border: 0; }
.tool table.secs td.n { width: 26px; text-align: center; font-weight: 600; color: var(--text); }
.tool table.secs td:last-child { width: 40px; }
.tool table.secs input, .tool table.secs select { width: 100%; }
.tool table.secs .del { padding: 5px 0; width: 34px; font-size: 15px; line-height: 1; }
@media (min-width: 1000px) {
    .tool form.hyd > #fsS, .tool form.hyd > #fsO { grid-column: 1 / -1; }
    .tool form.hyd > #fsO { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .tool form.hyd > #fsO > .wide, .tool form.hyd > #fsO > .btns { grid-column: auto; }
    .tool form.hyd > #fsO > .btns { align-self: end; }
}
.tool table.secs td:nth-child(2) { width: 30%; }
.tool table.secs td:nth-child(5) { width: 13%; min-width: 110px; }
.tool table.cmp th:nth-child(2) { text-align: left; }
@media (min-width: 1100px) { .res.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
    .tool form.hyd > #fsO { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .tool form.hyd > #fsO > label.wide { grid-column: span 2; }
}

/* Dashboard with six tools: two large tiles, four small ones below */
@media (min-width: 1000px) {
    .tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .tiles .tile { grid-column: span 3; }
    .tiles .tile.big { grid-column: span 6; }
}
.res.three td.v { white-space: normal; text-align: right; }
.res.three td:first-child { width: 48%; }

/* ── Language list in the menu ──────────────────────────────────────── */
.lang-sel { margin-left: auto; padding: 4px 28px 4px 12px; border: 1px solid var(--border); border-radius: 20px; background-color: var(--soft-surface-hover); color: var(--text); font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; outline: none; }
.lang-sel:focus { border-color: var(--blue-300); }
.lang-sel option { color: #111; background: #fff; }

/* ── Chinese, Korean, Japanese: system fonts (offline on every OS), Inter stays for Latin text and numbers ── */
:root:lang(zh) { --f-body: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', sans-serif; }
:root:lang(ko) { --f-body: 'Inter', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans KR', 'Source Han Sans KR', sans-serif; }
:root:lang(ja) { --f-body: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif; }
:root:is(:lang(zh), :lang(ko), :lang(ja)) body, :root:is(:lang(zh), :lang(ko), :lang(ja)) input, :root:is(:lang(zh), :lang(ko), :lang(ja)) select, :root:is(:lang(zh), :lang(ko), :lang(ja)) button { font-family: var(--f-body); }
:root:is(:lang(zh), :lang(ko), :lang(ja)) .brand .title { font-family: 'Montserrat', 'Inter', sans-serif; }
:root:is(:lang(zh), :lang(ja)) .notes, :root:is(:lang(zh), :lang(ja)) .foot { line-break: strict; }
:root:lang(ko) .notes, :root:lang(ko) .foot, :root:lang(ko) .tile-body p { word-break: keep-all; }
.settings-row.setting .settings-row-text { white-space: nowrap; }
:root:is(:lang(zh), :lang(ko), :lang(ja)) .res.three td.v { white-space: nowrap; }
:root:is(:lang(zh), :lang(ko), :lang(ja)) .res.three td:first-child { width: auto; }

/* ── Chiller capacity: solved field, converter as full row ──────────── */
.tool fieldset input.solved { background: var(--cycfill); border-color: var(--cyc); color: var(--text); font-weight: 600; cursor: default; }
.tool fieldset input.solved:focus { box-shadow: none; }
@media (min-width: 1000px) {
    .tool form.capf > fieldset:last-of-type { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tool form.capf > fieldset:last-of-type > .btns { grid-column: auto; align-self: end; }
}

/* Dashboard with seven tools: three large tiles on top, four below */
@media (min-width: 1000px) { .tiles .tile.big { grid-column: span 4; } }

/* ── Refrigerant charge: EN 378 block as full row ───────────────────── */
@media (min-width: 1000px) {
    .tool form.chgf > fieldset:last-of-type { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tool form.chgf > fieldset:last-of-type > .btns { grid-column: auto; align-self: end; }
}

/* Dashboard with eight tools: four large tiles on top, four below */
@media (min-width: 1000px) { .tiles .tile.big { grid-column: span 3; } }

/* Dashboard: two rows of four equal tiles (same order as the menu) */
.tiles { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles .tile, .tiles .tile.big { grid-column: auto; }
.tiles .tile .tile-art, .tiles .tile.big .tile-art { height: 140px; }