/* RT60 Calculator Styles */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.tool-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.panel-title { font-family: var(--font-display); font-size: var(--fs-base); color: var(--color-primary); margin: 0 0 var(--space-md); text-transform: uppercase; letter-spacing: 0.05em; }
.input-group { margin-bottom: var(--space-md); }
.input-label { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-xs); font-family: var(--font-mono); }
.input-field { width: 100%; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-family: var(--font-mono); font-size: var(--fs-base); padding: var(--space-xs) var(--space-sm); box-sizing: border-box; transition: border-color 0.2s; }
.input-field:focus { outline: none; border-color: var(--color-primary); }
.dim-row-inline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm); }
.room-stats-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.stat-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent); }
.stat-row:last-child { border-bottom: none; }
.stat-label { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text-muted); }
.stat-val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-secondary); font-weight: 600; }
.surface-item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); margin-bottom: var(--space-xs); }
.surface-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); }
.surface-name { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-primary); }
.surface-remove { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; padding: 0; }
.surface-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-xs); }
.surface-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); margin-bottom: 2px; }
.result-hero { text-align: center; padding: var(--space-lg); background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-primary); margin-bottom: var(--space-md); box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.result-label { font-size: var(--fs-sm); color: var(--color-text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-xs); }
.result-value { font-family: var(--font-display); font-size: 3.5rem; color: var(--color-primary); line-height: 1; text-shadow: 0 0 20px var(--color-primary); }
.result-unit { font-family: var(--font-mono); color: var(--color-text-muted); font-size: var(--fs-sm); margin-top: var(--space-xs); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-md); }
.result-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); text-align: center; }
.result-card__label { font-size: var(--fs-xs); color: var(--color-text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.result-card__value { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-secondary); font-weight: 600; margin-top: 2px; }
.formula-box { background: var(--color-bg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.formula-title { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-xs); }
.formula-text { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-text); margin: 2px 0; }
.target-box { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.target-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-sm); padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 30%, transparent); color: var(--color-text-muted); }
.target-row span:last-child { color: var(--color-secondary); }
.target-row:last-child { border-bottom: none; }
.content-section h3 { color: var(--color-secondary); margin: var(--space-lg) 0 var(--space-sm); }
.faq-list { max-width: 800px; margin: var(--space-lg) auto 0; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-sm); overflow: hidden; }
.faq-question { padding: var(--space-md); cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: '+'; color: var(--color-primary); font-size: 1.2em; }
details[open] .faq-question::after { content: '−'; }
.faq-answer { padding: 0 var(--space-md) var(--space-md); color: var(--color-text-muted); line-height: 1.7; border-top: 1px solid var(--color-border); }
@media (max-width: 768px) { .tool-grid { grid-template-columns: 1fr !important; } .dim-row-inline { grid-template-columns: 1fr; } }