1 files changed, 105 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 38c38c8..b332f6f 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -1020,6 +1020,111 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   color: var(--text-secondary);
 }
 
+/* Collapsible settings sections (2026-08-24) — every section but a form
+   someone might be mid-typing into (invite, pair-operator, approve-device,
+   left as plain .settings-section blocks). Reuses .video-flat-chevron for
+   the rotate-on-open animation rather than declaring a near-duplicate. */
+.settings-collapsible-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.settings-collapsible-header .settings-heading { margin-bottom: 0; }
+.settings-collapsible-body { margin-top: 12px; }
+
+.settings-meta-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 600;
+  font-size: 1.1em;
+  color: var(--text);
+}
+.settings-meta-title .icon { width: 16px; height: 16px; }
+.settings-meta-badge {
+  font-size: 0.75em;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--bg-raised);
+  color: var(--text-dim);
+}
+.settings-meta-badge.on { background: var(--accent); color: #fff; }
+
+/* A modern on/off switch — replaces a checkbox or a "Turn on/off" button
+   wherever the setting is a straight binary. */
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  font-size: 0.9em;
+  color: var(--text);
+}
+.toggle-switch input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle-switch-track {
+  position: relative;
+  width: 38px;
+  height: 21px;
+  border-radius: 11px;
+  background: var(--border);
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+.toggle-switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 17px;
+  height: 17px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  transition: transform 0.15s;
+}
+.toggle-switch input:checked + .toggle-switch-track { background: var(--accent); }
+.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
+  transform: translateX(17px);
+}
+.toggle-switch input:focus-visible + .toggle-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
+.toggle-switch-disabled { opacity: 0.5; cursor: default; }
+
+/* A sub-block within a merged settings section (Directories: shared roots,
+   Videos root, Music root, all under one CollapsibleSection). */
+.settings-root-row { padding: 10px 0; }
+.settings-root-row + .settings-root-row { border-top: 1px solid var(--border); }
+.settings-root-row-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.settings-root-row-title .icon { width: 15px; height: 15px; color: var(--text-dim); }
+.settings-root-row-title h4 {
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
 .settings-select {
   padding: 6px 10px;
   border: 1px solid var(--border);