feat: responsive card pages

src/components/Button/Button.css

@@ -1,47 +1,36 @@
 .btn {
-  width: 100%;
-  height: 100%;
-
   display: flex;
   align-items: center;
   justify-content: center;
 
   box-sizing: border-box;
 
+  min-height: var(--card-control-height);
+
   padding: 0 var(--space-4);
 
+  border: var(--border-width) solid transparent;
   border-radius: var(--radius-sm);
 
   font-family: var(--font-ui);
-  font-size: 13px;
-  font-weight: 500;
+  font-size: var(--font-md);
+  font-weight: var(--font-weight-medium);
 
   cursor: pointer;
-  border: 1px solid transparent;
 }
 
 .btn:disabled {
-  opacity: 0.45;
+  opacity: var(--disabled-opacity);
   cursor: not-allowed;
 }
 
 .btn-primary {
   background: var(--accent-brand);
-  color: #0d0f12;
-}
-
-.btn-ghost {
-  background: transparent;
-  border-color: var(--border-hairline);
-  color: var(--text-muted);
-}
-
-.btn-toggle {
-  background: transparent;
-  border-color: var(--border-hairline);
-  color: var(--text-muted);
+  color: var(--bg-void);
 }
 
+.btn-ghost,
+.btn-toggle,
 .btn-outline {
   background: transparent;
   border-color: var(--border-hairline);

src/components/Card/Card.css

@@ -1,8 +1,13 @@
 .card {
+  width: min(100%, var(--card-width));
+
   background: var(--bg-panel);
+
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-lg);
+
   box-shadow: var(--shadow-md);
+
   padding: var(--space-6);
 
   color: var(--text-primary);
@@ -12,5 +17,6 @@
   display: flex;
   flex-direction: column;
 
-  width: clamp(280px, 33.333%, 480px);
+  min-width: 0;
+  box-sizing: border-box;
 }

src/components/Sidebar/Sidebar.css

@@ -132,7 +132,7 @@
   align-items: center;
 
   font-size: var(--font-size-sm, 13px);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   color: var(--text-primary);
 
   white-space: nowrap;

src/components/dsp408/ChannelGroup/ChannelGroup.css

@@ -27,7 +27,7 @@
 
   font-family: var(--font-ui);
   font-size: var(--tab-close-font);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   color: var(--text-muted);
 
   white-space: nowrap;

src/components/dsp408/ConnectionSection/ConnectionSection.css

@@ -1,4 +1,4 @@
-.connection-panel-frame {
+/* .connection-panel-frame {
   width: 33.333%;
   height: 33.333%;
   box-sizing: border-box;
@@ -27,7 +27,7 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
-  min-width: 0; /* required so children can actually shrink/ellipsize instead of forcing overflow */
+  min-width: 0;
 }
 
 .panel-header-text {
@@ -41,7 +41,7 @@
   text-overflow: ellipsis;
   margin: 0;
   font-size: 18px;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 .mono {
@@ -54,19 +54,11 @@
   flex-shrink: 0;
 }
 
-.panel-actions {
-  position: absolute;
-  right: 16px;
-  bottom: 16px;
-  margin: 0; /* drop margin-top: auto, no longer needed */
-  padding: 0; /* drop padding-top: 16px, spacing now handled by right/bottom offsets */
-}
-
 .connection-section {
-  position: absolute; /* was: fixed — relative to .dsp-content now */
-  inset: 0; /* replaces top:0; right:0; bottom:0; left:0 */
+  position: absolute;
+  inset: 0;
 
   display: flex;
   justify-content: center;
   align-items: center;
-}
+} */

src/components/dsp408/GainSection/GainSection.css

@@ -74,7 +74,7 @@
 
   font-family: var(--font-ui);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 
   padding-bottom: 6px;
 

src/components/dsp408/GainSection/GainSection.tsx

@@ -92,15 +92,7 @@ function GainPanel({
   };
 
   return (
-    <div
-      className="gain-panel-frame"
-      style={
-        {
-          '--panel-w': DESIGN_WIDTH,
-          '--panel-h': DESIGN_HEIGHT,
-        } as React.CSSProperties
-      }
-    >
+    <div className="gain-panel-frame">
       <AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
         <div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
           <div className="gain-panel__title">{title}</div>

src/components/dsp408/GateSection/GateSection.css

@@ -0,0 +1,118 @@
+.gate-section {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  height: var(--gain-section-height);
+  min-height: 0;
+
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+
+  box-sizing: border-box;
+  padding: 0 var(--space-4);
+
+  background: var(--bg-panel);
+
+  z-index: 20;
+
+  border-top: 1px solid var(--border-hairline);
+}
+
+.gate-panels {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: safe center;
+  gap: var(--space-4);
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.gate-panel-frame {
+  flex: 0 0 auto;
+  height: calc(100% - 8px);
+  aspect-ratio: var(--panel-w) / var(--panel-h);
+  margin: 4px 0;
+  box-sizing: border-box;
+}
+
+.gate-panels::-webkit-scrollbar {
+  height: 6px;
+}
+.gate-panels::-webkit-scrollbar-thumb {
+  background: var(--border-hairline);
+  border-radius: var(--radius-pill);
+}
+.gate-panels::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.gate-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md);
+  box-sizing: border-box;
+  padding: 8px;
+  background: var(--bg-void);
+}
+
+.gate-panel__title {
+  width: 100%;
+
+  text-align: center;
+
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: var(--font-weight-semibold);
+
+  padding-bottom: 6px;
+
+  border-bottom: 1px solid var(--border-hairline);
+}
+
+.gate-panel__sliders {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--space-2);
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.gate-panel__slider-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.gate-panel__slider-label {
+  font-family: var(--font-ui);
+  font-size: 10px;
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+  padding-top: 4px;
+  color: var(--text-secondary);
+}
+
+/* GateSection.css */
+.gate-panels .channel-group__items {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  grid-template-rows: repeat(2, 1fr);
+  gap: var(--space-2);
+  align-items: stretch;
+}

src/components/topbar/Topbar.css

@@ -7,7 +7,7 @@
   -webkit-app-region: drag;
   padding-inline: var(--space-3);
   gap: var(--space-3);
-  box-sizing: border-box
+  box-sizing: border-box;
 }
 
 .logo-slot {
@@ -37,7 +37,6 @@
   -webkit-app-region: no-drag;
   border-left: 1px solid var(--border-hairline);
 
-
   scrollbar-width: thin;
   scrollbar-color: var(--border-hairline) transparent;
   scroll-behavior: smooth;
@@ -114,7 +113,7 @@
   color: var(--text-muted);
 
   font-family: var(--font-ui);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 
   flex-shrink: 0;