.acoustic-page { max-width: 1080px; padding-bottom: 36px; }
.acoustic-card { border: 1px solid var(--line, #b5c5bd); border-radius: 18px; padding: clamp(16px, 3vw, 28px); margin: 22px 0; background: var(--surface, #fff); color: var(--text, #163d30); }
.acoustic-card[hidden], #acoustic-promo[hidden] { display: none !important; }
.acoustic-settings, .acoustic-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,210px), 1fr)); gap: 18px; }
.acoustic-card fieldset { border: 1px solid var(--line, #b5c5bd); border-radius: 12px; padding: 18px; min-width: 0; }
.acoustic-card label { display: block; margin: 12px 0; }
.acoustic-card select { width: 100%; min-height: 50px; margin-top: 8px; font-size: max(16px,1rem); }
.acoustic-alert-settings { margin-block: 18px; background: var(--soft); }
.acoustic-card label, .acoustic-card p { overflow-wrap: anywhere; }
.acoustic-settings > label { min-width: 0; }
.acoustic-card select { min-width: 0; max-width: 100%; }
.acoustic-actions button { min-height: 50px; height: auto; max-width: 100%; font-size: max(16px,1rem); white-space: normal; }
.acoustic-advanced summary { min-height: 48px; padding: 12px 0; cursor: pointer; font-weight: 750; }
#motion-tool #motion-start, #motion-tool #motion-stop { min-height: 50px; height: auto; font-size: max(16px,1rem); }
#motion-error { color: #a72626; overflow-wrap: anywhere; }
#motion-sensor { font-size: max(16px,1rem); overflow-wrap: anywhere; }
.acoustic-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px 18px; }
.acoustic-groups label { display: flex; align-items: flex-start; min-height: 48px; margin: 0; padding: 10px 0; line-height: 1.5; }
.acoustic-groups input[type=checkbox] { flex: 0 0 20px; margin-top: 2px; }
.acoustic-warning { border-left: 5px solid #b4771d; }
.acoustic-repeat { padding: 14px; border: 1px solid var(--line, #b5c5bd); border-radius: 12px; line-height: 1.65; }
.acoustic-settings input, .acoustic-settings select { display: block; width: 100%; margin-top: 8px; }
.acoustic-card input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; }
.acoustic-consent { line-height: 1.65; }
.acoustic-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
#acoustic-tool #acoustic-start, #acoustic-tool #acoustic-stop { min-height: 50px; height: auto; font-size: max(16px, 1rem); }
.acoustic-metrics dd { margin: 8px 0; font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.acoustic-card figure { margin: 20px 0; }
.acoustic-card figcaption { margin-bottom: 8px; }
.acoustic-card canvas { display: block; width: 100%; height: 160px; background: #101f2a; border-radius: 10px; }
#acoustic-error { border-left: 4px solid #b23929; padding: 12px; }
.acoustic-card button:disabled { opacity: .55; cursor: not-allowed; }
.acoustic-card li { margin-bottom: 12px; }
.acoustic-dashboard { scroll-margin-top: 100px; min-width: 0; padding-top: 16px; }
.acoustic-dashboard > [role=status] { padding: 14px 16px; border: 1px solid #cfe5db; border-radius: 14px; background: #edf7f1; color: #204e3b; line-height: 1.6; }
.acoustic-dashboard .acoustic-metrics > div { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #f5f9f7; }
.acoustic-dashboard .acoustic-metrics dt { color: #476256; line-height: 1.5; }
.acoustic-dashboard .acoustic-metrics dd { font-size: clamp(1.7rem,5vw,2.4rem); font-weight: 800; letter-spacing: -.04em; color: #17593e; }
.acoustic-visuals { display: grid; gap: 18px; min-width: 0; }
.acoustic-visuals figure { min-width: 0; margin: 0; padding: 16px; border-radius: 18px; background: #102430; color: #e4f2f6; border: 1px solid #345360; }
.acoustic-visuals figcaption { font-weight: 650; line-height: 1.6; }
.acoustic-visuals canvas { height: 220px; border-radius: 10px; background: #102430; }
.acoustic-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 12px; font-size: .85rem; color: #c4dbe4; line-height: 1.6; }
.acoustic-color-key { width: 100px; height: 8px; border-radius: 8px; background: linear-gradient(90deg,#061230,#196c9d,#34bf9d,#ffda56); }
.acoustic-label-list { display: grid; gap: 12px; list-style: none; padding: 0; }
.acoustic-label-list li { position: relative; overflow: hidden; margin: 0; padding: 14px 16px 19px; border: 1px solid var(--line); border-radius: 12px; background: #f5f9f7; color: #254c3b; line-height: 1.6; overflow-wrap: anywhere; }
.acoustic-label-list li::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--score,0%); height: 4px; background: #267c58; }
html[data-theme="dark"] .acoustic-visuals { filter: invert(1) hue-rotate(180deg); }
#acoustic-tool #acoustic-test, #motion-tool #motion-test { min-height: 50px; height: auto; font-size: max(16px,1rem); }
html[data-theme="dark"] .acoustic-dashboard .acoustic-metrics > div,
html[data-theme="dark"] .acoustic-label-list li {
  border-color: #303436;
  background: #141618;
  color: #d7dad8;
}
html[data-theme="dark"] .acoustic-dashboard .acoustic-metrics dt { color: #aeb5b1; }
html[data-theme="dark"] .acoustic-dashboard .acoustic-metrics dd { color: #c1d2c6; }