feat: finalize input section

src/components/ChoiceSelect/ChoiceSelect.css

@@ -1,4 +1,3 @@
-/* ChoiceSelect.css */
 .choice-select {
   position: relative;
   display: flex;
@@ -11,12 +10,12 @@
 
 .choice-select__input {
   flex: 1 1 auto;
+
   height: var(--card-control-height);
   padding: 0 var(--space-6) 0 var(--space-3);
 
-  background: var(--bg-panel);
+  background: transparent;
   color: var(--text-primary);
-
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-sm);
 
@@ -43,13 +42,22 @@
 
 .choice-select__chevron {
   position: absolute;
-  right: var(--space-2);
+  top: 0;
-  top: 50%;
+  right: 5%;
-  height: 45%;
+  bottom: 0;
-  aspect-ratio: 1;
+
-  transform: translateY(-50%);
+  width: 4cqh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   pointer-events: none;
   color: var(--accent-brand);
-  font-size: var(--font-sm);
+}
+
+.choice-select__chevron svg {
+  width: 100%;
+  height: 100%;
+  display: block;
 }

src/features/dsp408/components/InputSection/InputSection.css

@@ -16,6 +16,7 @@
 }
 
 .input-graph-panel {
+  position: relative;
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
@@ -27,6 +28,27 @@
   border-radius: var(--radius-md);
 }
 
+.input-bypass-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.input-bypass-overlay span {
+  font-size: 8cqh;
+  font-weight: 800;
+  letter-spacing: 0.15em;
+  color: #f87171;
+  text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
+  transform: rotate(-8deg);
+  opacity: 0.85;
+  user-select: none;
+}
+
 .input-graph__title {
   flex: 0 0 auto;
 
@@ -86,7 +108,7 @@
 /* Peq Sliders */
 .input-panel {
   position: relative;
-  height: 10;
+  height: 100%;
 
   aspect-ratio: 0.8;
   flex: 0 0 auto;
@@ -200,11 +222,20 @@
 }
 
 .crossover-panel__select {
+  flex: 0 0 auto;
+  width: 85%;
+  font-family: var(--font-ui);
   font-size: 4cqh;
 }
 
-.crossover-panel__select .choice-select__input {
+.crossover-panel__select .choice-select__input,
+.crossover-panel__select .choice-select__input option {
+  height: 100%;
+  padding: 0;
+  padding-left: 2cqh;
   font-size: 4cqh;
+  color: var(--accent-brand);
+  border-radius: var(--radius-sm);
 }
 
 .peq-band-list {
@@ -223,17 +254,16 @@
   padding: 1cqh;
 
   overflow: hidden;
-
-  aspect-ratio: 2;
 }
 
 .peq-band-list__row {
-  flex: 1 1 0;
+  flex: 1 1 auto;
+
   min-height: 0;
   min-width: 0;
 
   display: grid;
-  grid-template-columns: 1fr 1.2fr 1fr 1fr 1.6fr 1.2fr;
+  grid-template-columns: 0.4fr 0.55fr 0.4fr 0.5fr 1.2fr 0.5fr;
   align-items: stretch;
   gap: 1cqh;
 
@@ -347,7 +377,7 @@
 }
 
 .input-graph-view-toggle__btn.active {
-  background: var(--accent, #4dd0e1);
+  background: var(--accent-brand);
   color: var(--bg-void);
 }
 
@@ -361,4 +391,9 @@
   color: var(--accent-brand);
 
   background: transparent;
+
+  text-align: center;
+  text-align-last: center;
+  padding: 0;
+  margin: 0;
 }

src/features/dsp408/components/InputSection/InputSection.tsx

@@ -395,7 +395,7 @@ function PeqBandList({
               variant="toggle"
               className={peq.bypass ? 'active-warning' : ''}
               onClick={() => commit(band, { bypass: !peq.bypass })}
-              style={{ minHeight: 0 }}
+              style={{ minHeight: 0, fontSize: '4cqh', paddingInline: 0 }}
             >
               {peq.bypass ? 'Bypassed' : 'Bypass'}
             </Button>
@@ -459,7 +459,8 @@ function InputSection({
 
     for (const band of PEQ_BANDS_ORDER) {
       const current = displayPeq[band];
-      if (current.gain === 0 || current.filter_type === PEQFilter.Peak) continue; // skip bands already flat
+      // Skip only if already flat — nothing to change.
+      if (current.gain === 0 && current.filter_type === PEQFilter.Peak) continue;
 
       await commitPEQ(band, 0, current.frequency, current.q, PEQFilter.Peak, current.bypass);
     }
@@ -623,6 +624,12 @@ function InputSection({
               }}
             />
           )}
+
+          {ActivePeq.bypass && (
+            <div className="input-bypass-overlay">
+              <span>BYPASSED</span>
+            </div>
+          )}
         </div>
       </div>
 

src/features/dsp408/components/Matrixsection/Matrixsection.css

@@ -116,4 +116,4 @@
   flex: 0 0 20%;
   width: 20%;
   padding-right: 0;
-}
+}