#js-tool-container-strength-of-materials-beam-calculator .sb-app { display: flex; flex-direction: column; gap: 22px; color: var(--text-primary, #12141a); --sb-steel: #3f6fb5; --sb-steel-soft: rgba(63,111,181,.14); --sb-shear: #b5713f; --sb-shear-soft: rgba(181,113,63,.16); }
html[data-theme="dark"] #js-tool-container-strength-of-materials-beam-calculator .sb-app { --sb-steel: #7fa8e0; --sb-steel-soft: rgba(127,168,224,.18); --sb-shear: #e0a86f; --sb-shear-soft: rgba(224,168,111,.18); }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-fieldset { border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-md, 12px); padding: 16px 18px 18px; margin: 0 0 14px; }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-fieldset:last-child { margin-bottom: 0; }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-legend { padding: 0 6px; font-weight: 650; font-size: .95rem; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-grid { display: grid; gap: 16px 20px; }
#js-tool-container-strength-of-materials-beam-calculator .tb-grid-2 { grid-template-columns: 1fr 1fr; }
#js-tool-container-strength-of-materials-beam-calculator .tb-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
#js-tool-container-strength-of-materials-beam-calculator .tb-span-all { grid-column: 1 / -1; }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#js-tool-container-strength-of-materials-beam-calculator .tb-label { font-size: .88rem; font-weight: 550; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .tb-input, #js-tool-container-strength-of-materials-beam-calculator .tb-select { width: 100%; height: 44px; padding: 0 12px; font: inherit; font-size: 1rem; color: var(--text-primary, #12141a); background: var(--bg-primary, #f4f5f7); border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); }
#js-tool-container-strength-of-materials-beam-calculator .tb-select { padding-right: 30px; }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-hint { font-size: .8rem; line-height: 1.35; color: var(--text-muted, #5a6270); }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-section-title { margin: 24px 0 8px; font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-section-note { margin: 0 0 14px; font-size: .84rem; line-height: 1.5; color: var(--text-muted, #5a6270); }
#js-tool-container-strength-of-materials-beam-calculator .sb-outcome { display: flex; flex-direction: column; gap: 18px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-hero { display: block; }
#js-tool-container-strength-of-materials-beam-calculator .sb-hero .tb-hero { display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 18px 20px; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-left: 4px solid var(--sb-steel, #3f6fb5); border-radius: var(--radius-md, 12px); background: var(--sb-steel-soft, rgba(63,111,181,.14)); }
#js-tool-container-strength-of-materials-beam-calculator .sb-hero-label { font-size: .88rem; letter-spacing: .01em; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .sb-hero-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#js-tool-container-strength-of-materials-beam-calculator .sb-hero-value { font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 700; line-height: 1.05; color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-unit { font-size: 1rem; font-weight: 600; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .sb-hero-note { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .sb-val { font-variant-numeric: tabular-nums; }
#js-tool-container-strength-of-materials-beam-calculator .tb-status { border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-left: 4px solid var(--accent-primary, #2f66ff); border-radius: var(--radius-sm, 8px); padding: 10px 14px; font-size: .88rem; line-height: 1.45; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .tb-status.warn { border-left-color: var(--warning, #b57c17); background: var(--warning-light, rgba(181,124,23,.1)); color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .tb-status.danger { border-left-color: var(--danger, #cf4f42); background: var(--danger-light, rgba(207,79,66,.08)); color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); background: var(--bg-primary, #f4f5f7); min-width: 0; }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric-label { font-size: .78rem; line-height: 1.3; color: var(--text-muted, #5a6270); }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric-row { display: flex; align-items: baseline; gap: 6px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric-value { font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric-unit { font-size: .82rem; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric-sub { font-size: .76rem; line-height: 1.3; color: var(--text-muted, #5a6270); }
#js-tool-container-strength-of-materials-beam-calculator .sb-canvas-wrap { position: relative; width: 100%; min-height: 420px; aspect-ratio: 16 / 9; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-md, 12px); background: var(--bg-primary, #f4f5f7); overflow: hidden; }
#js-tool-container-strength-of-materials-beam-calculator .sb-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#js-tool-container-strength-of-materials-beam-calculator .sb-canvas-desc { margin: 10px 0 0; font-size: .84rem; line-height: 1.45; color: var(--text-muted, #5a6270); }
#js-tool-container-strength-of-materials-beam-calculator .sb-anchors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; }
#js-tool-container-strength-of-materials-beam-calculator .sb-anchor { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); min-width: 0; }
#js-tool-container-strength-of-materials-beam-calculator .sb-anchor dt { font-size: .78rem; line-height: 1.3; color: var(--text-muted, #5a6270); }
#js-tool-container-strength-of-materials-beam-calculator .sb-anchor dd { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-checks { display: flex; flex-direction: column; gap: 10px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-check { display: grid; grid-template-columns: minmax(150px, 230px) minmax(80px, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-left: 4px solid var(--sb-steel, #3f6fb5); border-radius: var(--radius-sm, 8px); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check.good { border-left-color: var(--success, #2e8b57); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check.warn { border-left-color: var(--warning, #b57c17); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check.bad { border-left-color: var(--danger, #cf4f42); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check-name { font-size: .88rem; font-weight: 600; color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check-bar { display: block; height: 10px; border-radius: 999px; background: var(--bg-tertiary, #f1f2f5); overflow: hidden; }
#js-tool-container-strength-of-materials-beam-calculator .sb-check-fill { display: block; height: 100%; border-radius: 999px; background: var(--sb-steel, #3f6fb5); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check.good .sb-check-fill { background: var(--success, #2e8b57); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check.warn .sb-check-fill { background: var(--warning, #b57c17); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check.bad .sb-check-fill { background: var(--danger, #cf4f42); }
#js-tool-container-strength-of-materials-beam-calculator .sb-check-pct { font-size: .92rem; font-weight: 700; white-space: nowrap; color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-pick-title, #js-tool-container-strength-of-materials-beam-calculator .sb-subtitle { margin: 4px 0 8px; font-size: .9rem; font-weight: 650; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-table-wrap { overflow-x: auto; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); margin-bottom: 16px; }
#js-tool-container-strength-of-materials-beam-calculator .tbcalc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
#js-tool-container-strength-of-materials-beam-calculator .sb-caption { caption-side: top; text-align: left; padding: 10px 12px; font-size: .8rem; color: var(--text-muted, #5a6270); background: var(--bg-tertiary, #f1f2f5); }
#js-tool-container-strength-of-materials-beam-calculator .sb-table th, #js-tool-container-strength-of-materials-beam-calculator .sb-table td { padding: 9px 12px; text-align: left; border-top: 1px solid var(--border-color, rgba(16,17,22,.09)); white-space: nowrap; }
#js-tool-container-strength-of-materials-beam-calculator .sb-table th { font-weight: 650; color: var(--text-secondary, #4d5465); background: var(--bg-tertiary, #f1f2f5); }
#js-tool-container-strength-of-materials-beam-calculator .sb-table td { color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-table tr.sb-row-best td { background: var(--sb-steel-soft, rgba(63,111,181,.14)); font-weight: 650; }
#js-tool-container-strength-of-materials-beam-calculator .sb-table tr.sb-row-active td { background: var(--sb-shear-soft, rgba(181,113,63,.16)); }
#js-tool-container-strength-of-materials-beam-calculator .sb-findings { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-finding { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); font-size: .86rem; line-height: 1.45; color: var(--text-secondary, #4d5465); }
#js-tool-container-strength-of-materials-beam-calculator .sb-finding.good { border-left: 4px solid var(--success, #2e8b57); }
#js-tool-container-strength-of-materials-beam-calculator .sb-finding.warn { border-left: 4px solid var(--warning, #b57c17); }
#js-tool-container-strength-of-materials-beam-calculator .sb-finding.bad { border-left: 4px solid var(--danger, #cf4f42); }
#js-tool-container-strength-of-materials-beam-calculator .sb-finding-title { font-weight: 650; color: var(--text-primary, #12141a); }
#js-tool-container-strength-of-materials-beam-calculator .sb-spec-text { width: 100%; padding: 12px 14px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-primary, #12141a); background: var(--bg-primary, #f4f5f7); border: 1px solid var(--border-color, rgba(16,17,22,.09)); border-radius: var(--radius-sm, 8px); resize: vertical; }
#js-tool-container-strength-of-materials-beam-calculator .sb-limits { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted, #5a6270); }
@media (max-width: 900px) {
#js-tool-container-strength-of-materials-beam-calculator .tb-grid-3 { grid-template-columns: 1fr 1fr; }
#js-tool-container-strength-of-materials-beam-calculator .sb-metrics { grid-template-columns: 1fr 1fr; }
#js-tool-container-strength-of-materials-beam-calculator .sb-anchors { grid-template-columns: 1fr 1fr; }
#js-tool-container-strength-of-materials-beam-calculator .sb-check { grid-template-columns: minmax(120px, 1fr) auto; grid-template-areas: "name pct" "bar bar"; row-gap: 8px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-check-name { grid-area: name; }
#js-tool-container-strength-of-materials-beam-calculator .sb-check-pct { grid-area: pct; }
#js-tool-container-strength-of-materials-beam-calculator .sb-check-bar { grid-area: bar; width: 100%; }
}
@media (max-width: 640px) {
#js-tool-container-strength-of-materials-beam-calculator .tb-grid-2, #js-tool-container-strength-of-materials-beam-calculator .tb-grid-3 { grid-template-columns: 1fr; }
#js-tool-container-strength-of-materials-beam-calculator .sb-outcome { gap: 16px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric { padding: 10px 12px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-metric-value { font-size: 1.2rem; }
#js-tool-container-strength-of-materials-beam-calculator .sb-canvas-wrap { min-height: 340px; aspect-ratio: 3 / 4; }
#js-tool-container-strength-of-materials-beam-calculator .sb-anchors { grid-template-columns: 1fr 1fr; gap: 8px; }
#js-tool-container-strength-of-materials-beam-calculator .sb-table th, #js-tool-container-strength-of-materials-beam-calculator .sb-table td { padding: 8px 10px; }
}