*{box-sizing:border-box}
body{margin:0;background:#0b1020;color:#e8edf7;font-family:Arial,Helvetica,sans-serif}
.wrap{max-width:1250px;margin:auto;padding:20px}
h1{margin:0 0 5px;font-size:26px}
.sub{color:#8f9bb2;margin-bottom:18px}
.panel{background:#121a2c;border:1px solid #26324a;border-radius:12px;padding:16px;margin-bottom:16px}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
button,select{background:#1b2740;color:#fff;border:1px solid #35445f;border-radius:8px;padding:10px 13px}
button{cursor:pointer}
button:hover{background:#263654}
button.primary{background:#2563eb;border-color:#3b82f6}
label{font-size:13px;color:#9eabc0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{background:#0d1526;border:1px solid #26324a;border-radius:10px;padding:12px}
.stat .k{font-size:12px;color:#8e9bb1}.stat .v{font-size:22px;font-weight:bold;margin-top:5px}
canvas{width:100%;display:block;background:#080d18;border:1px solid #26324a;border-radius:9px}
#spectrum{height:390px}
#wave{height:170px}
#spectro{height:220px}
#scope{height:420px}
.scope-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.scope-readout{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.scope-readout .stat{padding:8px 12px}
.note{font-size:12px;color:#8996ad;line-height:1.5}
.status{margin-top:10px;color:#9fb0c9}
@media(max-width:800px){.statgrid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   Sound Analyzer - Component / Modular Styles
   ========================================================= */

.section-title{
  margin-bottom:10px;
}

.note-top{ margin-top:8px; }
.status-top{ margin-top:9px; }
.controls-top{ margin-top:10px; }
.band-options{ margin-top:13px; }
.inline-option{ margin-left:15px; }
.float-right{ float:right; }
.float-right-gap{ float:right; margin-left:14px; }
.vertical-middle{ vertical-align:middle; }

.number-input{
  width:100px;
  background:#1b2740;
  color:#fff;
  border:1px solid #35445f;
  border-radius:8px;
  padding:9px;
}

.hidden-input{ display:none; }

.band-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:9px;
  margin-top:12px;
}

.bandItem{
  display:flex;
  align-items:center;
  gap:9px;
  background:#0d1526;
  border:1px solid #26324a;
  border-radius:9px;
  padding:10px;
  cursor:pointer;
}

.bandLevel{
  margin-left:auto;
  color:#8e9bb2;
}

.audio-player{
  width:100%;
  margin-top:10px;
}

.transcript{
  width:100%;
  height:180px;
  resize:vertical;
  background:#080d18;
  color:#e8edf7;
  border:1px solid #26324a;
  border-radius:9px;
  padding:14px;
  font:15px/1.6 Arial,Helvetica,sans-serif;
}

.stat-compact{ padding:7px 12px; }

@media(max-width:800px){
  .float-right,
  .float-right-gap{
    float:none;
    display:block;
    margin:6px 0 0;
  }

  .inline-option{
    margin-left:0;
    display:block;
    margin-top:8px;
  }
}

.muted-label{color:#71819a;font-size:12px}