/* BANDE+ Stereo Graphic Equalizer */
.equalizer { --eq-white:#e8e9eb; --eq-cyan:#42f4e6; --eq-orange:#ed913e; box-sizing:border-box; flex-shrink:0; width:min(760px,100%); padding:25px; color:var(--eq-white); font-family:Arial,Helvetica,sans-serif; background:linear-gradient(145deg,var(--receiver-light,#45474e),var(--receiver-dark,#22242a)); border:2px solid #565960; border-radius:8px; box-shadow:0 18px 55px #000b,inset 0 1px #ffffff20; }
.equalizer * { box-sizing:border-box; }
.equalizer .eq-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.equalizer .eq-brand { margin:0; font-size:2rem; font-weight:800; letter-spacing:.18em; }
.equalizer .eq-brand span { color:var(--eq-white); }
.equalizer h2 { margin:6px 0 0; font-size:10px; font-weight:400; letter-spacing:.13em; }
.equalizer .eq-power-control { display:flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.1em; }
.equalizer button { appearance:none; color:var(--eq-white); font-family:inherit; background:linear-gradient(#555860,#2a2c31); border:1px solid #15161a; border-radius:4px; box-shadow:inset 0 1px #ffffff20,0 2px 3px #0008; cursor:pointer; }
.equalizer button:hover { color:var(--eq-white); border-color:#797d85; }
.equalizer button:active { box-shadow:inset 0 2px 4px #0007; }
.equalizer button:focus-visible,.equalizer input:focus-visible { outline:2px solid var(--eq-cyan); outline-offset:3px; }
.equalizer .eq-power { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border-radius:50%; flex-shrink:0; }
.equalizer .eq-power span { width:8px; height:8px; border-radius:50%; background:#4a4038; box-shadow:inset 0 1px 2px #0008; }
.equalizer .eq-power[aria-pressed="true"] span { background:var(--eq-orange); box-shadow:0 0 9px var(--eq-orange); }
.equalizer .eq-front { display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,.85fr) minmax(0,1fr); gap:12px; padding:16px 10px; background:linear-gradient(145deg,#292c32,#22242a); border:1px solid #17191e; border-radius:4px; box-shadow:inset 0 1px 4px #0006,0 1px #ffffff10; }
.equalizer .eq-bank { position:relative; min-width:0; margin:0; padding:0 0 0 17px; border:0; }
.equalizer .eq-bank legend { width:100%; margin:0 0 12px; padding:0; text-align:center; font-size:10px; letter-spacing:.08em; }
.equalizer .eq-bands { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; background:linear-gradient(transparent calc(50% - .5px),#ffffff20 50%,transparent calc(50% + .5px)); }
.equalizer .eq-band { display:flex; align-items:center; flex-direction:column; gap:10px; min-width:0; font-family:'Courier New',monospace; font-size:9px; }
.equalizer .eq-band output { height:12px; font-variant-numeric:tabular-nums; }
.equalizer .eq-band input { appearance:none; -webkit-appearance:none; writing-mode:vertical-lr; direction:rtl; width:15px; height:140px; margin:0; padding:0; border-radius:2px; background:linear-gradient(90deg,#090b0f,#171a20); border:1px solid #111216; box-shadow:1px 0 #ffffff15,inset 1px 0 3px #000b; cursor:ns-resize; touch-action:none; }
.equalizer .eq-band input::-webkit-slider-thumb { appearance:none; width:19px; height:12px; border:1px solid #111216; border-radius:2px; background:linear-gradient(#898d95,#464a52 45%,#d8dadd 48%,#d8dadd 55%,#383b42 58%); box-shadow:0 2px 3px #000a; }
.equalizer .eq-band input::-moz-range-thumb { width:19px; height:12px; border:1px solid #111216; border-radius:2px; background:linear-gradient(#898d95,#464a52 45%,#d8dadd 48%,#d8dadd 55%,#383b42 58%); box-shadow:0 2px 3px #000a; }
.equalizer .eq-bank-scale { position:absolute; left:-2px; top:22px; height:140px; display:flex; flex-direction:column; justify-content:space-between; font-size:7px; }
.equalizer .eq-hz { margin:8px 0 0; font-size:8px; text-align:center; }
.equalizer .eq-spectrum { min-width:0; display:flex; flex-direction:column; }
.equalizer .eq-spectrum h3 { margin:0 0 12px; text-align:center; font-size:10px; font-weight:400; letter-spacing:.08em; }
.equalizer .eq-screen { flex:1; min-height:170px; padding:8px 5px; background:linear-gradient(150deg,#10191a,#050a0c); border:3px solid #1b1c20; border-radius:3px; box-shadow:inset 0 3px 12px #000b,0 1px #777; }
.equalizer canvas { display:block; width:100%; height:100%; min-height:160px; }
.equalizer .eq-spectrum p { margin:8px 0 0; text-align:center; font-size:8px; }
.equalizer .eq-presets { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; margin-top:18px; }
.equalizer .eq-presets button { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; min-height:45px; padding:8px 3px; font-size:10px; }
.equalizer .eq-presets button span { width:12px; height:3px; background:#314441; border-radius:1px; box-shadow:inset 0 1px 1px #0008; }
.equalizer[data-powered="true"] .eq-presets button[aria-pressed="true"] span { background:var(--eq-cyan); box-shadow:0 0 6px #42f4e666; }
.equalizer .eq-footer { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:16px; font-size:10px; }
.equalizer .eq-link { display:flex; align-items:center; gap:6px; }
.equalizer .eq-link input { accent-color:var(--eq-cyan); margin:0; }
.equalizer #eq-flat { padding:6px 14px; font-size:10px; }
.equalizer #eq-status { margin-left:auto; font-size:9px; }
@media(max-width:620px) { .equalizer { padding:17px; } .equalizer .eq-front { grid-template-columns:minmax(180px,1fr) minmax(180px,1fr); overflow-x:auto; } .equalizer .eq-spectrum { grid-column:1 / -1; grid-row:2; } .equalizer .eq-screen { height:120px; min-height:120px; flex:none; } .equalizer canvas { height:100%; min-height:0; } .equalizer .eq-presets { grid-template-columns:repeat(4,minmax(0,1fr)); } .equalizer .eq-brand { font-size:1.45rem; } }
@media(prefers-reduced-motion:reduce) { .equalizer * { scroll-behavior:auto; } }