Stage 9/10: hide legacy controls, dark score panel, responsive CSS, global dark input overrides

- #studio-actions and #path-panel hidden (display:none)
- #score-panel restyled dark: dark bg, gold header, purple buttons
- Global Gradio input/textarea/block dark overrides
- Accordion summary dark styled
- Responsive: sidebar collapses to topbar row at <900px
- Metric cards 2-col on mobile, hero stacks vertically

app.py

@@ -118,84 +118,128 @@ footer { display: none !important; }
   cursor: pointer;
 }
 
+/* ── Hide legacy Gradio controls (Stage 10) ─────────────────────────────── */
 #hidden-export, #hidden-status {
-  max-width: 1180px;
-  margin: 0 auto 18px auto;
+  display: none !important;
 }
 
 #studio-actions {
+  display: none !important;
+}
+
+#path-panel {
+  display: none !important;
+}
+
+/* ── Private scoring controls — dark themed (Stage 10) ─────────────────── */
+#score-panel {
   max-width: 1180px;
-  margin: 18px auto 16px auto;
-  padding-left: 18px;
-  position: relative;
-  z-index: 5;
+  margin: 8px auto 24px auto;
+  padding: 0 18px;
 }
 
-#studio-actions .wrap {
-  max-width: 430px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
+#score-panel > .label-wrap,
+#score-panel > details > summary,
+#score-panel summary {
+  background: rgba(13, 19, 48, 0.95) !important;
+  color: rgba(246, 241, 232, 0.9) !important;
+  border: 1px solid rgba(242, 193, 78, 0.25) !important;
+  border-radius: 10px !important;
+  font-family: var(--font-ui) !important;
+  font-size: 13px !important;
+  padding: 10px 16px !important;
 }
 
-#studio-actions button {
-  border-radius: 8px !important;
-  min-height: 48px !important;
-  font-weight: 800 !important;
+#score-panel .score-card {
+  border: 1px solid rgba(242, 193, 78, 0.18);
+  background: rgba(7, 18, 45, 0.97);
+  border-radius: 10px;
+  padding: 18px;
 }
 
-#path-panel {
-  max-width: 1180px;
-  margin: 18px auto;
-  padding: 0 18px;
+#score-panel h3 {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  color: var(--totem-gold);
+  font-family: var(--font-display);
 }
 
-#path-panel .wrap {
-  display: grid;
-  grid-template-columns: minmax(360px, 1fr) 210px;
+#score-panel button {
+  border-radius: 8px !important;
+  font-weight: 700 !important;
+  background: rgba(138, 77, 255, 0.25) !important;
+  border: 1px solid rgba(138, 77, 255, 0.5) !important;
+  color: #f6f1e8 !important;
+}
+
+#score-panel .wrap {
   gap: 12px;
-  max-width: 760px;
 }
 
-#path-panel textarea,
-#path-panel input {
+#score-panel label,
+#score-panel .block {
+  background: rgba(7, 18, 45, 0.8) !important;
+  border-color: rgba(246, 241, 232, 0.12) !important;
+  color: rgba(246, 241, 232, 0.9) !important;
   border-radius: 8px !important;
-  border: 1px solid var(--studio-line) !important;
-  background: white !important;
 }
 
-#path-panel button {
-  border-radius: 8px !important;
-  min-height: 52px !important;
-  font-weight: 800 !important;
+#score-panel input,
+#score-panel textarea {
+  background: rgba(4, 8, 26, 0.9) !important;
+  color: #f6f1e8 !important;
+  border-color: rgba(242, 193, 78, 0.2) !important;
+  border-radius: 6px !important;
 }
 
-#score-panel {
-  max-width: 1180px;
-  margin: 18px auto 44px auto;
-  padding: 0 18px;
+/* ── Global Gradio component dark overrides (Stage 9) ──────────────────── */
+.gradio-container input,
+.gradio-container textarea,
+.gradio-container select {
+  background: rgba(4, 8, 26, 0.9) !important;
+  color: #f6f1e8 !important;
+  border-color: rgba(242, 193, 78, 0.2) !important;
 }
 
-#score-panel .score-card {
-  border: 1px solid var(--studio-line);
-  background: #fffef8;
-  border-radius: 8px;
-  padding: 18px;
+.gradio-container .block,
+.gradio-container .form {
+  background: rgba(7, 18, 45, 0.85) !important;
+  border-color: rgba(246, 241, 232, 0.1) !important;
 }
 
-#score-panel h3 {
-  margin: 0 0 12px 0;
-  font-size: 18px;
-  color: var(--studio-green);
+.gradio-container label span,
+.gradio-container .label-wrap span {
+  color: rgba(174, 183, 204, 0.9) !important;
 }
 
-#score-panel button {
-  border-radius: 8px !important;
-  font-weight: 800 !important;
+/* ── Accordion dark styling ─────────────────────────────────────────────── */
+.gradio-container details summary {
+  background: rgba(13, 19, 48, 0.95) !important;
+  color: rgba(246, 241, 232, 0.9) !important;
+  border-color: rgba(242, 193, 78, 0.2) !important;
 }
 
-#score-panel .wrap {
-  gap: 12px;
+/* ── Responsive: tighten at narrower widths (Stage 9) ───────────────────── */
+@media (max-width: 900px) {
+  .totem-shell {
+    grid-template-columns: 1fr !important;
+  }
+  .totem-sidebar {
+    width: 100% !important;
+    flex: none !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    padding: 12px 16px !important;
+    border-right: none !important;
+    border-bottom: 1px solid rgba(242, 193, 78, 0.22) !important;
+    min-height: auto !important;
+  }
+  .totem-brand { margin-bottom: 0 !important; margin-right: 16px !important; }
+  .totem-brand-img { max-width: 80px !important; }
+  .totem-quote-card { display: none !important; }
+  .totem-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
+  .totem-hero-content { flex-direction: column !important; }
+  .totem-hero-right { margin-top: 16px !important; }
 }
 
 #codex-panel {