#js-tool-container-roof-insulation-calculator .frr-body { display: grid; gap: 16px; }
#js-tool-container-roof-insulation-calculator .frr-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
#js-tool-container-roof-insulation-calculator .frr-span-2 { grid-column: 1 / -1; }

#js-tool-container-roof-insulation-calculator .frr-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
#js-tool-container-roof-insulation-calculator .frr-hero-main {
  border: 1px solid var(--border-color, rgba(16,17,22,.09));
  border-left: 3px solid var(--accent-primary, #6366F1);
  border-radius: var(--radius-md, 12px);
  background: var(--accent-light, rgba(99,102,241,.1));
  padding: 16px 18px;
  min-height: 190px;
  box-sizing: border-box;
}
#js-tool-container-roof-insulation-calculator .frr-hero-side {
  border: 1px solid var(--border-color, rgba(16,17,22,.09));
  border-radius: var(--radius-md, 12px);
  background: var(--bg-tertiary, #f1f2f5);
  padding: 16px 18px;
  min-height: 190px;
  box-sizing: border-box;
}
#js-tool-container-roof-insulation-calculator .frr-hero-label { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #5a6270); margin-bottom: 6px; }
#js-tool-container-roof-insulation-calculator .frr-hero-row { display: flex; align-items: baseline; gap: 8px; }
#js-tool-container-roof-insulation-calculator .frr-hero-value { font-size: clamp(30px, 4.6vw, 44px); font-weight: 700; line-height: 1.05; color: var(--text-primary, #12141a); }
#js-tool-container-roof-insulation-calculator .frr-hero-value-sm { font-size: clamp(24px, 3.4vw, 32px); }
#js-tool-container-roof-insulation-calculator .frr-hero-unit { font-size: 15px; color: var(--text-secondary, #4d5465); }

#js-tool-container-roof-insulation-calculator .frr-stack { margin-top: 14px; display: grid; gap: 10px; }
#js-tool-container-roof-insulation-calculator .frr-stack-row { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(52px, auto); align-items: center; gap: 10px; }
#js-tool-container-roof-insulation-calculator .frr-stack-tag { font-size: 12px; color: var(--text-secondary, #4d5465); }
#js-tool-container-roof-insulation-calculator .frr-stack-bar { height: 14px; border-radius: 4px; background: var(--bg-primary, #f4f5f7); border: 1px solid var(--border-color, rgba(16,17,22,.09)); overflow: hidden; }
#js-tool-container-roof-insulation-calculator .frr-stack-fill { display: block; height: 100%; width: 0; border-radius: 3px; }
#js-tool-container-roof-insulation-calculator .frr-stack-fill-1 { background: var(--accent-primary, #6366F1); }
#js-tool-container-roof-insulation-calculator .frr-stack-fill-2 { background: var(--success, #18996b); }
#js-tool-container-roof-insulation-calculator .frr-stack-val { font-size: 14px; font-weight: 650; color: var(--text-primary, #12141a); text-align: right; }

#js-tool-container-roof-insulation-calculator .frr-side-rows { margin-top: 12px; display: grid; gap: 7px; }
#js-tool-container-roof-insulation-calculator .frr-side-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-secondary, #4d5465); border-bottom: 1px dashed var(--border-color, rgba(16,17,22,.09)); padding-bottom: 5px; }
#js-tool-container-roof-insulation-calculator .frr-side-row:last-child { border-bottom: none; }
#js-tool-container-roof-insulation-calculator .frr-side-row output { font-weight: 650; font-size: 15px; color: var(--text-primary, #12141a); }

#js-tool-container-roof-insulation-calculator .frr-status { margin-top: 14px; }
#js-tool-container-roof-insulation-calculator .frr-status.is-ok { color: var(--success, #18996b); }
#js-tool-container-roof-insulation-calculator .frr-status.is-warn { color: var(--warning, #b57c17); }
#js-tool-container-roof-insulation-calculator .frr-status.is-danger { color: var(--danger, #cf4f42); }

#js-tool-container-roof-insulation-calculator .frr-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
#js-tool-container-roof-insulation-calculator .frr-metric { border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); padding: 10px 12px; box-sizing: border-box; }
#js-tool-container-roof-insulation-calculator .frr-metric-label { display: block; font-size: 12px; color: var(--text-muted, #5a6270); margin-bottom: 4px; }
#js-tool-container-roof-insulation-calculator .frr-metric-row { display: flex; align-items: baseline; gap: 5px; }
#js-tool-container-roof-insulation-calculator .frr-metric-row output { font-size: 19px; font-weight: 650; color: var(--text-primary, #12141a); }
#js-tool-container-roof-insulation-calculator .frr-metric-unit { font-size: 11px; color: var(--text-secondary, #4d5465); }

#js-tool-container-roof-insulation-calculator .frr-canvas-wrap { position: relative; aspect-ratio: auto; min-height: 0; height: -moz-fit-content; height: fit-content; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-md, 12px); padding: 0; box-sizing: border-box; background: var(--bg-tertiary, #f1f2f5); overflow: hidden; }
#js-tool-container-roof-insulation-calculator .frr-canvas-wrap canvas { display: block; width: 100%; }
#js-tool-container-roof-insulation-calculator .frr-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 13px; color: var(--text-secondary, #4d5465); }
#js-tool-container-roof-insulation-calculator .frr-legend-item { display: inline-flex; align-items: center; gap: 8px; }
#js-tool-container-roof-insulation-calculator .frr-swatch { display: inline-block; width: 18px; height: 12px; border-radius: 3px; box-sizing: border-box; }
#js-tool-container-roof-insulation-calculator .frr-swatch-ins { background: var(--accent-primary, #6366F1); }
#js-tool-container-roof-insulation-calculator .frr-swatch-raft { background: repeating-linear-gradient(90deg, var(--text-muted, #5a6270) 0 3px, transparent 3px 6px); border: 1px solid var(--border-color, rgba(16,17,22,.09)); }
#js-tool-container-roof-insulation-calculator .frr-swatch-memb { background: linear-gradient(90deg, transparent 0 2px, var(--success, #18996b) 2px 4px, transparent 4px 6px); background-size: 6px 100%; border: 1px solid var(--border-color, rgba(16,17,22,.09)); }
#js-tool-container-roof-insulation-calculator .frr-swatch-lath { background: repeating-linear-gradient(45deg, var(--text-muted, #5a6270) 0 2px, transparent 2px 6px); border: 1px solid var(--border-color, rgba(16,17,22,.09)); }

#js-tool-container-roof-insulation-calculator .frr-spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#js-tool-container-roof-insulation-calculator .frr-spec-table th { text-align: left; font-weight: 500; color: var(--text-secondary, #4d5465); padding: 9px 12px; border-bottom: 1px solid var(--border-color, rgba(16,17,22,.09)); }
#js-tool-container-roof-insulation-calculator .frr-spec-table td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--border-color, rgba(16,17,22,.09)); color: var(--text-primary, #12141a); font-weight: 600; }
#js-tool-container-roof-insulation-calculator .frr-spec-table tr:last-child th, #js-tool-container-roof-insulation-calculator .frr-spec-table tr:last-child td { border-bottom: none; }
#js-tool-container-roof-insulation-calculator .frr-table-caption { text-align: left; font-size: 12px; color: var(--text-muted, #5a6270); padding: 0 0 8px; }
#js-tool-container-roof-insulation-calculator .frr-formula-hint { margin: 8px 2px 0; font-size: 13px; color: var(--text-muted, #5a6270); }

@media (max-width: 600px) {
  #js-tool-container-roof-insulation-calculator .frr-grid-2,
  #js-tool-container-roof-insulation-calculator .frr-metrics { grid-template-columns: 1fr; }
  #js-tool-container-roof-insulation-calculator .frr-hero { grid-template-columns: 1fr; }
  #js-tool-container-roof-insulation-calculator .frr-hero-main, #js-tool-container-roof-insulation-calculator .frr-hero-side { min-height: 0; }
  #js-tool-container-roof-insulation-calculator .frr-spec-table td:not(.frr-num), #js-tool-container-roof-insulation-calculator .frr-spec-table th { padding: 8px; }
  #js-tool-container-roof-insulation-calculator .frr-spec-table td:not(.frr-num) { text-align: left; }
}
#js-tool-container-roof-insulation-calculator .frr-stack-bar { position: relative; }
#js-tool-container-roof-insulation-calculator .frr-stack-ghost { position: absolute; top: 1px; bottom: 1px; left: 0; border: 1.5px dashed var(--text-muted, #5a6270); border-radius: 3px; opacity: 0.55; background: repeating-linear-gradient(135deg, transparent 0 5px, var(--border-color, rgba(16,17,22,.09)) 5px 6px); }
#js-tool-container-roof-insulation-calculator .frr-stack-fill { position: relative; z-index: 1; }
#js-tool-container-roof-insulation-calculator .frr-hero-main { background: linear-gradient(135deg, var(--accent-light, rgba(99,102,241,.1)), transparent 72%); }
#js-tool-container-roof-insulation-calculator .frr-hero-sub { display: block; margin-top: 12px; font-size: 12.5px; color: var(--text-muted, #5a6270); }
#js-tool-container-roof-insulation-calculator .frr-hero-sub strong { color: var(--text-primary, #12141a); font-weight: 650; }
#js-tool-container-roof-insulation-calculator .frr-canvas-wrap { position: relative; }
#js-tool-container-roof-insulation-calculator .tb-canvas-tip { position: absolute; left: 0; top: 0; z-index: 5; max-width: 240px; background: var(--bg-primary, #f4f5f7); border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); padding: 6px 9px; font-size: 12px; line-height: 1.35; color: var(--text-secondary, #4d5465); box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.1)); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
#js-tool-container-roof-insulation-calculator .tb-canvas-tip.show { opacity: 1; }
#js-tool-container-roof-insulation-calculator .tb-canvas-tip strong { color: var(--text-primary, #12141a); }