@maykonpaulo/maestro-admin 0.3.0 → 0.4.0-next.0

package/src/styles.css

@@ -1 +1,1716 @@
-@import 'tailwindcss';
+/*
+ * @maykonpaulo/maestro-admin — the whole stylesheet.
+ *
+ * Plain CSS on custom properties, deliberately: a component library whose look depends on the
+ * consumer's Tailwind build scanning `node_modules/**\/dist` is a library that renders unstyled the
+ * first time someone forgets a `@source`. One import, no build coupling, and every colour is a token
+ * the consumer can override — per theme, or one variable at a time.
+ *
+ *   import '@maykonpaulo/maestro-admin/styles.css';
+ *
+ * Three built-in themes (cobalto · latao · teal), each in light and dark. The palette is chosen with
+ * `data-maestro-theme` on the admin root and the light/dark decision with `data-maestro-scheme`,
+ * which has three states: absent (or "system") follows `prefers-color-scheme`, "light"/"dark" force it.
+ */
+
+/* ══════════════════════════════════════════════════════════════════
+   1 · Tokens
+   ══════════════════════════════════════════════════════════════════ */
+
+[data-maestro-theme] {
+  /* Shape and type — shared by every theme; override for a different feel. */
+  --maestro-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --maestro-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'JetBrains Mono', Menlo, monospace;
+  --maestro-radius-sm: 6px;
+  --maestro-radius: 8px;
+  --maestro-radius-lg: 11px;
+  --maestro-sidebar-width: 232px;
+  --maestro-header-height: 52px;
+
+  /* Density — the only thing the compact toggle moves. */
+  --maestro-row-py: 9px;
+}
+
+[data-maestro-density='compact'] {
+  --maestro-row-py: 5px;
+}
+
+/* ── Grafite & Cobalto ─────────────────────────────────────────── */
+[data-maestro-theme='cobalto'] {
+  --maestro-brand: #3557e8;
+  --maestro-brand-hover: #2a46c7;
+  --maestro-brand-soft: #edf1fe;
+  --maestro-brand-on: #ffffff;
+  --maestro-shell: #141a24;
+  --maestro-shell-fg: #e9ecf3;
+  --maestro-shell-fg-muted: #8e97aa;
+  --maestro-shell-hover: rgba(255, 255, 255, 0.06);
+  --maestro-shell-border: rgba(255, 255, 255, 0.09);
+  --maestro-shell-accent: #7d96ff;
+  --maestro-bg: #f5f6f9;
+  --maestro-surface: #ffffff;
+  --maestro-surface-2: #f9fafc;
+  --maestro-border: #e3e6ee;
+  --maestro-border-strong: #cdd3e0;
+  --maestro-fg: #171c27;
+  --maestro-fg-muted: #5c6474;
+  --maestro-fg-subtle: #8a91a1;
+  --maestro-ok: #17864f;
+  --maestro-ok-soft: #e6f5ec;
+  --maestro-warn: #a96a0b;
+  --maestro-warn-soft: #fbf1df;
+  --maestro-danger: #c43b3b;
+  --maestro-danger-soft: #fcebeb;
+  --maestro-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05);
+  --maestro-shadow-panel: 0 12px 32px -8px rgba(16, 24, 40, 0.22);
+}
+@media (prefers-color-scheme: dark) {
+  [data-maestro-theme='cobalto']:not([data-maestro-scheme='light']) {
+    --maestro-brand: #7b95ff;
+    --maestro-brand-hover: #94a9ff;
+    --maestro-brand-soft: rgba(123, 149, 255, 0.15);
+    --maestro-brand-on: #0b0f17;
+    --maestro-shell: #090c12;
+    --maestro-shell-fg: #e4e8f1;
+    --maestro-shell-fg-muted: #7e8799;
+    --maestro-shell-hover: rgba(255, 255, 255, 0.05);
+    --maestro-shell-border: rgba(255, 255, 255, 0.07);
+    --maestro-shell-accent: #7b95ff;
+    --maestro-bg: #0d1118;
+    --maestro-surface: #141922;
+    --maestro-surface-2: #191f29;
+    --maestro-border: #232a37;
+    --maestro-border-strong: #323b4c;
+    --maestro-fg: #e6eaf2;
+    --maestro-fg-muted: #99a2b4;
+    --maestro-fg-subtle: #6e7688;
+    --maestro-ok: #46c185;
+    --maestro-ok-soft: rgba(70, 193, 133, 0.14);
+    --maestro-warn: #e0a93b;
+    --maestro-warn-soft: rgba(224, 169, 59, 0.14);
+    --maestro-danger: #f07575;
+    --maestro-danger-soft: rgba(240, 117, 117, 0.14);
+    --maestro-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --maestro-shadow-panel: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
+  }
+}
+[data-maestro-theme='cobalto'][data-maestro-scheme='dark'] {
+  --maestro-brand: #7b95ff;
+  --maestro-brand-hover: #94a9ff;
+  --maestro-brand-soft: rgba(123, 149, 255, 0.15);
+  --maestro-brand-on: #0b0f17;
+  --maestro-shell: #090c12;
+  --maestro-shell-fg: #e4e8f1;
+  --maestro-shell-fg-muted: #7e8799;
+  --maestro-shell-hover: rgba(255, 255, 255, 0.05);
+  --maestro-shell-border: rgba(255, 255, 255, 0.07);
+  --maestro-shell-accent: #7b95ff;
+  --maestro-bg: #0d1118;
+  --maestro-surface: #141922;
+  --maestro-surface-2: #191f29;
+  --maestro-border: #232a37;
+  --maestro-border-strong: #323b4c;
+  --maestro-fg: #e6eaf2;
+  --maestro-fg-muted: #99a2b4;
+  --maestro-fg-subtle: #6e7688;
+  --maestro-ok: #46c185;
+  --maestro-ok-soft: rgba(70, 193, 133, 0.14);
+  --maestro-warn: #e0a93b;
+  --maestro-warn-soft: rgba(224, 169, 59, 0.14);
+  --maestro-danger: #f07575;
+  --maestro-danger-soft: rgba(240, 117, 117, 0.14);
+  --maestro-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --maestro-shadow-panel: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
+}
+
+/* ── Ardósia & Latão ───────────────────────────────────────────── */
+[data-maestro-theme='latao'] {
+  --maestro-brand: #9a6a22;
+  --maestro-brand-hover: #7f571b;
+  --maestro-brand-soft: #f8f0e2;
+  --maestro-brand-on: #ffffff;
+  --maestro-shell: #1b1814;
+  --maestro-shell-fg: #f0ece4;
+  --maestro-shell-fg-muted: #9c948a;
+  --maestro-shell-hover: rgba(255, 255, 255, 0.06);
+  --maestro-shell-border: rgba(255, 255, 255, 0.09);
+  --maestro-shell-accent: #dca94e;
+  --maestro-bg: #f6f5f2;
+  --maestro-surface: #ffffff;
+  --maestro-surface-2: #faf9f6;
+  --maestro-border: #e6e2da;
+  --maestro-border-strong: #d2ccc1;
+  --maestro-fg: #1e1b17;
+  --maestro-fg-muted: #635c52;
+  --maestro-fg-subtle: #8e877c;
+  --maestro-ok: #2e7d53;
+  --maestro-ok-soft: #e8f3ec;
+  /* Warning sits next to brass on the hue wheel, so it is pushed to a redder orange — the two must
+     never be confused when one means "brand" and the other means "look at this". */
+  --maestro-warn: #c2551a;
+  --maestro-warn-soft: #faede4;
+  --maestro-danger: #bc3838;
+  --maestro-danger-soft: #faeaea;
+  --maestro-shadow-card: 0 1px 2px rgba(40, 32, 20, 0.07), 0 1px 3px rgba(40, 32, 20, 0.05);
+  --maestro-shadow-panel: 0 12px 32px -8px rgba(40, 32, 20, 0.2);
+}
+@media (prefers-color-scheme: dark) {
+  [data-maestro-theme='latao']:not([data-maestro-scheme='light']) {
+    --maestro-brand: #d9aa55;
+    --maestro-brand-hover: #e7bc6c;
+    --maestro-brand-soft: rgba(217, 170, 85, 0.15);
+    --maestro-brand-on: #17120a;
+    --maestro-shell: #100e0b;
+    --maestro-shell-fg: #efeae1;
+    --maestro-shell-fg-muted: #8f877c;
+    --maestro-shell-hover: rgba(255, 255, 255, 0.05);
+    --maestro-shell-border: rgba(255, 255, 255, 0.07);
+    --maestro-shell-accent: #d9aa55;
+    --maestro-bg: #14120f;
+    --maestro-surface: #1b1815;
+    --maestro-surface-2: #211e1a;
+    --maestro-border: #2b2721;
+    --maestro-border-strong: #3c372f;
+    --maestro-fg: #ede8df;
+    --maestro-fg-muted: #a29a8e;
+    --maestro-fg-subtle: #7a7367;
+    --maestro-ok: #56c089;
+    --maestro-ok-soft: rgba(86, 192, 137, 0.14);
+    --maestro-warn: #e2843f;
+    --maestro-warn-soft: rgba(226, 132, 63, 0.15);
+    --maestro-danger: #ee7070;
+    --maestro-danger-soft: rgba(238, 112, 112, 0.14);
+    --maestro-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --maestro-shadow-panel: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
+  }
+}
+[data-maestro-theme='latao'][data-maestro-scheme='dark'] {
+  --maestro-brand: #d9aa55;
+  --maestro-brand-hover: #e7bc6c;
+  --maestro-brand-soft: rgba(217, 170, 85, 0.15);
+  --maestro-brand-on: #17120a;
+  --maestro-shell: #100e0b;
+  --maestro-shell-fg: #efeae1;
+  --maestro-shell-fg-muted: #8f877c;
+  --maestro-shell-hover: rgba(255, 255, 255, 0.05);
+  --maestro-shell-border: rgba(255, 255, 255, 0.07);
+  --maestro-shell-accent: #d9aa55;
+  --maestro-bg: #14120f;
+  --maestro-surface: #1b1815;
+  --maestro-surface-2: #211e1a;
+  --maestro-border: #2b2721;
+  --maestro-border-strong: #3c372f;
+  --maestro-fg: #ede8df;
+  --maestro-fg-muted: #a29a8e;
+  --maestro-fg-subtle: #7a7367;
+  --maestro-ok: #56c089;
+  --maestro-ok-soft: rgba(86, 192, 137, 0.14);
+  --maestro-warn: #e2843f;
+  --maestro-warn-soft: rgba(226, 132, 63, 0.15);
+  --maestro-danger: #ee7070;
+  --maestro-danger-soft: rgba(238, 112, 112, 0.14);
+  --maestro-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --maestro-shadow-panel: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
+}
+
+/* ── Tinta & Teal ──────────────────────────────────────────────── */
+[data-maestro-theme='teal'] {
+  --maestro-brand: #0e7c74;
+  --maestro-brand-hover: #0b6159;
+  --maestro-brand-soft: #e4f3f1;
+  --maestro-brand-on: #ffffff;
+  --maestro-shell: #0e1a1d;
+  --maestro-shell-fg: #e6efee;
+  --maestro-shell-fg-muted: #8aa09d;
+  --maestro-shell-hover: rgba(255, 255, 255, 0.06);
+  --maestro-shell-border: rgba(255, 255, 255, 0.09);
+  --maestro-shell-accent: #3fbfb2;
+  --maestro-bg: #f3f7f6;
+  --maestro-surface: #ffffff;
+  --maestro-surface-2: #f8fbfa;
+  --maestro-border: #dfe8e6;
+  --maestro-border-strong: #c7d4d1;
+  --maestro-fg: #142020;
+  --maestro-fg-muted: #566765;
+  --maestro-fg-subtle: #85918f;
+  --maestro-ok: #1b7f4f;
+  --maestro-ok-soft: #e5f3eb;
+  --maestro-warn: #a96a0b;
+  --maestro-warn-soft: #fbf1df;
+  --maestro-danger: #c13b3b;
+  --maestro-danger-soft: #fbeaea;
+  --maestro-shadow-card: 0 1px 2px rgba(12, 32, 30, 0.07), 0 1px 3px rgba(12, 32, 30, 0.05);
+  --maestro-shadow-panel: 0 12px 32px -8px rgba(12, 32, 30, 0.2);
+}
+@media (prefers-color-scheme: dark) {
+  [data-maestro-theme='teal']:not([data-maestro-scheme='light']) {
+    --maestro-brand: #35b5a8;
+    --maestro-brand-hover: #4fc7ba;
+    --maestro-brand-soft: rgba(53, 181, 168, 0.15);
+    --maestro-brand-on: #06110f;
+    --maestro-shell: #071113;
+    --maestro-shell-fg: #e2ecea;
+    --maestro-shell-fg-muted: #7b908d;
+    --maestro-shell-hover: rgba(255, 255, 255, 0.05);
+    --maestro-shell-border: rgba(255, 255, 255, 0.07);
+    --maestro-shell-accent: #35b5a8;
+    --maestro-bg: #0a1214;
+    --maestro-surface: #101a1c;
+    --maestro-surface-2: #152023;
+    --maestro-border: #1f2c2e;
+    --maestro-border-strong: #2e4043;
+    --maestro-fg: #e2ecea;
+    --maestro-fg-muted: #94a6a3;
+    --maestro-fg-subtle: #6b7d7a;
+    --maestro-ok: #46c185;
+    --maestro-ok-soft: rgba(70, 193, 133, 0.14);
+    --maestro-warn: #e0a93b;
+    --maestro-warn-soft: rgba(224, 169, 59, 0.14);
+    --maestro-danger: #ef7272;
+    --maestro-danger-soft: rgba(239, 114, 114, 0.14);
+    --maestro-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
+    --maestro-shadow-panel: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
+  }
+}
+[data-maestro-theme='teal'][data-maestro-scheme='dark'] {
+  --maestro-brand: #35b5a8;
+  --maestro-brand-hover: #4fc7ba;
+  --maestro-brand-soft: rgba(53, 181, 168, 0.15);
+  --maestro-brand-on: #06110f;
+  --maestro-shell: #071113;
+  --maestro-shell-fg: #e2ecea;
+  --maestro-shell-fg-muted: #7b908d;
+  --maestro-shell-hover: rgba(255, 255, 255, 0.05);
+  --maestro-shell-border: rgba(255, 255, 255, 0.07);
+  --maestro-shell-accent: #35b5a8;
+  --maestro-bg: #0a1214;
+  --maestro-surface: #101a1c;
+  --maestro-surface-2: #152023;
+  --maestro-border: #1f2c2e;
+  --maestro-border-strong: #2e4043;
+  --maestro-fg: #e2ecea;
+  --maestro-fg-muted: #94a6a3;
+  --maestro-fg-subtle: #6b7d7a;
+  --maestro-ok: #46c185;
+  --maestro-ok-soft: rgba(70, 193, 133, 0.14);
+  --maestro-warn: #e0a93b;
+  --maestro-warn-soft: rgba(224, 169, 59, 0.14);
+  --maestro-danger: #ef7272;
+  --maestro-danger-soft: rgba(239, 114, 114, 0.14);
+  --maestro-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --maestro-shadow-panel: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   2 · Shell
+   ══════════════════════════════════════════════════════════════════ */
+
+.mst-root,
+.mst-root *,
+.mst-root *::before,
+.mst-root *::after {
+  box-sizing: border-box;
+}
+
+.mst-root {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  font-family: var(--maestro-font);
+  font-size: 13px;
+  line-height: 1.5;
+  background: var(--maestro-bg);
+  color: var(--maestro-fg);
+  -webkit-font-smoothing: antialiased;
+}
+
+.mst-root :focus-visible {
+  outline: 2px solid var(--maestro-brand);
+  outline-offset: 2px;
+  border-radius: var(--maestro-radius-sm);
+}
+
+/* No `color` here on purpose: `.mst-root button` (0,1,1) outranks every component class (0,1,0), so
+   setting it would silently repaint `.mst-btn--primary` and friends with the body colour. Each button
+   class states its own colour. */
+.mst-root button {
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Boot state — the admin owns the whole box before there is a shell to draw. */
+.mst-boot {
+  flex: 1;
+  display: grid;
+  place-items: center;
+}
+
+.mst-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.mst-icon {
+  flex: none;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ── Sidebar ─────────────────────────────────────────────────── */
+.mst-side {
+  width: var(--maestro-sidebar-width);
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--maestro-shell);
+  color: var(--maestro-shell-fg);
+  /* In light schemes the dark shell separates itself; in dark ones it sits a few points from the
+     content ground, and this hairline is what keeps the two from reading as one surface. */
+  border-right: 1px solid var(--maestro-shell-border);
+}
+
+.mst-side__brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  height: var(--maestro-header-height);
+  padding: 0 14px;
+  flex: none;
+  border-bottom: 1px solid var(--maestro-shell-border);
+}
+
+.mst-mark {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  background: var(--maestro-brand);
+  color: var(--maestro-brand-on);
+}
+
+.mst-side__title {
+  font-weight: 600;
+  font-size: 13.5px;
+  letter-spacing: 0.04em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mst-side__search {
+  margin: 11px 10px 8px;
+  flex: none;
+}
+
+.mst-side__search input {
+  width: 100%;
+  font: inherit;
+  font-size: 12px;
+  color: var(--maestro-shell-fg);
+  background: var(--maestro-shell-hover);
+  border: 1px solid transparent;
+  border-radius: var(--maestro-radius);
+  padding: 7px 10px;
+}
+.mst-side__search input::placeholder {
+  color: var(--maestro-shell-fg-muted);
+}
+.mst-side__search input:focus {
+  outline: none;
+  border-color: var(--maestro-shell-accent);
+}
+
+.mst-side__nav {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 2px 8px 10px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--maestro-shell-border) transparent;
+}
+.mst-side__nav::-webkit-scrollbar {
+  width: 5px;
+}
+.mst-side__nav::-webkit-scrollbar-thumb {
+  background: var(--maestro-shell-border);
+  border-radius: 4px;
+}
+
+.mst-side__section {
+  font-family: var(--maestro-font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--maestro-shell-fg-muted);
+  opacity: 0.75;
+  margin: 14px 0 5px;
+  padding: 0 8px;
+}
+.mst-side__section:first-child {
+  margin-top: 6px;
+}
+
+.mst-navitem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 7px;
+  background: none;
+  text-align: left;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--maestro-shell-fg-muted);
+  transition: color 0.14s, background 0.14s;
+}
+.mst-navitem:hover {
+  color: var(--maestro-shell-fg);
+  background: var(--maestro-shell-hover);
+}
+.mst-navitem[aria-current='true'] {
+  color: var(--maestro-shell-fg);
+  background: var(--maestro-shell-hover);
+}
+.mst-navitem[aria-current='true']::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 6px;
+  bottom: 6px;
+  width: 2.5px;
+  border-radius: 0 2px 2px 0;
+  background: var(--maestro-shell-accent);
+}
+.mst-navitem__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-navitem__sub {
+  font-size: 10.5px;
+  font-weight: 400;
+  color: var(--maestro-shell-fg-muted);
+  opacity: 0.8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-navitem__count {
+  font-family: var(--maestro-font-mono);
+  font-size: 10px;
+  opacity: 0.6;
+  flex: none;
+}
+.mst-navitem--folder {
+  color: var(--maestro-shell-fg);
+  opacity: 0.85;
+}
+.mst-navitem__chev {
+  transition: transform 0.16s;
+}
+.mst-navitem__chev--open {
+  transform: rotate(90deg);
+}
+.mst-side__children {
+  margin-left: 12px;
+  padding-left: 6px;
+  border-left: 1px solid var(--maestro-shell-border);
+}
+
+.mst-side__foot {
+  flex: none;
+  border-top: 1px solid var(--maestro-shell-border);
+  padding: 9px 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--maestro-shell-fg-muted);
+}
+.mst-pulse {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex: none;
+  background: var(--maestro-ok);
+}
+.mst-side__empty {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--maestro-shell-fg-muted);
+}
+.mst-root mark {
+  background: color-mix(in srgb, var(--maestro-warn) 32%, transparent);
+  color: inherit;
+  border-radius: 3px;
+}
+.mst-side mark {
+  background: color-mix(in srgb, var(--maestro-shell-accent) 34%, transparent);
+  color: inherit;
+}
+
+/* ── Main column + header ────────────────────────────────────── */
+.mst-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.mst-header {
+  height: var(--maestro-header-height);
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  background: var(--maestro-surface);
+  border-bottom: 1px solid var(--maestro-border);
+}
+
+.mst-crumbs {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 1;
+  min-width: 0;
+  font-size: 12.5px;
+  overflow: hidden;
+}
+.mst-crumbs__link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: none;
+  padding: 0;
+  color: var(--maestro-fg-subtle);
+  white-space: nowrap;
+}
+.mst-crumbs__link:hover {
+  color: var(--maestro-fg-muted);
+}
+.mst-crumbs__now {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: var(--maestro-fg);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-crumbs__now .mst-icon {
+  color: var(--maestro-brand);
+}
+.mst-crumbs__sep {
+  color: var(--maestro-border-strong);
+  flex: none;
+}
+.mst-crumbs__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+.mst-crumbs__item:last-child {
+  overflow: hidden;
+}
+
+.mst-kbd {
+  font-family: var(--maestro-font-mono);
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--maestro-surface);
+  border: 1px solid var(--maestro-border);
+  color: inherit;
+}
+
+.mst-searchchip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 28px;
+  padding: 0 9px;
+  flex: none;
+  border-radius: 7px;
+  border: 1px solid var(--maestro-border);
+  background: var(--maestro-surface-2);
+  color: var(--maestro-fg-subtle);
+  font-size: 11.5px;
+  transition: color 0.14s, border-color 0.14s;
+}
+.mst-searchchip:hover {
+  color: var(--maestro-fg-muted);
+  border-color: var(--maestro-border-strong);
+}
+
+.mst-iconbtn {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  border-radius: 7px;
+  border: 1px solid var(--maestro-border);
+  background: var(--maestro-surface);
+  color: var(--maestro-fg-subtle);
+  display: grid;
+  place-items: center;
+  transition: color 0.14s, border-color 0.14s;
+}
+.mst-iconbtn:hover {
+  color: var(--maestro-fg);
+  border-color: var(--maestro-border-strong);
+}
+.mst-iconbtn[aria-pressed='true'] {
+  color: var(--maestro-brand);
+  border-color: var(--maestro-brand);
+  background: var(--maestro-brand-soft);
+}
+
+.mst-content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 20px;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   3 · Primitives
+   ══════════════════════════════════════════════════════════════════ */
+
+.mst-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: var(--maestro-radius);
+  border: 1px solid transparent;
+  font-size: 12.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background 0.14s, border-color 0.14s, color 0.14s;
+}
+.mst-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.mst-btn--primary {
+  background: var(--maestro-brand);
+  color: var(--maestro-brand-on);
+}
+.mst-btn--primary:not(:disabled):hover {
+  background: var(--maestro-brand-hover);
+}
+.mst-btn--secondary {
+  background: var(--maestro-surface);
+  color: var(--maestro-fg-muted);
+  border-color: var(--maestro-border);
+}
+.mst-btn--secondary:not(:disabled):hover {
+  color: var(--maestro-fg);
+  border-color: var(--maestro-border-strong);
+}
+.mst-btn--danger {
+  background: var(--maestro-danger);
+  color: #fff;
+}
+.mst-btn--danger:not(:disabled):hover {
+  filter: brightness(1.08);
+}
+.mst-btn--ghost {
+  background: none;
+  color: var(--maestro-fg-muted);
+}
+.mst-btn--ghost:not(:disabled):hover {
+  background: var(--maestro-surface-2);
+  color: var(--maestro-fg);
+}
+
+.mst-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  background: var(--maestro-surface-2);
+  color: var(--maestro-fg-muted);
+  border: 1px solid var(--maestro-border);
+}
+.mst-badge--brand {
+  background: var(--maestro-brand-soft);
+  color: var(--maestro-brand);
+  border-color: transparent;
+}
+.mst-badge--ok {
+  background: var(--maestro-ok-soft);
+  color: var(--maestro-ok);
+  border-color: transparent;
+}
+.mst-badge--warn {
+  background: var(--maestro-warn-soft);
+  color: var(--maestro-warn);
+  border-color: transparent;
+}
+.mst-badge--danger {
+  background: var(--maestro-danger-soft);
+  color: var(--maestro-danger);
+  border-color: transparent;
+}
+.mst-badge--dot::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+
+.mst-card {
+  background: var(--maestro-surface);
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-lg);
+  box-shadow: var(--maestro-shadow-card);
+}
+
+.mst-input,
+.mst-select,
+.mst-textarea {
+  display: block;
+  width: 100%;
+  font: inherit;
+  font-size: 12.5px;
+  color: var(--maestro-fg);
+  background: var(--maestro-surface);
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius);
+  padding: 7px 10px;
+  transition: border-color 0.14s;
+}
+.mst-textarea {
+  min-height: 84px;
+  resize: vertical;
+}
+.mst-input::placeholder,
+.mst-textarea::placeholder {
+  color: var(--maestro-fg-subtle);
+}
+.mst-input:focus,
+.mst-select:focus,
+.mst-textarea:focus {
+  outline: none;
+  border-color: var(--maestro-brand);
+  box-shadow: 0 0 0 3px var(--maestro-brand-soft);
+}
+.mst-input:disabled,
+.mst-select:disabled,
+.mst-textarea:disabled {
+  background: var(--maestro-surface-2);
+  color: var(--maestro-fg-subtle);
+  cursor: not-allowed;
+}
+.mst-input--inline {
+  width: auto;
+  min-width: 200px;
+}
+.mst-checkbox {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--maestro-brand);
+}
+
+.mst-mono {
+  font-family: var(--maestro-font-mono);
+  font-size: 11.5px;
+}
+.mst-muted {
+  color: var(--maestro-fg-muted);
+}
+.mst-subtle {
+  color: var(--maestro-fg-subtle);
+}
+.mst-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+.mst-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  font-size: 12.5px;
+  color: var(--maestro-fg-muted);
+}
+.mst-spinner::before {
+  content: '';
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 2px solid var(--maestro-border-strong);
+  border-top-color: var(--maestro-brand);
+  animation: mst-spin 0.7s linear infinite;
+}
+@keyframes mst-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.mst-empty {
+  border: 1px dashed var(--maestro-border-strong);
+  border-radius: var(--maestro-radius-lg);
+  padding: 36px 20px;
+  text-align: center;
+}
+.mst-empty__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--maestro-fg);
+  margin: 0;
+}
+.mst-empty__hint {
+  margin: 5px 0 0;
+  font-size: 12.5px;
+  color: var(--maestro-fg-muted);
+}
+
+.mst-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  border: 1px solid var(--maestro-danger);
+  background: var(--maestro-danger-soft);
+  color: var(--maestro-danger);
+  border-radius: var(--maestro-radius);
+  padding: 10px 12px;
+  font-size: 12.5px;
+}
+
+.mst-toast {
+  position: fixed;
+  bottom: 18px;
+  right: 18px;
+  z-index: 60;
+  background: var(--maestro-shell);
+  color: var(--maestro-shell-fg);
+  border-radius: var(--maestro-radius);
+  padding: 8px 14px;
+  font-size: 12.5px;
+  box-shadow: var(--maestro-shadow-panel);
+}
+
+/* ── Floating menu ───────────────────────────────────────────── */
+.mst-menu {
+  position: fixed;
+  z-index: 70;
+  min-width: 184px;
+  padding: 5px;
+  background: var(--maestro-surface);
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius);
+  box-shadow: var(--maestro-shadow-panel);
+}
+.mst-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 6px 9px;
+  border: 0;
+  border-radius: var(--maestro-radius-sm);
+  background: none;
+  text-align: left;
+  font-size: 12.5px;
+  color: var(--maestro-fg-muted);
+}
+.mst-menu__item:hover {
+  background: var(--maestro-surface-2);
+  color: var(--maestro-fg);
+}
+.mst-menu__item--danger {
+  color: var(--maestro-danger);
+}
+.mst-menu__item--danger:hover {
+  background: var(--maestro-danger-soft);
+  color: var(--maestro-danger);
+}
+.mst-menu__sep {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--maestro-border);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   4 · Page furniture
+   ══════════════════════════════════════════════════════════════════ */
+
+.mst-page {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  min-height: 0;
+}
+.mst-page--fill {
+  height: 100%;
+}
+
+.mst-pagehead {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.mst-pagehead__title {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--maestro-fg);
+}
+.mst-pagehead__meta {
+  margin: 3px 0 0;
+  font-size: 12.5px;
+  color: var(--maestro-fg-muted);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-wrap: wrap;
+}
+.mst-pagehead__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mst-grouplabel {
+  font-family: var(--maestro-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--maestro-fg-subtle);
+  margin: 0 0 9px;
+}
+
+.mst-backlink {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-size: 12px;
+  color: var(--maestro-brand);
+}
+.mst-backlink:hover {
+  text-decoration: underline;
+}
+
+/* ── Hub ─────────────────────────────────────────────────────── */
+.mst-hub {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.mst-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
+  gap: 10px;
+}
+.mst-ecard {
+  display: flex;
+  gap: 11px;
+  min-width: 0;
+  padding: 13px;
+  text-align: left;
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-lg);
+  background: var(--maestro-surface);
+  color: var(--maestro-fg);
+  box-shadow: var(--maestro-shadow-card);
+  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
+}
+.mst-ecard:hover {
+  border-color: var(--maestro-brand);
+  transform: translateY(-2px);
+  box-shadow: var(--maestro-shadow-panel);
+}
+.mst-ecard__tile {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  border-radius: 9px;
+  display: grid;
+  place-items: center;
+  background: var(--maestro-brand-soft);
+  color: var(--maestro-brand);
+}
+.mst-ecard__body {
+  flex: 1;
+  min-width: 0;
+}
+.mst-ecard__name {
+  display: block;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--maestro-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-ecard__desc {
+  display: block;
+  margin: 3px 0 0;
+  font-size: 11.5px;
+  color: var(--maestro-fg-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-caps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+.mst-cap {
+  font-family: var(--maestro-font-mono);
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--maestro-surface-2);
+  border: 1px solid var(--maestro-border);
+  color: var(--maestro-fg-subtle);
+}
+.mst-cap[data-on='true'] {
+  background: var(--maestro-brand-soft);
+  border-color: transparent;
+  color: var(--maestro-brand);
+}
+.mst-source {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  margin-top: 7px;
+  font-family: var(--maestro-font-mono);
+  font-size: 9.5px;
+  color: var(--maestro-fg-subtle);
+}
+.mst-source span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Filters ─────────────────────────────────────────────────── */
+.mst-chips {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-wrap: wrap;
+}
+.mst-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px;
+  border: 0;
+  border-radius: 20px;
+  font-size: 11.5px;
+  font-weight: 500;
+  background: var(--maestro-brand-soft);
+  color: var(--maestro-brand);
+}
+.mst-chip:hover {
+  filter: brightness(0.96);
+}
+
+/* ── Table ───────────────────────────────────────────────────── */
+.mst-tablewrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.mst-tablescroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  /* Deliberate: the admin never scrolls sideways. Columns are fixed-width and truncate; when an
+     entity has more fields than fit, the column picker decides which ones are on screen. */
+  overflow-x: hidden;
+}
+.mst-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.mst-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  text-align: left;
+  padding: 8px 12px;
+  background: var(--maestro-surface-2);
+  border-bottom: 1px solid var(--maestro-border);
+  font-family: var(--maestro-font-mono);
+  font-size: 9.5px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--maestro-fg-subtle);
+  white-space: nowrap;
+}
+.mst-table th[aria-sort]:not([aria-sort='none']) {
+  color: var(--maestro-brand);
+}
+.mst-th__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  max-width: 100%;
+}
+.mst-th__button:hover {
+  color: var(--maestro-fg-muted);
+}
+.mst-th__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mst-table td {
+  padding: var(--maestro-row-py) 12px;
+  border-bottom: 1px solid var(--maestro-border);
+  font-size: 12.5px;
+  color: var(--maestro-fg-muted);
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: padding 0.16s;
+}
+.mst-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+.mst-table tbody tr:hover td {
+  background: var(--maestro-surface-2);
+}
+.mst-table td.mst-td--actions {
+  overflow: visible;
+  text-align: right;
+  padding-left: 0;
+  padding-right: 6px;
+}
+.mst-table__cell {
+  cursor: pointer;
+}
+
+.mst-pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 8px 12px;
+  border-top: 1px solid var(--maestro-border);
+  font-size: 11.5px;
+  color: var(--maestro-fg-subtle);
+}
+.mst-pagination__nums {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.mst-pagination__nums button {
+  min-width: 26px;
+  height: 26px;
+  padding: 0 5px;
+  border: 0;
+  border-radius: var(--maestro-radius-sm);
+  background: none;
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  color: var(--maestro-fg-subtle);
+}
+.mst-pagination__nums button:not(:disabled):hover {
+  background: var(--maestro-surface-2);
+  color: var(--maestro-fg);
+}
+.mst-pagination__nums button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.mst-pagination__nums button[aria-current='true'] {
+  background: var(--maestro-brand);
+  color: var(--maestro-brand-on);
+  font-weight: 600;
+}
+
+/* ── Detail ──────────────────────────────────────────────────── */
+.mst-fields {
+  margin: 0;
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-lg);
+  background: var(--maestro-surface);
+  overflow: hidden;
+  box-shadow: var(--maestro-shadow-card);
+}
+.mst-fields__row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.4fr);
+  gap: 16px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--maestro-border);
+}
+.mst-fields__row:last-child {
+  border-bottom: 0;
+}
+.mst-fields__key {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--maestro-fg-subtle);
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.mst-fields__value {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  font-size: 12.5px;
+  color: var(--maestro-fg);
+  overflow-wrap: break-word;
+}
+
+/* ── Form ────────────────────────────────────────────────────── */
+.mst-form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px;
+}
+.mst-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+.mst-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--maestro-fg-muted);
+}
+.mst-label__req {
+  color: var(--maestro-danger);
+  margin-left: 2px;
+}
+.mst-help {
+  margin: 0;
+  font-size: 11.5px;
+  color: var(--maestro-fg-subtle);
+}
+.mst-form__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 14px;
+  border-top: 1px solid var(--maestro-border);
+}
+.mst-inline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* ── JSON / object values ────────────────────────────────────── */
+.mst-code {
+  display: block;
+  font-family: var(--maestro-font-mono);
+  font-size: 11.5px;
+  background: var(--maestro-surface-2);
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-sm);
+  padding: 3px 6px;
+  color: var(--maestro-fg-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-code--block {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  padding: 9px 11px;
+}
+.mst-json {
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius);
+  background: var(--maestro-surface);
+  overflow: hidden;
+}
+.mst-json__head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 4px 6px;
+  background: var(--maestro-surface-2);
+  border-bottom: 1px solid var(--maestro-border);
+}
+.mst-json__tab {
+  border: 1px solid transparent;
+  border-radius: var(--maestro-radius-sm);
+  background: none;
+  padding: 2px 9px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--maestro-fg-subtle);
+}
+.mst-json__tab:not(:disabled):hover {
+  color: var(--maestro-fg-muted);
+}
+.mst-json__tab--active {
+  background: var(--maestro-surface);
+  border-color: var(--maestro-border-strong);
+  color: var(--maestro-fg);
+}
+.mst-json__tab:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.mst-json__body {
+  padding: 4px;
+}
+.mst-json__nest {
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-sm);
+}
+.mst-json__rows {
+  display: flex;
+  flex-direction: column;
+}
+.mst-json__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 6px 12px;
+  min-width: 0;
+  padding: 6px 10px;
+  border-top: 1px solid var(--maestro-border);
+}
+.mst-json__rows > :first-child .mst-json__row,
+.mst-json__rows > .mst-json__row:first-child {
+  border-top: 0;
+}
+.mst-json__key {
+  width: 140px;
+  flex: none;
+  padding-top: 7px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--maestro-fg-subtle);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-json__index {
+  width: 28px;
+  flex: none;
+  padding-top: 7px;
+  text-align: right;
+  font-family: var(--maestro-font-mono);
+  font-size: 11px;
+  color: var(--maestro-fg-subtle);
+}
+.mst-json__field {
+  flex: 1 1 260px;
+  min-width: 0;
+}
+.mst-json__remove {
+  flex: none;
+  border: 0;
+  background: none;
+  padding-top: 7px;
+  font-size: 11.5px;
+  color: var(--maestro-fg-subtle);
+}
+.mst-json__remove:hover {
+  color: var(--maestro-danger);
+}
+.mst-json__empty {
+  margin: 0;
+  padding: 8px 10px;
+  font-size: 11.5px;
+  color: var(--maestro-fg-subtle);
+}
+.mst-json__addrow {
+  padding: 6px 10px;
+  border-top: 1px solid var(--maestro-border);
+}
+.mst-input--invalid,
+.mst-input--invalid:focus {
+  border-color: var(--maestro-warn);
+  box-shadow: 0 0 0 3px var(--maestro-warn-soft);
+}
+.mst-help--warn {
+  color: var(--maestro-warn);
+}
+
+.mst-objectvalue {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+}
+.mst-objectvalue--root {
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-sm);
+  background: var(--maestro-surface-2);
+}
+.mst-objectvalue--nested {
+  border-left: 2px solid var(--maestro-border);
+  padding-left: 8px;
+}
+.mst-objectvalue__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 3px 12px;
+  min-width: 0;
+  padding: 5px 10px;
+  border-top: 1px solid var(--maestro-border);
+  font-size: 12px;
+}
+.mst-objectvalue__row:first-child {
+  border-top: 0;
+}
+.mst-objectvalue__key {
+  width: 132px;
+  flex: none;
+  font-family: var(--maestro-font-mono);
+  font-size: 11px;
+  color: var(--maestro-fg-subtle);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-objectvalue__val {
+  flex: 1 1 220px;
+  min-width: 0;
+  margin: 0;
+}
+
+.mst-relation {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  min-width: 0;
+  padding: 1px 7px;
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-sm);
+  background: var(--maestro-surface-2);
+  font-size: 11.5px;
+  font-weight: 500;
+  vertical-align: middle;
+}
+.mst-relation__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Command palette ─────────────────────────────────────────── */
+.mst-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 12vh 16px 16px;
+  background: color-mix(in srgb, var(--maestro-shell) 46%, transparent);
+}
+.mst-palette {
+  width: min(540px, 100%);
+  max-height: 62vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--maestro-surface);
+  border: 1px solid var(--maestro-border);
+  border-radius: var(--maestro-radius-lg);
+  box-shadow: var(--maestro-shadow-panel);
+  overflow: hidden;
+}
+.mst-palette__input {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 11px 14px;
+  border-bottom: 1px solid var(--maestro-border);
+  color: var(--maestro-fg-subtle);
+  flex: none;
+}
+.mst-palette__input input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  font: inherit;
+  font-size: 14px;
+  color: var(--maestro-fg);
+}
+.mst-palette__input input::placeholder {
+  color: var(--maestro-fg-subtle);
+}
+/* The dialog itself is the focus indicator here: it opens focused, the caret is visible, and a ring
+   around a borderless field inside a modal only adds a box. */
+.mst-palette__input input:focus-visible {
+  outline: none;
+}
+.mst-palette__list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 6px;
+}
+.mst-palette__section {
+  font-family: var(--maestro-font-mono);
+  font-size: 9.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--maestro-fg-subtle);
+  margin: 8px 10px 4px;
+}
+.mst-palette__row {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: var(--maestro-radius);
+  background: none;
+  text-align: left;
+  font-size: 12.5px;
+  color: var(--maestro-fg-muted);
+}
+.mst-palette__row[data-active='true'] {
+  background: var(--maestro-brand-soft);
+  color: var(--maestro-brand);
+  font-weight: 500;
+}
+.mst-palette__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mst-palette__hint {
+  flex: none;
+  font-family: var(--maestro-font-mono);
+  font-size: 10px;
+  opacity: 0.75;
+}
+.mst-palette__empty {
+  padding: 22px;
+  text-align: center;
+  font-size: 12.5px;
+  color: var(--maestro-fg-subtle);
+}
+
+/* ── Theme picker ────────────────────────────────────────────── */
+.mst-swatch {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   5 · Responsive — the shell shrinks, the content never scrolls sideways
+   ══════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 900px) {
+  .mst-root {
+    --maestro-sidebar-width: 60px;
+  }
+  .mst-side__title,
+  .mst-side__search,
+  .mst-side__section,
+  .mst-navitem__label,
+  .mst-navitem__sub,
+  .mst-navitem__count,
+  .mst-navitem__chev,
+  .mst-side__foot span,
+  .mst-searchchip span {
+    display: none;
+  }
+  .mst-side__brand,
+  .mst-navitem,
+  .mst-side__foot {
+    justify-content: center;
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+  .mst-side__children {
+    margin-left: 0;
+    padding-left: 0;
+    border-left: 0;
+  }
+  .mst-content {
+    padding: 14px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mst-root *,
+  .mst-root *::before,
+  .mst-root *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}