#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-app { --wfb-wood: #8a5a2b; --wfb-wood-fill: rgba(138, 90, 43, .22); --wfb-pass: #2f6b4f; --wfb-fail: #9d3b32; --wfb-limit: #35566e; display: flex; flex-direction: column; gap: 22px; color: var(--text-primary); }
html[data-theme="dark"] #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-app { --wfb-wood: #d7a86e; --wfb-wood-fill: rgba(215, 168, 110, .22); --wfb-pass: #6fbf95; --wfb-fail: #e08a7d; --wfb-limit: #8db9d4; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .tbcalc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .tbcalc-field { display: flex; flex-direction: column; gap: 6px; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .tbcalc-hint { font-size: .82rem; line-height: 1.35; color: var(--text-muted); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-outcome { display: flex; flex-direction: column; gap: 18px; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-hero { border: 1px solid var(--border-color); border-left: 4px solid var(--wfb-wood); border-radius: var(--radius-md); padding: 18px 20px; min-height: 128px; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-hero-label { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-hero-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-hero-value { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--text-primary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-hero-note { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--text-secondary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rules { display: flex; flex-direction: column; gap: 14px; border-top: 1px dashed var(--border-color); padding-top: 16px; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule { display: flex; flex-direction: column; gap: 5px; padding-left: 10px; border-left: 3px solid transparent; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-key { border-left-color: var(--wfb-wood); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-name { font-size: .95rem; font-weight: 600; color: var(--text-primary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-figs { font-size: .84rem; color: var(--text-secondary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-track { display: block; position: relative; height: 10px; border-radius: 999px; background-color: var(--bg-tertiary); overflow: hidden; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-fill { display: block; height: 10px; width: 0; border-radius: 999px; background-color: var(--wfb-wood); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-limit { display: block; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background-color: var(--wfb-limit); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-verdict { font-size: .82rem; color: var(--text-secondary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-ok .wfb-rule-fill { background-color: var(--wfb-pass); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rule-bad .wfb-rule-fill { background-color: var(--wfb-fail); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-rules-note { margin: 0; font-size: .8rem; color: var(--text-muted); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-table, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-table { width: 100%; border-collapse: collapse; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-table th, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-table td, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-table th, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: .9rem; }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-table tbody th, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-table tbody th { font-weight: 500; color: var(--text-secondary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-table td, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-table td { color: var(--text-primary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-caption, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-caption { caption-side: top; text-align: left; padding: 0 0 8px; font-size: .84rem; color: var(--text-muted); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-picked { font-weight: 700; color: var(--wfb-pass); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-advice { margin: 14px 0 0; font-size: .86rem; line-height: 1.45; color: var(--text-secondary); }
#js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-limits { margin: 8px 0 0; font-size: .84rem; line-height: 1.45; color: var(--text-muted); }
@media (max-width: 640px) {
  #js-tool-container-derevyannaya-balka-perekrytiya-calculator .tbcalc-grid-2 { grid-template-columns: 1fr; }
  #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-hero { padding: 16px; min-height: 120px; }
  #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-table th, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-trace-table td, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-table th, #js-tool-container-derevyannaya-balka-perekrytiya-calculator .wfb-alt-table td { padding: 7px 6px; font-size: .84rem; }
}