/* --- CONVERTER STYLES --- */
/* Override .catalog-wrapper's glass panel ("ground panel") on the converter tab */
.catalog-wrapper.converter-wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.converter-wrapper .catalog-header {
    padding: 0;
    margin-bottom: 20px;
}
/* --- TAB NAV (uses global .btn-group .btn-glass) --- */
.calc-tabs {
    display: flex;
    gap: 1px;
    background: var(--glass-container-bg, rgba(0, 0, 0, 0.35));
    border-radius: 45px;
    padding: 5px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    box-shadow: inset 0 0 2px 2px var(--glass-container-inset, rgba(0, 0, 0, 0.5));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.calc-tab {
    flex: 1;
    min-width: 90px;
    height: 44px;
    padding: 0 14px;
    background: var(--glass-bg, rgba(255, 255, 255, 0.06));
    color: var(--glass-text, rgba(255, 255, 255, 0.45));
    -webkit-backdrop-filter: blur(25px) saturate(50%);
    backdrop-filter: blur(25px) saturate(50%);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    border-top: 0.5px solid var(--glass-border-top, rgba(255, 255, 255, 0.5));
    border-bottom: 2px solid var(--glass-border-bottom, rgba(255, 255, 255, 0.2));
    border-left: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.1));
    border-right: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.1));
    box-shadow: 0 8px 24px var(--glass-shadow, rgba(0, 0, 0, 0.01));
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}
.calc-tab:first-of-type {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}
.calc-tab:last-of-type {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
.calc-tab:hover {
    color: var(--glass-text-hover, rgba(255, 255, 255, 0.9));
    background: var(--glass-bg-hover, rgba(255, 255, 255, 0.12));
    border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.35));
    box-shadow: 0 0 14px var(--glass-highlight, rgba(255, 255, 255, 0.12)), 0 8px 24px var(--glass-shadow-hover, rgba(0, 0, 0, 0.3));
    transform: translateY(-0.5px);
}
.calc-tab.active {
    background: var(--glass-bg-active, rgba(255, 255, 255, 0.1));
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    backdrop-filter: blur(25px) saturate(150%);
    border-top: none;
    border-bottom: 1px solid var(--glass-border-active, rgba(255, 255, 255, 0.08));
    border-left: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05));
    border-right: 1px solid var(--glass-border-side, rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 0 10px 1px var(--glass-inset-shadow, rgba(0, 0, 0, 0.8));
    color: var(--primary-color, #20d21a);
    text-shadow: 0 0 15px rgba(32, 210, 26, 0.5);
}

/* --- TAB PANELS --- */
.calc-tab-panel {
    display: none;
}
.calc-tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 20px;
    align-items: stretch;
}

/* 2-column field layout for panels with many rows */
.calc-card-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
    align-items: start;
}
.calc-card-2col .calc-card-head {
    grid-column: 1 / -1;
}
@media (max-width: 600px) {
    .calc-card-2col { grid-template-columns: 1fr; }
    .calc-tabs { gap: 1px; border-radius: 30px; padding: 3px; }
    .calc-tab { font-size: 11px; padding: 0 8px; min-width: 60px; height: 36px; }
    .calc-tab:first-of-type { border-top-left-radius: 28px; border-bottom-left-radius: 28px; }
    .calc-tab:last-of-type { border-top-right-radius: 28px; border-bottom-right-radius: 28px; }
}
.calc-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}
.calc-title { margin: 0; font-size: 20px; color: var(--body-text-color, var(--text-color)); }
.calc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 44px;
}

/* Rocker / segmented toggle */
.rocker {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 3px;
    position: relative;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.rocker input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rocker label {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--body-text-color, #E0E0E0);
    opacity: 0.6;
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.2s ease;
    user-select: none;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.rocker label:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    opacity: 0.9;
}
.rocker input[type="radio"]:checked + label {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--primary-color, #20d21a);
    opacity: 1;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
}
.rocker input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--primary-color, #20d21a);
    outline-offset: 2px;
}
.calc-desc { margin: 0; font-size: 14px; color: var(--secondary-color); line-height: 1.4; margin-bottom: 8px; }
.calc-row { display: flex; flex-direction: column; gap: 8px; }
.calc-row label { font-size: 13px; font-weight: 600; color: var(--body-text-color, var(--text-color)); }

/* Center the row block vertically inside the card so cards of unequal row counts
   distribute their fields evenly and align the head at the top */
.calc-card .calc-row:first-of-type { margin-top: auto; }
.calc-card .calc-row:last-of-type { margin-bottom: auto; }
/* Flow-share card has extra non-row content (sections + summary); keep it top-aligned */
.flow-share-card .calc-row:first-of-type,
.flow-share-card .calc-row:last-of-type { margin-top: 0; margin-bottom: 0; }

/* Field material from design-system.css. */
.calc-input { width: 100%; }

/* Input + unit picker share one box, so the GROUP carries the field
   material from design-system.css and the inner input goes transparent. */
.calc-input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: var(--field-height-sm);
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-top-color: var(--field-border-top);
    border-radius: var(--field-radius);
    -webkit-backdrop-filter: var(--field-blur);
    backdrop-filter: var(--field-blur);
    overflow: hidden;
    transition: var(--field-transition);
}
.calc-input-group:focus-within {
    background: var(--field-bg-focus);
    border-color: var(--primary-color, #20d21a);
    box-shadow: var(--field-focus-ring);
}
.calc-input-group .calc-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.calc-input-group .calc-input:hover,
.calc-input-group .calc-input:focus {
    background: transparent;
    border: none;
    box-shadow: none;
}
.calc-input-group .calc-unit {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    /* Fixed unit column so every value field is the same width across all categories */
    flex: 0 0 76px;
    width: 76px;
    min-width: 76px;
    font-size: 13px;
    padding: 0 10px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.calc-input-group .calc-unit:hover {
    background: rgba(255, 255, 255, 0.1);
}
.calc-input-group .calc-unit:focus {
    box-shadow: none;
}
.calc-input-group .calc-input-wrap {
    flex: 1;
    min-width: 0;
}

.calc-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
.calc-input-wrap .calc-input {
    width: 100%;
    padding-right: 32px;
}
.calc-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    line-height: 1;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(224, 224, 224, 0.5);
    font-size: 18px;
    cursor: pointer;
    display: none;
    border-radius: 15px;
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}
.calc-clear:hover {
    color: var(--primary-color, #20d21a);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
    transform: translateY(-50%) translateY(-2px);
}
.calc-input-wrap.has-value .calc-clear {
    display: flex;
    align-items: center;
    justify-content: center;
}
.calc-unit {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: var(--body-text-color, #FFFFFF);
    font-size: 14px;
    padding: 0 8px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    min-width: 80px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.calc-unit:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}
.calc-unit:focus { border-color: rgba(255, 255, 255, 0.45); box-shadow: none; }
.calc-unit option { background: #151515; color: #FFF; }

/* Type dropdown matches main input look */
.calc-type {
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    font-size: 16px;
    height: auto;
}

/* Section wrapper */
.calc-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-top: 0.5px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    padding: 4px;
}
.calc-section > .calc-card {
    flex: 1;
    border: none;
    background: transparent;
}
/* Flow Sharing card */
.calc-tab-panel .calc-section { max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; }
.fs-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fs-header,
.fs-section {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 110px 120px;
    gap: 16px;
    align-items: center;
}
.fs-section .calc-input { width: 100%; min-width: 0; box-sizing: border-box; }
.fs-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--secondary-color, rgba(224, 224, 224, 0.6));
    padding: 0 4px;
}
.fs-header > span:nth-child(3),
.fs-header > span:nth-child(4),
.fs-section > .fs-priority,
.fs-section > .fs-qsp {
    text-align: center;
}
.fs-section .fs-label {
    font-weight: 600;
    color: var(--body-text-color, #E0E0E0);
}
.fs-priority {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 40px;
    height: 22px;
}
.fs-priority input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    cursor: pointer;
    margin: 0;
}
/* Toggle track */
.fs-priority::before {
    content: '';
    display: block;
    width: 38px;
    height: 20px;
    border-radius: 10px;
    background: rgba(80, 80, 80, 0.5);
    border: 1px solid rgba(224, 224, 224, 0.2);
    transition: all 0.25s ease;
    flex-shrink: 0;
}
/* Toggle knob */
.fs-priority::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(224, 224, 224, 0.85);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.fs-priority:has(input:checked)::before {
    background: rgba(32, 210, 26, 0.3);
    border-color: var(--primary-color, #20d21a);
    box-shadow: 0 0 10px rgba(32, 210, 26, 0.2);
}
.fs-priority:has(input:checked)::after {
    left: 20px;
    background: var(--primary-color, #20d21a);
}
.fs-priority:hover::before {
    border-color: rgba(224, 224, 224, 0.4);
}
.fs-priority:has(input:focus-visible)::before {
    outline: 2px solid var(--primary-color, #20d21a);
    outline-offset: 2px;
}
.fs-qsp {
    font-weight: 600;
    color: var(--primary-color, #20d21a);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.fs-section.fs-priority-on .fs-qsp {
    text-shadow: 0 0 6px rgba(32, 210, 26, 0.4);
}
.fs-summary {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--secondary-color, rgba(224, 224, 224, 0.7));
    padding-top: 4px;
    border-top: 1px solid rgba(224, 224, 224, 0.1);
}
.fs-summary b { color: var(--body-text-color, #E0E0E0); font-variant-numeric: tabular-nums; }
.fs-warn { color: #ff8a65; font-weight: 600; }
.fs-warn:empty { display: none; }

/* Hide arrows for number inputs */
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calc-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

@media (max-width: 768px) {
    .catalog-header { flex-direction: column; align-items: stretch; gap: 16px; }

}

/* --- COMPACT CONVERTER INSIDE TILE --- */
.tile-body .calc-tabs {
    margin-bottom: 6px;
    gap: 1px;
    padding: 3px;
    border-radius: 30px;
}
.tile-body .calc-tab {
    padding: 0 8px;
    font-size: 10px;
    min-width: 50px;
    height: 32px;
}
.tile-body .calc-tab:first-of-type {
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
}
.tile-body .calc-tab:last-of-type {
    border-top-right-radius: 28px;
    border-bottom-right-radius: 28px;
}
.tile-body .calc-tab-panel.active {
    gap: 4px;
    padding: 4px 0;
}
/* Remove inner glass mid-layer; inputs sit directly on tile body */
.tile-body .calc-section {
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0;
}
.tile-body .calc-card {
    padding: 0;
    gap: 6px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.tile-body .calc-card-2col {
    gap: 6px 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
/* Move clear (×) button to the left of embedded unit dropdown */
.tile-body .calc-input-wrap .calc-clear {
    right: 58px;
    width: 18px;
    height: 18px;
    font-size: 14px;
}
.tile-body .calc-input-wrap .calc-input {
    padding-right: 84px;
}
.tile-body .calc-title {
    font-size: 13px;
}
.tile-body .calc-card-head {
    min-height: 24px;
    gap: 6px;
}
/* Force the card into 2 columns of rows inside the tile */
.tile-body .calc-card.calc-card-2col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 16px !important;
}
/* Label and input side-by-side, so each parameter takes one short row.
   Combined with the 2-column card grid above, this yields 2 params per
   visual row -> half the vertical footprint. */
.tile-body .calc-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) !important;
    flex-direction: initial !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}
.tile-body .calc-row label {
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Denser metrics for the tile-embedded converter; radius stays on the
   field token so it matches every other field on the page. */
.tile-body .calc-input {
    padding: 4px 8px;
    font-size: 12px;
}
.tile-body .calc-type {
    padding: 4px 8px;
    font-size: 12px;
}
/* Embed the unit dropdown inside the input field */
.tile-body .calc-input-group {
    position: relative;
    gap: 0;
}
.tile-body .calc-input-group .calc-input {
    padding-right: 56px;
}
.tile-body .calc-input-group .calc-unit {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 6px);
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 10px;
    padding: 0 16px 0 6px;
    min-width: 0;
    width: 50px;
    border-radius: 0 5px 5px 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
                      linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
    background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.tile-body .calc-input-group .calc-unit:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.tile-body .rocker label {
    padding: 3px 8px;
    font-size: 10px;
}
.tile-body .fs-header,
.tile-body .fs-section {
    gap: 6px;
    grid-template-columns: 30px minmax(0, 1fr) 60px 60px;
}
.tile-body .fs-header {
    font-size: 9px;
}
.tile-body .fs-section .calc-input {
    padding: 3px 6px;
    font-size: 11px;
}
.tile-body .fs-summary {
    font-size: 10px;
}
/* Center row vertical spacing override (kill auto margins from base styles) */
.tile-body .calc-card .calc-row:first-of-type,
.tile-body .calc-card .calc-row:last-of-type {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- CONVERTER TAB: all calculators in one row, descaled --- */
#tab-converter {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}
#tab-converter > .calc-section {
    flex: 1 1 0;
    min-width: 240px;
    padding: 2px;
}
/* The legacy inner tab nav toggles empty placeholder panels — all four
   calculators are always visible in the row, so hide it entirely */
#tab-converter > .calc-tabs,
#tab-converter > .calc-tab-panel {
    display: none;
}
/* Rows must stretch the full card width (the 2col grid's align-items:start
   leaks into the flex layout and shrinks inputs to content width) */
#tab-converter .calc-card.calc-card-2col {
    align-items: stretch;
}
/* Descale so four calculators fit a single row */
#tab-converter .calc-card { padding: 12px; gap: 8px; }
#tab-converter .calc-card.calc-card-2col { grid-template-columns: 1fr; gap: 8px; }
#tab-converter .calc-title { font-size: 14px; }
#tab-converter .calc-card-head { min-height: 30px; gap: 8px; }
#tab-converter .calc-row { gap: 4px; }
#tab-converter .calc-row label { font-size: 11px; }
#tab-converter .calc-input,
#tab-converter .calc-type { font-size: 12px; padding: 6px 10px; }
#tab-converter .calc-input-group .calc-unit { font-size: 11px; min-width: 44px; }
#tab-converter .rocker label { padding: 4px 8px; font-size: 11px; }
#tab-converter .fs-header,
#tab-converter .fs-section { gap: 8px; grid-template-columns: 40px minmax(0, 1fr) 70px 80px; }
#tab-converter .fs-header { font-size: 10px; }
#tab-converter .fs-summary { font-size: 11px; }
@media (max-width: 1100px) {
    #tab-converter > .calc-section { flex-basis: calc(50% - 12px); }
}
@media (max-width: 640px) {
    #tab-converter > .calc-section { flex-basis: 100%; }
}
/* --- Ground-shift panel host: identical one-row converter layout ---
   (#converter-panel-host must also be a flex container) --- */
#converter-panel-host { display: flex; }
#converter-panel-host {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}
#converter-panel-host > .calc-section {
    flex: 1 1 0;
    min-width: 260px;
    padding: 2px;
}
/* Flow Sharing (4th block) needs the most room — wider share of the row */
#converter-panel-host > .calc-section:nth-of-type(4) {
    flex: 1.45 1 0;
    min-width: 340px;
}
/* Keep the (legacy) inner tab nav and its panels on their own full-width line */
#converter-panel-host > .calc-tabs,
#converter-panel-host > .calc-tab-panel {
    display: none; /* legacy empty-panel tabs — everything is already visible */
}
/* Descale so four calculators fit a single row */
#converter-panel-host .calc-card { padding: 12px; gap: 8px; }
#converter-panel-host .calc-card.calc-card-2col { grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
#converter-panel-host .calc-title { font-size: 14px; }
#converter-panel-host .calc-card-head { min-height: 30px; gap: 8px; }
#converter-panel-host .calc-row { gap: 4px; }
#converter-panel-host .calc-row label { font-size: 11px; }
#converter-panel-host .calc-input,
#converter-panel-host .calc-type { font-size: 12px; padding: 6px 10px; }
#converter-panel-host .calc-input-group .calc-unit { font-size: 11px; min-width: 44px; }
#converter-panel-host .rocker label { padding: 4px 8px; font-size: 11px; }
#converter-panel-host .fs-header,
#converter-panel-host .fs-section { gap: 10px; grid-template-columns: 48px minmax(0, 1.3fr) 84px 84px; }
#converter-panel-host .fs-header { font-size: 11px; line-height: 1.3; }
#converter-panel-host .fs-summary { font-size: 11px; }
@media (max-width: 1100px) {
    #converter-panel-host > .calc-section { flex-basis: calc(50% - 12px); }
}
@media (max-width: 640px) {
    #converter-panel-host > .calc-section { flex-basis: 100%; }
}