#js-tool-container-cement-per-cube-concrete-calculator .cpc-app { display: flex; flex-direction: column; gap: 22px; color: var(--text-primary); }
#js-tool-container-cement-per-cube-concrete-calculator .tbcalc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#js-tool-container-cement-per-cube-concrete-calculator .tbcalc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#js-tool-container-cement-per-cube-concrete-calculator .tbcalc-grid > .tbcalc-field,
#js-tool-container-cement-per-cube-concrete-calculator .tbcalc-grid-2 > .tbcalc-field,
#js-tool-container-cement-per-cube-concrete-calculator .tbcalc-grid-3 > .tbcalc-field { margin-bottom: 0; }
#js-tool-container-cement-per-cube-concrete-calculator .tbcalc-field label { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); margin-bottom: 8px; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-range { width: 100%; margin-top: 4px; }

#js-tool-container-cement-per-cube-concrete-calculator .cpc-outcome { display: flex; flex-direction: column; gap: 16px; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-hero { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--border-color); border-left: 4px solid var(--accent-primary); border-radius: var(--radius-md, 10px); background: var(--accent-light); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-hero-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-hero-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-hero-value { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--text-primary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-hero-unit { font-size: 1rem; font-weight: 700; color: var(--text-secondary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-hero-note { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-status { border: 1px solid var(--border-color); border-left: 4px solid var(--accent-primary); border-radius: var(--radius-sm, 8px); padding: 10px 14px; font-size: 0.88rem; line-height: 1.45; color: var(--text-secondary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-status.warn { border-left-color: var(--warning); background: var(--warning-light); color: var(--text-primary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-status.danger { border-left-color: var(--danger); background: var(--danger-light); color: var(--text-primary); }

#js-tool-container-cement-per-cube-concrete-calculator .tb-gauge { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 0; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-gauge-track { position: relative; height: 12px; border-radius: 999px; border: 1px solid var(--border-color); background: repeating-linear-gradient(90deg, var(--bg-tertiary) 0, var(--bg-tertiary) calc(16.6666% - 1px), var(--border-color) calc(16.6666% - 1px), var(--border-color) 16.6666%); }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 66.67%; border-radius: 999px; background: var(--accent-primary); opacity: 0.2; transition: width 200ms cubic-bezier(0.2, 0.7, 0.3, 1); }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-gauge-marker { position: absolute; top: 50%; left: 66.67%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent-primary); border: 3px solid var(--bg-secondary); box-shadow: 0 1px 3px rgba(16, 17, 22, 0.25); transition: left 200ms cubic-bezier(0.2, 0.7, 0.3, 1); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-gauge-labels { display: flex; justify-content: space-between; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-tick { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-tick-active { color: var(--accent-primary); font-weight: 750; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-caption { margin: 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }

#js-tool-container-cement-per-cube-concrete-calculator .tb-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-spec-cell { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); background: var(--bg-tertiary); min-width: 0; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-spec-label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); overflow-wrap: anywhere; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-spec-value { font-size: 1.15rem; font-weight: 750; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-spec-unit { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }

#js-tool-container-cement-per-cube-concrete-calculator .cpc-details { display: flex; flex-direction: column; gap: 14px; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-chart { padding: 14px 16px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); background: var(--bg-tertiary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-chart-bars { display: flex; align-items: stretch; gap: 8px; height: 190px; background-image: linear-gradient(to top, var(--border-color) 1px, transparent 1px); background-size: 100% 47.5px; background-position: bottom; }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-bar-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-bar-value { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-bar { position: relative; width: 100%; max-width: 46px; flex: 1 1 auto; }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px 5px 0 0; background: var(--text-muted); opacity: 0.28; min-height: 3px; transition: height 200ms ease-out; }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-bar-fill.cpc-bar-active { background: var(--accent-primary); opacity: 0.9; }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-bar-grade { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
#js-tool-container-cement-per-cube-concrete-calculator .cpc-bar-grade-active { color: var(--accent-primary); font-weight: 750; }

#js-tool-container-cement-per-cube-concrete-calculator .tb-notes { display: flex; flex-direction: column; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-note-row { padding: 12px 0; border-top: 1px solid var(--border-color); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-note-row:first-child { border-top: 0; padding-top: 0; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-note-title { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
#js-tool-container-cement-per-cube-concrete-calculator .tb-note-text { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); }
#js-tool-container-cement-per-cube-concrete-calculator .tb-note-limits { margin: 0; padding: 10px 14px; border: 1px dashed var(--border-color); border-radius: var(--radius-sm, 8px); font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 640px) {
  #js-tool-container-cement-per-cube-concrete-calculator .tbcalc-grid-2, #js-tool-container-cement-per-cube-concrete-calculator .tbcalc-grid-3 { grid-template-columns: 1fr; }
  #js-tool-container-cement-per-cube-concrete-calculator .tb-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #js-tool-container-cement-per-cube-concrete-calculator .tb-hero { padding: 18px 18px; }
  #js-tool-container-cement-per-cube-concrete-calculator .tb-chart-bars { gap: 5px; height: 170px; }
  #js-tool-container-cement-per-cube-concrete-calculator .cpc-bar-value { font-size: 0.66rem; }
}
#js-tool-container-cement-per-cube-concrete-calculator .cpc-outcome .tbcalc-section-title, #js-tool-container-cement-per-cube-concrete-calculator .cpc-outcome .tbcalc-section-note, #js-tool-container-cement-per-cube-concrete-calculator .cpc-details .tbcalc-section-title, #js-tool-container-cement-per-cube-concrete-calculator .cpc-details .tbcalc-section-note { margin-bottom: 0; }