/* ==========================================================================
   studio.css — Studio NRG-adapt (makieta A dark / B light)
   Aktywowany wyłącznie przez [data-appearance="studio"] na <html>.
   Układ wspólny; data-theme zmienia tylko kolory. Classic bez zmian.
   System font only — bez zewnętrznych fontów / CSP.
   ========================================================================== */

/* ---- Wspólne Studio (layout + typografia) ---- */
html[data-appearance="studio"] {
  --studio-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --studio-radius: 6px;
  --studio-gap: 0.65rem;
  --studio-control-touch: 2.75rem; /* 44 — touch targets (topbar) */

  --font-display: var(--studio-font-ui);
  --font-body: var(--studio-font-ui);
  --font-ui: var(--studio-font-ui);

  --radius-sm: var(--studio-radius);
  --radius-md: var(--studio-radius);
  --radius-lg: var(--studio-radius);
  --radius-xl: var(--studio-radius);
  --radius-full: var(--studio-radius);

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Fallback semantic aliases — overridden per theme below */
  --studio-void: var(--studio-bg);
  --studio-rail: var(--studio-surface);
  --studio-rail-raised: var(--studio-surface-2);
  --studio-ink: var(--studio-surface);
  --studio-edge: var(--studio-line);
  --studio-edge-strong: var(--studio-line-2);
  --studio-action: var(--studio-accent);
  --studio-action-hover: color-mix(in srgb, var(--studio-accent) 88%, #fff);
  --studio-action-active: color-mix(in srgb, var(--studio-accent) 82%, #000);
  --studio-on-action: var(--studio-on-accent);
  --studio-text-muted: var(--studio-muted);
  --studio-text-faint: var(--studio-faint);
  --studio-focus: var(--studio-selection);
  --studio-danger: #f0a8a0;
  --studio-danger-border: #e07068;
  --studio-danger-fill: color-mix(in srgb, #8a2a28 42%, transparent);
  --studio-error: #ffb4a8;
  --studio-error-fill: color-mix(in srgb, #6e221e 55%, transparent);
  --studio-warning: var(--studio-selection);
  --studio-warning-fill: color-mix(in srgb, var(--studio-selection) 22%, transparent);
  --studio-success: #7ec99a;
}

/* ---- DARK (A): burgund dopracowany — accent tylko na akcjach ---- */
html[data-appearance="studio"][data-theme="dark"] {
  color-scheme: dark;

  --studio-bg: #0d0a0b;
  --studio-surface: #16110f;
  --studio-surface-2: #1d1716;
  --studio-line: #2c2321;
  --studio-line-2: #3a2e2b;
  --studio-text: #f1ebe7;
  --studio-muted: #a3958f;
  /* AA vs --studio-surface #16110f: #6f625d ≈3.19:1 (empty-hint / faint); #8a7c76 ≥4.5:1 */
  --studio-faint: #8a7c76;
  --studio-accent: #b3263a;
  --studio-on-accent: #ffffff;
  --studio-cargo: #3d5a80;
  --studio-cargo-stroke: #6f8fb8;
  --studio-selection: #f2b544;
  --studio-trailer-bg: #120e0d;

  --studio-void: var(--studio-bg);
  --studio-rail: var(--studio-surface);
  --studio-rail-raised: var(--studio-surface-2);
  --studio-ink: var(--studio-surface);
  --studio-edge: var(--studio-line);
  --studio-edge-strong: var(--studio-line-2);
  --studio-work: var(--studio-surface);
  --studio-work-2: var(--studio-surface-2);
  --studio-work-input: var(--studio-surface-2);
  --studio-work-text: var(--studio-text);
  --studio-work-muted: var(--studio-muted);
  --studio-action: var(--studio-accent);
  --studio-action-hover: #c93a4c;
  --studio-action-active: #9a1f30;
  --studio-on-action: var(--studio-on-accent);
  --studio-text-muted: var(--studio-muted);
  --studio-text-faint: var(--studio-faint);
  --studio-focus: var(--studio-selection);

  --color-bg: var(--studio-bg);
  --color-panel: var(--studio-surface);
  --color-surface: var(--studio-surface);
  --color-surface-2: var(--studio-surface-2);
  --color-surface-offset: var(--studio-trailer-bg);
  --color-input: var(--studio-surface-2);
  --color-divider: var(--studio-line);
  --color-border: var(--studio-line-2);
  --color-text: var(--studio-text);
  --color-text-muted: var(--studio-muted);
  --color-text-faint: var(--studio-faint);
  --color-text-inverse: #0d0a0b;
  --color-primary: var(--studio-accent);
  --color-primary-hover: var(--studio-action-hover);
  --color-primary-active: var(--studio-action-active);
  --color-primary-highlight: color-mix(in srgb, var(--studio-accent) 18%, transparent);
  --color-on-primary: var(--studio-on-accent);
  --color-success: var(--studio-success);
  --color-success-highlight: color-mix(in srgb, var(--studio-success) 18%, transparent);
  --color-warning: var(--studio-selection);
  --color-warning-highlight: var(--studio-warning-fill);
  --color-error: var(--studio-error);
  --color-error-highlight: var(--studio-error-fill);
  --color-danger: var(--studio-danger);
  --color-danger-highlight: var(--studio-danger-fill);
  --color-focus: var(--studio-selection);
  --color-grid-line: var(--studio-line-2);
  --color-overlay: color-mix(in srgb, #000 62%, transparent);
}

/* ---- LIGHT (B): dyspozytornia jasna ---- */
html[data-appearance="studio"][data-theme="light"],
html[data-appearance="studio"]:not([data-theme="dark"]) {
  color-scheme: light;

  --studio-bg: #eeece8;
  --studio-surface: #fbfaf8;
  --studio-surface-2: #f4f2ee;
  --studio-line: #dedad3;
  --studio-line-2: #cbc6bd;
  --studio-text: #1c1a17;
  --studio-muted: #615b53;
  /* Faint: was #948d83 (~2.78:1 on --studio-bg). #665f57 keeps hierarchy under muted with ≥4.5:1 margin. */
  --studio-faint: #665f57;
  /* Accent: was #d9480f (~4.3:1 with white). #c2410c ≈5.18:1 — small AA margin without redesign. */
  --studio-accent: #c2410c;
  --studio-on-accent: #ffffff;
  --studio-cargo: #2f4858;
  --studio-cargo-stroke: #1d2f3a;
  --studio-selection: #c2410c;
  --studio-trailer-bg: #f6f4f0;

  --studio-void: var(--studio-bg);
  --studio-rail: var(--studio-surface);
  --studio-rail-raised: var(--studio-surface-2);
  --studio-ink: var(--studio-surface);
  --studio-edge: var(--studio-line);
  --studio-edge-strong: var(--studio-line-2);
  --studio-work: var(--studio-surface);
  --studio-work-2: var(--studio-surface-2);
  --studio-work-input: #ffffff;
  --studio-work-text: var(--studio-text);
  --studio-work-muted: var(--studio-muted);
  --studio-action: var(--studio-accent);
  /* Hover was #e85a22 (~3.55:1 with white) — axe color-contrast on .btn-primary. Darker hover keeps AA without redesign. */
  --studio-action-hover: #b83a0a;
  --studio-action-active: #9a3209;
  --studio-on-action: var(--studio-on-accent);
  --studio-text-muted: var(--studio-muted);
  --studio-text-faint: var(--studio-faint);
  --studio-focus: var(--studio-selection);
  --studio-danger: #9e3b35;
  --studio-danger-border: #c45a52;
  --studio-danger-fill: #f3ddd9;
  --studio-error: #9e3b35;
  --studio-error-fill: #f3ddd9;
  --studio-success: #2d6a45;

  --color-bg: var(--studio-bg);
  --color-panel: var(--studio-surface);
  --color-surface: var(--studio-surface);
  --color-surface-2: var(--studio-surface-2);
  --color-surface-offset: var(--studio-trailer-bg);
  --color-input: var(--studio-work-input);
  --color-divider: var(--studio-line);
  --color-border: var(--studio-line-2);
  --color-text: var(--studio-text);
  --color-text-muted: var(--studio-muted);
  --color-text-faint: var(--studio-faint);
  --color-text-inverse: #fbfaf8;
  --color-primary: var(--studio-accent);
  --color-primary-hover: var(--studio-action-hover);
  --color-primary-active: var(--studio-action-active);
  --color-primary-highlight: color-mix(in srgb, var(--studio-accent) 12%, var(--studio-surface));
  --color-on-primary: var(--studio-on-accent);
  --color-success: var(--studio-success);
  --color-success-highlight: #dceee3;
  --color-warning: var(--studio-accent);
  --color-warning-highlight: color-mix(in srgb, var(--studio-accent) 14%, var(--studio-surface));
  --color-error: var(--studio-error);
  --color-error-highlight: var(--studio-error-fill);
  --color-danger: var(--studio-danger);
  --color-danger-highlight: var(--studio-danger-fill);
  --color-focus: var(--studio-selection);
  --color-grid-line: var(--studio-line);
  --color-overlay: color-mix(in srgb, #1c1a17 42%, transparent);
}

@media (prefers-color-scheme: dark) {
  html[data-appearance="studio"]:not([data-theme]) {
    color-scheme: dark;
    --studio-bg: #0d0a0b;
    --studio-surface: #16110f;
    --studio-surface-2: #1d1716;
    --studio-line: #2c2321;
    --studio-line-2: #3a2e2b;
    --studio-text: #f1ebe7;
    --studio-muted: #a3958f;
    --studio-faint: #8a7c76;
    --studio-accent: #b3263a;
    --studio-on-accent: #ffffff;
    --studio-selection: #f2b544;
    --studio-trailer-bg: #120e0d;
    --studio-void: var(--studio-bg);
    --studio-rail: var(--studio-surface);
    --studio-rail-raised: var(--studio-surface-2);
    --studio-ink: var(--studio-surface);
    --studio-edge: var(--studio-line);
    --studio-edge-strong: var(--studio-line-2);
    --studio-work: var(--studio-surface);
    --studio-work-2: var(--studio-surface-2);
    --studio-work-input: var(--studio-surface-2);
    --studio-work-text: var(--studio-text);
    --studio-work-muted: var(--studio-muted);
    --studio-action: var(--studio-accent);
    --studio-action-hover: #c93a4c;
    --studio-action-active: #9a1f30;
    --studio-on-action: var(--studio-on-accent);
    --studio-text-muted: var(--studio-muted);
    --studio-text-faint: var(--studio-faint);
    --studio-focus: var(--studio-selection);
    --color-bg: var(--studio-bg);
    --color-panel: var(--studio-surface);
    --color-surface: var(--studio-surface);
    --color-surface-2: var(--studio-surface-2);
    --color-surface-offset: var(--studio-trailer-bg);
    --color-input: var(--studio-surface-2);
    --color-divider: var(--studio-line);
    --color-border: var(--studio-line-2);
    --color-text: var(--studio-text);
    --color-text-muted: var(--studio-muted);
    --color-text-faint: var(--studio-faint);
    --color-text-inverse: #0d0a0b;
    --color-primary: var(--studio-accent);
    --color-primary-hover: var(--studio-action-hover);
    --color-primary-active: var(--studio-action-active);
    --color-primary-highlight: color-mix(in srgb, var(--studio-accent) 18%, transparent);
    --color-on-primary: var(--studio-on-accent);
    --color-focus: var(--studio-selection);
    --color-grid-line: var(--studio-line-2);
  }
}

/* ---- Shell / topbar ---- */
html[data-appearance="studio"] body {
  background: var(--studio-bg);
  color: var(--color-text);
  font-family: var(--studio-font-ui);
}

html[data-appearance="studio"] .topbar {
  background: var(--studio-surface);
  border-bottom: 1px solid var(--studio-line);
}

html[data-appearance="studio"] .brand-title {
  font-family: var(--studio-font-ui);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--studio-text);
}

html[data-appearance="studio"] .brand-subtitle,
html[data-appearance="studio"] .brand-demo {
  color: var(--studio-muted);
  font-family: var(--studio-font-ui);
}

html[data-appearance="studio"] .appearance-switch-label,
html[data-appearance="studio"] .theme-switch label,
html[data-appearance="studio"] .topbar .cloud-status,
html[data-appearance="studio"] .topbar-nav a {
  color: var(--studio-muted);
}

html[data-appearance="studio"] .topbar select,
html[data-appearance="studio"] .appearance-switch select,
html[data-appearance="studio"] .theme-switch select {
  background: var(--studio-surface-2);
  color: var(--studio-text);
  border: 1px solid var(--studio-line-2);
  border-radius: var(--studio-radius);
}

html[data-appearance="studio"] .card-title {
  font-family: var(--studio-font-ui);
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* ---- Layout: scena | szyna ops | pas KPI ---- */
@media (min-width: 1280px) {
  html[data-appearance="studio"] .app-shell {
    grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 22rem);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "io io"
      "plan sidebar"
      "plan results"
      "kpi kpi";
    gap: var(--studio-gap);
    padding: var(--space-2) 0.65rem;
    background: var(--studio-bg);
  }

  html[data-appearance="studio"] .main-col {
    grid-area: plan;
    height: auto;
    max-height: none;
    min-height: calc(100dvh - 11rem);
  }

  html[data-appearance="studio"] .sidebar {
    grid-area: sidebar;
    max-height: none;
    height: auto;
    position: sticky;
    top: 5.15rem;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    padding: var(--space-2);
    gap: var(--space-2);
    overflow-y: auto;
  }

  html[data-appearance="studio"] .results-col {
    grid-area: results;
    height: auto;
    max-height: calc(100dvh - 8.15rem - 14rem);
    position: sticky;
    top: 5.15rem;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-top: none;
    border-radius: 0 0 var(--studio-radius) var(--studio-radius);
    padding: var(--space-2);
    overflow-y: auto;
  }

  html[data-appearance="studio"] #fold-summary {
    grid-area: kpi;
    position: static;
    align-self: stretch;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    padding: var(--space-2) var(--space-3);
  }
}

/* Fit stage + full KPI into the viewport on tall wide desktops only.
   Measured @1440×900 Studio: keep KPI in view; no overflow:hidden on html/body. */
@media (min-width: 1280px) and (min-height: 820px) {
  html[data-appearance="studio"] {
    --studio-shell-top-offset: 3.56rem;
  }

  html[data-appearance="studio"] .app-shell {
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    height: calc(100dvh - var(--studio-shell-top-offset));
    max-height: calc(100dvh - var(--studio-shell-top-offset));
    min-height: 0;
    align-content: stretch;
  }

  html[data-appearance="studio"] .main-col {
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: hidden;
  }

  html[data-appearance="studio"] .sidebar {
    min-height: 0;
    max-height: 100%;
    height: auto;
    position: relative;
    top: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html[data-appearance="studio"] .results-col {
    min-height: 0;
    max-height: 100%;
    height: auto;
    position: relative;
    top: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html[data-appearance="studio"] .plan-sticky {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  html[data-appearance="studio"] .canvas-wrap {
    flex: 0 1 auto;
    min-height: min(16rem, 52vh);
    max-height: min(52vh, 100%);
    align-self: stretch;
  }

  html[data-appearance="studio"] .toolbar {
    flex: 0 0 auto;
  }
}

@media (min-width: 960px) and (max-width: 1279px) {
  html[data-appearance="studio"] .app-shell {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
    grid-template-areas:
      "io io"
      "plan sidebar"
      "plan results"
      "kpi kpi";
    gap: var(--studio-gap);
    background: var(--studio-bg);
  }

  html[data-appearance="studio"] .sidebar,
  html[data-appearance="studio"] .results-col {
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    padding: var(--space-2);
  }

  html[data-appearance="studio"] .results-col {
    border-top: none;
    border-radius: 0 0 var(--studio-radius) var(--studio-radius);
    max-height: none;
  }

  html[data-appearance="studio"] #fold-summary {
    grid-area: kpi;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    padding: var(--space-2) var(--space-3);
  }
}

@media (max-width: 959px) {
  html[data-appearance="studio"] .app-shell {
    background: var(--studio-bg);
    gap: var(--studio-gap);
  }

  html[data-appearance="studio"] .sidebar,
  html[data-appearance="studio"] .results-col {
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    padding: var(--space-2);
  }

  html[data-appearance="studio"] #fold-summary {
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    padding: var(--space-2);
  }
}

/* ---- Scena: jedna ramka (plan-sticky), bez zagnieżdżonej ramki naczepy ---- */
html[data-appearance="studio"] .plan-sticky {
  background: var(--studio-surface);
  border: 1px solid var(--studio-line);
  border-radius: var(--studio-radius);
  padding: var(--space-2);
}

html[data-appearance="studio"] .toolbar {
  background: transparent;
  border-bottom: 1px solid var(--studio-line);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  gap: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

html[data-appearance="studio"] .canvas-wrap {
  background: var(--studio-trailer-bg);
  border: none;
  border-radius: var(--studio-radius);
  min-height: 18rem;
}

html[data-appearance="studio"] .io-bar {
  background: var(--studio-surface);
  border: 1px solid var(--studio-line);
  border-radius: var(--studio-radius);
  padding: var(--space-2) var(--space-3);
}

html[data-appearance="studio"] .io-bar .import-panel {
  background: transparent;
}

/* ---- Baner standard CTA: jedna linia, bez czerwonego tła ---- */
html[data-appearance="studio"] .standard-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-2);
  padding: 0.35rem 0.65rem;
  background: var(--studio-surface-2);
  border: 1px solid var(--studio-line);
  border-radius: var(--studio-radius);
  min-height: 0;
}

html[data-appearance="studio"] .standard-cta-copy {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

html[data-appearance="studio"] .standard-cta-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.25;
  color: var(--studio-text);
  white-space: nowrap;
  flex: 0 0 auto;
}

html[data-appearance="studio"] .standard-cta-text {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--studio-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

html[data-appearance="studio"] .standard-cta .btn {
  flex: 0 0 auto;
  padding: 0.25rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

/* ---- Szyna: karty bez drugiej ramki ---- */
html[data-appearance="studio"] .sidebar .card,
html[data-appearance="studio"] .results-col .card,
html[data-appearance="studio"] .io-bar .card {
  background: transparent;
  border: none;
  border-radius: var(--studio-radius);
  box-shadow: none;
}

html[data-appearance="studio"] .sidebar .card-title,
html[data-appearance="studio"] .results-col .card-title,
html[data-appearance="studio"] .sidebar .field-label,
html[data-appearance="studio"] .results-col .field-label {
  color: var(--studio-muted);
}

/* ---- Toolbar: clear słabsze, na prawo (Ułóż = reguła #btn-rearrange niżej) ---- */
/* Bez opacity na grupie: 0.72 × --studio-muted na dark surface → ~#7c706b ≈3.91:1
   (axe FAIL #btn-clear-layout / #btn-clear-pallets). Light miał już override do 1. */
html[data-appearance="studio"] .toolbar-group-plan-extra {
  margin-left: auto;
  opacity: 1;
}

html[data-appearance="studio"] .toolbar-group-plan-extra .btn {
  font-size: 0.8em;
  padding-inline: 0.55rem;
  color: var(--studio-muted);
  background: transparent;
  border: 1px solid transparent;
}

html[data-appearance="studio"] .toolbar-group-plan-extra .btn:hover,
html[data-appearance="studio"] .toolbar-group-plan-extra .btn:active {
  color: var(--studio-text);
  border-color: var(--studio-line);
  background: var(--studio-surface-2);
}

html[data-appearance="studio"] .toolbar-group-plan-extra .btn:focus-visible {
  color: var(--studio-text);
}

html[data-appearance="studio"] .view-mode-toggle [aria-pressed="true"],
html[data-appearance="studio"] .view-mode-toggle .is-active,
html[data-appearance="studio"] #btn-view-2d[aria-pressed="true"],
html[data-appearance="studio"] #btn-view-3d[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: transparent;
}

/* ---- Pola / liczby ---- */
html[data-appearance="studio"] .field input,
html[data-appearance="studio"] .field select,
html[data-appearance="studio"] .field textarea,
html[data-appearance="studio"] .toolbar select,
html[data-appearance="studio"] .stepper-value {
  font-family: var(--studio-font-ui);
  font-variant-numeric: tabular-nums;
  border-radius: var(--studio-radius);
  border-color: var(--studio-line);
  background: var(--color-input);
  color: var(--color-text);
}

html[data-appearance="studio"] .stat-value,
html[data-appearance="studio"] .selection-info,
html[data-appearance="studio"] .item-row-meta {
  font-family: var(--studio-font-ui);
  font-variant-numeric: tabular-nums;
}

/* ---- Przyciski ---- */
html[data-appearance="studio"] .btn {
  border-radius: var(--studio-radius);
  font-family: var(--studio-font-ui);
  letter-spacing: 0.01em;
}

html[data-appearance="studio"] .btn-primary {
  background: var(--studio-accent);
  color: var(--studio-on-accent);
  border: 1px solid transparent;
}

html[data-appearance="studio"] .btn-primary:hover {
  background: var(--studio-action-hover);
}

html[data-appearance="studio"] .btn-primary:active {
  background: var(--studio-action-active);
}

html[data-appearance="studio"] .btn-secondary,
html[data-appearance="studio"] .btn-ghost {
  border-radius: var(--studio-radius);
  border-color: var(--studio-line);
  color: var(--studio-text);
  background: var(--studio-surface-2);
}

html[data-appearance="studio"] .btn-ghost {
  background: transparent;
  color: var(--studio-muted);
}

/* Ułóż automatycznie — jedyny główny przycisk toolbara (accent per motyw). */
html[data-appearance="studio"] #btn-rearrange {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 1px solid transparent;
}

html[data-appearance="studio"] #btn-rearrange:hover {
  background: var(--color-primary-hover);
}

html[data-appearance="studio"] #btn-rearrange:active {
  background: var(--color-primary-active);
}

html[data-appearance="studio"] .btn-danger,
html[data-appearance="studio"] .item-row-delete {
  color: var(--color-danger);
  background: transparent;
  border: 1px dashed var(--studio-danger-border, var(--color-danger));
  border-radius: var(--studio-radius);
}

html[data-appearance="studio"] .btn-danger:hover,
html[data-appearance="studio"] .btn-danger:active,
html[data-appearance="studio"] .item-row-delete:hover,
html[data-appearance="studio"] .item-row-delete:active {
  color: var(--color-danger);
  background: var(--color-danger-highlight);
  border-style: solid;
}

html[data-appearance="studio"] .field input:invalid:not(:placeholder-shown),
html[data-appearance="studio"] .is-error,
html[data-appearance="studio"] .import-ocr-status.is-error {
  border-color: var(--color-error);
  color: var(--color-error);
}

html[data-appearance="studio"] .import-ocr-status.is-notice,
html[data-appearance="studio"] .item-row-placed.is-partial,
html[data-appearance="studio"] .stop-coord-status[data-status="not-found"] {
  color: var(--color-warning);
}

html[data-appearance="studio"] .btn:focus-visible,
html[data-appearance="studio"] .field input:focus-visible,
html[data-appearance="studio"] .field select:focus-visible,
html[data-appearance="studio"] .icon-btn:focus-visible {
  outline: 2px solid var(--studio-selection);
  outline-offset: 2px;
  box-shadow: none;
  border-color: var(--studio-selection);
}

/* ---- Pas KPI: duże liczby, małe etykiety; tło surface (nie accent) ---- */
html[data-appearance="studio"] #fold-summary .mobile-fold-summary {
  color: var(--studio-text);
  font-family: var(--studio-font-ui);
}

html[data-appearance="studio"] #fold-summary .summary-grid {
  background: transparent;
  border: none;
  gap: var(--space-2);
}

html[data-appearance="studio"] #fold-summary .stat-card {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--studio-text);
  padding: 0.25rem 0.5rem;
  gap: 0.2rem 0.75rem;
}

html[data-appearance="studio"] #fold-summary .stat-label {
  color: var(--studio-muted);
  font-family: var(--studio-font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

html[data-appearance="studio"] #fold-summary .stat-value {
  color: var(--studio-text);
  font-weight: 700;
  font-size: 1.625rem; /* ~26px */
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

@media (min-width: 960px) {
  html[data-appearance="studio"] #fold-summary .summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
  }

  html[data-appearance="studio"] #fold-summary .stat-card {
    flex-direction: column;
    align-items: flex-start;
    border-right: 1px solid var(--studio-line);
  }

  html[data-appearance="studio"] #fold-summary .stat-card:last-child {
    border-right: none;
  }

  html[data-appearance="studio"] #fold-summary .stat-card + .stat-card {
    border-top: none;
  }
}

@media (min-width: 1280px) {
  html[data-appearance="studio"] #fold-summary .summary-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---- Lista / zaznaczenie ---- */
html[data-appearance="studio"] .item-row.is-selected,
html[data-appearance="studio"] .item-row:focus-within {
  border-color: var(--studio-selection);
  background: color-mix(in srgb, var(--studio-selection) 12%, var(--studio-surface));
}

html[data-appearance="studio"] .selection-banner {
  background: color-mix(in srgb, var(--studio-selection) 14%, var(--studio-surface));
  border: 1px solid var(--studio-selection);
  border-radius: var(--studio-radius);
}

/* ---- Overflow strony ---- */
html[data-appearance="studio"] body,
html[data-appearance="studio"] .app-shell {
  overflow-x: clip;
  max-width: 100%;
}

html[data-appearance="studio"] .stat-value,
html[data-appearance="studio"] .item-row-name,
html[data-appearance="studio"] .cargo-list-meta {
  overflow-wrap: anywhere;
}

/* Topbar touch targets (44 px) — tylko Studio; Classic/Editorial nietknięte tu. */
@media (max-width: 959px), (pointer: coarse) {
  html[data-appearance="studio"] .topbar-actions .btn,
  html[data-appearance="studio"] .topbar-actions .btn-sm,
  html[data-appearance="studio"] .appearance-switch select {
    min-height: var(--studio-control-touch);
  }

  html[data-appearance="studio"] .topbar-actions .icon-btn {
    width: var(--studio-control-touch);
    height: var(--studio-control-touch);
    min-width: var(--studio-control-touch);
    min-height: var(--studio-control-touch);
  }
}