/**
 * studio-v1 — Design.MD tokens only (design-demo.html).
 * Live shell wordmark and canvas stay in ui/os/index.html.
 *
 * Design = tokens + widget skins over the closed catalog.
 * Not freeform LLM HTML. Live paint: Intent → Manifest → bindings → WipuShell.paint / #paintPrimary.
 *
 * Apply path: cold compose / matrix validate → seed → paint.
 * SoftID invent forbidden; menus come from Manifest only.
 */

/* Fonts: Design.MD — Space Grotesk · Inter · Nunito. Loaded by the shell / demo page. */

.skin-studio-v1,
[data-skin="studio-v1"] {
  /* Design.MD — High-Conviction Studio. Do not invent a second palette. */
  --ink: #0C0C0C;
  --ink-rgb: 12 12 12;
  --voltr: #E6FD10;
  --voltr-rgb: 230 253 16;
  --canvas: #FFFFFF;
  --canvas-deep: #F4F4F2;
  --surface: #F4F4F2;
  --surface-raised: #FFFFFF;
  --line: rgba(12, 12, 12, 0.12);
  --line-strong: #0C0C0C;
  --muted: #707070;
  --muted-soft: #949494;
  --danger: #ba1a1a;
  --ok: #0C0C0C;
  --warn: #0C0C0C;
  --status-open-bg: #E6FD10;
  --status-open-fg: #0C0C0C;
  --status-ship-bg: #F4F4F2;
  --status-ship-fg: #0C0C0C;
  --status-hold-bg: #FFFFFF;
  --status-hold-fg: #ba1a1a;
  --status-done-bg: #F4F4F2;
  --status-done-fg: #0C0C0C;

  --atmosphere: #FFFFFF;

  /* Design.MD type: display Space Grotesk, body Inter, brand Nunito */
  --font-display: "Space Grotesk", sans-serif;
  --font-body: Inter, sans-serif;
  --font-brand: Nunito, sans-serif;
  --font-mono: "Space Grotesk", monospace;

  --text-xs: 0.6875rem;   /* 11 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-md: 0.9375rem;   /* 15 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.5rem;      /* 24 */
  --text-2xl: clamp(1.75rem, 2.4vw, 2.25rem);
  --leading-tight: 1.15;
  --leading-body: 1.45;
  --tracking-caps: 0.08em;
  --tracking-tight: -0.03em;

  /* ── Density ───────────────────────────────────────────── */
  --phi: 1.618;
  --space-1: 0.5rem;   /* 8 */
  --space-2: 0.8125rem; /* 13 */
  --space-3: 1.3125rem; /* 21 */
  --space-4: 2.125rem;  /* 34 */
  --row-h: 2.75rem;
  --control-h: 2.25rem;
  --chrome-pad-y: 0.5rem;
  --chrome-pad-x: 1.3125rem;
  --paint-gap: 1.25rem;
  --section-gap: 1.75rem;

  /* ── Radius / chrome ───────────────────────────────────── */
  --radius-pill: 9999px;
  --radius-shell: 28px;
  --radius-control: 16px;
  --radius-field: 12px;
  --radius-row: 16px;
  --shell-chrome-width: min(1180px, calc(100% - 40px));
  --desktop-inset: 12px;
  --chrome-blur: blur(12px);
  --chrome-bg: rgba(255, 255, 255, 0.92);
  --chrome-border: rgba(12, 12, 12, 0.08);
  --shadow-soft: none;
  --focus-ring: 2px solid var(--ink);
  --accent-inset: inset 3px 0 0 var(--voltr);

  /* ── Table widget skin ─────────────────────────────────── */
  --table-head-size: var(--text-xs);
  --table-cell-size: var(--text-sm);
  --table-head-color: var(--muted);
  --table-border: var(--line);
  --table-row-hover: rgba(12, 12, 12, 0.035);
  --table-row-selected: rgba(230, 253, 16, 0.16);
  --table-pad-x: 0.875rem;
  --table-pad-y: 0.7rem;
}

/* ── Base surfaces ───────────────────────────────────────── */
/* Demo page only. Live shell keeps its own white canvas and Nunito wordmark. */
.skin-studio-v1 {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  background: #FFFFFF;
}

/* ── Typography utilities ────────────────────────────────── */
.skin-studio-v1 .label-caps,
[data-skin="studio-v1"] .label-caps {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.skin-studio-v1 .font-display,
[data-skin="studio-v1"] .font-display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

.skin-studio-v1 .font-brand,
[data-skin="studio-v1"] .font-brand {
  font-family: var(--font-brand);
}

/* ── Chrome: apps bar (same class names the shell uses) ──── */
.skin-studio-v1 .topbar,
[data-skin="studio-v1"] .topbar {
  position: sticky;
  top: var(--space-3);
  z-index: 5;
  width: var(--shell-chrome-width);
  margin: var(--space-3) auto 0;
}

.skin-studio-v1 .pill,
[data-skin="studio-v1"] .pill {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--chrome-bg);
  border: 1px solid var(--chrome-border);
  border-radius: var(--radius-pill);
  padding: var(--chrome-pad-y) var(--chrome-pad-x);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  box-sizing: border-box;
}

/* Demo stub only. Live apps-bar wordmark is Nunito in ui/os/index.html — do not restyle it. */
.skin-studio-v1 .pill a.logo {
  margin-right: auto;
  font: 800 72px/0.85 Nunito, sans-serif;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
}

.skin-studio-v1 .pill a.logo .dot {
  color: var(--voltr);
}

.skin-studio-v1 .pill .apps-bar-nav,
[data-skin="studio-v1"] .pill .apps-bar-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.skin-studio-v1 .pill .apps-bar-nav a,
[data-skin="studio-v1"] .pill .apps-bar-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
}

.skin-studio-v1 .pill .apps-bar-nav a[aria-current="page"],
[data-skin="studio-v1"] .pill .apps-bar-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--voltr);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.skin-studio-v1 .pill .apps-bar-login,
[data-skin="studio-v1"] .pill .apps-bar-login {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-4);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
}

.skin-studio-v1 .pill .apps-bar-login .locale,
[data-skin="studio-v1"] .pill .apps-bar-login .locale {
  color: var(--voltr);
}

/* ── Paint canvas / panes ────────────────────────────────── */
/* Live desk stays full-bleed; demo page may constrain via local styles. */
.skin-studio-v1 .shell-canvas,
[data-skin="studio-v1"] .shell-canvas {
  position: relative;
  z-index: 1;
}

.skin-studio-v1 #paintCanvas,
[data-skin="studio-v1"] #paintCanvas {
  text-align: start;
}

.skin-studio-v1 body[data-shell-paint="master_detail"] #paintCanvas,
html[data-skin="studio-v1"] body[data-shell-paint="master_detail"] #paintCanvas,
[data-skin="studio-v1"][data-shell-paint="master_detail"] #paintCanvas {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 34%);
  gap: var(--paint-gap);
  align-items: start;
}

.skin-studio-v1 .paint-pane,
[data-skin="studio-v1"] .paint-pane {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
}

.skin-studio-v1 #paintSecondary,
[data-skin="studio-v1"] #paintSecondary {
  background: var(--surface-raised);
}

.skin-studio-v1 #paintTitle,
[data-skin="studio-v1"] #paintTitle {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0.15rem 0 0;
}

/* Stage header above paint (live #company-register-card brand row) */
[data-skin="studio-v1"] #company-register-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

[data-skin="studio-v1"] #company-register-card > .flex.items-center {
  border-color: var(--line) !important;
}

/* ── Filters / controls ──────────────────────────────────── */
.skin-studio-v1 .wipu-filters,
[data-skin="studio-v1"] .wipu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: end;
  margin: var(--space-3) 0;
}

.skin-studio-v1 .wipu-field,
[data-skin="studio-v1"] .wipu-field {
  display: grid;
  gap: 0.35rem;
  min-width: 8rem;
}

.skin-studio-v1 .wipu-field select,
.skin-studio-v1 .wipu-field input,
[data-skin="studio-v1"] .wipu-field select,
[data-skin="studio-v1"] .wipu-field input {
  height: var(--control-h);
  padding: 0 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--ink);
  font: 600 var(--text-sm)/1.2 var(--font-body);
}

.skin-studio-v1 .wipu-field select:focus,
.skin-studio-v1 .wipu-field input:focus,
[data-skin="studio-v1"] .wipu-field select:focus,
[data-skin="studio-v1"] .wipu-field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--accent-inset);
}

.skin-studio-v1 .btn-primary,
[data-skin="studio-v1"] .btn-primary {
  height: var(--control-h);
  padding: 0 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink);
  background: var(--voltr);
  color: var(--ink);
  font: 700 var(--text-sm)/1 var(--font-body);
  cursor: pointer;
}

.skin-studio-v1 .btn-ghost,
[data-skin="studio-v1"] .btn-ghost {
  height: var(--control-h);
  padding: 0 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: 600 var(--text-sm)/1 var(--font-body);
  cursor: pointer;
}

/* ── Data table widget ───────────────────────────────────── */
.skin-studio-v1 .wipu-table-wrap,
[data-skin="studio-v1"] .wipu-table-wrap {
  width: 100%;
  max-width: none;
  overflow: auto;
  border: 1px solid var(--table-border);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
}

.skin-studio-v1 .wipu-table,
[data-skin="studio-v1"] .wipu-table {
  width: 100%;
  max-width: none;
  table-layout: auto;
  border-collapse: collapse;
  font-size: var(--table-cell-size);
}

.skin-studio-v1 .wipu-table th,
[data-skin="studio-v1"] .wipu-table th {
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--table-head-size);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--table-head-color);
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--table-border);
  background: rgba(12, 12, 12, 0.02);
  white-space: nowrap;
}

.skin-studio-v1 .wipu-table td,
[data-skin="studio-v1"] .wipu-table td {
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--table-border);
  vertical-align: middle;
  height: var(--row-h);
}

.skin-studio-v1 .wipu-table tbody tr,
[data-skin="studio-v1"] .wipu-table tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}

.skin-studio-v1 .wipu-table tbody tr:hover,
[data-skin="studio-v1"] .wipu-table tbody tr:hover {
  background: var(--table-row-hover);
}

.skin-studio-v1 .wipu-table tbody tr[aria-selected="true"],
[data-skin="studio-v1"] .wipu-table tbody tr[aria-selected="true"] {
  background: var(--table-row-selected);
}

.skin-studio-v1 .wipu-table tbody tr:last-child td,
[data-skin="studio-v1"] .wipu-table tbody tr:last-child td {
  border-bottom: 0;
}

.skin-studio-v1 .mono-id,
[data-skin="studio-v1"] .mono-id {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
}

.skin-studio-v1 .status-pill,
[data-skin="studio-v1"] .status-pill {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.55rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.skin-studio-v1 .status-pill[data-status="open"],
[data-skin="studio-v1"] .status-pill[data-status="open"] {
  background: var(--status-open-bg);
  color: var(--status-open-fg);
}

.skin-studio-v1 .status-pill[data-status="shipped"],
[data-skin="studio-v1"] .status-pill[data-status="shipped"] {
  background: var(--status-ship-bg);
  color: var(--status-ship-fg);
}

.skin-studio-v1 .status-pill[data-status="hold"],
[data-skin="studio-v1"] .status-pill[data-status="hold"] {
  background: var(--status-hold-bg);
  color: var(--status-hold-fg);
}

.skin-studio-v1 .status-pill[data-status="done"],
[data-skin="studio-v1"] .status-pill[data-status="done"] {
  background: var(--status-done-bg);
  color: var(--status-done-fg);
}

/* ── Secondary list widget ───────────────────────────────── */
.skin-studio-v1 .wipu-list,
[data-skin="studio-v1"] .wipu-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skin-studio-v1 .wipu-list button,
[data-skin="studio-v1"] .wipu-list button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  text-align: start;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-row);
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--text-sm)/1.3 var(--font-body);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.skin-studio-v1 .wipu-list button:hover,
.skin-studio-v1 .wipu-list button[aria-current="true"],
[data-skin="studio-v1"] .wipu-list button:hover,
[data-skin="studio-v1"] .wipu-list button[aria-current="true"] {
  border-color: var(--ink);
  background: var(--table-row-selected);
}

.skin-studio-v1 .wipu-list .meta,
[data-skin="studio-v1"] .wipu-list .meta {
  color: var(--muted);
  font-weight: 500;
  font-size: var(--text-xs);
}

/* ── Live paint markup (binding-executor / wipu-shell / module templates) ──
 * Prefer adapting skin to real classes over inventing SoftID HTML.
 * Chrome (apps bar / Start / dock) stays Manifest-driven; only content zones.
 */
[data-skin="studio-v1"] #paintCanvas .wipu-skel,
[data-skin="studio-v1"] #paintCanvas .wipu-orders,
[data-skin="studio-v1"] #paintCanvas .wipu-plt,
[data-skin="studio-v1"] #paintCanvas [data-wipu-page] {
  font-family: var(--font-body);
  color: var(--ink);
}

[data-skin="studio-v1"] #paintCanvas h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* Filter / upsert forms painted by modules */
[data-skin="studio-v1"] #paintCanvas form.flex,
[data-skin="studio-v1"] #paintCanvas form[data-orders-filters],
[data-skin="studio-v1"] #paintCanvas form[data-entity-filters],
[data-skin="studio-v1"] #paintCanvas form[class*="flex-wrap"] {
  gap: var(--space-2);
  align-items: end;
  margin: var(--space-2) 0 var(--space-3);
}

[data-skin="studio-v1"] #paintCanvas label.flex.flex-col,
[data-skin="studio-v1"] #paintCanvas label[class*="flex-col"] {
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}

[data-skin="studio-v1"] #paintCanvas input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-skin="studio-v1"] #paintCanvas select,
[data-skin="studio-v1"] #paintCanvas textarea {
  min-height: var(--control-h);
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-field);
  background: var(--surface-raised);
  color: var(--ink);
  font: 600 var(--text-sm)/1.2 var(--font-body);
}

[data-skin="studio-v1"] #paintCanvas input:focus,
[data-skin="studio-v1"] #paintCanvas select:focus,
[data-skin="studio-v1"] #paintCanvas textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--accent-inset);
}

/* Primary / ink / outline CTAs from module pill helpers */
[data-skin="studio-v1"] #paintCanvas button.rounded-full.bg-voltr,
[data-skin="studio-v1"] #paintCanvas a.rounded-full.bg-voltr {
  background: var(--voltr) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  font-family: var(--font-body);
}

[data-skin="studio-v1"] #paintCanvas button.rounded-full.bg-ink {
  background: var(--ink) !important;
  color: var(--voltr) !important;
  border-color: var(--ink) !important;
}

[data-skin="studio-v1"] #paintCanvas button.rounded-full.bg-white,
[data-skin="studio-v1"] #paintCanvas button.rounded-full[class*="border-ink"]:not(.bg-voltr):not(.bg-ink) {
  background: var(--surface-raised);
  border-radius: var(--radius-pill);
}

/* List / pick rows (orders, erp, xm, finance, skeleton binding cards) */
[data-skin="studio-v1"] #paintCanvas button.w-full[class*="border"],
[data-skin="studio-v1"] #paintCanvas [data-orders-pick],
[data-skin="studio-v1"] #paintCanvas [data-entity-pick],
[data-skin="studio-v1"] #paintCanvas [data-xm-case],
[data-skin="studio-v1"] #paintCanvas [data-slot="rows"] > button,
[data-skin="studio-v1"] #paintCanvas [data-slot="rows"] > div[class*="border"],
[data-skin="studio-v1"] #paintCanvas [data-orders-rows] > button,
[data-skin="studio-v1"] #paintCanvas [data-entity-rows] > button,
[data-skin="studio-v1"] #paintCanvas [data-xm-rows] > button {
  border-radius: var(--radius-row);
  border-color: var(--line);
  background: var(--surface-raised);
  transition: border-color 0.12s ease, background 0.12s ease;
}

[data-skin="studio-v1"] #paintCanvas button.w-full[class*="border"]:hover,
[data-skin="studio-v1"] #paintCanvas [data-orders-pick]:hover,
[data-skin="studio-v1"] #paintCanvas [data-entity-pick]:hover,
[data-skin="studio-v1"] #paintCanvas [data-slot="rows"] > button:hover,
[data-skin="studio-v1"] #paintCanvas [data-slot="rows"] > div[class*="border"]:hover {
  border-color: var(--ink);
  background: var(--table-row-selected);
}

[data-skin="studio-v1"] #paintCanvas button.w-full[class*="border-ink"]:not([class*="border-ink/"]),
[data-skin="studio-v1"] #paintCanvas button.w-full[class*="bg-neutral-50"],
[data-skin="studio-v1"] #paintCanvas [aria-current="true"],
[data-skin="studio-v1"] #paintCanvas [aria-selected="true"] {
  border-color: var(--ink) !important;
  background: var(--table-row-selected) !important;
  box-shadow: var(--accent-inset);
}

/* Detail dl grids */
[data-skin="studio-v1"] #paintCanvas dl {
  gap: 0.65rem 1rem;
}

[data-skin="studio-v1"] #paintCanvas dl dd {
  font-weight: 600;
  color: var(--ink);
}

/* Live tables (platform-admin etc.) — map onto table tokens */
[data-skin="studio-v1"] #paintCanvas .overflow-x-auto {
  border: 1px solid var(--table-border);
  border-radius: var(--radius-control);
  background: var(--surface-raised);
  overflow: auto;
}

[data-skin="studio-v1"] #paintCanvas table.w-full,
[data-skin="studio-v1"] #paintCanvas table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-cell-size);
}

[data-skin="studio-v1"] #paintCanvas table thead th,
[data-skin="studio-v1"] #paintCanvas table thead td {
  font-family: var(--font-display);
  font-size: var(--table-head-size);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--table-head-color);
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--table-border);
  background: rgba(12, 12, 12, 0.02);
  white-space: nowrap;
}

[data-skin="studio-v1"] #paintCanvas table tbody td {
  padding: var(--table-pad-y) var(--table-pad-x);
  border-bottom: 1px solid var(--table-border);
  vertical-align: middle;
  height: var(--row-h);
}

[data-skin="studio-v1"] #paintCanvas table tbody tr:hover {
  background: var(--table-row-hover);
}

[data-skin="studio-v1"] #paintCanvas table tbody tr:last-child td {
  border-bottom: 0;
}

[data-skin="studio-v1"] #paintCanvas .font-mono,
[data-skin="studio-v1"] #paintCanvas [class*="font-mono"] {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

[data-skin="studio-v1"] #paintCanvas [data-slot="empty"],
[data-skin="studio-v1"] #paintCanvas .border-dashed {
  border-radius: var(--radius-control);
  border-color: var(--line-strong);
  color: var(--muted);
  background: rgba(12, 12, 12, 0.02);
}

/* Skeleton pulse rows while Manifest bindings load */
[data-skin="studio-v1"] #paintCanvas .animate-pulse {
  background: rgba(12, 12, 12, 0.06) !important;
  border-color: var(--line) !important;
  border-radius: var(--radius-row);
}

/* ── Dock chrome stub (design-demo only) ─────────────────── */
.skin-studio-v1 .dock-stub,
[data-skin="studio-v1"] .dock-stub {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-shell);
  background: var(--chrome-bg);
  border: 1px solid var(--chrome-border);
  backdrop-filter: var(--chrome-blur);
  -webkit-backdrop-filter: var(--chrome-blur);
  box-shadow: var(--shadow-soft);
}

.skin-studio-v1 .dock-stub span,
[data-skin="studio-v1"] .dock-stub span {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--voltr);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
}

.skin-studio-v1 .dock-stub span.is-active,
[data-skin="studio-v1"] .dock-stub span.is-active {
  background: var(--voltr);
  color: var(--ink);
}

/* ── Demo banner only ────────────────────────────────────── */
.demo-banner {
  position: relative;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--ink);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
}

.demo-banner strong {
  color: var(--voltr);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}

.demo-banner a {
  color: var(--voltr);
  font-weight: 700;
}

@media (max-width: 900px) {
  html[data-skin="studio-v1"] body[data-shell-paint="master_detail"] #paintCanvas,
  [data-skin="studio-v1"][data-shell-paint="master_detail"] #paintCanvas {
    grid-template-columns: 1fr;
  }
}