:root {
  color-scheme: light;
  font-family: var(--suite-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif);
  --bg: #f8fafc;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: #ffffff;
  --suite-canvas-bg: var(--surface-strong);
  --surface-soft: rgba(241, 245, 249, 0.86);
  --surface-muted: rgba(241, 245, 249, 0.72);
  --line: rgb(230, 230, 230);
  --line-strong: rgba(71, 85, 105, 0.22);
  --text: #0f172a;
  --muted: #64748b;
  --primary: #0f8b8d;
  --primary-soft: rgba(15, 139, 141, 0.12);
  --suite-primary-border: var(--primary);
  --suite-primary-border-soft: color-mix(in srgb, var(--suite-primary-border) 36%, transparent);
  --suite-primary-ink: #0e696b;
  --suite-primary-on-color: #000000;
  --accent: #b56b28;
  --suite-secondary-ink: #995217;
  --suite-secondary-accent-on-color: #000000;
  --success: #087f5b;
  --warning: #a86207;
  --warning-soft: rgba(168, 98, 7, 0.12);
  --danger: #b42318;
  --danger-soft: rgba(180, 35, 24, 0.12);
  --shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 1px 1px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.06);
  --suite-panel-bottom-shadow: 0 1px 1px rgba(15, 23, 42, 0.025), 0 12px 24px -20px rgba(15, 23, 42, 0.18);
  --suite-panel-shadow: var(--suite-panel-bottom-shadow);
  --mono: "Cascadia Mono", "Consolas", monospace;
  --suite-font-family: "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  --suite-ui-title-font-family: var(--suite-font-family);
  --suite-title-font-family: var(--suite-font-family);
  --suite-body-font-family: var(--suite-font-family);
  --suite-annotation-font-family: var(--suite-font-family);

  --suite-type-body: 0.875rem;
  --suite-inner-title-size: calc(var(--suite-type-body) * 15 / 14);
  --suite-critical-label-min-size: 14px;
  --suite-annotation-font-family: inherit;
  --suite-annotation-font-weight: 400;
  --suite-annotation-line-height: 1.45;
  --suite-annotation-letter-spacing: 0;
  --suite-annotation-size-px: 0.75rem;
  --suite-annotation-size-scale: 1;
  --suite-type-caption: var(--suite-type-body);
  --suite-type-title: var(--suite-type-body);
  --suite-form-height: 30px;
  --suite-form-font-size: var(--suite-type-body);
  --suite-form-disabled-bg: rgba(148, 163, 184, 0.08);
  --suite-form-disabled-border-style: dashed;
  --suite-form-readonly-bg: rgba(148, 163, 184, 0.1);
  --suite-form-readonly-border-style: dashed;
  --suite-line-body: 1.5;
  --suite-line-caption: var(--suite-line-body);
  --suite-line-title: var(--suite-line-body);

  --suite-space-1: 0.25rem;
  --suite-space-2: 0.5rem;
  --suite-space-3: 0.75rem;
  --suite-space-4: 1rem;
  --suite-main-panel-gap: 0px;
  --suite-panel-gap: 0px;
  --suite-tab-switch-height: var(--suite-navigation-height, 24px);
  --suite-radius-control: 20px;
  --suite-radius-button: var(--suite-radius-control);
  --suite-radius-toolbar: var(--suite-radius-control);
  --suite-radius-toolbar-button: var(--suite-radius-control);
  --suite-radius-segmented: var(--suite-radius-control);
  --suite-radius-segmented-option: var(--suite-radius-control);
  --suite-radius-main-panel: var(--suite-radius-control);
  --suite-radius-panel: 8px;
  --suite-control-height: 30px;
  --suite-icon-size: calc(var(--suite-control-height) * 0.5333333333);
  --suite-content-option-min-height: calc(var(--suite-control-height) + var(--suite-control-height));
  --suite-content-option-padding: var(--suite-space-2) var(--suite-space-3);
  --suite-toolbar-height: var(--suite-control-height);
  --suite-toolbar-control-height: var(--suite-control-height);
  --suite-pointer-target-min: 24px;
  --suite-toolbar-button-min-height: var(--suite-pointer-target-min);
  --suite-toolbar-padding: 2px;
  --suite-scroll-snap-mode: proximity;
  --suite-scroll-snap-gap: 0px;
  --suite-scroll-snap-offset: var(--suite-scroll-snap-gap);
  --suite-scroll-snap-control-row-top: 0px;
  --suite-scroll-snap-control-row-height: var(--suite-control-height);
  --suite-scroll-snap-control-row-offset: calc(
    var(--suite-scroll-snap-control-row-top) +
    var(--suite-scroll-snap-control-row-height) +
    var(--suite-scroll-snap-gap)
  );
  --suite-scroll-snap-section-margin: 0px;
  --suite-scroll-snap-settle-delay: 120ms;
  --suite-scroll-snap-settle-threshold: 3px;
  --suite-scroll-snap-wheel-lock: 520ms;
  --suite-scroll-snap-tail-reserve: 360px;
  --suite-scroll-snap-tail-space: max(0px, calc(100svh - var(--suite-scroll-snap-offset) - var(--suite-scroll-snap-tail-reserve)));
  --suite-emphasis-panel-bg: var(--primary-soft);
  --suite-emphasis-panel-border: var(--suite-primary-border-soft);
  --suite-range-border-color: #ffffff;
  --suite-segmented-bg: #ffffff;
  --suite-segmented-border-width: 0.1px;
  --suite-focus-ring: 0 0 0 3px color-mix(in srgb, var(--suite-primary-ink) 55%, transparent);
  --suite-top-tab-active-bg: var(--primary-soft);
  --suite-top-tab-active-color: var(--suite-primary-ink);
  --suite-top-tab-font-size: var(--suite-type-body);
  --suite-top-tab-padding-inline: 12px;
  --suite-solid-surface-bg: #ffffff;
  --suite-record-detail-opaque-bg: #ffffff;
  --suite-state-warning-soft-border: color-mix(in srgb, var(--warning) 42%, var(--line));
  --suite-state-warning-soft-bg: color-mix(in srgb, var(--warning) 8%, var(--surface-soft));
  --suite-state-warning-border: color-mix(in srgb, var(--warning) 46%, var(--line));
  --suite-state-warning-bg: color-mix(in srgb, var(--warning) 10%, var(--surface-soft));
  --suite-navigation-drop-soft-border: color-mix(in srgb, var(--primary) 54%, var(--line));
  --suite-navigation-drop-soft-bg: color-mix(in srgb, var(--primary) 4%, transparent);
  --suite-navigation-level-indicator-bg: color-mix(in srgb, var(--suite-navigation-level-accent, var(--primary)) 52%, transparent);
  --suite-navigation-sheet-list-border: color-mix(in srgb, var(--primary) 14%, transparent);
  --suite-navigation-sheet-list-bg: color-mix(in srgb, var(--primary) 7%, var(--surface) 93%);
  --suite-navigation-sheet-list-indicator-bg: color-mix(in srgb, var(--primary) 68%, transparent);
  --suite-navigation-sheet-list-hover-bg: color-mix(in srgb, var(--primary) 10%, var(--surface) 90%);
  --suite-navigation-sheet-list-selected-bg: color-mix(in srgb, var(--primary) 13%, var(--surface) 87%);
  --suite-navigation-hover-border: color-mix(in srgb, var(--primary) 28%, var(--line));
  --suite-navigation-hover-bg: color-mix(in srgb, var(--primary) 5%, transparent);
  --suite-navigation-selected-border: color-mix(in srgb, var(--suite-primary-ink) 55%, var(--line));
  --suite-navigation-selected-bg: color-mix(in srgb, var(--primary) 8%, transparent);
  --suite-navigation-drop-border: color-mix(in srgb, var(--primary) 58%, var(--line));
  --suite-navigation-drop-bg: color-mix(in srgb, var(--primary) 10%, transparent);
  --suite-navigation-drop-shadow: var(--suite-shared-shadow-inset-3px-0-0-primary, inset 3px 0 0 var(--primary)), inset 0 -1px 0 color-mix(in srgb, var(--primary) 38%, transparent);
  --suite-icon-muted-soft-color: color-mix(in srgb, var(--muted) 72%, transparent);
  --suite-interactive-row-border: color-mix(in srgb, var(--primary) 42%, var(--line));
  --suite-table-bulk-selection-bg: color-mix(in srgb, var(--primary) 8%, var(--suite-native-table-cell-bg, var(--surface)));
  --suite-table-drop-target-bg: color-mix(in srgb, var(--primary) 7%, var(--suite-native-table-cell-bg, var(--surface)));
  --suite-table-drop-target-shadow: inset 0 -2px 0 color-mix(in srgb, var(--primary) 76%, transparent);
  --suite-dropdown-danger-hover-bg: color-mix(in srgb, var(--danger) 10%, transparent);
  --suite-state-primary-border: color-mix(in srgb, var(--primary) 44%, var(--line));
  --suite-state-primary-bg: color-mix(in srgb, var(--primary) 10%, var(--surface-soft));
  --suite-viewer-canvas-bg: #05080a;
  --suite-state-primary-soft-border: color-mix(in srgb, var(--primary) 40%, var(--line));
  --suite-state-danger-inset: inset 3px 0 0 var(--danger);
  --suite-state-success-inset: inset 3px 0 0 var(--success);
  --suite-state-success-border: color-mix(in srgb, var(--success) 46%, var(--line));
  --suite-state-success-bg: color-mix(in srgb, var(--success) 10%, var(--surface));
  --suite-state-accent-border: color-mix(in srgb, var(--accent) 42%, var(--line));
  --suite-state-accent-bg: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --suite-state-danger-border: color-mix(in srgb, var(--danger) 48%, var(--line));
  --suite-state-danger-bg: color-mix(in srgb, var(--danger) 9%, var(--surface));

  --primary-50: 236 253 253;
  --primary-100: 209 250 250;
  --primary-200: 157 235 234;
  --primary-300: 94 213 210;
  --primary-400: 39 178 176;
  --primary-500: 15 139 141;
  --primary-600: 13 112 115;
  --primary-700: 14 88 91;
  --primary-800: 17 69 72;
  --primary-900: 17 58 61;
  --primary-950: 8 34 36;
}

:root[data-theme='dark'],
:root.dark {
  color-scheme: dark;
  --bg: #0f172a;
  --surface: rgba(30, 41, 59, 0.82);
  --surface-strong: rgba(15, 23, 42, 0.92);
  --suite-solid-surface-bg: #0f172a;
  --suite-record-detail-opaque-bg: #0f172a;
  --surface-soft: rgba(15, 23, 42, 0.64);
  --surface-muted: rgba(30, 41, 59, 0.66);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f8fafc;
  --muted: #94a3b8;
  --primary: #4fb8b4;
  --primary-soft: rgba(79, 184, 180, 0.16);
  --suite-primary-ink: #4fb8b4;
  --suite-primary-on-color: #000000;
  --accent: #e0a458;
  --suite-secondary-ink: #e0a458;
  --suite-secondary-accent-on-color: #000000;
  --success: #5dd39e;
  --warning: #f4c36a;
  --warning-soft: rgba(244, 195, 106, 0.14);
  --danger: #ff8a7a;
  --danger-soft: rgba(255, 138, 122, 0.14);
  --shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 1px 1px rgba(255, 255, 255, 0.03), 0 12px 32px rgba(0, 0, 0, 0.24);
  --suite-panel-bottom-shadow: 0 1px 1px rgba(255, 255, 255, 0.025), 0 12px 24px -20px rgba(0, 0, 0, 0.46);
  --suite-panel-shadow: var(--suite-panel-bottom-shadow);
  --suite-form-disabled-bg: rgba(148, 163, 184, 0.12);
  --suite-form-readonly-bg: rgba(148, 163, 184, 0.14);
  --suite-emphasis-panel-bg: var(--primary-soft);
  --suite-emphasis-panel-border: var(--suite-primary-border-soft);
  --suite-range-border-color: var(--line);
  --suite-segmented-bg: var(--surface-strong);
}

html,
body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

:root,
[data-theme='light'] {
  --suite-scrollbar-thumb: #89929c;
  --suite-scrollbar-thumb-hover: #68717c;
}

[data-theme='dark'],
:root.dark {
  --suite-scrollbar-thumb: #767f8d;
  --suite-scrollbar-thumb-hover: #596371;
}

.scrollbar-thin,
.suite-scrollbar-thin,
[data-suite-main-panel-scroll-region] {
  scrollbar-gutter: auto;
  -ms-overflow-style: auto;
}

.scrollbar-thin::-webkit-scrollbar,
.suite-scrollbar-thin::-webkit-scrollbar,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track,
.suite-scrollbar-thin::-webkit-scrollbar-track,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar-track {
  margin-block: var(--suite-scrollbar-track-inset-block, 8px);
  margin-inline: var(--suite-scrollbar-track-inset-inline, 8px);
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb,
.suite-scrollbar-thin::-webkit-scrollbar-thumb,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--suite-scrollbar-thumb, #89929c) padding-box;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover,
.scrollbar-thin::-webkit-scrollbar-thumb:active,
.suite-scrollbar-thin::-webkit-scrollbar-thumb:hover,
.suite-scrollbar-thin::-webkit-scrollbar-thumb:active,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar-thumb:hover,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar-thumb:active {
  background-color: var(--suite-scrollbar-thumb-hover, #68717c);
}

.scrollbar-thin::-webkit-scrollbar-button,
.suite-scrollbar-thin::-webkit-scrollbar-button,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar-button,
.scrollbar-thin::-webkit-scrollbar-button:single-button,
.suite-scrollbar-thin::-webkit-scrollbar-button:single-button,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar-button:single-button {
  -webkit-appearance: none;
  appearance: none;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.scrollbar-thin::-webkit-scrollbar-corner,
.suite-scrollbar-thin::-webkit-scrollbar-corner,
[data-suite-main-panel-scroll-region]::-webkit-scrollbar-corner {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  .scrollbar-thin,
  .suite-scrollbar-thin,
  [data-suite-main-panel-scroll-region] {
    scrollbar-width: thin;
    scrollbar-color: var(--suite-scrollbar-thumb, #89929c) transparent;
  }

  .scrollbar-thin:hover,
  .scrollbar-thin:active,
  .suite-scrollbar-thin:hover,
  .suite-scrollbar-thin:active,
  [data-suite-main-panel-scroll-region]:hover,
  [data-suite-main-panel-scroll-region]:active {
    scrollbar-color: var(--suite-scrollbar-thumb-hover, #68717c) transparent;
  }
}

@media (forced-colors: active) {
  .scrollbar-thin,
  .suite-scrollbar-thin,
  [data-suite-main-panel-scroll-region] {
    scrollbar-color: auto;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb,
  .suite-scrollbar-thin::-webkit-scrollbar-thumb,
  [data-suite-main-panel-scroll-region]::-webkit-scrollbar-thumb {
    background-color: CanvasText;
  }
}

.scrollbar-hide::-webkit-scrollbar,
.suite-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide,
.suite-scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.suite-overlay-scroll-host {
  position: relative;
  --suite-overlay-scrollbar-width: 8px;
  --suite-overlay-scrollbar-thumb-bg: var(--suite-scrollbar-thumb, #89929c);
}

.suite-overlay-scroll-body {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  scrollbar-gutter: auto;
  -ms-overflow-style: none;
}

.suite-overlay-scroll-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.suite-overlay-scroll-host.has-suite-overlay-scrollbar .suite-overlay-scroll-body {
  padding-inline-end: var(--suite-overlay-scroll-body-padding-end, 16px);
}

.suite-overlay-scrollbar {
  position: absolute;
  top: var(--suite-overlay-scrollbar-top, var(--suite-space-2));
  right: var(--suite-overlay-scrollbar-right, var(--suite-space-2));
  bottom: var(--suite-overlay-scrollbar-bottom, var(--suite-space-2));
  width: var(--suite-overlay-scrollbar-width, 8px);
  border-radius: 8px;
  background: var(--suite-overlay-scrollbar-track, transparent);
  opacity: 0;
  pointer-events: none;
}

.suite-overlay-scroll-host.has-suite-overlay-scrollbar .suite-overlay-scrollbar {
  opacity: 1;
}

.suite-overlay-scrollbar-thumb {
  position: absolute;
  top: var(--suite-overlay-scrollbar-thumb-top, 0px);
  right: 2px;
  width: 4px;
  height: var(--suite-overlay-scrollbar-thumb-height, 0px);
  border-radius: 4px;
  background: var(--suite-overlay-scrollbar-thumb-bg, var(--suite-scrollbar-thumb, #89929c));
}

.suite-overlay-scroll-host:is(:hover, :active) .suite-overlay-scrollbar-thumb {
  background: var(--suite-scrollbar-thumb-hover, #68717c);
}

@media (forced-colors: active) {
  .suite-overlay-scrollbar-thumb {
    background: CanvasText;
  }
}

.suite-hosted-density {
  font-size: var(--suite-type-body);
}

.suite-hosted-density .text-xs {
  font-size: var(--suite-type-body) !important;
  line-height: var(--suite-line-body) !important;
}

.suite-hosted-density .text-sm,
.suite-hosted-density input,
.suite-hosted-density button,
.suite-hosted-density select,
.suite-hosted-density textarea {
  font-size: var(--suite-type-body) !important;
  line-height: var(--suite-line-body) !important;
}

.suite-hosted-density .text-base {
  font-size: var(--suite-type-body) !important;
  line-height: var(--suite-line-body) !important;
}

.suite-hosted-density .text-lg,
.suite-hosted-density .text-xl {
  font-size: var(--suite-type-body) !important;
  line-height: var(--suite-line-body) !important;
}

.suite-hosted-density .text-2xl,
.suite-hosted-density .text-3xl {
  font-size: var(--suite-type-body) !important;
  line-height: var(--suite-line-body) !important;
}

.suite-panel {
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-panel);
  background: var(--surface);
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
}

.suite-app-surface {
  background: var(--bg);
  color: var(--text);
}

.suite-helper-text {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-helper-text-weight, 500);
  line-height: var(--suite-line-caption);
}

.suite-divider {
  height: 1px;
  min-height: 1px;
  background: var(--line);
}

.suite-section-eyebrow {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-section-eyebrow-weight, 650);
  line-height: var(--suite-line-caption);
  letter-spacing: 0;
  text-transform: uppercase;
  user-select: none;
}

.suite-control-label-text {
  color: var(--suite-control-label-text-color, color-mix(in srgb, var(--text) 76%, var(--muted)));
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-control-label-text-weight, 650);
  line-height: var(--suite-line-caption);
}

.suite-control-value {
  color: var(--suite-primary-ink, var(--primary));
  font-weight: var(--suite-control-value-weight, 650);
}

.suite-primary-icon {
  color: var(--suite-primary-ink, var(--primary));
}

.suite-primary-label {
  color: var(--suite-primary-ink, var(--primary));
  font-size: var(--suite-type-body);
  font-weight: var(--suite-primary-label-weight, 650);
  line-height: var(--suite-line-body);
}

.suite-modal-backdrop {
  background: var(--suite-modal-backdrop-bg, rgba(15, 23, 42, 0.35));
}

.suite-modal-panel {
  border: var(--suite-modal-border, var(--suite-panel-border, 1px solid var(--line)));
  border-radius: var(--suite-modal-radius, var(--suite-radius-panel));
  background: var(--suite-modal-bg, var(--surface-strong));
  color: var(--text);
  box-shadow: var(--suite-modal-shadow, var(--shadow));
  overflow: hidden;
}

.suite-modal-panel > .suite-panel-title {
  padding: var(--suite-modal-title-padding, var(--suite-space-3) var(--suite-space-4));
}

.suite-modal-body {
  padding: var(--suite-modal-body-padding, var(--suite-space-4));
}

.suite-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--suite-modal-footer-gap, var(--suite-space-2));
  padding: var(--suite-modal-footer-padding, var(--suite-space-3) var(--suite-space-4));
  border-top: 1px solid var(--line);
}

/* suiteConfirm(): the in-page replacement for window.confirm. */

.suite-confirm-dialog {
  inline-size: min(420px, calc(100vw - 32px));
  max-inline-size: none;
  padding: 0;
  margin: auto;
}

.suite-confirm-dialog::backdrop { background: var(--suite-modal-backdrop-bg, rgba(15, 23, 42, 0.35)); }

.suite-confirm-dialog > .suite-panel-title { margin: 0; font-size: var(--suite-type-title, 1rem); }

.suite-confirm-dialog .suite-modal-body > p { margin: 0; }

.suite-canvas-surface {
  background: var(--suite-canvas-bg, var(--bg));
}

.suite-preview-pane {
  border-left: 1px solid var(--line);
  background: var(--suite-preview-pane-bg, var(--surface));
}

.suite-preview-divider-right {
  border-right: 1px solid var(--line);
}

.suite-preview-label {
  color: var(--muted);
  font-size: var(--suite-type-body);
  font-weight: var(--suite-preview-label-weight, 650);
  line-height: var(--suite-line-body);
  letter-spacing: var(--suite-preview-label-letter-spacing, 0);
}

.suite-bottom-panel {
  border-top: 1px solid var(--line);
  background: var(--suite-bottom-panel-bg, var(--surface));
}

.suite-status-pill {
  padding-inline: var(--suite-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--suite-status-pill-gap, var(--suite-space-2));
  border-width: var(--suite-status-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-status-border-color, var(--line));
  border-radius: var(--suite-status-radius, var(--suite-radius-control));
  background: var(--suite-status-surface-bg, color-mix(in srgb, var(--surface-strong) 86%, transparent));
  color: var(--suite-status-on-surface, var(--muted));
  box-shadow: var(--suite-status-shadow, var(--suite-status-pill-shadow, var(--shadow-soft)));
  -webkit-backdrop-filter: var(--suite-status-backdrop, none);
  backdrop-filter: var(--suite-status-backdrop, none);
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-status-pill-weight, 650);
  line-height: var(--suite-line-caption);
}

/* Owner 2026-10-28: one status-tone set for every module (the portfolio table's look): flat, tinted, no shadow. */

.suite-status-pill[data-tone] {
  min-height: calc(var(--suite-control-height) - var(--suite-space-1));
  padding: 0 var(--suite-space-2);
  box-shadow: none;
  white-space: nowrap;
}

.suite-status-pill[data-tone='neutral'] { border-color: var(--line); background: var(--surface-soft); color: var(--muted); }

.suite-status-pill[data-tone='primary'] { border-color: color-mix(in srgb, var(--primary) 30%, var(--line)); background: var(--primary-soft); color: var(--primary); }

.suite-status-pill[data-tone='warning'] { border-color: color-mix(in srgb, var(--warning) 38%, var(--line)); background: var(--warning-soft); color: var(--warning); }

.suite-status-pill[data-tone='success'] { border-color: color-mix(in srgb, var(--success) 26%, var(--line)); background: color-mix(in srgb, var(--success) 10%, var(--surface-strong)); color: var(--success); }

.suite-status-pill[data-tone='danger'] { border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); background: color-mix(in srgb, var(--danger) 8%, var(--surface-strong)); color: var(--danger); }

.suite-status-overlay {
  display: inline-flex;
  align-items: center;
  gap: var(--suite-status-overlay-gap, var(--suite-space-2));
  border: 1px solid var(--line);
  border-radius: var(--suite-status-overlay-radius, var(--suite-radius-control));
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
  color: var(--muted);
  box-shadow: var(--suite-status-overlay-shadow, var(--shadow-soft));
  backdrop-filter: var(--suite-status-overlay-backdrop-filter, blur(8px));
  -webkit-backdrop-filter: var(--suite-status-overlay-backdrop-filter, blur(8px));
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-status-overlay-weight, 650);
  line-height: var(--suite-line-caption);
}

.suite-legend-dot {
  display: block;
  width: var(--suite-legend-dot-size, 0.625rem);
  height: var(--suite-legend-dot-size, 0.625rem);
  border-radius: 999px;
  background: var(--suite-legend-dot-bg, var(--muted));
}

.suite-legend-dot.danger {
  --suite-legend-dot-bg: var(--danger);
}

.suite-legend-dot.warning {
  --suite-legend-dot-bg: var(--warning);
}

.suite-legend-dot.success {
  --suite-legend-dot-bg: var(--success);
}

.suite-warning-callout {
  border-left: var(--suite-warning-callout-border-width, 2px) solid var(--warning);
  color: var(--warning);
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-warning-callout-weight, 650);
  line-height: var(--suite-line-caption);
}

.suite-resize-handle-row {
  height: var(--suite-resize-handle-height, 0.5rem);
  min-height: var(--suite-resize-handle-hit-height, 24px);
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  transition: background-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-resize-handle-row:hover {
  background: var(--suite-resize-handle-hover-bg, var(--primary-soft));
}

.suite-resize-handle-row:focus-visible,
[data-suite-route-layout-resizer]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.suite-resize-grip {
  width: var(--suite-resize-grip-width, 3rem);
  height: var(--suite-resize-grip-height, 0.25rem);
  border-radius: 999px;
  background: var(--suite-resize-grip-bg, var(--line-strong));
  transition: background-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-motion-controlled {
  transition-duration: var(--suite-transition-duration, 180ms);
  transition-timing-function: var(--suite-transition-easing, ease);
}

.suite-motion-loop {
  animation-play-state: var(--suite-motion-loop-play-state, running);
}

.suite-resize-handle-row:hover .suite-resize-grip {
  background: var(--suite-resize-grip-hover-bg, var(--primary));
}

.suite-layout-wrapper {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.suite-route-layout {
  --suite-route-layout-gap: var(
    --suite-main-container-gap,
    var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px))
  );
  --suite-route-resizer-boundary-overhang: 8px;
  --suite-route-resizer-boundary-size: max(
    var(--suite-resize-handle-hit-height, 24px),
    calc(
      var(--suite-route-layout-gap)
      + var(--suite-route-resizer-boundary-overhang)
      + var(--suite-route-resizer-boundary-overhang)
    )
  );
  --suite-route-layout-padding: 0px;
  /* Side workbenches need enough room for labels plus their controls. Narrower
     hosts should switch layout modes instead of silently clipping field text. */
  --suite-route-function-readable-inline-size: 300px;
  --suite-route-function-inline-size: clamp(
    var(--suite-route-function-readable-inline-size),
    28%,
    360px
  );
  --suite-route-function-block-size: clamp(180px, 32%, 320px);
  --suite-route-function-max-block-size: min(42%, 320px);
  --suite-route-content-min-block-size: 120px;
  min-width: 0;
  min-height: 0;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  gap: var(--suite-route-layout-gap);
  padding: var(--suite-route-layout-padding);
  contain: size layout;
  /* The route root is a neutral placement plane. Each region owns its own
     scroll clipping; clipping here would cut first-level panel shadows. */
  overflow: visible;
}

.suite-route-layout[data-suite-route-layout-mode='single'] {
  grid-template-areas: 'content';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.suite-route-layout[data-suite-route-layout-mode='left-panel'] {
  grid-template-areas: 'function content';
  grid-template-columns: var(--suite-route-function-inline-size) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.suite-route-layout[data-suite-route-layout-mode='right-panel'] {
  grid-template-areas: 'content function';
  grid-template-columns: minmax(0, 1fr) var(--suite-route-function-inline-size);
  grid-template-rows: minmax(0, 1fr);
}

.suite-route-layout[data-suite-route-layout-mode='bottom-panel'] {
  grid-template-areas:
    'content'
    'function';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    minmax(0, 1fr)
    minmax(
      0,
      max(
        0px,
        min(
          var(--suite-route-function-block-size),
          calc(
            100%
            - var(--suite-route-content-min-block-size)
            - var(--suite-route-layout-gap)
          )
        )
      )
    );
}

.suite-route-layout > [data-suite-route-region='content'] {
  grid-area: content;
}

.suite-route-layout > [data-suite-route-region='function'] {
  grid-area: function;
  container-name: suite-function-region;
  container-type: inline-size;
  position: relative;
}

.suite-route-layout [data-suite-route-layout-resizer] {
  z-index: 5;
  background: transparent;
}

.suite-route-layout [data-suite-route-layout-resizer]:hover {
  background: transparent;
}

.suite-route-layout [data-suite-route-layout-resizer] .suite-resize-grip {
  opacity: 0;
  pointer-events: none;
}

.suite-route-layout[data-suite-route-layout-mode='bottom-panel']
  [data-suite-route-layout-resizer] {
  position: absolute;
  top: calc(
    0px
    - var(--suite-route-layout-gap)
    - var(--suite-route-resizer-boundary-overhang)
  );
  right: 0;
  left: 0;
  width: auto;
  min-width: 0;
  height: var(--suite-route-resizer-boundary-size);
  min-height: var(--suite-route-resizer-boundary-size);
  cursor: row-resize;
}

.suite-route-layout > .suite-route-layout-region {
  min-width: 0;
  min-height: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  align-self: stretch;
  overflow: hidden;
}

.suite-route-layout
  > .suite-route-layout-region[data-suite-route-region='function'] {
  overflow: visible;
}

.suite-route-layout
  > [data-suite-route-region='function']
  > .suite-main-panel-scroll-region {
  overflow: visible;
}

.suite-route-layout
  [data-suite-route-region='function']
  [data-suite-route-operable-boundary] {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.suite-route-layout:is(
  [data-suite-route-layout-mode='left-panel'],
  [data-suite-route-layout-mode='right-panel']
) [data-suite-route-layout-resizer] {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: var(--suite-route-resizer-boundary-size);
  min-width: var(--suite-route-resizer-boundary-size);
  height: auto;
  min-height: 0;
  cursor: col-resize;
}

.suite-route-layout[data-suite-route-layout-mode='left-panel']
  [data-suite-route-layout-resizer] {
  right: calc(
    0px
    - var(--suite-route-layout-gap)
    - var(--suite-route-resizer-boundary-overhang)
  );
}

.suite-route-layout[data-suite-route-layout-mode='right-panel']
  [data-suite-route-layout-resizer] {
  left: calc(
    0px
    - var(--suite-route-layout-gap)
    - var(--suite-route-resizer-boundary-overhang)
  );
}

.suite-route-layout:is(
  [data-suite-route-layout-mode='left-panel'],
  [data-suite-route-layout-mode='right-panel']
) [data-suite-route-layout-resizer] .suite-resize-grip {
  width: var(--suite-resize-grip-height, 0.25rem);
  height: var(--suite-resize-grip-width, 3rem);
}

@media (max-width: 760px) {
  .suite-route-layout[data-suite-route-layout-mode='left-panel'],
  .suite-route-layout[data-suite-route-layout-mode='right-panel'] {
    grid-template-areas:
      'content'
      'function';
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows:
      minmax(0, 1fr)
      minmax(0, var(--suite-route-function-max-block-size));
  }
}

.suite-main-panel--scroll-shell {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.suite-overlay-scrollbar.is-horizontal {
  top: auto;
  right: var(--suite-overlay-scrollbar-horizontal-right, var(--suite-space-2));
  bottom: var(--suite-overlay-scrollbar-horizontal-bottom, var(--suite-space-2));
  left: var(--suite-overlay-scrollbar-horizontal-left, var(--suite-space-2));
  width: auto;
  height: var(--suite-overlay-scrollbar-width, 8px);
}

.suite-overlay-scrollbar.is-horizontal .suite-overlay-scrollbar-thumb {
  top: 2px;
  right: auto;
  left: var(--suite-overlay-scrollbar-thumb-left, 0px);
  width: var(--suite-overlay-scrollbar-thumb-width, 0px);
  height: 4px;
}

.suite-overlay-scroll-host.has-suite-overlay-scrollbar-horizontal .suite-overlay-scrollbar.is-horizontal {
  opacity: 1;
}

.suite-main-panel--scroll-shell[data-suite-main-container-layout="fixed-header-scroll-body"] {
  padding: 0 !important;
}

.suite-main-panel--scroll-shell > [data-suite-main-container-slot="header"],
.suite-main-panel--scroll-shell > [data-suite-main-container-slot="footer"] {
  min-width: 0;
  flex: 0 0 auto;
}

.suite-main-panel--scroll-shell[data-suite-main-container-layout="fixed-header-scroll-body"]
  > [data-suite-main-container-slot="header"] {
  width: calc(100% - var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px)) - var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))) !important;
  inline-size: calc(100% - var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px)) - var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))) !important;
  margin-block-start: var(--suite-main-panel-padding-top, var(--suite-main-panel-padding, 22px));
  margin-inline-end: var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px));
  margin-block-end: 0;
  margin-inline-start: var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px));
}

.suite-main-panel--scroll-shell[data-suite-main-container-layout="fixed-header-scroll-body"]
  > [data-suite-main-container-slot="header"].suite-container-header {
  padding: 0 0 var(--suite-container-header-divider-inset, 8px) 0;
  min-block-size: max(var(--suite-container-header-min-height, 48px), var(--suite-container-header-control-reserve, 0px));
}

.suite-main-panel--scroll-shell[data-suite-main-container-layout="fixed-header-scroll-body"]
  > [data-suite-main-container-slot="footer"] {
  width: calc(100% - var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px)) - var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))) !important;
  inline-size: calc(100% - var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px)) - var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))) !important;
  margin-block-start: 0;
  margin-inline-end: var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px));
  margin-block-end: var(--suite-main-panel-padding-bottom, var(--suite-main-panel-padding, 22px));
  margin-inline-start: var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px));
}

.suite-main-panel--scroll-shell > [data-suite-main-container-slot="scroll-body"] {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}

.suite-main-panel--scroll-shell[data-suite-main-container-layout="fixed-header-scroll-body"]
  > [data-suite-main-container-slot="scroll-body"] {
  --suite-scrollbar-track-inset-block: min(
    var(--suite-radius-main-panel, var(--suite-radius-control, 20px)),
    12px
  );
  --suite-scrollbar-track-inset-inline: min(
    var(--suite-radius-main-panel, var(--suite-radius-control, 20px)),
    12px
  );
  box-sizing: border-box;
  padding: var(--suite-container-header-body-gap, 16px)
    var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-bottom, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px));
}

.suite-main-panel-scroll-region,
[data-suite-main-panel-scroll-region] {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}

.suite-main-panel,
.suite-section-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.suite-main-panel,
.suite-section-panel,
.suite-sub-panel {
  box-sizing: border-box;
  border-style: solid;
  overflow: hidden;
}

.suite-main-panel {
  border-width: var(--suite-panel-border-width, 1px);
  border-top-width: var(--suite-panel-border-top-width, 1px);
  border-right-width: var(--suite-panel-border-right-width, 1px);
  border-bottom-width: var(--suite-panel-border-bottom-width, 1px);
  border-left-width: var(--suite-panel-border-left-width, 1px);
  border-color: var(--suite-panel-border-color, var(--line));
  border-radius: var(--suite-radius-main-panel, var(--suite-radius-control));
  background: var(--suite-panel-bg, var(--surface));
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
  -webkit-backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
  backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
}

.suite-section-panel,
.suite-sub-panel {
  border-width: var(--suite-sub-panel-border-width, 1px);
  border-top-width: var(--suite-sub-panel-border-top-width, 1px);
  border-right-width: var(--suite-sub-panel-border-right-width, 1px);
  border-bottom-width: var(--suite-sub-panel-border-bottom-width, 1px);
  border-left-width: var(--suite-sub-panel-border-left-width, 1px);
  border-color: var(--suite-sub-panel-border-color, var(--line));
  background: var(--suite-sub-panel-bg, var(--surface));
  box-shadow: var(--suite-sub-panel-shadow, none);
  -webkit-backdrop-filter: var(--suite-sub-panel-backdrop, none);
  backdrop-filter: var(--suite-sub-panel-backdrop, none);
}

.suite-section-panel {
  border-radius: var(--suite-radius-section-panel, var(--suite-radius-main-panel, var(--suite-radius-control)));
}

.suite-sub-panel {
  border-radius: var(--suite-radius-sub-panel, var(--suite-radius-section-panel, var(--suite-radius-main-panel, var(--suite-radius-control))));
}

.suite-sub-panel.is-soft {
  background: var(--suite-sub-panel-soft-bg, var(--surface-soft));
}

.suite-sub-panel--scroll-shell {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(0 round var(--suite-radius-sub-panel, var(--suite-radius-section-panel, var(--suite-radius-main-panel, var(--suite-radius-control)))));
}

.suite-sub-panel--scroll-shell
  > [data-suite-inner-surface-slot='header'] {
  width: calc(100% - var(--suite-sub-panel-padding-left, var(--suite-sub-panel-padding, var(--suite-space-3, 12px))) - var(--suite-sub-panel-padding-right, var(--suite-sub-panel-padding, var(--suite-space-3, 12px))));
  inline-size: calc(100% - var(--suite-sub-panel-padding-left, var(--suite-sub-panel-padding, var(--suite-space-3, 12px))) - var(--suite-sub-panel-padding-right, var(--suite-sub-panel-padding, var(--suite-space-3, 12px))));
  margin-block-start: var(--suite-sub-panel-padding-top, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  margin-inline-end: var(--suite-sub-panel-padding-right, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  margin-inline-start: var(--suite-sub-panel-padding-left, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  padding-inline: 0;
}

.suite-sub-panel--scroll-shell
  > [data-suite-inner-surface-slot='header']::after {
  right: 0;
  left: 0;
}

.suite-sub-panel--scroll-shell[hidden] {
  display: none;
}

.suite-sub-panel-header {
  position: relative;
  width: 100%;
  height: auto;
  min-height: max(var(--suite-sub-panel-header-height, 42px), 1lh);
  max-height: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--suite-sub-panel-header-gap, var(--suite-space-2, 8px));
  padding-top: 0;
  padding-right: var(--suite-sub-panel-padding-right, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  padding-bottom: 0;
  padding-left: var(--suite-sub-panel-padding-left, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  color: var(--suite-sub-panel-header-color, var(--text));
  white-space: nowrap;
  overflow: hidden;
}

.suite-sub-panel-header::after {
  content: '';
  position: absolute;
  right: var(--suite-sub-panel-padding-right, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  bottom: 0;
  left: var(--suite-sub-panel-padding-left, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  border-bottom: var(--suite-sub-panel-header-border-width, 1px) solid var(--suite-sub-panel-header-border-color, var(--line));
  pointer-events: none;
}

.suite-sub-panel-header > * {
  min-width: 0;
}

.suite-sub-panel-header > :first-child {
  white-space: nowrap;
  overflow: hidden;
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, var(--suite-container-title-weight, 650)));
  text-overflow: ellipsis;
}

/* Inner titles follow body scaling, independently of the outer UI title size.
 * Six repeated scope classes intentionally give specificity >= (0,6,0), above
 * every SUITE_TITLE_TOKEN_STYLE selector, notably the hosted utility heading
 * (0,5,1). Both rules are important, so this wins in either injection order.
 * Keep weight unchanged and leave trailing controls/status badges alone: the
 * header itself and button labels (.suite-header-label inside a button) keep
 * their own size. */

.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header :is(h1, h2, h3, h4, h5, h6, .suite-panel-title-text, .suite-header-label:not(button *)),
.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header > :is(strong, span):first-child,
.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header.suite-sub-panel-header .suite-panel-title-content > :is(strong, span):first-child {
  font-size: var(--suite-inner-title-size) !important;
}

.suite-sub-panel-scroll-region {
  width: 100%;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: var(--suite-scrollbar-gutter, auto);
  padding-top: var(--suite-sub-panel-padding-top, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  padding-right: var(--suite-sub-panel-padding-right, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  padding-bottom: var(--suite-sub-panel-padding-bottom, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
  padding-left: var(--suite-sub-panel-padding-left, var(--suite-sub-panel-padding, var(--suite-space-3, 12px)));
}

.suite-sub-panel-scroll-region::-webkit-scrollbar-track {
  margin-block: var(--suite-sub-panel-scrollbar-safe-inset, var(--suite-space-2, 8px));
}

.suite-scroll-snap-y,
html:has(.suite-scroll-snap-y),
body:has(.suite-scroll-snap-y),
html:has(.shell-hosted),
body:has(.shell-hosted),
html:has(.suite-hosted-density),
body:has(.suite-hosted-density) {
  scroll-snap-type: none;
  scroll-padding-block-start: 0;
  scroll-padding-block-end: 0;
  overscroll-behavior-y: auto;
  overflow-anchor: auto;
  scroll-behavior: auto;
}

html:has(.suite-scroll-snap-with-controlbar),
body:has(.suite-scroll-snap-with-controlbar),
.suite-scroll-snap-with-controlbar {
  --suite-scroll-snap-offset: var(--suite-scroll-snap-control-row-offset);
}

.suite-scroll-snap-strict {
  --suite-scroll-snap-mode: mandatory;
}

.suite-scroll-snap-card,
.suite-scroll-snap-y > .suite-main-panel,
.suite-scroll-snap-y > .suite-section-panel,
.suite-scroll-snap-y > .suite-scroll-snap-section,
.suite-scroll-snap-y > .panel,
.suite-scroll-snap-y > .page-grid > .panel,
.suite-scroll-snap-y > .page-grid > .suite-main-panel,
.suite-scroll-snap-y > .page-grid > .suite-section-panel,
.suite-scroll-snap-y > .page-grid > .suite-scroll-snap-section,
.suite-scroll-snap-y > .module-workbench,
.suite-scroll-snap-y > .module-workbench > .panel,
.suite-scroll-snap-y > .module-workbench > .suite-main-panel,
.suite-scroll-snap-y > .module-workbench > .suite-section-panel,
.suite-scroll-snap-y > .module-workbench > .suite-scroll-snap-section,
.suite-scroll-snap-y > .excel-review-panel,
.suite-scroll-snap-y > .excel-review-panel > .excel-review-layout > .excel-review-group,
.suite-scroll-snap-y > .excel-review-panel > .excel-review-wrap > .excel-review-layout > .excel-review-group,
.suite-scroll-snap-y > .excel-review-layout > .excel-review-group,
.suite-scroll-snap-y > .excel-review-wrap > .excel-review-layout > .excel-review-group,
.suite-scroll-snap-y > .calc-group,
.suite-scroll-snap-y > .suite-section-panel.calc-group,
.suite-scroll-snap-y .excel-review-group,
.suite-scroll-snap-y .calc-group,
.shell-hosted .excel-review-group,
.shell-hosted .calc-group,
.suite-hosted-density .excel-review-group,
.suite-hosted-density .calc-group,
.suite-scroll-snap-with-controlbar .suite-scroll-snap-section,
.suite-scroll-snap-with-controlbar .excel-review-group,
.suite-scroll-snap-with-controlbar .calc-group,
.suite-scroll-snap-y .suite-scroll-snap-section {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
  scroll-margin-block-start: 0;
}

.suite-scroll-snap-y::after,
.suite-scroll-snap-y > .page-grid::after,
body:has(.shell-hosted)::after,
body:has(.suite-hosted-density)::after {
  content: "";
  display: none;
  block-size: 0;
  flex: 0 0 auto;
  pointer-events: none;
  scroll-snap-align: none;
}

.suite-scroll-snap-y:has(> .page-grid)::after {
  display: none;
}

.suite-scroll-snap-y > .page-grid::after {
  grid-column: 1 / -1;
}

.suite-scroll-snap-ignore {
  scroll-snap-align: none !important;
  scroll-margin-block-start: 0 !important;
}

.suite-panel-title {
  min-width: 0;
  min-height: var(--suite-container-title-height, 30px);
  padding: var(--suite-container-title-padding, 0 var(--suite-container-title-padding-x, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-container-title-gap, var(--suite-space-3));
  border-bottom: 1px solid var(--line);
  background: var(--suite-container-title-bg, transparent);
}

.suite-container-header {
  --suite-container-header-control-reserve: calc(max(var(--suite-buttons-height, var(--suite-control-height, 30px)), var(--suite-tab-item-height, var(--suite-tab-switch-height, var(--suite-navigation-height, var(--suite-control-height, 30px))))) + var(--suite-container-safety-inset, 4px) + var(--suite-container-safety-inset, 4px) + var(--suite-container-header-divider-inset, 8px) + 1px);
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-block-size: max(var(--suite-container-header-min-height, 48px), var(--suite-container-header-control-reserve, 0px));
  padding: var(--suite-container-header-padding, 0 0 var(--suite-container-header-divider-inset, 8px));
  border-bottom: 1px solid var(--line);
  text-align: var(--suite-container-header-text-align, left);
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.suite-container-header :is(h1, h2, h3, h4, h5, h6),
.suite-sub-panel-header :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

.suite-container-header-leading,
.suite-container-header-context,
.suite-container-header-actions {
  display: flex;
  min-width: 0;
  align-items: center;
}

.suite-container-header-leading {
  flex: 1 1 0;
  justify-content: var(--suite-container-header-justify-content, flex-start);
  text-align: var(--suite-container-header-text-align, left);
}

.suite-container-header-context {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-inline-start: auto;
}

.suite-container-header[data-suite-header-context-layout="selector"] > .suite-container-header-context {
  justify-content: center;
  margin-inline-start: 0;
}

.suite-container-header[data-suite-header-context-layout="selector"] > .suite-container-header-actions {
  flex: 1 1 0;
}

.suite-container-header-actions {
  flex: 0 0 auto;
  gap: var(--suite-space-2, 8px);
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.suite-container-header .suite-panel-title-content {
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: var(--suite-container-header-justify-content, flex-start);
  gap: var(--suite-container-header-title-gap, 2px);
  text-align: inherit;
}

.suite-container-header .suite-panel-title-content > :is(strong, .suite-panel-title-text, small) {
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: inherit;
  overflow-wrap: anywhere;
}

.suite-container-header .suite-panel-title-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* A container title that repeats the selected primary tab stays only as an accessible name.
   A header left with nothing visible besides that title leaves the layout too, so no empty band remains. */

.suite-container-header.suite-container-header:has(> .suite-container-header-leading > .suite-primary-title-visually-hidden:only-child):not(:has(> :not(.suite-container-header-leading, [hidden]))),
.suite-primary-title-visually-hidden.suite-primary-title-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.suite-container-header .suite-panel-title-content > small {
  color: var(--muted);
  font-size: var(--suite-annotation-size-px, var(--suite-type-caption));
  font-family: var(--suite-annotation-font-family, inherit);
  font-weight: var(--suite-annotation-font-weight, 400);
  letter-spacing: var(--suite-annotation-letter-spacing, 0);
  line-height: var(--suite-annotation-line-height, var(--suite-line-caption, 1.45));
}

.suite-function-toolbar-row {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: var(--suite-function-toolbar-row-padding, var(--suite-space-2) var(--suite-space-3));
}

.suite-function-toolbar-row > .suite-function-toolbar-portal {
  min-width: 0;
  max-width: 100%;
}

.suite-panel-title > strong,
.suite-panel-title > span:first-child {
  color: var(--text);
  font-family: var(--suite-ui-title-font-family, var(--suite-title-font-family, inherit));
  font-size: var(--suite-ui-title-preview-size, var(--suite-title-preview-size, var(--suite-type-title)));
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, var(--suite-container-title-weight, 650)));
  letter-spacing: var(--suite-ui-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-ui-title-line-height, var(--suite-title-line-height, var(--suite-line-title, var(--suite-line-body, 1.5))));
}

.suite-panel-title-content {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--suite-space-2);
}

.suite-panel-title-text {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--suite-ui-title-font-family, var(--suite-title-font-family, inherit));
  font-size: var(--suite-ui-title-preview-size, var(--suite-title-preview-size, var(--suite-type-title)));
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, var(--suite-container-title-weight, 650)));
  letter-spacing: var(--suite-ui-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-ui-title-line-height, var(--suite-title-line-height, var(--suite-line-title, var(--suite-line-body, 1.5))));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-panel-title > span:not(:first-child),
.suite-panel-title > small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-container-title-weight, 650);
}

.suite-summary-info-group,
.suite-quality-summary,
.suite-status-strip {
  display: grid;
  grid-template-columns: var(--suite-quality-summary-columns, var(--suite-status-strip-columns, repeat(auto-fit, minmax(180px, 1fr))));
  gap: var(--suite-quality-summary-gap, var(--suite-status-strip-gap, 0));
  overflow: hidden;
  border-width: var(--suite-quality-summary-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-quality-summary-border-color, var(--line));
  border-radius: var(--suite-quality-summary-radius, var(--suite-status-strip-radius, var(--suite-radius-main-panel, var(--suite-radius-control))));
  color: var(--suite-quality-summary-on-surface, var(--text));
  background: var(--suite-quality-summary-surface-bg, var(--suite-status-strip-bg, var(--surface)));
  box-shadow: var(--suite-quality-summary-shadow, var(--suite-status-strip-shadow, 0 1px 2px rgba(15, 23, 42, 0.06)));
  backdrop-filter: var(--suite-quality-summary-backdrop, var(--suite-status-strip-backdrop-filter, blur(8px)));
}

.suite-status-strip.warning {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
}

.suite-status-strip.success {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
}

.suite-status-strip.danger {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
}

.suite-summary-info-group > div,
.suite-quality-summary > div,
.suite-status-strip > div {
  min-width: 0;
  padding: var(--suite-quality-summary-cell-padding, var(--suite-status-strip-cell-padding, 10px 12px));
  border-right: 1px solid var(--line);
}

.suite-summary-info-group > div:last-child,
.suite-quality-summary > div:last-child,
.suite-status-strip > div:last-child {
  border-right: 0;
}

.suite-summary-info-group span,
.suite-summary-info-group small,
.suite-quality-summary span,
.suite-quality-summary small,
.suite-status-strip span,
.suite-status-strip small {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-summary-info-group strong,
.suite-quality-summary strong,
.suite-status-strip strong {
  display: block;
  min-width: 0;
  margin-top: var(--suite-status-strip-value-margin-top, 4px);
  color: var(--text);
  font-size: var(--suite-type-caption);
  line-height: var(--suite-line-caption, 1.35);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-panel-emphasis {
  border-color: var(--suite-emphasis-panel-border);
  background: var(--suite-emphasis-panel-bg);
}

.suite-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-field-gap, 6px);
}

.suite-field-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--suite-field-grid-columns, repeat(2, minmax(0, 1fr)));
  gap: var(--suite-field-grid-gap, 8px);
}

.suite-field-label {
  color: var(--suite-field-label-color, var(--muted));
  font-size: var(--suite-field-label-font-size, var(--suite-type-caption));
  font-weight: var(--suite-field-label-font-weight, 850);
  line-height: var(--suite-field-label-line-height, var(--suite-line-caption));
}

.suite-control-caption {
  min-width: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: var(--suite-line-caption, 1.35);
  font-weight: 850;
  white-space: nowrap;
}

.suite-control {
  min-height: var(--suite-control-height);
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  font-size: var(--suite-type-body);
}

.suite-control:focus,
.suite-control:focus-visible {
  border-color: var(--suite-primary-ink, var(--primary));
  box-shadow: var(--suite-focus-ring);
  outline: none;
}

.suite-control-radius {
  border-radius: var(--suite-radius-control);
}

.suite-field-control,
.suite-readonly-field,
.suite-combobox-field,
.suite-form-control,
.suite-form-select,
.suite-form-textarea {
  width: 100%;
  min-width: 0;
  border: var(--suite-form-border, 1px solid var(--line));
  border-radius: var(--suite-form-radius, var(--suite-radius-control));
  color: var(--suite-form-color, var(--text));
  background: var(--suite-form-bg, var(--surface-strong));
  font: inherit;
  font-size: var(--suite-form-font-size, var(--suite-type-caption));
  font-weight: var(--suite-form-font-weight, 650);
  line-height: var(--suite-form-line-height, var(--suite-line-caption, 1.35));
  outline: none;
  box-shadow: var(--suite-form-shadow, none);
}

.suite-field-control,
.suite-readonly-field,
.suite-combobox-field,
.suite-form-control,
.suite-form-select {
  height: auto;
  min-height: max(var(--suite-form-height, var(--suite-control-height)), 1lh);
  padding: var(--suite-form-padding, 0 var(--suite-space-3));
}

/* Inline filters share the native select contract and its disabled state. */

/* Fill layouts keep tools/status fixed; lists, details and table viewports scroll independently.
   Search width is shared and can be tuned with --suite-toolbar-search-inline-size. */

.suite-fill-body,
.suite-main-panel--scroll-shell > .suite-fill-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  min-inline-size: 0;
  container: suite-fill-body / inline-size;
}

.suite-fill-body > * { flex: 0 0 auto; }

.suite-list-detail {
  flex: 1 1 auto;
  min-height: 0;
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--suite-space-3);
}

.suite-list-detail > * {
  min-height: 0;
  min-inline-size: 0;
  overflow: auto;
}

.suite-table-fill {
  flex: 1 1 auto;
  min-height: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.suite-table-fill > * { flex: 0 0 auto; }

.suite-fill-body > :is(.suite-list-detail, .suite-table-fill),
.suite-table-fill > :is(.suite-list-detail, .suite-table-fill, .suite-table-scroll) {
  flex: 1 1 auto;
}

.suite-table-fill .suite-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.suite-toolbar-search {
  flex: 0 1 auto;
  inline-size: var(--suite-toolbar-search-inline-size, 20rem);
  min-inline-size: 10rem;
  max-inline-size: 100%;
}

.suite-toolbar-search input { width: 100%; min-inline-size: 0; }

@container suite-fill-body (width < 720px) {
  .suite-list-detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

.suite-select-quiet {
  width: auto;
}

.suite-select-quiet:not(:disabled):not(.is-disabled):not([aria-disabled='true']) {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  cursor: pointer;
}

.suite-select-quiet:not(:disabled):not(.is-disabled):not([aria-disabled='true']):hover {
  background-color: var(--surface-soft);
}

.suite-select-quiet:not(:disabled):not(.is-disabled):not([aria-disabled='true']):focus-visible {
  background-color: var(--surface-soft);
  outline: var(--suite-focus-ring-width, 2px) solid var(--suite-primary-ink, var(--primary));
  outline-offset: var(--suite-focus-ring-offset, 2px);
}

.suite-form-textarea {
  min-height: var(--suite-form-textarea-min-height, 6rem);
  padding: var(--suite-form-textarea-padding, var(--suite-space-2) var(--suite-space-3));
  line-height: var(--suite-form-textarea-line-height, 1.45);
  resize: var(--suite-form-textarea-resize, vertical);
}

.suite-form-control-compact {
  --suite-form-height: 30px;
  --suite-form-padding: 0 8px;
  --suite-form-focus-ring: 0 0 0 2px color-mix(in srgb, var(--suite-primary-ink, var(--primary)) 60%, transparent);
  --suite-form-font-size: var(--suite-type-caption);
  --suite-form-font-weight: 800;
}

.suite-inline-field {
  --suite-form-height: 30px;
  --suite-form-padding: 0 9px;
  --suite-form-focus-ring: 0 0 0 2px color-mix(in srgb, var(--suite-primary-ink, var(--primary)) 60%, transparent);
  --suite-form-font-size: var(--suite-type-caption);
  --suite-form-font-weight: 650;
  --suite-form-line-height: var(--suite-line-caption, 1.35);
}

.suite-form-control-tight {
  --suite-form-height: 28px;
  --suite-form-padding: 0 6px;
  --suite-form-focus-ring: 0 0 0 2px color-mix(in srgb, var(--suite-primary-ink, var(--primary)) 60%, transparent);
  --suite-form-font-size: var(--suite-type-caption);
  --suite-form-font-weight: 850;
}

.suite-form-control-square {
  --suite-form-height: 30px;
  height: var(--suite-form-height);
  min-height: var(--suite-form-height);
  --suite-form-padding: 0;
  width: var(--suite-form-square-size, var(--suite-form-height));
  min-width: var(--suite-form-square-size, var(--suite-form-height));
  max-width: var(--suite-form-square-size, var(--suite-form-height));
}

.suite-form-control-center {
  justify-items: center;
  text-align: center;
}

.suite-form-control-center > span,
.suite-form-control-center > .suite-control-label {
  display: grid;
  place-items: center;
}

.suite-form-control-center > svg,
.suite-form-control-center > .operator-symbol {
  place-self: center;
}

.suite-select-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  line-height: var(--suite-form-line-height, var(--suite-line-caption, 1.35));
  text-align: left;
  cursor: pointer;
  outline: none;
}

.suite-select-trigger::after {
  content: none;
}

.suite-select-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-table-field {
  width: 100%;
  min-width: 0;
  max-width: none;
  field-sizing: fixed;
  white-space: nowrap;
}

.suite-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-gutter: auto;
}

/* The frame follows its rows and scrolls inside once they reach the available height; it does not
   stretch to the bottom and leave an empty framed area under a short list (本人 10/30, 職務 1440). */

.suite-table-wrap-contained,
.suite-table-wrap[data-suite-table-scroll='contained'] {
  flex: 0 1 auto;
  min-block-size: var(--suite-table-wrap-min-block-size, 0);
  max-block-size: var(--suite-table-wrap-max-block-size, 100%);
  overscroll-behavior: contain;
}

/* Pagination under a table: page controls only, end-aligned, 12 below the table (GLOBAL book-718). */

.suite-pagination {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--suite-space-1, 4px);
  margin-block-start: var(--suite-space-3, 12px);
  min-inline-size: 0;
}

.suite-pagination .suite-pagination-page {
  min-inline-size: var(--suite-control-height, 30px);
  padding-inline: var(--suite-space-2, 8px);
  font-variant-numeric: tabular-nums;
}

.suite-pagination .suite-pagination-page[aria-current='page'] {
  color: var(--suite-primary-ink, var(--primary));
  background: var(--primary-soft);
  font-weight: 600;
}

.suite-pagination-gap { color: var(--muted); padding-inline: var(--suite-space-1, 4px); }

.suite-native-table {
  --suite-native-table-row-height: var(--suite-table-row-height, var(--suite-tables-height, var(--suite-control-height, 30px)));
  --suite-native-table-header-row-height: var(--suite-table-header-row-height, var(--suite-native-table-row-height));
  --suite-native-table-cell-padding-block: var(--suite-table-cell-padding-block, 4px);
  --suite-native-table-cell-padding-inline: var(--suite-table-cell-padding-inline, 10px);
  --suite-table-group-level-1-bg: var(--suite-tables-group-level-1-bg, color-mix(in srgb, var(--primary) 16%, var(--suite-native-table-cell-bg, var(--surface))));
  --suite-table-group-level-2-bg: var(--suite-tables-group-level-2-bg, color-mix(in srgb, var(--primary) 10%, var(--suite-native-table-cell-bg, var(--surface))));
  --suite-table-group-level-3-bg: var(--suite-tables-group-level-3-bg, color-mix(in srgb, var(--primary) 6%, var(--suite-native-table-cell-bg, var(--surface))));
  --suite-table-group-bg: var(--suite-tables-group-bg, var(--suite-table-group-level-1-bg));
  --suite-table-subgroup-bg: var(--suite-tables-subgroup-bg, var(--suite-table-group-level-2-bg));
  --suite-table-segment-bg: var(--suite-tables-segment-bg, var(--suite-table-group-level-3-bg));
  --suite-table-muted-group-bg: var(--suite-tables-muted-group-bg, color-mix(in srgb, var(--primary) 3%, var(--suite-native-table-cell-bg, var(--surface))));
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: var(--suite-tables-shadow, none);
  table-layout: auto;
}

.suite-native-table-wide {
  width: max-content;
  min-width: max(100%, var(--suite-native-table-wide-min-width, 620px));
}

.suite-native-table th,
.suite-native-table td {
  height: var(--suite-native-table-row-height);
  padding: var(--suite-native-table-cell-padding, var(--suite-native-table-cell-padding-block) var(--suite-native-table-cell-padding-inline));
  text-align: left;
  vertical-align: var(--suite-native-table-cell-vertical-align, middle);
  border-right: var(--suite-native-table-cell-border, 1px solid var(--line));
  border-bottom: var(--suite-native-table-cell-border, 1px solid var(--line));
  font-size: var(--suite-native-table-cell-font-size, var(--suite-type-caption));
  line-height: var(--suite-native-table-cell-line-height, var(--suite-line-caption, 1.35));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-native-table th {
  position: sticky;
  top: var(--suite-native-table-header-top, 0);
  z-index: var(--suite-native-table-header-z-index, 1);
  height: var(--suite-native-table-header-row-height);
  color: var(--suite-native-table-header-color, var(--muted));
  background: var(--suite-native-table-header-bg, var(--surface-strong));
  font-weight: var(--suite-native-table-header-font-weight, 850);
}

.suite-data-table {
  --suite-data-table-header-height: var(--suite-native-table-header-row-height);
  --suite-data-table-filter-row-height: var(--suite-table-filter-row-height, 42px);
  --suite-data-table-filter-bg: var(--suite-tables-surface-bg, var(--surface));
  --suite-data-table-filter-divider: var(--suite-native-table-cell-border, 1px solid var(--line));
  min-width: max(100%, var(--suite-data-table-min-width, 620px));
}

.suite-data-table-header {
  position: sticky;
  top: var(--suite-native-table-header-top, 0);
  z-index: var(--suite-data-table-header-z-index, 3);
}

.suite-data-table-header-row > th {
  top: var(--suite-native-table-header-top, 0);
  z-index: var(--suite-data-table-header-z-index, 3);
}

.suite-data-table-header:has(.suite-data-table-column-filter.is-open) {
  z-index: var(--suite-data-table-filter-open-z-index, 40);
}

.suite-data-table-filter-row > th,
.suite-data-table-responsive-filter-row > th {
  top: calc(var(--suite-native-table-header-top, 0px) + var(--suite-data-table-header-height));
  z-index: var(--suite-data-table-filter-z-index, 2);
  height: var(--suite-data-table-filter-row-height);
  padding: var(--suite-table-filter-cell-padding, 5px 8px);
  border-bottom: var(--suite-data-table-filter-divider);
  background: var(--suite-data-table-filter-bg);
  box-shadow: var(--suite-data-table-filter-shadow, 0 4px 8px -8px rgba(15, 23, 42, 0.5));
}

.suite-data-table-filter-cell {
  overflow: visible;
  color: var(--text);
  font-weight: 650;
}

.suite-data-table-filter-cell > :is(label, div, fieldset) {
  width: 100%;
  min-width: 0;
}

.suite-data-table-filter-cell :is(.suite-field-control, .suite-form-control, .suite-select-trigger) {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.suite-data-table-filter-header-cell {
  --suite-data-table-filter-trigger-safe-inset: 7px;
  overflow: visible;
}

.suite-data-table-header-row > .suite-data-table-filter-header-cell:has(.suite-data-table-column-filter.is-open) {
  z-index: var(--suite-data-table-filter-open-z-index, 40);
}

.suite-data-table-column-filter {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-1, 4px);
  padding-inline-end: var(--suite-data-table-filter-trigger-safe-inset);
}

.suite-data-table-column-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-data-table-column-filter-trigger {
  flex: none;
  min-width: 24px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  color: var(--muted);
  background: transparent;
}

.suite-data-table-column-filter-trigger:hover,
.suite-data-table-column-filter-trigger:focus-visible,
.suite-data-table-column-filter.is-active .suite-data-table-column-filter-trigger {
  color: var(--suite-primary-ink, var(--primary));
  background: var(--primary-soft);
}

.suite-data-table-column-filter-trigger svg {
  transition: transform var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-data-table-column-filter.is-open .suite-data-table-column-filter-trigger svg {
  transform: rotate(180deg);
}

.suite-data-table-column-filter-popover {
  position: absolute;
  inset: auto;
  margin: 0;
  z-index: var(--suite-data-table-filter-popover-z-index, 1000);
  top: calc(100% + var(--suite-space-1, 4px));
  left: 0;
  width: min(260px, 80vw);
  padding: var(--suite-space-2, 8px);
  display: grid;
  gap: var(--suite-space-2, 8px);
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-panel);
  color: var(--text);
  background: var(--surface-strong, var(--surface));
  box-shadow: var(--suite-shadow-popover, 0 12px 28px rgb(15 23 42 / 14%));
}

.suite-data-table-column-filter-popover :is(.suite-field-control, .suite-form-control, .suite-select-trigger) {
  width: 100%;
  min-width: 0;
}

.suite-data-table-responsive-filter-row {
  display: none;
}

.suite-data-table.is-responsive-collapsed .suite-data-table-filter-row {
  display: none;
}

.suite-data-table.is-responsive-collapsed .suite-data-table-responsive-filter-row {
  display: table-row;
}

.suite-data-table-filter-disclosure > summary {
  min-height: var(--suite-control-height, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2, 8px);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.suite-data-table-filter-disclosure > summary::-webkit-details-marker {
  display: none;
}

.suite-data-table-filter-disclosure > summary small {
  min-width: 20px;
  min-height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--suite-radius-pill, 999px);
  color: var(--suite-primary-ink, var(--primary));
  background: var(--primary-soft);
}

.suite-data-table-filter-disclosure-panel {
  padding-block: var(--suite-space-2, 8px);
  display: grid;
  gap: var(--suite-space-2, 8px);
}

.suite-data-table-filter-disclosure-fields {
  display: grid;
  gap: var(--suite-space-2, 8px);
}

.suite-table-wrap {
  container-type: inline-size;
}

@container (max-width: 680px) {
  .suite-data-table[data-suite-filter-responsive='collapse'] .suite-data-table-filter-row {
    display: none;
  }

  .suite-data-table[data-suite-filter-responsive='collapse'] .suite-data-table-responsive-filter-row {
    display: table-row;
  }
}

.suite-native-table td {
  background: var(--suite-native-table-cell-bg, rgba(255, 255, 255, 0.02));
  font-weight: var(--suite-native-table-cell-font-weight, 700);
}

.suite-native-table th:last-child,
.suite-native-table td:last-child {
  border-right: 0;
}

.suite-native-table tr:last-child td {
  border-bottom: 0;
}

.suite-native-table-right-from-second td:not(:first-child),
.suite-native-table-right-from-second th:not(:first-child) {
  text-align: right;
}

.suite-native-table-first-cell-stack td:first-child strong,
.suite-native-table-first-cell-stack td:first-child small {
  display: block;
}

.suite-native-table-first-cell-stack td:first-child small {
  margin-top: var(--suite-native-table-cell-stack-gap, 2px);
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-table-outline {
  --suite-table-outline-cell-base-padding: var(--suite-table-cell-padding-inline, 10px);
  --suite-table-outline-node-space: 30px;
  --suite-table-outline-level1-bg: var(--suite-table-group-level-1-bg, var(--suite-table-group-bg, var(--suite-tables-soft-bg, var(--surface-soft))));
  --suite-table-outline-level2-bg: var(--suite-table-group-level-2-bg, var(--suite-table-subgroup-bg, color-mix(in srgb, var(--suite-tables-soft-bg, var(--surface-soft)) 76%, var(--suite-tables-surface-bg, var(--surface)))));
  --suite-table-outline-level3-bg: var(--suite-table-group-level-3-bg, var(--suite-table-segment-bg, color-mix(in srgb, var(--suite-tables-soft-bg, var(--surface-soft)) 54%, var(--suite-tables-surface-bg, var(--surface)))));
}

.suite-table-outline-row[data-suite-outline-level='1'] {
  --suite-table-outline-level-offset: 0px;
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='2'] {
  --suite-table-outline-level-offset: var(--suite-table-outline-indent, 24px);
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='3'] {
  --suite-table-outline-level-offset: calc(var(--suite-table-outline-indent, 24px) + var(--suite-table-outline-indent, 24px));
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='4'] {
  --suite-table-outline-level-offset: calc(var(--suite-table-outline-indent, 24px) + var(--suite-table-outline-indent, 24px) + var(--suite-table-outline-indent, 24px));
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='1'] > td,
.suite-table-outline-row[data-suite-outline-level='1'] > th,
.suite-table-outline-row[data-suite-outline-level='1'] > .suite-data-cell {
  background-color: var(--suite-table-outline-level1-bg);
  font-weight: 850;
}

.suite-table-outline-row[data-suite-outline-level='2'] > td,
.suite-table-outline-row[data-suite-outline-level='2'] > th,
.suite-table-outline-row[data-suite-outline-level='2'] > .suite-data-cell {
  background-color: var(--suite-table-outline-level2-bg);
  font-weight: 800;
}

.suite-table-outline-row[data-suite-outline-level='3'] > td,
.suite-table-outline-row[data-suite-outline-level='3'] > th,
.suite-table-outline-row[data-suite-outline-level='3'] > .suite-data-cell {
  background-color: var(--suite-table-outline-level3-bg);
  font-weight: 760;
}

.suite-table-outline .suite-table-outline-cell {
  position: relative;
  padding-left: calc(
    var(--suite-table-outline-cell-base-padding) +
    var(--suite-table-outline-level-offset, 0px) +
    var(--suite-table-outline-node-space, 30px)
  ) !important;
  background-image: none;
}

.suite-table-outline .suite-table-outline-row[data-suite-outline-role='branch'] > .suite-table-outline-cell::before {
  content: "";
  position: absolute;
  left: calc(var(--suite-table-outline-node-x) + 4px);
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  color: var(--muted);
  transform: translateY(-62%) rotate(45deg);
  pointer-events: none;
}

.suite-table-outline .suite-table-outline-row[data-suite-outline-expanded='false'] > .suite-table-outline-cell::before {
  transform: translateY(-50%) rotate(-45deg);
}

.suite-table-group-row {
  --suite-table-group-level-offset: 0px;
}

.suite-table-group-row > td,
.suite-table-group-row > th,
.suite-table-group-row > .suite-data-cell {
  background-color: var(--suite-table-group-level-1-bg, var(--suite-table-group-bg));
}

.suite-table-group-row[data-suite-table-group-level='2'] {
  --suite-table-group-level-offset: var(--suite-table-group-indent, 18px);
}

.suite-table-group-row[data-suite-table-group-level='2'] > td,
.suite-table-group-row[data-suite-table-group-level='2'] > th,
.suite-table-group-row[data-suite-table-group-level='2'] > .suite-data-cell {
  background-color: var(--suite-table-group-level-2-bg, var(--suite-table-subgroup-bg));
}

.suite-table-group-row[data-suite-table-group-level='3'] {
  --suite-table-group-level-offset: calc(var(--suite-table-group-indent, 18px) * 2);
}

.suite-table-group-row[data-suite-table-group-level='3'] > td,
.suite-table-group-row[data-suite-table-group-level='3'] > th,
.suite-table-group-row[data-suite-table-group-level='3'] > .suite-data-cell {
  background-color: var(--suite-table-group-level-3-bg, var(--suite-table-segment-bg));
}

.suite-table-group-row[data-suite-table-group-level='4'] {
  --suite-table-group-level-offset: calc(var(--suite-table-group-indent, 18px) * 3);
}

.suite-table-group-row[data-suite-table-group-level='4'] > td,
.suite-table-group-row[data-suite-table-group-level='4'] > th,
.suite-table-group-row[data-suite-table-group-level='4'] > .suite-data-cell {
  background-color: var(--suite-table-group-level-3-bg, var(--suite-table-segment-bg));
}

.suite-table-group-cell-content[data-suite-table-group-level='2'] {
  --suite-table-group-level-offset: var(--suite-table-group-indent, 18px);
}

.suite-table-group-cell-content[data-suite-table-group-level='3'] {
  --suite-table-group-level-offset: calc(var(--suite-table-group-indent, 18px) * 2);
}

.suite-table-group-cell-content[data-suite-table-group-level='4'] {
  --suite-table-group-level-offset: calc(var(--suite-table-group-indent, 18px) * 3);
}

.suite-table-group-cell-content {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: var(--suite-table-group-toggle-gap, 6px);
  padding-left: var(--suite-table-group-level-offset, 0px);
  vertical-align: middle;
}

.suite-table-group-toggle {
  appearance: none;
  width: var(--suite-table-group-toggle-size, 18px);
  height: var(--suite-table-group-toggle-size, 18px);
  min-width: var(--suite-table-group-toggle-size, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--suite-table-group-toggle-radius, 4px);
  background: transparent;
  color: var(--suite-table-group-toggle-color, var(--muted));
  cursor: pointer;
}

.suite-table-group-toggle:hover {
  color: var(--suite-table-group-toggle-hover-color, var(--text));
  background: var(--suite-table-group-toggle-hover-bg, color-mix(in srgb, var(--primary) 8%, transparent));
}

.suite-table-group-toggle:focus-visible {
  outline: none;
  box-shadow: var(--suite-focus-ring, 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent));
}

.suite-table-group-toggle svg {
  width: var(--suite-table-group-toggle-icon-size, 14px);
  height: var(--suite-table-group-toggle-icon-size, 14px);
  transform: rotate(90deg);
  transition: transform var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-table-group-toggle[aria-expanded='false'] svg {
  transform: rotate(0deg);
}

.suite-table-group-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-input-affix {
  position: relative;
  min-width: 0;
}

.suite-input-affix > .suite-field-control,
.suite-input-affix > .suite-form-control {
  padding-right: var(--suite-input-affix-padding-inline-end, 26px);
}

.suite-input-affix-suffix {
  position: absolute;
  top: 50%;
  right: var(--suite-input-affix-suffix-right, 9px);
  transform: translateY(-50%);
  color: var(--suite-input-affix-color, var(--muted));
  font-size: var(--suite-input-affix-font-size, var(--suite-type-caption));
  line-height: var(--suite-line-caption, 1.35);
  font-weight: var(--suite-input-affix-font-weight, 850);
  pointer-events: none;
}

.suite-compound-input-group {
  display: grid;
  grid-template-columns: var(--suite-compound-input-columns, minmax(112px, 1fr) 74px);
  gap: var(--suite-compound-input-gap, 6px);
  align-items: var(--suite-compound-input-align, center);
  min-width: 0;
  width: var(--suite-compound-input-width, auto);
  max-width: var(--suite-compound-input-max-width, none);
}

.suite-compound-input-group > .suite-field-control,
.suite-compound-input-group > .suite-form-control,
.suite-compound-input-group > .suite-form-select,
.suite-compound-input-group > .suite-combobox-shell {
  width: 100%;
  min-width: 0;
}

.suite-overflow-visible-field {
  overflow: visible;
  text-overflow: clip;
}

.suite-inline-title-field {
  flex: var(--suite-inline-title-field-flex, 1 1 120px);
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: var(--suite-inline-title-field-height, 24px);
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--suite-inline-title-field-color, var(--primary));
  background: transparent;
  font: inherit;
  font-size: var(--suite-inline-title-field-font-size, var(--suite-type-caption));
  line-height: var(--suite-inline-title-field-line-height, var(--suite-line-caption, 1.35));
  font-weight: var(--suite-inline-title-field-font-weight, 900);
  outline: none;
  overflow: visible;
  text-overflow: clip;
}

.suite-inline-title-field:focus,
.suite-inline-title-field:focus-visible {
  border-bottom-color: var(--suite-inline-title-field-focus-border, var(--primary));
  box-shadow: none;
}

.suite-inline-title-field::placeholder {
  color: var(--suite-inline-title-field-placeholder-color, var(--suite-inline-title-field-color, var(--primary)));
  opacity: 1;
}

.suite-combobox-shell {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: var(--suite-combobox-shell-height, var(--suite-form-height, var(--suite-control-height)));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: var(--suite-form-border, 1px solid var(--line));
  border-radius: var(--suite-form-radius, var(--suite-radius-control));
  background: var(--suite-form-bg, var(--surface-strong));
  box-shadow: var(--suite-form-shadow, none);
  transition:
    border-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    box-shadow var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-combobox-shell:focus-within,
.suite-combobox-shell.is-open {
  border-color: var(--suite-form-focus-border, var(--suite-primary-ink, var(--primary)));
  box-shadow: var(--suite-form-focus-ring, var(--suite-focus-ring));
}

.suite-combobox-shell.locked,
.suite-combobox-shell[aria-readonly='true'] {
  background: var(--suite-form-readonly-bg, rgba(148, 163, 184, 0.1));
  border-style: var(--suite-form-readonly-border-style, dashed);
}

.suite-combobox-shell.locked:focus-within,
.suite-combobox-shell[aria-readonly='true']:focus-within {
  border-color: var(--suite-form-readonly-focus-border, var(--line));
  box-shadow: var(--suite-form-readonly-focus-shadow, var(--suite-form-shadow, none));
}

.suite-combobox-shell > .suite-combobox-field {
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.suite-combobox {
  width: 100%;
  min-width: 0;
}

.suite-combobox-field {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--suite-space-2);
}

.suite-combobox-icon,
.suite-combobox-caret {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.suite-combobox-caret {
  margin-left: auto;
}

.suite-combobox-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-combobox-option-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.suite-combobox-shell > .suite-combobox-field:is(:focus, .is-focus),
.suite-combobox-shell > .suite-combobox-field:is(:focus-visible, .is-focus) {
  border-color: transparent;
  box-shadow: none;
}

.suite-combobox-shell > .suite-combobox-field[readonly],
.suite-combobox-shell > .suite-combobox-field.locked {
  background: transparent;
  border-style: none;
}

.suite-field-control::placeholder,
.suite-combobox-field::placeholder,
.suite-form-control::placeholder,
.suite-form-textarea::placeholder {
  color: var(--suite-form-placeholder-color, var(--muted));
  font-weight: var(--suite-form-placeholder-font-weight, 750);
}

.suite-field-control:is(:focus, .is-focus),
.suite-field-control:is(:focus-visible, .is-focus),
.suite-combobox-field:is(:focus, .is-focus),
.suite-combobox-field:is(:focus-visible, .is-focus),
.suite-form-control:is(:focus, .is-focus),
.suite-form-control:is(:focus-visible, .is-focus),
.suite-form-select:is(:focus, .is-focus),
.suite-form-select:is(:focus-visible, .is-focus),
.suite-form-textarea:is(:focus, .is-focus),
.suite-form-textarea:is(:focus-visible, .is-focus) {
  border-color: var(--suite-form-focus-border, var(--suite-primary-ink, var(--primary)));
  box-shadow: var(--suite-form-focus-ring, var(--suite-focus-ring));
  outline: none;
}

.suite-field-control:is(:disabled, .is-disabled),
.suite-combobox-field:is(:disabled, .is-disabled),
.suite-form-control:is(:disabled, .is-disabled),
.suite-form-select:is(:disabled, .is-disabled),
.suite-form-textarea:is(:disabled, .is-disabled),
.suite-field-control[aria-disabled='true'],
.suite-combobox-field[aria-disabled='true'] {
  color: var(--suite-form-disabled-color, var(--muted));
  background: var(--suite-form-disabled-bg, var(--surface-soft));
  border-style: var(--suite-form-disabled-border-style, dashed);
  cursor: not-allowed;
  opacity: 1;
}

.suite-readonly-field,
.suite-field-control[readonly],
.suite-combobox-field[readonly],
.suite-form-control[readonly],
.suite-form-textarea[readonly],
.suite-field-control.locked,
.suite-combobox-field.locked,
.suite-form-control.locked,
.suite-form-select.locked,
.suite-form-textarea.locked {
  color: var(--suite-form-readonly-color, var(--muted));
  background: var(--suite-form-readonly-bg, rgba(148, 163, 184, 0.1));
  border-style: var(--suite-form-readonly-border-style, dashed);
  cursor: default;
  opacity: 1;
}

.suite-readonly-field:is(:focus, .is-focus),
.suite-readonly-field:is(:focus-visible, .is-focus),
.suite-field-control[readonly]:is(:focus, .is-focus),
.suite-field-control[readonly]:is(:focus-visible, .is-focus),
.suite-field-control.locked:is(:focus, .is-focus),
.suite-field-control.locked:is(:focus-visible, .is-focus),
.suite-combobox-field[readonly]:is(:focus, .is-focus),
.suite-combobox-field[readonly]:is(:focus-visible, .is-focus),
.suite-combobox-field.locked:is(:focus, .is-focus),
.suite-combobox-field.locked:is(:focus-visible, .is-focus),
.suite-form-control[readonly]:is(:focus, .is-focus),
.suite-form-control.locked:is(:focus, .is-focus),
.suite-form-control.locked:is(:focus-visible, .is-focus),
.suite-form-select.locked:is(:focus, .is-focus),
.suite-form-select.locked:is(:focus-visible, .is-focus),
.suite-form-textarea[readonly]:is(:focus, .is-focus),
.suite-form-textarea.locked:is(:focus, .is-focus),
.suite-form-textarea.locked:is(:focus-visible, .is-focus) {
  border-color: var(--suite-form-readonly-focus-border, var(--line));
  box-shadow: var(--suite-form-readonly-focus-shadow, var(--suite-form-shadow, none));
}

.suite-range-input {
  width: 100%;
  min-width: 0;
  height: var(--suite-range-height, 0.375rem);
  margin: 0;
  border-color: var(--suite-range-border-color, #ffffff);
  accent-color: var(--suite-primary-ink, var(--primary));
  cursor: pointer;
}

.suite-range-input:is(:disabled, .is-disabled),
.suite-range-input.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.suite-checkbox-input {
  width: var(--suite-checkbox-size, 1rem);
  height: var(--suite-checkbox-size, 1rem);
  min-width: var(--suite-checkbox-size, 1rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--suite-radius-control) - 4px);
  accent-color: var(--suite-primary-ink, var(--primary));
  cursor: pointer;
}

.suite-checkbox-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.suite-radio-input {
  width: var(--suite-radio-size, 1rem);
  height: var(--suite-radio-size, 1rem);
  min-width: var(--suite-radio-size, 1rem);
  accent-color: var(--suite-primary-ink, var(--primary));
  cursor: pointer;
}

.suite-radio-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.suite-toggle-pill {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--suite-toggle-width, 2rem);
  min-width: var(--suite-toggle-width, 2rem);
  height: var(--suite-toggle-height, 1rem);
  min-height: var(--suite-toggle-height, 1rem);
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--suite-toggle-bg, color-mix(in srgb, var(--primary) 20%, var(--surface-soft)));
  cursor: pointer;
  transition: background-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-toggle-pill.is-on {
  background: var(--suite-toggle-active-bg, var(--primary));
}

.suite-toggle-pill-danger.is-on {
  background: var(--danger);
}

.suite-toggle-pill-warning.is-on {
  background: var(--warning);
}

.suite-toggle-pill-muted.is-on {
  background: var(--muted);
}

.suite-toggle-pill:focus-visible {
  box-shadow: var(--suite-focus-ring);
  outline: none;
}

.suite-toggle-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.suite-toggle-pill-thumb {
  pointer-events: none;
  display: inline-block;
  width: var(--suite-toggle-thumb-size, 0.75rem);
  height: var(--suite-toggle-thumb-size, 0.75rem);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transform: translateX(2px);
  transition: transform var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-toggle-pill.is-on .suite-toggle-pill-thumb {
  transform: translateX(calc(var(--suite-toggle-width, 2rem) - var(--suite-toggle-thumb-size, 0.75rem) - 2px));
}

.suite-button {
  display: inline-flex;
  height: auto;
  min-height: max(var(--suite-button-height, var(--suite-control-height)), 1lh);
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--suite-space-2);
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
  padding: 0 var(--suite-space-3);
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
  font-size: var(--suite-type-body);
  font-weight: 800;
  line-height: var(--suite-line-body);
  white-space: nowrap;
  word-break: keep-all;
  cursor: pointer;
  box-shadow: var(--suite-buttons-shadow, none);
}

.suite-button svg {
  width: var(--suite-button-icon-size, 1rem);
  height: var(--suite-button-icon-size, 1rem);
  flex-shrink: 0;
}

.suite-button-justify-between {
  justify-content: space-between;
}

.suite-icon-button {
  width: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  height: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  min-width: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  min-height: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  padding: 0;
  border-width: var(--suite-icon-button-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-icon-button-border-color, var(--line));
  border-radius: var(--suite-icon-button-radius, var(--suite-radius-button, var(--suite-radius-control)));
  background: var(--suite-icon-button-surface-bg, var(--surface-strong));
  color: var(--suite-icon-button-on-surface, var(--text));
  box-shadow: var(--suite-icon-button-shadow, var(--suite-buttons-shadow, none));
  -webkit-backdrop-filter: var(--suite-icon-button-backdrop, none);
  backdrop-filter: var(--suite-icon-button-backdrop, none);
}

.suite-icon-button-floating {
  --suite-icon-button-size: var(--suite-floating-icon-button-size, 2.25rem);
  --suite-button-icon-size: var(--suite-floating-icon-size, 1.5rem);
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--line) 86%, transparent);
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  box-shadow: var(--suite-floating-icon-button-shadow, 0 10px 24px rgba(15, 23, 42, 0.18));
}

.suite-icon-button-floating:not(:disabled):hover,
.suite-icon-button-floating:not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: color-mix(in srgb, var(--surface-strong) 98%, var(--primary-soft));
  color: var(--suite-primary-ink, var(--primary));
}

.suite-icon-button-floating.is-attention {
  animation: suite-icon-button-attention 2000ms ease-in-out infinite;
  animation-play-state: var(--suite-motion-loop-play-state, running);
}

.suite-icon-button-reset {
  --suite-icon-button-size: var(--suite-reset-icon-button-size, 1.625rem);
  --suite-button-icon-size: var(--suite-reset-icon-size, 0.875rem);
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  box-shadow: none;
}

.suite-icon-button-reset:not(:disabled):hover,
.suite-icon-button-reset:not(:disabled):focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary-soft) 82%, transparent);
  color: var(--suite-primary-ink, var(--primary));
}

.suite-icon-button-close {
  --suite-icon-button-size: var(--suite-close-icon-button-size, 1.875rem);
  --suite-button-icon-size: var(--suite-close-icon-size, 1rem);
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  box-shadow: none;
}

.suite-icon-button-close:not(:disabled):hover,
.suite-icon-button-close:not(:disabled):focus-visible {
  border-color: transparent;
  background: var(--surface-soft);
  color: var(--text);
}

.suite-icon-button-chip-clear {
  --suite-button-icon-size: var(--suite-chip-clear-icon-size, 0.875rem);
  width: auto;
  min-width: var(--suite-chip-clear-min-width, 1.625rem);
  height: auto;
  min-height: 0;
  align-self: stretch;
  padding: 0 var(--suite-chip-clear-padding-inline, 0.375rem);
  border-width: 0 0 0 1px;
  border-radius: 0;
  border-left-color: color-mix(in srgb, var(--warning) 34%, var(--line));
  background: transparent;
  color: var(--warning);
  box-shadow: none;
}

.suite-icon-button-chip-clear:not(:disabled):hover,
.suite-icon-button-chip-clear:not(:disabled):focus-visible {
  border-left-color: color-mix(in srgb, var(--warning) 46%, var(--line));
  background: var(--warning-soft);
  color: var(--warning);
}

@keyframes suite-icon-button-attention {
  0%,
  100% {
    box-shadow: var(--suite-floating-icon-button-shadow, 0 10px 24px rgba(15, 23, 42, 0.18));
  }
  50% {
    box-shadow:
      var(--suite-floating-icon-button-shadow, 0 10px 24px rgba(15, 23, 42, 0.18)),
      0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent);
  }
}

.suite-button-xs {
  --suite-button-height: var(--suite-control-height);
  padding: 0 var(--suite-space-2);
  font-size: var(--suite-type-caption);
  line-height: var(--suite-line-caption);
}

.suite-button-sm {
  --suite-button-height: var(--suite-control-height);
  padding: 0 var(--suite-space-3);
  font-size: var(--suite-type-caption);
  line-height: var(--suite-line-caption);
}

.suite-button-md {
  --suite-button-height: var(--suite-control-height);
  padding: 0 var(--suite-space-3);
  font-size: var(--suite-type-body);
  line-height: var(--suite-line-body);
}

.suite-button-lg {
  --suite-button-height: var(--suite-control-height);
  padding: 0 var(--suite-space-4);
  font-size: var(--suite-type-body);
  line-height: var(--suite-line-body);
}

.suite-button-icon {
  width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  min-height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-button:is(:hover, .is-hover) {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.suite-button:is(:focus-visible, .is-focus) {
  box-shadow: var(--suite-focus-ring);
  outline: none;
}

.suite-button-primary,
.suite-button.primary {
  border-color: var(--suite-primary-ink, var(--primary));
  background: var(--suite-buttons-primary-surface-bg, var(--primary));
  color: var(--suite-primary-on-color, #ffffff);
  box-shadow: var(--suite-buttons-shadow, var(--shadow-soft));
}

.suite-button-secondary {
  border-color: var(--suite-primary-ink, var(--primary));
  background: var(--suite-buttons-secondary-surface-bg, transparent);
  color: var(--suite-primary-ink, var(--primary));
  box-shadow: var(--suite-buttons-shadow, var(--shadow-soft));
}

.suite-button-outline {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}

.suite-button-accent {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface-strong));
  color: var(--suite-primary-ink, var(--primary));
}

.suite-button-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #ffffff;
  box-shadow: var(--suite-buttons-shadow, var(--shadow-soft));
}

.suite-button-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.suite-button-radius {
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
}

.suite-button-pill {
  --suite-radius-button: 999px;
}

.suite-button-tone-primary {
  --suite-button-tone-color: var(--suite-primary-ink, var(--primary));
  --suite-button-tone-soft: var(--primary-soft);
}

.suite-button-tone-cyan {
  --suite-button-tone-color: #0e7490;
  --suite-button-tone-soft: rgba(14, 116, 144, 0.14);
}

.suite-button-tone-purple {
  --suite-button-tone-color: #7e22ce;
  --suite-button-tone-soft: rgba(126, 34, 206, 0.14);
}

.suite-button-tone-slate {
  --suite-button-tone-color: color-mix(in srgb, var(--text) 78%, var(--muted));
  --suite-button-tone-soft: var(--surface-muted);
}

.suite-button-tone-danger {
  --suite-button-tone-color: var(--danger);
  --suite-button-tone-soft: var(--danger-soft);
}

:root[data-theme='dark'] .suite-button-tone-cyan,
:root.dark .suite-button-tone-cyan {
  --suite-button-tone-color: #67e8f9;
  --suite-button-tone-soft: rgba(103, 232, 249, 0.16);
}

:root[data-theme='dark'] .suite-button-tone-purple,
:root.dark .suite-button-tone-purple {
  --suite-button-tone-color: #d8b4fe;
  --suite-button-tone-soft: rgba(216, 180, 254, 0.16);
}

.suite-button-accent.suite-button-tone-primary,
.suite-button-accent.suite-button-tone-cyan,
.suite-button-accent.suite-button-tone-purple,
.suite-button-accent.suite-button-tone-slate,
.suite-button-accent.suite-button-tone-danger {
  border-color: color-mix(in srgb, var(--suite-button-tone-color) 28%, var(--line));
  background: color-mix(in srgb, var(--suite-button-tone-soft) 82%, var(--surface-strong));
  color: var(--suite-button-tone-color);
}

.suite-button-ghost.suite-button-tone-primary:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-primary:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-cyan:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-cyan:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-purple:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-purple:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-slate:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-slate:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-danger:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-danger:is(:focus-visible, .is-focus) {
  background: color-mix(in srgb, var(--suite-button-tone-soft) 70%, transparent);
  color: var(--suite-button-tone-color);
}

.suite-content-option {
  height: auto;
  min-height: var(--suite-content-option-min-height, calc(var(--suite-control-height) + var(--suite-control-height)));
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--suite-content-option-padding, var(--suite-space-2) var(--suite-space-3));
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: var(--suite-line-caption);
}

.suite-content-option-stack {
  flex-direction: column;
}

.suite-content-option .suite-button-label,
.suite-content-option > span {
  min-width: 0;
  width: 100%;
  justify-content: flex-start;
  white-space: normal;
}

.suite-content-option-title {
  display: block;
  max-width: 100%;
  font-size: var(--suite-type-caption);
  font-weight: 600;
  line-height: var(--suite-line-caption);
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suite-content-option-description {
  display: block;
  width: 100%;
  font-size: var(--suite-type-caption);
  line-height: var(--suite-line-caption);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.suite-toolbar {
  box-sizing: border-box;
  display: flex;
  width: max-content;
  height: auto;
  min-height: max(
    var(--suite-toolbar-height, var(--suite-control-height)),
    calc(
      var(--suite-toolbar-button-min-height, var(--suite-pointer-target-min, 24px)) +
      var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)) +
      var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px))
    )
  );
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--suite-toolbar-gap, 2px);
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border: 1px solid var(--suite-toolbar-border, var(--line));
  border-radius: var(--suite-radius-toolbar, var(--suite-radius-button, var(--suite-radius-control)));
  background: var(--suite-toolbar-background, color-mix(in srgb, var(--surface-strong) 88%, transparent));
  box-shadow: var(--suite-module-toolbar-shadow, var(--suite-toolbar-shadow, var(--shadow-soft)));
  color: var(--suite-toolbar-color, var(--text));
}

/* Toolbar row per GLOBAL §3-F (owner book-739/740): controls start at the row top on one centre line, 12 below them a 1px
   line, 43 in all — measured from the owner-approved inspection unit search bar (.iv-bar), same as .suite-in-frame-list-toolbar.
   Pages that set the --suite-module-controlbar-* variables keep their own values. */

.suite-module-controlbar {
  --suite-module-controlbar-line-gap: var(--suite-space-3, 12px);
  box-sizing: border-box;
  display: flex;
  min-height: var(--suite-module-controlbar-height, calc(var(--suite-control-height, 30px) + var(--suite-module-controlbar-line-gap) + 1px));
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-module-controlbar-gap, var(--suite-space-3));
  padding: 0 0 var(--suite-module-controlbar-line-gap);
  border: 0 solid var(--suite-module-controlbar-border, var(--line));
  border-bottom-width: var(--suite-module-controlbar-border-width, 1px);
  background: var(--suite-module-controlbar-bg, transparent);
  color: var(--text);
  font-size: var(--suite-type-body);
  line-height: var(--suite-line-body);
  box-shadow: none;
}

.suite-module-controlbar > *,
.suite-module-controlbar .suite-segmented,
.suite-module-controlbar .suite-button {
  flex-shrink: 0;
}

.suite-module-controlbar .suite-segmented {
  --suite-segmented-padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  --suite-segmented-gap: 6px;
  --suite-segmented-bg: transparent;
  --suite-segmented-border-width: 0px;
  --suite-segmented-active-bg: var(--suite-navigation-primary-soft-bg, var(--suite-top-tab-active-bg, var(--primary-soft)));
  --suite-segmented-active-color: var(--suite-navigation-primary-soft-color, var(--suite-top-tab-active-color, var(--primary)));
  --suite-segmented-active-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --suite-segmented-option-font-size: var(--suite-top-tab-font-size, var(--suite-type-body));
  --suite-segmented-option-font-weight: 650;
  --suite-segmented-option-height: var(--suite-navigation-height, calc(var(--suite-control-height) - 2px));
  --suite-segmented-option-line-height: 1;
  --suite-segmented-option-padding-inline: var(--suite-top-tab-padding-inline, 12px);
  --suite-segmented-option-min-width: max-content;
}

.suite-module-controlbar .suite-button {
  --suite-button-height: var(--suite-control-height);
}

.suite-toolbar-button {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: var(--suite-pointer-target-min, 24px);
  height: max(
    var(--suite-toolbar-button-min-height, var(--suite-pointer-target-min, 24px)),
    calc(var(--suite-toolbar-height, var(--suite-control-height)) - var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)) - var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)))
  );
  min-height: max(
    var(--suite-toolbar-button-min-height, var(--suite-pointer-target-min, 24px)),
    calc(var(--suite-toolbar-height, var(--suite-control-height)) - var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)) - var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)))
  );
  align-items: center;
  justify-content: center;
  gap: var(--suite-toolbar-button-gap, 6px);
  padding: 0 var(--suite-space-2);
  border: 0;
  border-radius: var(--suite-radius-toolbar-button, var(--suite-radius-button, var(--suite-radius-control)));
  background: transparent;
  color: var(--suite-toolbar-button-color, var(--muted));
  font-size: var(--suite-type-caption);
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.suite-toolbar-button[aria-pressed='true'] {
  background: var(--suite-toolbar-active-background, var(--primary-soft));
  color: var(--suite-primary-ink, var(--primary));
  box-shadow: var(--suite-toolbar-active-shadow, 0 1px 2px rgb(15 23 42 / 8%));
}

.suite-toolbar-button[data-suite-tone='amber'][aria-pressed='true'] {
  background: var(--suite-toolbar-amber-active-background, var(--warning-soft));
  color: var(--suite-toolbar-amber-active-color, var(--warning));
}

.suite-toolbar-button[data-suite-tone='danger'][aria-pressed='true'] {
  background: var(--suite-toolbar-danger-active-background, var(--danger-soft));
  color: var(--suite-toolbar-danger-active-color, var(--danger));
}

.suite-toolbar-button:not(:disabled):hover,
.suite-toolbar-button:not(:disabled):focus-visible {
  background: var(--suite-toolbar-hover-background, var(--surface-soft));
  color: var(--suite-toolbar-hover-color, var(--text));
  outline: none;
}

.suite-toolbar-button:disabled,
.suite-toolbar-button[aria-disabled='true'] {
  cursor: default;
  opacity: 0.52;
}

.suite-toolbar-divider {
  display: block;
  flex: 0 0 1px;
  width: 1px;
  height: var(--suite-toolbar-divider-height, 20px);
  margin-inline: var(--suite-toolbar-divider-margin, var(--suite-space-1));
  background: var(--suite-toolbar-divider-color, var(--line));
}

.suite-pill-tab {
  border-radius: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-segmented-option, var(--suite-radius-segmented, var(--suite-radius-control)))) - 3px));
}

.suite-collapsible-group,
.suite-navigation-group {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  padding: var(--suite-navigation-group-padding, var(--suite-space-1));
  border-width: var(--suite-navigation-group-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-group-border-color, var(--line));
  border-radius: var(--suite-navigation-group-radius, var(--suite-radius-panel));
  background: var(--suite-navigation-group-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-navigation-group-backdrop, none);
  backdrop-filter: var(--suite-navigation-group-backdrop, none);
  box-shadow: var(--suite-navigation-group-shadow, none);
}

.suite-collapsible-group-toggle,
.suite-navigation-group-toggle {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.suite-button-group {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  gap: var(--suite-space-2, 8px);
  color: var(--suite-button-group-on-surface, var(--text));
  background-color: var(--suite-button-group-surface-bg, transparent);
  -webkit-backdrop-filter: var(--suite-button-group-backdrop, none);
  backdrop-filter: var(--suite-button-group-backdrop, none);
  border-style: solid;
  border-width: var(--suite-button-group-border-width, 0);
  border-color: var(--suite-button-group-border-color, transparent);
  border-radius: var(--suite-button-group-radius, 0);
  box-shadow: var(--suite-button-group-shadow, none);
}

.suite-button-group[data-button-group-layout='vertical'] {
  flex-direction: column;
  align-items: stretch;
}

.suite-button-group[data-button-group-layout='wrapped'] {
  flex-wrap: wrap;
}

/* Settings cards: query descendants, never the size container itself.
   Full-span items form one column; wider containers release two per row. */

.suite-settings-grid {
  container-type: inline-size;
  container-name: suite-settings;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  align-content: start;
  gap: var(--suite-sub-panel-gap, var(--suite-space-3, 0.75rem));
}

.suite-settings-grid > * {
  grid-column: 1 / -1;
  min-width: 0;
  align-self: stretch;
  align-content: start;
  padding: var(--suite-sub-panel-padding, var(--suite-space-3, 0.75rem));
  gap: var(--suite-sub-panel-gap, var(--suite-space-3, 0.75rem));
}

.suite-settings-card {
  display: grid;
  align-content: start;
}

@container suite-settings (min-width: 40rem) {
  .suite-settings-grid > * {
    grid-column: auto;
  }
}

.suite-form-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--suite-form-row-gap, var(--suite-forms-gap, var(--suite-space-2, 8px)));
  align-items: start;
}

.suite-form-row[data-form-row-ratio='leading-wide'] {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.suite-form-row[data-form-row-ratio='trailing-wide'] {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.suite-form-row[data-form-row-layout='stacked'] {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 760px) {
  .suite-form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.suite-collapsible-group-toggle:hover,
.suite-collapsible-group-toggle:focus-visible,
.suite-navigation-group-toggle:hover,
.suite-navigation-group-toggle:focus-visible {
  color: var(--text);
  background: transparent;
}

.suite-collapsible-group-toggle:focus-visible,
.suite-navigation-group-toggle:focus-visible {
  outline: var(--suite-state-focus-ring-width, 2px) solid var(--suite-state-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-state-focus-ring-offset, 1px);
}

.suite-collapsible-group-body,
.suite-navigation-group-body {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--suite-navigation-group-motion-duration, var(--suite-motion-duration)) var(--suite-navigation-group-motion-easing, var(--suite-motion-easing)),
    opacity var(--suite-navigation-group-motion-duration, var(--suite-motion-duration)) var(--suite-navigation-group-motion-easing, var(--suite-motion-easing));
}

.suite-collapsible-group.is-collapsed .suite-collapsible-group-body,
.suite-collapsible-group.collapsed .suite-collapsible-group-body,
.suite-navigation-group.is-collapsed .suite-navigation-group-body,
.suite-navigation-group.collapsed .suite-navigation-group-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.suite-collapsible-group-content,
.suite-navigation-group-items {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: var(--suite-navigation-group-gap, var(--suite-space-1));
  overflow: hidden;
}

.suite-sub-panel-header.is-split {
  justify-content: space-between;
}

.suite-navigation-item {
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  min-height: var(--suite-navigation-item-height, var(--suite-control-height));
  align-items: var(--suite-navigation-item-align-items, center);
  justify-content: var(--suite-navigation-item-justify-content, flex-start);
  gap: var(--suite-navigation-item-gap, var(--suite-space-2));
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  border-width: var(--suite-navigation-item-border-width, 0px);
  border-style: solid;
  border-color: var(--suite-navigation-item-border-color, transparent);
  border-radius: var(--suite-navigation-item-radius, var(--suite-radius-control));
  color: var(--suite-navigation-item-on-surface, var(--text));
  background: var(--suite-navigation-item-surface-bg, transparent);
  box-shadow: var(--suite-navigation-item-shadow, none);
  -webkit-backdrop-filter: var(--suite-navigation-item-backdrop, none);
  backdrop-filter: var(--suite-navigation-item-backdrop, none);
  font: inherit;
  text-align: var(--suite-navigation-item-text-align, left);
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    background-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    border-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    box-shadow var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

/* Pure labels use the whole item; reserve an icon track only for visible siblings. */

.suite-navigation-item:not(:has(> *)),
.suite-navigation-item:has(> .suite-navigation-item-label):not(:has(> :not(.suite-navigation-item-label):not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.suite-navigation-item-label {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  display: grid;
  align-self: stretch;
  align-content: center;
  justify-content: stretch;
  justify-items: var(--suite-navigation-item-text-align, left);
  text-align: var(--suite-navigation-item-text-align, left);
  overflow: hidden;
}

.suite-navigation-item:is(:hover, .is-hover):not([aria-disabled='true']):not([aria-current='page']) {
  color: var(--suite-primary-ink, var(--primary));
  background: var(--surface-soft);
}

.suite-navigation-item[aria-current='page'],
.suite-navigation-item.is-selected {
  color: var(--suite-primary-ink, var(--primary));
  background: var(--suite-navigation-item-primary-bg, var(--primary-soft));
}

.suite-navigation-item:is(:focus-visible, .is-focus) {
  outline: var(--suite-buttons-focus-ring-width, 3px) solid
    color-mix(in srgb, var(--primary) var(--suite-buttons-focus-ring-alpha, 32%), transparent);
  outline-offset: var(--suite-buttons-focus-ring-offset, 2px);
}

.suite-navigation-item[aria-disabled='true'],
.suite-navigation-item:is(:disabled, .is-disabled) {
  cursor: not-allowed;
  filter: saturate(var(--suite-buttons-disabled-saturation, 32%));
  opacity: 0.58;
}

.suite-button.suite-button-secondary:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover) {
  border-color: var(--suite-primary-ink, var(--primary));
  background: var(--suite-buttons-hover-surface-bg, var(--primary-soft));
  color: var(--suite-primary-ink, var(--primary));
}

.suite-button.suite-button-secondary:is(:focus-visible, .is-focus) {
  border-color: var(--suite-primary-ink, var(--primary));
  background: var(--suite-buttons-focus-surface-bg, var(--primary-soft));
  color: var(--suite-primary-ink, var(--primary));
}

.suite-button-outline:is(:hover, .is-hover),
.suite-button-accent:is(:hover, .is-hover) {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--text);
}

.suite-button.suite-button-ghost:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button.suite-button-ghost:is(:focus-visible, .is-focus) {
  border-color: transparent;
}

.suite-button-accent:is(:hover, .is-hover) {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 92%, var(--surface-strong));
  color: var(--suite-primary-ink, var(--primary));
}

.suite-button-accent.suite-button-tone-primary:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-accent.suite-button-tone-primary:is(:focus-visible, .is-focus),
.suite-button-accent.suite-button-tone-cyan:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-accent.suite-button-tone-cyan:is(:focus-visible, .is-focus),
.suite-button-accent.suite-button-tone-purple:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-accent.suite-button-tone-purple:is(:focus-visible, .is-focus),
.suite-button-accent.suite-button-tone-slate:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-accent.suite-button-tone-slate:is(:focus-visible, .is-focus),
.suite-button-accent.suite-button-tone-danger:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-accent.suite-button-tone-danger:is(:focus-visible, .is-focus) {
  border-color: color-mix(in srgb, var(--suite-button-tone-color) 36%, var(--line));
  background: color-mix(in srgb, var(--suite-button-tone-soft) 92%, var(--surface-strong));
  color: var(--suite-button-tone-color);
}

.suite-button-ghost.suite-button-tone-primary:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-primary:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-cyan:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-cyan:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-purple:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-purple:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-slate:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-slate:is(:focus-visible, .is-focus),
.suite-button-ghost.suite-button-tone-danger:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-button-ghost.suite-button-tone-danger:is(:focus-visible, .is-focus) {
  border-color: transparent;
  background: color-mix(in srgb, var(--suite-button-tone-soft) 70%, transparent);
  color: var(--suite-button-tone-color);
}

.suite-button-danger:is(:hover, .is-hover) {
  border-color: var(--danger);
  background: var(--danger);
}

.suite-segmented {
  --suite-tab-item-height: var(--suite-tab-switch-height, var(--suite-navigation-height, 24px));
  --suite-segmented-option-height: var(--suite-tab-item-height);
  box-sizing: border-box;
  display: inline-flex;
  width: var(--suite-segmented-width, fit-content);
  max-width: 100%;
  align-items: center;
  gap: var(--suite-segmented-gap, 2px);
  padding: var(--suite-segmented-padding, var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)));
  border: var(--suite-navigation-border-width, var(--suite-segmented-border-width, 0.1px)) solid var(--suite-navigation-border-color, var(--suite-segmented-border, color-mix(in srgb, var(--primary) 26%, var(--line))));
  border-radius: var(--suite-navigation-radius, var(--suite-radius-segmented, var(--suite-radius-button, var(--suite-radius-control))));
  background: var(--suite-navigation-soft-bg, var(--suite-segmented-bg, color-mix(in srgb, var(--surface-strong) 74%, var(--primary-soft))));
  box-shadow: var(--suite-navigation-shadow, inset 0 1px 0 color-mix(in srgb, #ffffff 62%, transparent), 0 1px 2px rgba(15, 23, 42, 0.04));
}

.suite-segmented.is-transparent {
  --suite-segmented-bg: transparent;
  --suite-segmented-border: color-mix(in srgb, var(--primary) 18%, var(--line));
  --suite-radius-segmented: 20px;
  box-shadow: none;
}

.dark .suite-segmented.is-transparent {
  --suite-segmented-border: color-mix(in srgb, var(--primary) 18%, var(--line));
}

.suite-segmented > button,
.suite-segmented > [role='tab'],
.suite-segmented-option {
  display: inline-flex;
  height: var(--suite-segmented-option-height, var(--suite-tab-switch-height, 24px));
  min-height: var(--suite-segmented-option-height, var(--suite-tab-switch-height, 24px));
  min-width: var(--suite-segmented-option-min-width, max-content);
  flex: var(--suite-segmented-option-flex, 0 0 auto);
  align-items: var(--suite-navigation-align-items, center);
  justify-content: var(--suite-navigation-justify-content, center);
  gap: var(--suite-space-2);
  border: 0;
  border-radius: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-segmented-option, var(--suite-radius-segmented, var(--suite-radius-button, var(--suite-radius-control))))) - 3px));
  padding: 0 var(--suite-segmented-option-padding-inline, var(--suite-space-3));
  background: transparent;
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
  font: inherit;
  font-size: var(--suite-segmented-option-font-size, var(--suite-type-body));
  font-weight: var(--suite-segmented-option-font-weight, 800);
  line-height: var(--suite-segmented-option-line-height, var(--suite-line-body));
  text-align: var(--suite-navigation-text-align, center);
  white-space: nowrap;
  word-break: keep-all;
  cursor: pointer;
  transition:
    background-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    box-shadow var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

/* A toolbar already provides the tray surface; standalone remains the default. */

.suite-segmented.suite-segmented--embedded {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  /* No tray, so no tray inset: an embedded switch is exactly one control height, like the buttons beside it (本人 book-721). */
  padding-block: 0;
}

.suite-segmented--embedded.suite-segmented-moving::before {
  top: 0;
  bottom: 0;
}

/* Content tabs are navigation, while standalone mode switches retain a tray.
   Selection, moving indicators, focus and keyboard semantics stay on the tabs. */

.suite-segmented[role='tablist'] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.suite-segmented[role='tablist'] > .suite-segmented-option[role='tab'] {
  height: auto !important;
  min-height: var(--suite-tab-item-height, var(--suite-tab-switch-height, 24px));
  max-height: none !important;
}

.suite-segmented-option[role='tab'],
.suite-pill-tab[role='tab'],
.suite-management-tab[role='tab'] {
  height: var(--suite-tab-item-height, var(--suite-tab-switch-height, 24px));
  min-height: var(--suite-tab-item-height, var(--suite-tab-switch-height, 24px));
  justify-content: var(--suite-tab-item-justify-content, center);
  border-width: var(--suite-tab-item-border-width, 0px);
  border-style: solid;
  border-color: var(--suite-tab-item-border-color, transparent);
  border-radius: var(--suite-tab-item-radius, var(--suite-radius-control));
  color: var(--suite-tab-item-on-surface, var(--text));
  text-align: var(--suite-tab-item-text-align, center);
  background: var(--suite-tab-item-surface-bg, transparent);
  box-shadow: var(--suite-tab-item-shadow, none);
  -webkit-backdrop-filter: var(--suite-tab-item-backdrop, none);
  backdrop-filter: var(--suite-tab-item-backdrop, none);
}

.suite-segmented-option[role='tab'].active,
.suite-segmented-option[role='tab'][aria-selected='true'],
.suite-pill-tab[role='tab'].active,
.suite-pill-tab[role='tab'][aria-selected='true'],
.suite-management-tab[role='tab'].active,
.suite-management-tab[role='tab'][aria-selected='true'] {
  border-color: var(--suite-tab-item-primary-bg, var(--suite-primary-action-bg, var(--primary)));
  background: var(--suite-tab-item-primary-bg, var(--suite-primary-action-bg, var(--primary)));
  color: var(--suite-tab-item-on-primary, var(--suite-inverse-text, #ffffff));
}

:is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:not(.active):not([aria-selected='true']):is(:hover, .is-hover) {
  background: var(--suite-tab-item-hover-bg, var(--primary-soft));
  color: var(--suite-tab-item-hover-color, var(--suite-primary-ink, var(--primary)));
}

:is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:not(.active):not([aria-selected='true']):is(:focus-visible, .is-focus) {
  background: var(--suite-tab-item-focus-bg, var(--surface));
  color: var(--suite-tab-item-focus-color, var(--text));
}

:is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:not(.active):not([aria-selected='true']):is(:is(:disabled, .is-disabled), [aria-disabled='true']) {
  background: var(--suite-tab-item-disabled-bg, var(--surface));
  color: var(--suite-tab-item-disabled-color, var(--muted));
}

.suite-segmented-label,
.suite-button-label {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--suite-space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.suite-segmented-stretch {
  --suite-segmented-width: 100%;
  --suite-segmented-option-flex: 1 1 0;
  --suite-segmented-option-min-width: 0;
}

.suite-compact-row,
.suite-field-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2);
}

.suite-field-label,
.suite-control-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.suite-checkbox-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2);
  border-radius: var(--suite-radius-control);
  padding: var(--suite-space-1) var(--suite-space-2);
  color: var(--text);
  font-size: var(--suite-type-body);
  line-height: var(--suite-line-body);
  cursor: pointer;
  transition:
    background-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-checkbox-row:not(.is-disabled):hover {
  background: var(--surface-soft);
}

.suite-checkbox-row.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.suite-checkbox-row.is-danger {
  color: var(--danger);
}

.suite-checkbox-row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  font-weight: 800;
  user-select: none;
}

.suite-range-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--suite-space-2);
}

.suite-grid-contents {
  display: contents;
}

.suite-row-disabled > * {
  pointer-events: none;
}

.suite-range-row.is-disabled .suite-range-label,
.suite-row-disabled > .suite-range-label {
  opacity: 0.45;
}

.suite-data-sheet {
  --suite-data-row-height: var(--suite-data-rows-height, 24px);
  --suite-data-letter-row-height: var(--suite-table-letter-row-height, 20px);
  --suite-data-header-row-height: var(--suite-table-header-row-height, var(--suite-tables-height, 26px));
  --suite-data-cell-padding-inline: var(--suite-table-cell-padding-inline, 8px);
  --suite-data-cell-padding-block: var(--suite-table-cell-padding-block, 4px);
  --suite-data-cell-border: var(--suite-data-rows-border, var(--suite-tables-border, 1px solid color-mix(in srgb, var(--line) 78%, transparent)));
  --suite-data-row-border: var(--suite-data-rows-border, var(--suite-tables-border, 1px solid color-mix(in srgb, var(--line) 70%, transparent)));
  --suite-data-group-bg: var(--suite-table-group-level-1-bg, var(--suite-table-group-bg, var(--suite-tables-soft-bg, color-mix(in srgb, var(--primary) 7%, var(--surface-strong)))));
  --suite-data-subgroup-bg: var(--suite-table-group-level-2-bg, var(--suite-table-subgroup-bg, var(--suite-data-rows-soft-bg, color-mix(in srgb, var(--surface-strong) 84%, var(--surface)))));
  --suite-data-header-bg: var(--suite-data-group-bg);
  --suite-data-letter-bg: var(--suite-table-letter-row-bg, var(--suite-tables-soft-bg, color-mix(in srgb, var(--surface-strong) 86%, var(--surface))));
  --suite-data-hover-bg: var(--suite-tables-hover-bg, var(--suite-data-rows-soft-bg, color-mix(in srgb, var(--primary) 4%, var(--surface))));
  --suite-data-selected-bg: var(--suite-tables-selection-bg, var(--suite-data-rows-primary-soft-bg, color-mix(in srgb, var(--primary) 7%, var(--surface))));
  --suite-data-focus-bg: var(--suite-tables-focus-bg, var(--suite-data-selected-bg));
  --suite-data-menu-open-bg: var(--suite-tables-menu-open-bg, var(--suite-data-focus-bg));
  --suite-data-focus-shadow: var(--suite-tables-focus-shadow, inset 0 0 0 2px var(--primary));
  --suite-data-editable-cell-shadow: var(--suite-tables-editable-cell-shadow, inset 0 -1px 0 var(--line));
  --suite-data-dirty-bg: var(--suite-data-rows-primary-soft-bg, color-mix(in srgb, var(--primary) 8%, var(--surface)));
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  border: var(--suite-tables-border, 1px solid var(--line));
  border-radius: var(--suite-tables-radius, var(--suite-radius-section-panel, var(--suite-radius-control)));
  background: var(--suite-tables-surface-bg, var(--suite-panel-bg, var(--surface)));
  color: var(--text);
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
}

.suite-data-row {
  min-width: max-content;
  display: grid;
  grid-template-columns: var(--suite-data-grid-template);
}

.suite-data-letter-row,
.suite-data-header-row {
  position: sticky;
  z-index: 3;
}

.suite-data-letter-row {
  top: 0;
}

.suite-data-header-row {
  top: var(--suite-data-letter-row-height);
}

.suite-data-letter-row > div,
.suite-data-header-row > div {
  min-width: 0;
  height: var(--suite-data-letter-row-height);
  display: grid;
  box-sizing: border-box;
  align-items: center;
  justify-items: var(--suite-tables-justify-items, center);
  padding: var(--suite-data-cell-padding-block) var(--suite-data-cell-padding-inline);
  border-right: var(--suite-data-cell-border);
  border-bottom: var(--suite-data-row-border);
  background: var(--suite-data-letter-bg);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1;
  font-weight: 750;
  text-align: var(--suite-tables-text-align, center);
  white-space: nowrap;
}

.suite-data-header-row > div {
  height: var(--suite-data-header-row-height);
  background: var(--suite-data-header-bg);
  color: var(--text);
  font-weight: 850;
}

.suite-data-body {
  min-width: max-content;
}

.suite-data-body-row {
  min-height: var(--suite-data-row-height);
}

.suite-data-cell {
  min-width: 0;
  min-height: var(--suite-data-row-height);
  display: grid;
  box-sizing: border-box;
  align-items: var(--suite-data-rows-align-items, var(--suite-tables-align-items, center));
  justify-items: var(--suite-data-rows-justify-items, var(--suite-tables-justify-items, start));
  padding: var(--suite-data-cell-padding-block) var(--suite-data-cell-padding-inline);
  border-right: var(--suite-data-cell-border);
  border-bottom: var(--suite-data-row-border);
  background: var(--suite-data-rows-surface-bg, var(--surface));
  text-align: var(--suite-data-rows-text-align, var(--suite-tables-text-align, left));
  transition:
    background var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    box-shadow var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-data-group-row,
.suite-data-subgroup-row {
  min-height: var(--suite-data-row-height);
}

.suite-data-group-row .suite-data-cell {
  background: var(--suite-data-group-bg);
  color: var(--text);
  font-weight: 850;
}

.suite-data-subgroup-row .suite-data-cell {
  background: var(--suite-data-subgroup-bg);
  color: var(--muted);
  font-weight: 750;
}

.suite-data-group-cell {
  grid-column: 1 / -1;
}

.suite-data-body-row:hover .suite-data-cell {
  background: var(--suite-data-hover-bg);
}

.suite-data-body-row.is-selected .suite-data-cell,
.suite-data-body-row[aria-selected='true'] .suite-data-cell {
  background: var(--suite-data-selected-bg);
}

.suite-data-body-row.is-selected .suite-data-cell:first-child,
.suite-data-body-row[aria-selected='true'] .suite-data-cell:first-child {
  box-shadow: var(--suite-tables-selection-shadow, inset 3px 0 0 var(--primary));
}

.suite-data-body-row.dirty .suite-data-cell {
  background: var(--suite-data-dirty-bg);
}

.suite-data-body-row.saving .suite-data-cell {
  opacity: 0.72;
}

.suite-data-empty {
  min-width: 100%;
  padding: 24px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: var(--suite-line-caption);
}

.suite-range-prefix,
.suite-range-value {
  flex: 0 0 auto;
}

.suite-module-panel.is-transparent,
.dark .suite-module-panel.is-transparent {
  background: transparent;
  border-top-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.suite-module-tab-bar.is-transparent,
.dark .suite-module-tab-bar.is-transparent {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.suite-module-tab-bar.has-start-padding-comfortable {
  padding-left: var(--suite-module-tab-bar-start-padding-comfortable, 0.75rem);
}

.suite-horizontal-panel-scroll {
  --suite-scroll-content-start-clearance: var(--suite-main-container-content-gap, var(--suite-space-3, 12px));
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 0%;
  flex-direction: row;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

/*
 * The scroll carrier stays visually neutral. Header-to-content breathing room
 * belongs to the composition between the sibling header and scroll region.
 */

.suite-module-panel > .suite-container-header + .suite-horizontal-panel-scroll {
  margin-block-start: var(--suite-scroll-content-start-clearance);
}

.suite-horizontal-panel-scroll::-webkit-scrollbar-track {
  margin-inline: 0;
}

.suite-horizontal-panel-scroll-nav.is-prev {
  left: var(--suite-horizontal-panel-scroll-nav-inset, var(--suite-space-2, 8px));
}

.suite-horizontal-panel-scroll-nav.is-next {
  right: var(--suite-horizontal-panel-scroll-nav-inset, var(--suite-space-2, 8px));
}

/*
 * Function-region composition follows the effective route layout, not the
 * viewport. Bottom workbenches keep the horizontal card rail; left/right
 * workbenches reflow the same mounted cards into one natural-height column.
 */

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-module-panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/*
 * The formal function region owns its main-container surface. Legacy feature
 * wrappers may keep their layout class, but must not paint a second full-panel
 * background, border, blur, or shadow inside that region.
 */

.suite-dynamic-module-host [data-suite-route-region='function'] .suite-module-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-module-tab-bar {
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
  overflow-y: visible;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-module-tab-bar > * {
  min-width: 0;
  max-width: 100%;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-module-tab-bar > :empty {
  display: none;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] #canvas-toolbar-portal {
  width: 100%;
  justify-content: flex-start;
  overflow: visible;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-function-toolbar-portal .suite-toolbar {
  width: 100%;
  height: auto;
  min-height: var(--suite-toolbar-height, var(--suite-control-height));
  flex-wrap: wrap;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-function-toolbar-portal .suite-toolbar-button {
  flex: 1 1 calc(50% - var(--suite-space-1, 4px));
  justify-content: center;
}

/* Basic Data Table: the cell is the editor surface. Unlike Component Table,
   editable values must not render a second rounded control container. */

.suite-basic-data-table[data-suite-management-mode='edit'] td[data-suite-editable-cell] {
  padding: 0;
}

.suite-basic-data-table .suite-basic-table-cell-editor {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: var(--suite-native-table-row-height);
  margin: 0;
  padding: var(--suite-native-table-cell-padding, var(--suite-native-table-cell-padding-block) var(--suite-native-table-cell-padding-inline));
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
}

.suite-basic-data-table .suite-basic-table-cell-editor:focus,
.suite-basic-data-table .suite-basic-table-cell-editor:focus-visible {
  border: 0;
  border-radius: 0;
  outline: 0;
  background: var(--suite-native-table-cell-focus-bg, color-mix(in srgb, var(--primary) 6%, transparent));
  box-shadow: inset 0 0 0 2px var(--primary);
}

.suite-basic-data-table input[type='checkbox'].suite-basic-table-cell-editor {
  display: block;
  width: var(--suite-checkbox-size, 1rem);
  min-width: var(--suite-checkbox-size, 1rem);
  height: var(--suite-checkbox-size, 1rem);
  min-height: 0;
  margin: auto;
  padding: 0;
  accent-color: var(--suite-primary-ink, var(--primary));
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-function-toolbar-portal .suite-toolbar[data-suite-adaptive-icon-only='true'] {
  flex-wrap: nowrap;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-function-toolbar-portal .suite-toolbar[data-suite-adaptive-icon-only='true'] > .suite-toolbar-button {
  flex: 1 1 0;
  width: auto;
  min-width: var(--suite-toolbar-button-min-height, var(--suite-pointer-target-min, 24px));
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-function-toolbar-portal .suite-toolbar[data-suite-adaptive-icon-only='true'] .suite-toolbar-button-label {
  display: none;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-function-toolbar-portal .suite-toolbar-divider {
  display: none;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-horizontal-panel-scroll {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: none;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-horizontal-panel-scroll .snap-start {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
  overflow-y: visible;
  scroll-snap-align: none;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-horizontal-panel-scroll :is(
  .suite-sub-panel--scroll-shell,
  .suite-sub-panel-scroll-region
) {
  overflow: visible;
}

.suite-dynamic-module-host:is(
  [data-suite-effective-layout-mode='left-panel'],
  [data-suite-effective-layout-mode='right-panel']
) [data-suite-route-region='function'] .suite-horizontal-panel-scroll-nav {
  display: none;
}

/*
 * Actual function-region width is the final composition authority. This keeps
 * embedded content usable when Shell chrome, user resizing, or a narrow host
 * makes a nominal bottom panel behave like a side panel.
 */

@container suite-function-region (max-width: 560px) {
  .suite-container-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'leading actions'
      'context context';
    align-items: center;
  }

  .suite-container-header-leading {
    grid-area: leading;
    width: 100%;
  }

  .suite-container-header-context {
    grid-area: context;
    width: 100%;
    justify-content: flex-start;
  }

  .suite-container-header-actions {
    grid-area: actions;
  }

  .suite-module-tab-bar {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
    overflow-y: visible;
  }

  .suite-module-tab-bar > * {
    min-width: 0;
    max-width: 100%;
  }

  .suite-function-toolbar-portal .suite-toolbar {
    width: 100%;
    height: auto;
    min-height: var(--suite-toolbar-height, var(--suite-control-height));
    flex-wrap: wrap;
  }

  .suite-function-toolbar-portal .suite-toolbar-button {
    flex: 1 1 calc(50% - var(--suite-space-1, 4px));
    justify-content: center;
  }

  .suite-function-toolbar-portal .suite-toolbar[data-suite-adaptive-icon-only='true'] {
    display: flex;
    flex-wrap: nowrap;
  }

  .suite-function-toolbar-portal .suite-toolbar[data-suite-adaptive-icon-only='true'] > .suite-toolbar-button {
    flex: 1 1 0;
    width: auto;
    min-width: var(--suite-toolbar-button-min-height, var(--suite-pointer-target-min, 24px));
  }

  .suite-function-toolbar-portal .suite-toolbar[data-suite-adaptive-icon-only='true'] .suite-toolbar-button-label {
    display: none;
  }

  .suite-function-toolbar-portal .suite-toolbar-divider {
    display: none;
  }

  .suite-horizontal-panel-scroll {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
  }

  .suite-horizontal-panel-scroll .snap-start {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    flex: 0 0 auto;
    overflow-y: visible;
    scroll-snap-align: none;
  }

  .suite-horizontal-panel-scroll :is(
    .suite-sub-panel--scroll-shell,
    .suite-sub-panel-scroll-region
  ) {
    overflow: visible;
  }

  .suite-horizontal-panel-scroll-nav {
    display: none;
  }

  .suite-field-row--complete-label {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .suite-field-row--complete-label > .suite-field-label {
    flex: 1 1 100%;
    width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .suite-field-row--complete-label > .suite-segmented {
    width: 100%;
  }
}

@container suite-function-region (max-width: 320px) {
  .suite-function-toolbar-portal .suite-toolbar--adaptive-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .suite-function-toolbar-portal .suite-toolbar--adaptive-stack > .suite-toolbar-button {
    width: 100%;
    min-width: 0;
  }

  .suite-responsive-field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .suite-responsive-field-grid > * {
    grid-column: 1 / -1 !important;
  }

  .suite-field-control--adaptive > .suite-field-control-label {
    flex: 1 1 100%;
    width: 100%;
  }

  .suite-field-control--adaptive > .suite-field-control-body {
    margin-inline: auto;
  }
}

.suite-range-row > .suite-range-input {
  flex: 1 1 auto;
}

/*
 * A field label and its atomic control stay on one row while they fit. When
 * the label's complete text plus the control no longer fit, flex wrapping
 * moves the control to the next row instead of shrinking the label into an
 * ellipsis. Feature modules opt in with semantic child classes.
 */

.suite-field-control--adaptive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.suite-field-control--adaptive > .suite-field-control-label {
  flex: 1 0 max-content;
  min-width: max-content;
}

.suite-field-control--adaptive > .suite-field-control-label > .suite-field-label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.suite-field-control--adaptive > .suite-field-control-body {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.suite-range-label {
  flex: 0 0 var(--suite-range-label-width, 6.875rem);
  max-width: var(--suite-range-label-max-width, 8.75rem);
  color: var(--muted);
  font-size: var(--suite-type-body);
  font-weight: 800;
  user-select: none;
}

.suite-stepper-field {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.suite-stepper-button-start {
  border-radius: var(--suite-radius-control) 0 0 var(--suite-radius-control);
}

.suite-stepper-button-end {
  border-radius: 0 var(--suite-radius-control) var(--suite-radius-control) 0;
}

.suite-stepper-button-solo {
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
}

input.suite-stepper-input {
  width: var(--suite-stepper-input-width, 2.75rem) !important;
  min-width: var(--suite-stepper-input-width, 2.75rem) !important;
  max-width: var(--suite-stepper-input-width, 2.75rem) !important;
  height: auto !important;
  min-height: max(var(--suite-stepper-input-height, 1.5rem), 1lh) !important;
  padding: 0 var(--suite-space-1) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--surface-strong) !important;
  color: var(--text) !important;
  font-size: var(--suite-type-caption) !important;
  line-height: var(--suite-line-caption) !important;
  text-align: center;
}

/* SmartInput owns numeric text semantics independently of compact sizing. */

input.suite-number-input {
  text-align: center;
}

.suite-numeric-input {
  justify-self: end;
  field-sizing: content;
  width: auto !important;
  min-width: var(--suite-numeric-input-width, 3.75rem) !important;
  max-width: none !important;
  height: auto !important;
  min-height: max(var(--suite-numeric-input-height, 1.75rem), 1lh) !important;
  padding: 0 var(--suite-space-2) !important;
  border: var(--suite-form-border, 1px solid var(--line)) !important;
  border-radius: var(--suite-form-radius, var(--suite-radius-control)) !important;
  background: var(--suite-form-bg, var(--surface-soft)) !important;
  color: var(--suite-form-color, var(--text)) !important;
  font-size: var(--suite-type-caption) !important;
  line-height: var(--suite-line-caption) !important;
  text-align: center;
}

.suite-stepper-input:disabled,
.suite-numeric-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.suite-note-text,
.suite-description-text {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.suite-dropdown-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2);
  font-size: var(--suite-type-body);
  line-height: var(--suite-line-body);
}

.suite-dropdown-row.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.suite-dropdown-label {
  flex: 0 0 var(--suite-range-label-width, 6.875rem);
  max-width: var(--suite-range-label-max-width, 8.75rem);
  color: var(--muted);
  font-weight: 800;
}

.suite-dropdown-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.suite-dropdown-trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  height: var(--suite-dropdowns-height, var(--suite-form-height, var(--suite-control-height)));
  align-items: var(--suite-dropdowns-align-items, center);
  justify-content: var(--suite-dropdowns-justify-content, space-between);
  gap: var(--suite-space-2);
  border-width: var(--suite-dropdowns-border-width, var(--suite-forms-border-width, 1px));
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--suite-forms-border-color, var(--line)));
  border-radius: var(--suite-dropdowns-radius, var(--suite-form-radius, var(--suite-radius-control)));
  padding: 0 var(--suite-space-2);
  background: var(--suite-dropdowns-surface-bg, var(--suite-form-bg, var(--surface-soft)));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  color: var(--suite-dropdowns-on-surface, var(--suite-form-color, var(--text)));
  box-shadow: var(--suite-dropdowns-shadow, var(--shadow-soft));
  font: inherit;
  font-size: var(--suite-type-caption);
  font-weight: 800;
  text-align: var(--suite-dropdowns-text-align, left);
  cursor: pointer;
}

.suite-dropdown-trigger:is(:focus-visible, .is-focus) {
  border-color: var(--suite-primary-ink, var(--primary));
  box-shadow: var(--suite-focus-ring);
  outline: none;
}

.suite-dropdown-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.suite-dropdown-caret {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1;
}

.suite-dropdown-menu {
  box-sizing: border-box;
  position: absolute;
  z-index: var(--suite-dropdown-z-index, 1000);
  width: var(--suite-dropdowns-menu-width, var(--suite-dropdown-width, max-content));
  min-width: var(--suite-dropdowns-menu-min-width, var(--suite-dropdown-min-width, max-content));
  max-width: var(--suite-dropdowns-menu-max-width, var(--suite-dropdown-max-width, min(360px, calc(100vw - 24px))));
  max-height: var(--suite-dropdown-max-height, 220px);
  margin-top: var(--suite-dropdown-margin-top, var(--suite-space-1));
  padding: var(--suite-dropdown-padding, 4px);
  overflow: auto;
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-dropdown-radius, var(--suite-radius-panel)));
  background: var(--suite-dropdowns-menu-surface-bg, var(--suite-dropdowns-strong-bg, var(--suite-dropdowns-surface-bg, var(--surface-strong))));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  box-shadow: var(--suite-dropdown-shadow, var(--shadow));
}

.suite-dropdown-menu.open,
.suite-dropdown-menu[aria-hidden='false'] {
  transform-origin: top center;
  animation: suite-dropdown-enter var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease) both;
}

@keyframes suite-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--suite-motion-distance, 8px) * -0.5));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suite-dropdown-option {
  display: block;
  width: 100%;
  min-height: var(--suite-dropdowns-height, var(--suite-dropdown-option-min-height, 30px));
  border: 0;
  border-radius: max(0px, calc(var(--suite-dropdowns-radius, var(--suite-radius-control)) - 3px));
  padding: var(--suite-dropdown-option-padding, var(--suite-space-2) var(--suite-space-3));
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--suite-dropdown-option-font-size, var(--suite-type-body));
  font-weight: var(--suite-dropdown-option-font-weight, 800);
  text-align: var(--suite-dropdowns-text-align, left);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.suite-dropdown-option:hover,
.suite-dropdown-option.is-selected {
  background: var(--primary-soft);
  color: var(--suite-primary-ink, var(--primary));
}

.suite-dropdown-option-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--suite-dropdown-option-split-gap, var(--suite-space-2));
}

.suite-dropdown-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-dropdown-option-meta {
  color: var(--suite-primary-ink, var(--primary));
  font-size: var(--suite-type-caption);
  font-weight: 850;
  white-space: nowrap;
}

.suite-dropdown-empty {
  min-height: var(--suite-dropdown-empty-min-height, 30px);
  display: grid;
  align-items: center;
  padding: var(--suite-dropdown-empty-padding, 0 8px);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.suite-dropdown-menu-narrow {
  width: var(--suite-dropdown-menu-narrow-width, 44px);
  min-width: var(--suite-dropdown-menu-narrow-width, 44px);
  max-width: var(--suite-dropdown-menu-narrow-width, 44px);
  display: grid;
  justify-items: center;
  padding: var(--suite-dropdown-menu-narrow-padding, 4px);
  overflow-x: hidden;
}

.suite-dropdown-option-square {
  width: var(--suite-dropdown-option-square-size, 30px);
  min-width: var(--suite-dropdown-option-square-size, 30px);
  max-width: var(--suite-dropdown-option-square-size, 30px);
  min-height: var(--suite-dropdown-option-square-size, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.suite-segmented > button:is(:hover, .is-hover),
.suite-segmented > button:is(:focus-visible, .is-focus),
.suite-segmented > [role='tab']:is(:hover, .is-hover),
.suite-segmented > [role='tab']:is(:focus-visible, .is-focus) {
  color: var(--suite-primary-ink, var(--primary));
  background: color-mix(in srgb, var(--primary-soft) 82%, var(--surface-strong));
  outline: none;
}

.suite-segmented > .active,
.suite-segmented > [aria-selected='true'],
.suite-segmented > [aria-pressed='true'],
.suite-segmented-option[data-state='active'] {
  background: var(--suite-navigation-primary-soft-bg, var(--suite-segmented-active-bg, var(--primary-soft)));
  color: var(--suite-navigation-primary-soft-color, var(--suite-segmented-active-color, var(--suite-primary-ink, var(--primary))));
  box-shadow: var(--suite-segmented-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.suite-segmented > .active:is(:is(:hover, .is-hover), :is(:focus-visible, .is-focus)),
.suite-segmented > [aria-selected='true']:is(:is(:hover, .is-hover), :is(:focus-visible, .is-focus)),
.suite-segmented > [aria-pressed='true']:is(:is(:hover, .is-hover), :is(:focus-visible, .is-focus)),
.suite-segmented-option[data-state='active']:is(:is(:hover, .is-hover), :is(:focus-visible, .is-focus)) {
  background: var(--suite-navigation-primary-soft-bg, var(--suite-segmented-active-bg, var(--primary-soft)));
  color: var(--suite-navigation-primary-soft-color, var(--suite-segmented-active-color, var(--suite-primary-ink, var(--primary))));
}

.suite-segmented > [aria-selected='true'] *,
.suite-segmented > [aria-pressed='true'] *,
.suite-segmented-option[data-state='active'] * {
  color: inherit;
}

.suite-segmented > button:is(:disabled, .is-disabled),
.suite-segmented > [role='tab']:is(:disabled, .is-disabled) {
  color: var(--muted);
  cursor: default;
  opacity: 0.55;
}

.suite-segmented > button:is(:disabled, .is-disabled):is(:hover, .is-hover),
.suite-segmented > [role='tab']:is(:disabled, .is-disabled):is(:hover, .is-hover) {
  background: transparent;
  color: var(--muted);
}

.module-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-module-toolbar-gap, 14px);
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border-width: var(--suite-module-toolbar-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-module-toolbar-border-color, var(--line));
  border-radius: var(--suite-module-toolbar-radius, 18px);
  background: var(--suite-module-toolbar-surface-bg, var(--surface));
  color: var(--suite-module-toolbar-on-surface, var(--text));
  box-shadow: var(--suite-module-toolbar-shadow, var(--shadow-soft));
  -webkit-backdrop-filter: var(--suite-module-toolbar-backdrop, blur(10px));
  backdrop-filter: var(--suite-module-toolbar-backdrop, blur(10px));
}

.area-management-switchbar {
  flex: 0 0 auto;
  gap: 12px;
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
}

.suite-management-switchbar {
  position: sticky;
  top: var(--suite-management-switchbar-sticky-top, var(--shell-workspace-top-gap, 0px));
  z-index: 20;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-main-panel, var(--suite-radius-control, 20px));
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px) saturate(1.02);
  backdrop-filter: blur(14px) saturate(1.02);
}

/* The window, louver and door pages (and area review) put the shared control bar on their module switch bar, which the
   switchbar and module-toolbar rules draw as a card with a 4px inset (forced with !important by the Shell's packaged
   normalization sheet). On that combination the toolbar row of GLOBAL §3-F wins: one 1px bottom line, no card, controls at
   the row top and 12 above the line. The Shell's own module headers (.suite-module-controlbar.module-toolbar without a
   switchbar class) keep their frame. */

.suite-module-controlbar.suite-management-switchbar {
  padding: 0 0 var(--suite-module-controlbar-line-gap, var(--suite-space-3, 12px)) !important;
  border-style: solid;
  border-color: var(--suite-module-controlbar-border, var(--line));
  border-width: 0 0 var(--suite-module-controlbar-border-width, 1px);
  border-radius: 0;
  background: var(--suite-module-controlbar-bg, transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.suite-management-left {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.suite-management-tabs {
  --suite-segmented-border-width: 0px;
  --suite-segmented-bg: transparent;
  --suite-segmented-padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  --suite-segmented-gap: 6px;
  --suite-segmented-active-bg: var(--suite-tab-item-primary-bg, var(--suite-top-tab-active-bg, var(--primary-soft)));
  --suite-segmented-active-color: var(--suite-tab-item-on-primary, var(--suite-top-tab-active-color, var(--primary)));
  --suite-segmented-active-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --suite-segmented-option-font-size: var(--suite-top-tab-font-size, var(--suite-type-body));
  --suite-segmented-option-font-weight: 650;
  --suite-segmented-option-height: var(--suite-navigation-height, calc(var(--suite-control-height) - 2px));
  --suite-segmented-option-line-height: 1;
  --suite-segmented-option-padding-inline: var(--suite-top-tab-padding-inline, 12px);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
}

.suite-management-tab {
  flex: 0 0 auto;
  height: var(--suite-navigation-height, var(--suite-segmented-option-height, calc(var(--suite-control-height) - 2px)));
  min-height: var(--suite-navigation-height, var(--suite-segmented-option-height, calc(var(--suite-control-height) - 2px)));
  display: inline-flex;
  align-items: var(--suite-navigation-align-items, center);
  justify-content: var(--suite-navigation-justify-content, center);
  gap: 6px;
  padding: 0 var(--suite-segmented-option-padding-inline, var(--suite-space-3));
  border: 0;
  border-radius: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-button, var(--suite-radius-control))) - 3px));
  color: var(--muted);
  background: transparent;
  font-size: var(--suite-segmented-option-font-size, var(--suite-type-body));
  font-weight: var(--suite-segmented-option-font-weight, 650);
  line-height: var(--suite-segmented-option-line-height, 1);
  text-align: var(--suite-navigation-text-align, center);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
}

.suite-management-tab svg,
.suite-management-tab .ui-icon {
  width: var(--suite-navigation-icon-size, var(--suite-action-icon-size, 16px));
  height: var(--suite-navigation-icon-size, var(--suite-action-icon-size, 16px));
  flex-shrink: 0;
}

.suite-management-tabs > .suite-management-tab.suite-segmented-option[data-state='active'],
.suite-management-tab.active {
  color: var(--suite-navigation-primary-soft-color, var(--suite-segmented-active-color, var(--suite-primary-ink, var(--primary))));
  background: var(--suite-navigation-primary-soft-bg, var(--suite-segmented-active-bg, var(--primary-soft)));
  box-shadow: var(--suite-segmented-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.suite-management-tabs.has-tab-background > .suite-management-tab.suite-segmented-option[data-state='active'],
.suite-management-tabs.has-tab-background > .suite-management-tab.active {
  background: transparent;
  box-shadow: none;
}

.suite-management-tab:not(.locked):is(:hover, .is-hover),
.suite-management-tab:not(.locked):is(:focus-visible, .is-focus) {
  color: var(--suite-primary-ink, var(--primary));
  background: color-mix(in srgb, var(--suite-navigation-primary-soft-bg, var(--primary-soft)) 74%, transparent);
  outline: none;
}

.suite-management-tabs > .suite-management-tab.suite-segmented-option[data-state='active']:is(:is(:hover, .is-hover), :is(:focus-visible, .is-focus)),
.suite-management-tab.active:is(:is(:hover, .is-hover), :is(:focus-visible, .is-focus)) {
  color: var(--suite-navigation-primary-soft-color, var(--suite-segmented-active-color, var(--suite-primary-ink, var(--primary))));
}

.suite-management-tabs.has-tab-background > .suite-management-tab.suite-segmented-option[data-state='active']:not(.locked):is(:hover, .is-hover),
.suite-management-tabs.has-tab-background > .suite-management-tab.active:not(.locked):is(:hover, .is-hover),
.suite-management-tabs.has-tab-background > .suite-management-tab.suite-segmented-option[data-state='active']:not(.locked):is(:focus-visible, .is-focus),
.suite-management-tabs.has-tab-background > .suite-management-tab.active:not(.locked):is(:focus-visible, .is-focus) {
  background: transparent;
  box-shadow: none;
}

.suite-segmented-moving {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--suite-segmented-count, 2), minmax(var(--suite-segmented-moving-option-min-width, 86px), 1fr));
  gap: var(--suite-segmented-gap, 6px);
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.suite-management-tabs.suite-segmented-moving {
  display: grid;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.suite-segmented-moving::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: var(--suite-segmented-padding, 2px);
  bottom: var(--suite-segmented-padding, 2px);
  left: var(--suite-segmented-thumb-left, var(--suite-segmented-padding, 2px));
  width: var(--suite-segmented-thumb-width, calc(100% / var(--suite-segmented-count, 2) - 1px));
  border-radius: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-segmented-option, var(--suite-radius-segmented, var(--suite-radius-button, var(--suite-radius-control))))) - 3px));
  background: var(--suite-navigation-primary-soft-bg, var(--suite-segmented-active-bg, var(--primary-soft)));
  box-shadow: var(--suite-segmented-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
  pointer-events: none;
  transition: none;
}

.suite-segmented-moving[data-indicator-animate]::before {
  transition:
    left 180ms cubic-bezier(0.2, 0, 0, 1),
    width 180ms cubic-bezier(0.2, 0, 0, 1);
}

.suite-segmented-moving > button,
.suite-segmented-moving > [role='tab'],
.suite-segmented-moving > .suite-segmented-option,
.suite-segmented-moving > .suite-management-tab {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
}

.suite-segmented-moving > .active,
.suite-segmented-moving > [aria-selected='true'],
.suite-segmented-moving > [aria-pressed='true'],
.suite-segmented-moving > .suite-segmented-option[data-state='active'],
.suite-segmented-moving > .suite-management-tab.active {
  background: transparent;
  box-shadow: none;
  color: var(--suite-navigation-primary-soft-color, var(--suite-segmented-active-color, var(--suite-primary-ink, var(--primary))));
}

.suite-segmented-moving > button:is(:hover, .is-hover),
.suite-segmented-moving > button:is(:focus-visible, .is-focus),
.suite-segmented-moving > [role='tab']:is(:hover, .is-hover),
.suite-segmented-moving > [role='tab']:is(:focus-visible, .is-focus),
.suite-segmented-moving > .suite-management-tab:not(.locked):is(:hover, .is-hover),
.suite-segmented-moving > .suite-management-tab:not(.locked):is(:focus-visible, .is-focus) {
  background: color-mix(in srgb, var(--suite-navigation-primary-soft-bg, var(--suite-segmented-active-bg, var(--primary-soft))) 72%, transparent);
  outline: none;
}

.suite-segmented-moving > .active:is(:hover, .is-hover),
.suite-segmented-moving > .active:is(:focus-visible, .is-focus),
.suite-segmented-moving > [aria-selected='true']:is(:hover, .is-hover),
.suite-segmented-moving > [aria-selected='true']:is(:focus-visible, .is-focus),
.suite-segmented-moving > .suite-management-tab.active:not(.locked):is(:hover, .is-hover),
.suite-segmented-moving > .suite-management-tab.active:not(.locked):is(:focus-visible, .is-focus) {
  background: transparent;
  box-shadow: none;
  color: var(--suite-navigation-primary-soft-color, var(--suite-segmented-active-color, var(--suite-primary-ink, var(--primary))));
}

/* A selected tab and keyboard focus are independent states. Keep the existing
   selection fill while protecting the focus marker from hover/tray resets. */

.suite-segmented[role='tablist'] > :is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:is(:focus-visible, .is-focus) {
  outline: var(--suite-state-focus-ring-width, 3px) solid var(--suite-state-focus-ring-color, var(--suite-primary-ink, var(--primary))) !important;
  outline-offset: var(--suite-state-focus-ring-offset, 2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .suite-segmented-moving::before,
  .suite-dropdown-menu.open,
  .suite-dropdown-menu[aria-hidden='false'] {
    transition: none;
    animation: none;
  }
}

.suite-management-tab .suite-segmented-label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.suite-management-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.suite-management-action {
  appearance: none;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--suite-management-action-size, 28px);
  width: var(--suite-management-action-size, 28px);
  height: var(--suite-management-action-size, 28px);
  min-width: var(--suite-management-action-size, 28px);
  min-height: var(--suite-management-action-size, 28px);
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
  font: inherit;
  color: var(--suite-management-action-color, color-mix(in srgb, var(--text) 64%, var(--muted)));
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    color var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    transform var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease),
    box-shadow var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease);
}

.suite-management-action.primary {
  color: var(--suite-primary-ink, var(--primary));
}

.suite-management-action.danger {
  color: var(--danger);
}

.suite-management-action.export,
.suite-management-action.success {
  color: var(--success);
}

.suite-management-action:not(:disabled):hover,
.suite-management-action:not(:disabled):focus-visible {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--suite-primary-ink, var(--primary));
  outline: none;
  transform: translateY(-1px);
}

.suite-management-action.danger:not(:disabled):hover,
.suite-management-action.danger:not(:disabled):focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

.suite-management-action.export:not(:disabled):hover,
.suite-management-action.export:not(:disabled):focus-visible,
.suite-management-action.success:not(:disabled):hover,
.suite-management-action.success:not(:disabled):focus-visible {
  background: color-mix(in srgb, var(--success) 13%, transparent);
  color: var(--success);
}

.suite-management-action:not(:disabled):focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 24%, transparent);
}

.suite-management-action:not(:disabled):active {
  transform: translateY(0);
}

.suite-management-action:disabled,
.suite-management-action[aria-disabled='true'] {
  color: color-mix(in srgb, var(--muted) 54%, transparent);
  background: transparent;
  cursor: default;
  opacity: 0.52;
  transform: none;
  box-shadow: none;
}

.suite-management-action svg,
.suite-management-action .ui-icon {
  width: var(--suite-management-action-icon-size, var(--suite-action-icon-size, 16px));
  height: var(--suite-management-action-icon-size, var(--suite-action-icon-size, 16px));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  flex-shrink: 0;
}

.suite-tooltip-action::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  z-index: var(--suite-tooltip-z-index, 30);
  top: calc(100% + var(--suite-tooltip-offset, 8px));
  left: 50%;
  transform: translate(-50%, -2px);
  max-width: var(--suite-tooltip-max-width, 160px);
  padding: var(--suite-tooltip-padding, 5px 8px);
  border-radius: var(--suite-tooltip-radius, 6px);
  color: var(--suite-tooltip-color, #ffffff);
  background: var(--suite-tooltip-bg, rgba(15, 23, 42, 0.9));
  box-shadow: var(--suite-tooltip-shadow, 0 10px 28px rgba(15, 23, 42, 0.18));
  font-size: var(--suite-tooltip-font-size, var(--suite-type-caption));
  font-weight: var(--suite-tooltip-font-weight, 850);
  line-height: var(--suite-line-caption, 1.35);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.suite-tooltip-action:hover::after,
.suite-tooltip-action:focus-visible::after {
  display: block;
  opacity: 1;
  transform: translate(-50%, 0);
}

.suite-tooltip-action:disabled::after,
.suite-tooltip-action[aria-disabled='true']::after {
  display: none;
}

.suite-menu {
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-panel));
  /* Popup surface: --suite-dropdowns-surface-bg styles the trigger and may be transparent. */
  background: var(--suite-dropdowns-menu-surface-bg, var(--suite-dropdowns-strong-bg, var(--suite-dropdowns-surface-bg, var(--surface-strong))));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  box-shadow: var(--shadow-soft);
}

.suite-menu-popover {
  display: grid;
  gap: var(--suite-menu-popover-gap, var(--suite-space-2));
  padding: var(--suite-menu-popover-padding, var(--suite-space-2));
}

.suite-menu-popover-row {
  min-width: 0;
  min-height: var(--suite-menu-popover-row-height, var(--suite-dropdowns-height, var(--suite-control-height)));
  display: flex;
  align-items: var(--suite-dropdowns-align-items, center);
  justify-content: space-between;
  gap: var(--suite-menu-popover-row-gap, var(--suite-space-2));
  padding: var(--suite-menu-popover-row-padding, var(--suite-space-1) 0);
  border-bottom: var(--suite-menu-popover-row-border, 0);
}

.suite-menu-popover-section {
  min-width: 0;
  display: grid;
  gap: var(--suite-menu-popover-section-gap, var(--suite-space-2));
  padding: var(--suite-menu-popover-section-padding, var(--suite-space-2) 0);
  border-top: var(--suite-menu-popover-section-border, 1px solid var(--line));
}

.suite-menu-popover-section:first-child {
  border-top: 0;
}

.suite-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2);
  padding-bottom: var(--suite-menu-row-padding-bottom, var(--suite-space-2));
  border-bottom: 1px solid var(--line);
}

.suite-menu-row.is-last {
  padding-bottom: var(--suite-menu-row-last-padding-bottom, var(--suite-space-1));
  border-bottom: 0;
}

.suite-menu-label,
.suite-menu-value {
  color: var(--muted);
  line-height: var(--suite-line-caption);
}

.suite-menu-label {
  font-size: var(--suite-type-body);
  font-weight: var(--suite-menu-label-weight, 650);
  white-space: nowrap;
}

.suite-menu-value {
  font-size: var(--suite-type-caption);
  font-weight: var(--suite-menu-value-weight, 650);
}

.suite-menu-option {
  display: flex;
  width: 100%;
  min-height: var(--suite-dropdowns-height, var(--suite-control-height));
  align-items: var(--suite-dropdowns-align-items, center);
  justify-content: var(--suite-dropdowns-justify-content, flex-start);
  gap: var(--suite-space-2);
  border: 0;
  border-radius: max(0px, calc(var(--suite-dropdowns-radius, var(--suite-radius-control)) - 3px));
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--suite-type-body);
  padding: var(--suite-menu-option-padding, var(--suite-space-1) var(--suite-space-3));
  text-align: var(--suite-dropdowns-text-align, left);
  cursor: pointer;
  transition:
    border-color var(--suite-transition-fast, 120ms ease),
    background-color var(--suite-transition-fast, 120ms ease),
    color var(--suite-transition-fast, 120ms ease);
}

.suite-menu-option:hover,
.suite-menu-option:focus-visible,
.suite-menu-option.selected,
.suite-menu-option[aria-selected='true'] {
  background: var(--primary-soft);
  color: var(--suite-primary-ink, var(--primary));
  outline: none;
}

.suite-menu-option-card {
  min-width: 0;
  gap: var(--suite-menu-option-card-gap, var(--suite-space-3));
  padding: var(--suite-menu-option-card-padding, var(--suite-space-2) var(--suite-space-3));
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  color: var(--muted);
}

.suite-menu-option-card:hover,
.suite-menu-option-card:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--line));
  background: var(--surface-soft);
  color: var(--text);
}

.suite-menu-option-card.selected,
.suite-menu-option-card[aria-selected='true'] {
  border-color: color-mix(in srgb, var(--primary) 36%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 88%, var(--surface-strong));
  color: var(--suite-primary-ink, var(--primary));
  font-weight: 600;
}

.suite-menu-option-icon {
  display: inline-flex;
  width: var(--suite-menu-option-icon-slot, 1.25rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.suite-menu-option.selected .suite-menu-option-icon,
.suite-menu-option[aria-selected='true'] .suite-menu-option-icon {
  color: var(--suite-primary-ink, var(--primary));
}

.suite-menu-option-media {
  display: inline-flex;
  width: var(--suite-menu-option-media-width, 4rem);
  height: var(--suite-menu-option-media-height, 3rem);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: var(--surface-strong);
  color: var(--muted);
  object-fit: contain;
}

.suite-menu-option-media-placeholder {
  background: var(--surface-soft);
}

/* Record detail uses one stable content surface in all presentation modes. */

.suite-record-detail-slot,
.suite-record-detail-portal-host {
  display: contents;
}

.suite-record-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--suite-record-detail-backdrop-z-index, 1090);
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--suite-record-detail-backdrop-bg, rgb(15 23 42 / 42%));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--suite-transition-fast, 120ms ease);
}

.suite-record-detail-backdrop[data-open='true'] {
  opacity: 1;
  pointer-events: auto;
}

.suite-record-detail-surface {
  box-sizing: border-box;
  display: none;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-width: var(--suite-record-detail-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-record-detail-border-color, var(--line));
  border-radius: var(--suite-record-detail-radius, var(--suite-radius-main-panel, 20px));
  background: var(--suite-record-detail-opaque-bg, #ffffff);
  color: var(--text);
  box-shadow: var(--suite-record-detail-shadow, var(--shadow-soft));
  backdrop-filter: var(--suite-record-detail-backdrop, none);
  -webkit-backdrop-filter: var(--suite-record-detail-backdrop, none);
  isolation: isolate;
}

.suite-record-detail-surface::before {
  /* Keep personalized translucent fills above an opaque theme base. */
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: var(--suite-record-detail-surface-bg, transparent);
  pointer-events: none;
}

.suite-record-detail-surface.is-open {
  display: flex;
}

.suite-record-detail-surface.is-overlay {
  position: fixed;
  z-index: var(--suite-record-detail-z-index, 1100);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(
    var(--suite-record-detail-overlay-width, 560px),
    calc(100vw - (var(--suite-record-detail-overlay-inset, 24px) * 2))
  );
  max-height: calc(
    100dvh - (var(--suite-record-detail-overlay-inset, 24px) * 2)
  );
}

.suite-record-detail-surface.is-side-pane {
  position: relative;
  flex: 0 1 var(--suite-record-detail-side-pane-width, 420px);
  width: min(100%, var(--suite-record-detail-side-pane-width, 420px));
  align-self: stretch;
}

.suite-record-detail-surface.is-full-page {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Owner 2026-10-29 (shell-detail-one-frame): an in-frame detail is part of the page's one main frame and draws no frame of its
   own. Wide: a column after a divider. Narrow or phone: it replaces the frame's content and the title row starts with back.
   The frame already pads its outer edges, so the detail adds inset only after its divider. */

.suite-record-detail-surface.is-in-frame {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.suite-record-detail-surface.is-in-frame::before {
  content: none;
}

/* Owner 2026-10-29 (book-737): the divider has the same gap on both sides. The column keeps it before its divider too, so the
   list beside it needs no padding of its own (a page that adds one doubles the gap). */

.suite-record-detail-surface.is-in-frame.is-side-pane {
  --suite-record-detail-divider-gap: var(--suite-main-panel-padding-left, 22px);
  margin-inline-start: var(--suite-record-detail-divider-gap);
  border-inline-start: 1px solid var(--suite-record-detail-divider, var(--line));
}

.suite-record-detail-surface.is-in-frame.is-side-pane > .suite-record-detail-body {
  padding-inline-start: var(--suite-record-detail-divider-gap);
}

/* Owner 2026-10-29 (驗屋預覽卡): the title row's bottom line and the footer's top line start after the gap, like the content,
   instead of running into the divider; a margin keeps the line inside the inset where a padding would not. */

.suite-record-detail-surface.is-in-frame.is-side-pane > .suite-record-detail-header,
.suite-record-detail-surface.is-in-frame.is-side-pane > .suite-record-detail-footer {
  padding-inline-start: 0;
  margin-inline-start: var(--suite-record-detail-divider-gap);
}

.suite-record-detail-surface.is-in-frame > .suite-record-detail-header {
  padding-block-start: 0;
  padding-inline-end: 0;
}

.suite-record-detail-surface.is-in-frame > .suite-record-detail-body,
.suite-record-detail-surface.is-in-frame > .suite-record-detail-footer {
  padding-inline-end: 0;
  padding-block-end: 0;
}

.suite-record-detail-surface.is-in-frame.is-full-page > .suite-record-detail-header,
.suite-record-detail-surface.is-in-frame.is-full-page > .suite-record-detail-body,
.suite-record-detail-surface.is-in-frame.is-full-page > .suite-record-detail-footer {
  padding-inline-start: 0;
}

.suite-record-detail-surface.is-in-frame .suite-record-detail-heading {
  flex: 1 1 auto;
}

/* Owner 2026-10-29 (book-739, book-740): every toolbar row has a bottom line, and in one frame the list's toolbar line and the
   detail's title line sit at the same height. Measured from the row the owner approved (驗屋戶別搜尋列 .iv-bar): controls start
   at the row top, centred on one line, 12px below them, then the 1px line (43px in all). The list side uses
   .suite-in-frame-list-toolbar. */

.suite-record-detail-surface.is-in-frame > .suite-record-detail-header,
.suite-in-frame-list-toolbar {
  --suite-in-frame-toolbar-line-gap: var(--suite-space-3, 12px);
  box-sizing: border-box;
  min-block-size: calc(var(--suite-control-height, 30px) + var(--suite-in-frame-toolbar-line-gap) + 1px);
  align-items: center;
  padding-block: 0 var(--suite-in-frame-toolbar-line-gap);
}

.suite-in-frame-list-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--suite-space-2, 8px);
  border-bottom: 1px solid var(--suite-record-detail-divider, var(--line));
}

.suite-record-detail-back {
  flex: 0 0 auto;
}

.suite-record-detail-header,
.suite-record-detail-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--suite-space-3, 12px);
  padding: var(--suite-record-detail-header-padding, 12px var(--suite-main-panel-padding-right, 22px) 12px var(--suite-main-panel-padding-left, 22px));
}

/* Owner 2026-10-29 (book-721): the detail header is one row; the meta follows the title on the same line. */

.suite-record-detail-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--suite-record-detail-divider, var(--line));
}

.suite-record-detail-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--suite-record-detail-divider, var(--line));
}

.suite-record-detail-heading {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: var(--suite-space-2, 8px);
}

.suite-record-detail-heading > strong,
.suite-record-detail-heading > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-record-detail-heading > strong {
  flex: 0 1 auto;
}

.suite-record-detail-heading > small {
  flex: 1 1 0;
  color: var(--muted);
}

.suite-record-detail-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--suite-space-2, 8px);
}

.suite-record-detail-mode-switch {
  white-space: nowrap;
}

.suite-record-detail-close {
  flex: 0 0 auto;
}

.suite-record-detail-body {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--suite-record-detail-body-padding, var(--suite-main-panel-padding-left, 22px));
}

@media (max-width: 640px) {
  .suite-record-detail-surface.is-overlay {
    width: calc(100vw - (var(--suite-record-detail-overlay-mobile-inset, 8px) * 2));
    max-height: calc(100dvh - (var(--suite-record-detail-overlay-mobile-inset, 8px) * 2));
  }

  /* One row on phones too: the title truncates and the mode switch shows icons only. */
  .suite-record-detail-mode-switch .suite-segmented-option span.inline-flex {
    font-size: 0;
    gap: 0;
  }
}

.suite-outline-tree {
  min-width: 0;
}

.suite-outline-row {
  min-width: 0;
  outline: none;
}

.suite-outline-row:focus-visible {
  box-shadow: var(--suite-shared-shadow-focus-ring, 0 0 0 2px var(--primary));
}

.suite-icon-button.suite-data-table-column-filter-trigger {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.suite-icon-button.suite-data-table-column-filter-trigger:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover),
.suite-icon-button.suite-data-table-column-filter-trigger:is(:focus-visible, .is-focus),
.suite-data-table-column-filter.is-active .suite-icon-button.suite-data-table-column-filter-trigger,
.suite-data-table-column-filter.is-open .suite-icon-button.suite-data-table-column-filter-trigger {
  border-color: transparent;
  background: transparent;
  color: var(--suite-primary-ink, var(--primary));
  box-shadow: none;
}

/* Uniform manager-visible primitive state surfaces. Base geometry, spacing,
   border and shadow stay owned by the default state; only foreground and fill
   vary here. Interaction feedback itself remains fixed Suite runtime behavior. */

.suite-button:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover) {
  color: var(--suite-buttons-hover-on-surface, var(--suite-buttons-on-surface, var(--text)));
  background: var(--suite-buttons-hover-surface-bg, var(--suite-buttons-surface-bg, var(--surface-soft)));
}

.suite-button:is(:focus-visible, .is-focus) {
  color: var(--suite-buttons-focus-on-surface, var(--suite-buttons-on-surface, var(--text)));
  background: var(--suite-buttons-focus-surface-bg, var(--suite-buttons-surface-bg, var(--surface-strong)));
}

.suite-button[aria-busy='true'],
.suite-button.is-loading {
  color: var(--suite-buttons-loading-on-surface, var(--suite-buttons-on-surface, var(--text)));
  background: var(--suite-buttons-loading-surface-bg, var(--suite-buttons-surface-bg, var(--surface-strong)));
}

.suite-button:is(:disabled, .is-disabled),
.suite-button[aria-disabled='true'] {
  color: var(--suite-buttons-disabled-on-surface, var(--suite-buttons-on-surface, var(--muted)));
  background: var(--suite-buttons-disabled-surface-bg, var(--suite-buttons-surface-bg, var(--surface-soft)));
  opacity: var(--suite-buttons-disabled-opacity, 0.56);
}

.suite-icon-button:not(:is(:disabled, .is-disabled)):is(:hover, .is-hover) {
  color: var(--suite-icon-button-hover-on-surface, var(--suite-icon-button-on-surface, var(--text)));
  background: var(--suite-icon-button-hover-surface-bg, var(--suite-icon-button-surface-bg, var(--surface-soft)));
}

.suite-icon-button:is(:focus-visible, .is-focus) {
  color: var(--suite-icon-button-focus-on-surface, var(--suite-icon-button-on-surface, var(--text)));
  background: var(--suite-icon-button-focus-surface-bg, var(--suite-icon-button-surface-bg, var(--surface-strong)));
}

.suite-icon-button[aria-busy='true'],
.suite-icon-button.is-loading {
  color: var(--suite-icon-button-loading-on-surface, var(--suite-icon-button-on-surface, var(--text)));
  background: var(--suite-icon-button-loading-surface-bg, var(--suite-icon-button-surface-bg, var(--surface-strong)));
}

.suite-icon-button:is(:disabled, .is-disabled),
.suite-icon-button[aria-disabled='true'] {
  color: var(--suite-icon-button-disabled-on-surface, var(--suite-icon-button-on-surface, var(--muted)));
  background: var(--suite-icon-button-disabled-surface-bg, var(--suite-icon-button-surface-bg, var(--surface-soft)));
}

.suite-status-pill[aria-busy='true'],
.suite-status-pill.is-loading {
  color: var(--suite-status-loading-on-surface, var(--suite-status-on-surface, var(--muted)));
  background: var(--suite-status-loading-surface-bg, var(--suite-status-surface-bg, var(--surface-soft)));
}

.suite-navigation-item:is(:hover, .is-hover):not([aria-disabled='true']):not([aria-current='page']) {
  color: var(--suite-navigation-item-hover-on-surface, var(--suite-navigation-item-on-surface, var(--text)));
  background: var(--suite-navigation-item-hover-surface-bg, var(--suite-navigation-item-surface-bg, var(--surface-soft)));
}

.suite-navigation-item[aria-current='page'],
.suite-navigation-item.is-selected {
  color: var(--suite-navigation-item-selected-on-surface, var(--suite-navigation-item-on-primary, var(--primary)));
  background: var(--suite-navigation-item-selected-surface-bg, var(--suite-navigation-item-primary-bg, var(--primary-soft)));
}

.suite-navigation-item:is(:focus-visible, .is-focus) {
  color: var(--suite-navigation-item-focus-on-surface, var(--suite-navigation-item-on-surface, var(--text)));
  background: var(--suite-navigation-item-focus-surface-bg, var(--suite-navigation-item-surface-bg, var(--surface-strong)));
}

.suite-navigation-item[aria-disabled='true'],
.suite-navigation-item:is(:disabled, .is-disabled) {
  color: var(--suite-navigation-item-disabled-on-surface, var(--suite-navigation-item-on-surface, var(--muted)));
  background: var(--suite-navigation-item-disabled-surface-bg, var(--suite-navigation-item-surface-bg, var(--surface-soft)));
}

:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea):is(:focus-visible, .is-focus) {
  color: var(--suite-forms-focus-on-surface, var(--suite-forms-on-surface, var(--text)));
  background: var(--suite-forms-focus-surface-bg, var(--suite-forms-surface-bg, var(--surface)));
}

:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea)[readonly],
:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea).locked {
  color: var(--suite-forms-readonly-on-surface, var(--suite-forms-on-surface, var(--muted)));
  background: var(--suite-forms-readonly-surface-bg, var(--suite-forms-surface-bg, var(--surface-soft)));
}

:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea)[aria-invalid='true'],
:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea).is-invalid {
  color: var(--suite-forms-invalid-on-surface, var(--suite-forms-on-surface, var(--text)));
  background: var(--suite-forms-invalid-surface-bg, color-mix(in srgb, var(--danger) 8%, var(--surface-strong)));
  border-color: var(--suite-form-invalid-border-color, var(--danger));
  box-shadow: inset 0 0 0 2px var(--suite-form-invalid-border-color, var(--danger));
}

:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea):is([aria-invalid='true'], .is-invalid):is(:focus-visible, .is-focus) {
  box-shadow: inset 0 0 0 2px var(--suite-form-invalid-border-color, var(--danger)),
    0 0 0 3px var(--suite-form-invalid-focus-ring-color, var(--danger));
}

:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea)[aria-busy='true'],
:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea).is-loading {
  color: var(--suite-forms-loading-on-surface, var(--suite-forms-on-surface, var(--muted)));
  background: var(--suite-forms-loading-surface-bg, var(--suite-forms-surface-bg, var(--surface-soft)));
}

:is(.suite-field-control, .suite-form-control, .suite-form-select, .suite-form-textarea):is(:disabled, .is-disabled) {
  color: var(--suite-forms-disabled-on-surface, var(--suite-forms-on-surface, var(--muted)));
  background: var(--suite-forms-disabled-surface-bg, var(--suite-forms-surface-bg, var(--surface-soft)));
}

.suite-range-input:is(:active, .is-dragging) {
  color: var(--suite-slider-dragging-on-surface, var(--suite-slider-on-surface, var(--primary)));
  background: var(--suite-slider-dragging-surface-bg, var(--suite-slider-surface-bg, transparent));
}

.suite-range-input:is(:focus-visible, .is-focus) {
  outline: var(--suite-buttons-focus-ring-width, 3px) solid color-mix(in srgb, var(--primary) var(--suite-buttons-focus-ring-alpha, 32%), transparent);
  outline-offset: var(--suite-buttons-focus-ring-offset, 2px);
  color: var(--suite-slider-focus-on-surface, var(--suite-slider-on-surface, var(--primary)));
  background: var(--suite-slider-focus-surface-bg, var(--suite-slider-surface-bg, transparent));
}

.suite-range-input:is(:disabled, .is-disabled),
.suite-range-input.is-disabled {
  color: var(--suite-slider-disabled-on-surface, var(--suite-slider-on-surface, var(--muted)));
  background: var(--suite-slider-disabled-surface-bg, var(--suite-slider-surface-bg, transparent));
}

/* Shared structured-list skin: consumed by Shell and source-mounted features.
   GLOBAL_UI_STYLING_GUIDELINES §3-D.1: a list has no frame; rows are separated
   only by a bottom divider, with no gap and no radius between rows.
   A list stretched to fill its pane keeps natural row heights, stacked from the top. */

.suite-ui-components-data-list {
  width: min(100%, 500px);
  display: grid;
  align-content: start;
  gap: 0;
  border: 0;
  border-radius: 0;
}

.suite-ui-components-data-row {
  min-height: var(--suite-data-rows-height, 30px);
  display: flex;
  align-items: var(--suite-data-rows-align-items, center);
  justify-content: var(--suite-data-rows-justify-content, space-between);
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-bottom: var(--suite-data-rows-border-bottom-width, 1px) solid var(--suite-data-rows-border-color, var(--line));
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: var(--suite-data-rows-backdrop, none);
  backdrop-filter: var(--suite-data-rows-backdrop, none);
  text-align: var(--suite-data-rows-text-align, left);
  color: var(--suite-data-rows-text-color, var(--text));
}

.suite-ui-components-data-row-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suite-ui-components-data-row-selectable {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.suite-ui-components-data-row-selectable:disabled {
  cursor: not-allowed;
}

.suite-ui-components-data-row-selectable[aria-disabled="true"] {
  cursor: not-allowed;
}

.suite-ui-components-data-row-selectable[aria-readonly="true"] {
  cursor: default;
}

.suite-ui-components-data-row-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.suite-ui-components-data-row-action.suite-icon-button {
  flex: 0 0 auto;
}

.suite-ui-components-data-row-readonly,
.suite-ui-components-data-row-activation {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
}

.suite-ui-components-data-row-activation {
  justify-self: end;
}

.suite-ui-components-data-row small {
  color: color-mix(in srgb, var(--muted) 72%, var(--text));
}

.suite-ui-components-data-list.is-hover .suite-ui-components-data-row:first-child,
.suite-ui-components-data-row.selected {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
}

.suite-ui-components-data-list.is-pressed .suite-ui-components-data-row:first-child {
  transform: translateY(1px);
}

.suite-ui-components-data-list.is-focus-visible .suite-ui-components-data-row:first-child,
.suite-ui-components-data-row-selectable:focus-visible,
.suite-ui-components-data-row-action:focus-visible {
  outline: 2px solid var(--focus-ring, var(--primary));
  outline-offset: 2px;
}

.suite-ui-components-data-list.is-warning .suite-ui-components-data-row:first-child {
  border-color: var(--warning);
}

.suite-ui-components-data-list.is-error .suite-ui-components-data-row:first-child {
  border-color: var(--danger);
}

.suite-ui-components-data-list.is-disabled {
  filter: saturate(0.45);
}

.suite-structured-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.suite-list-item:has(> .suite-list-item-action) {
  padding: 0;
}

.suite-list-item-action {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: var(--suite-data-rows-height, 30px);
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--suite-type-body);
  line-height: var(--suite-line-body, 1.5);
  text-align: inherit;
  cursor: pointer;
}

.suite-list-item-action[data-multiline="true"] {
  min-height: max(58px, var(--suite-data-rows-height, 30px));
}

.suite-list-item-action > .suite-ui-components-data-row-content {
  flex: 1 1 0%;
  overflow-wrap: anywhere;
}

.suite-list-item-primary {
  font-weight: var(--suite-body-font-weight, 400);
}

.suite-list-item-secondary {
  font-family: var(--suite-annotation-font-family, inherit);
  font-size: var(--suite-annotation-size-px, var(--suite-type-caption));
  font-weight: var(--suite-annotation-font-weight, 400);
  line-height: var(--suite-annotation-line-height, var(--suite-line-caption, 1.45));
}

.suite-list-item-leading,
.suite-list-item-trailing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.suite-list-item-leading {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--suite-primary-ink, var(--primary));
}

.suite-list-item-leading > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.suite-list-item-trailing {
  color: var(--muted);
}

.suite-list-item-action:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.suite-list-item-action:focus-visible {
  outline: 2px solid var(--focus-ring, var(--primary));
  outline-offset: 2px;
}

.suite-list-item-action:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Carrier surfaces and scroll clipping are supplied by the containing panel. */

.suite-feedback-state-block {
  display: flex;
  align-items: center;
  gap: var(--suite-space-2);
  min-width: 0;
  color: var(--text);
}

.suite-feedback-state-block > div { min-width: 0; flex: 1; }

.suite-feedback-state-block p { margin: 0; overflow-wrap: anywhere; }

.suite-feedback-state-block[data-feedback-state='error'] { color: var(--danger); }

.suite-feedback-state-block[data-feedback-mode='inline'] { display: inline-flex; }

/* The whole content area is this state: one centred title, at most one short line and its next-step button. */

.suite-feedback-state-block[data-feedback-mode='page'] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--suite-space-3, 12px);
  min-height: min(60vh, 420px);
  padding: var(--suite-space-6, 24px) var(--suite-space-4, 16px);
  text-align: center;
}

.suite-feedback-state-block[data-feedback-mode='page'] > div { flex: 0 1 auto; display: grid; gap: var(--suite-space-1, 4px); justify-items: center; max-width: 36em; }

.suite-feedback-state-block[data-feedback-mode='page'] [data-component-part='title'] { font-size: var(--suite-type-title, 16px); font-weight: 700; color: var(--text); }

.suite-feedback-state-block[data-feedback-mode='page'] [data-component-part='message'] { color: var(--muted); }

/* Page footer (forms, tables, tools): status on the left, actions on the right with the one primary action last; stays in view while the form scrolls. */

.suite-page-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--suite-space-2, 8px);
  margin-top: auto;
  padding-block: var(--suite-space-2, 8px);
  border-top: 1px solid var(--line);
  background: var(--suite-panel-bg, var(--surface));
}

.suite-page-footer > :first-child:not([data-suite-footer-actions]) { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--muted); }

.suite-page-footer > [data-suite-footer-actions] { display: flex; align-items: center; gap: var(--suite-space-2, 8px); flex: 0 0 auto; margin: 0 0 0 auto; }

.suite-style-block {
  min-width: 0;
  padding: var(--suite-space-3, 12px);
  border: var(--suite-block-effective-border-width, 1px) solid color-mix(in srgb, var(--line-strong, var(--line)) var(--suite-block-border-strength, 50%), transparent);
  border-radius: var(--suite-radius-panel, 8px);
  background: var(--suite-block-background, var(--surface-soft, var(--surface-strong)));
  color: var(--text);
  box-shadow: none;
  overflow-wrap: anywhere;
}

[data-suite-block-fill='none'] {
  --suite-block-background: transparent;
  --suite-block-accent-weight: 0%;
  --suite-block-accent-base: transparent;
  --suite-block-solid-text-weight: 0%;
}

[data-suite-block-fill='soft'] {
  --suite-block-background: var(--surface-soft);
  --suite-block-accent-weight: 10%;
  --suite-block-accent-base: var(--surface-strong);
  --suite-block-solid-text-weight: 0%;
}

[data-suite-block-fill='solid'] {
  --suite-block-background: var(--surface-strong);
  --suite-block-accent-weight: 100%;
  --suite-block-accent-base: transparent;
  --suite-block-solid-text-weight: 100%;
}

[data-suite-block-border='none'] { --suite-block-effective-border-width: 0px; }

[data-suite-block-border='full'] { --suite-block-effective-border-width: var(--suite-block-border-width, 1px); }

.suite-style-block[data-suite-accent-block='1'] { --suite-block-accent: var(--suite-secondary-accent-1); --suite-block-on-color: var(--suite-secondary-accent-on-color-1); }

.suite-style-block[data-suite-accent-block='2'] { --suite-block-accent: var(--suite-secondary-accent-2); --suite-block-on-color: var(--suite-secondary-accent-on-color-2); }

.suite-style-block[data-suite-accent-block='3'] { --suite-block-accent: var(--suite-secondary-accent-3); --suite-block-on-color: var(--suite-secondary-accent-on-color-3); }

.suite-style-block[data-suite-accent-block='4'] { --suite-block-accent: var(--suite-secondary-accent-4); --suite-block-on-color: var(--suite-secondary-accent-on-color-4); }

.suite-style-block[data-suite-accent-block] {
  background: color-mix(in srgb, var(--suite-block-accent) var(--suite-block-accent-weight, 10%), var(--suite-block-accent-base, var(--surface-strong)));
  color: color-mix(in srgb, var(--suite-block-on-color) var(--suite-block-solid-text-weight, 0%), var(--text));
  border-color: color-mix(in srgb, var(--suite-block-accent) var(--suite-block-border-strength, 50%), var(--line));
}

.suite-style-block .suite-style-block {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.suite-button-primary:where(:not(:is(:disabled, .is-disabled)):not([aria-disabled='true'])),
.suite-button.suite-button-primary:where(:not(:is(:disabled, .is-disabled)):not([aria-disabled='true'])),
.suite-button-primary:where(:not(:is(:disabled, .is-disabled)):not([aria-disabled='true'])):is(:focus-visible, .is-focus),
.suite-button.suite-button-primary:where(:not(:is(:disabled, .is-disabled)):not([aria-disabled='true'])):is(:focus-visible, .is-focus) {
  background: var(--suite-primary-action-bg, var(--primary));
  border-color: var(--suite-primary-action-bg, var(--primary));
  color: var(--suite-primary-action-text, var(--suite-primary-on-color, #ffffff));
  opacity: 1;
}

.suite-button.suite-button-primary:not(:is(:disabled, .is-disabled)):where(:not([aria-disabled='true'])):is(:hover, .is-hover) {
  background: var(--suite-primary-action-hover-bg, var(--suite-primary-action-bg, var(--primary)));
  border-color: var(--suite-primary-action-hover-bg, var(--suite-primary-action-bg, var(--primary)));
  color: var(--suite-primary-action-text, var(--suite-primary-on-color, #ffffff));
}

.suite-button.suite-button-primary:not(:is(:disabled, .is-disabled)):where(:not([aria-disabled='true'])):active {
  background: var(--suite-primary-action-active-bg, var(--suite-primary-action-bg, var(--primary)));
  border-color: var(--suite-primary-action-active-bg, var(--suite-primary-action-bg, var(--primary)));
}

.suite-navigation-item[aria-current='page'],
.suite-navigation-item.is-selected {
  color: var(--suite-primary-selected-ink, var(--suite-primary-ink, var(--primary)));
}

.suite-navigation-item:is(:focus-visible, .is-focus) {
  outline: 2px solid var(--suite-primary-ink, var(--primary));
  outline-offset: 2px;
}

.suite-button,
.suite-navigation-item,
.suite-tab-item {
  font-size: max(var(--suite-critical-label-min-size), var(--suite-type-body));
  font-weight: 700;
  line-height: 1.4;
}

/* A long action label may grow vertically when its available width contracts. */

.suite-button.suite-button-wrap-label {
  height: auto;
  min-height: var(--suite-button-height, var(--suite-control-height));
  min-width: 0;
  padding-block: var(--suite-space-2, 8px);
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* BEGIN SUITE_ATTACHED_TABS_CSS */

/* Primary tabs sit above their content surface. Radius follows the existing
   appearance control; the lower corners curve outward like Chromium tabs. */

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) {
  --suite-attached-tab-radius: var(--suite-primary-tabs-radius, calc(var(--suite-tab-item-radius, 20px) * .5));
  --suite-attached-tab-height: max(32px, calc(var(--suite-control-height, 30px) + 6px));
  --suite-attached-tab-surface: var(--suite-primary-tabs-surface, var(--suite-panel-bg, var(--surface)));
  --suite-attached-tab-line: var(--suite-panel-border-color, var(--line));
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] {
  display: flex !important;
  align-items: stretch !important;
  min-height: var(--suite-attached-tab-height) !important;
  gap: 0 !important;
  padding: 0 calc(var(--suite-attached-tab-radius) * 2) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; scrollbar-width: none;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] {
  display: flex !important;
  align-items: stretch !important;
  min-height: var(--suite-attached-tab-height) !important;
  gap: 0 !important;
  padding: 0 calc(var(--suite-attached-tab-radius) * 2) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; scrollbar-width: none;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist']::-webkit-scrollbar,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist']::-webkit-scrollbar { display: none; }

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation]::-webkit-scrollbar,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation]::-webkit-scrollbar { display: none; }

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > .suite-segmented-moving[role='tablist']::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-segmented-moving[role='tablist']::before { display: none !important; }

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation]:is(.suite-segmented-moving)::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation]:is(.suite-segmented-moving)::before { display: none !important; }

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab'],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab'] {
  position: relative;
  box-sizing: border-box;
  height: auto !important;
  min-height: var(--suite-attached-tab-height) !important;
  max-height: none !important;
  min-width: min(104px, 100%);
  flex: 0 0 auto;
  padding: 0 var(--suite-space-5, 20px) !important;
  border: 1px solid transparent !important;
  border-radius: var(--suite-attached-tab-radius) var(--suite-attached-tab-radius) 0 0 !important;
  background: transparent !important;
  color: var(--suite-tab-item-on-surface, var(--text)) !important;
  box-shadow: none !important;
  font-weight: var(--suite-primary-tab-font-weight, 650) !important;
  white-space: nowrap;
  overflow-wrap: normal;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab),
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]) {
  position: relative;
  box-sizing: border-box;
  height: auto !important;
  min-height: var(--suite-attached-tab-height) !important;
  max-height: none !important;
  flex: 0 0 auto;
  padding: 0 var(--suite-space-5, 20px) !important;
  border: 1px solid transparent !important;
  border-radius: var(--suite-attached-tab-radius) var(--suite-attached-tab-radius) 0 0 !important;
  background: transparent !important;
  color: var(--suite-tab-item-on-surface, var(--text)) !important;
  box-shadow: none !important;
  font-weight: var(--suite-primary-tab-font-weight, 650) !important;
  white-space: nowrap;
  overflow-wrap: normal;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):not(:where(.suite-icon-button, .suite-button-icon)),
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):not(:where(.suite-icon-button, .suite-button-icon)) { min-width: min(104px, 100%); }

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):is(.suite-icon-button, .suite-button-icon),
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):is(.suite-icon-button, .suite-button-icon) {
  inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  min-inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  min-width: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  padding-inline: 0 !important;
  justify-content: center;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab'][aria-selected='true'],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab'][aria-selected='true'] {
  z-index: 1;
  border-color: var(--suite-attached-tab-line) !important;
  border-block-end: 0 !important;
  margin-block-end: 0 !important;
  padding-block-end: 0 !important;
  background: var(--suite-attached-tab-surface) !important;
  color: var(--suite-primary-selected-ink, var(--suite-primary-ink, var(--primary))) !important;
  box-shadow: none !important;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page'],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page'],
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page']),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page']) {
  z-index: 1;
  border-color: var(--suite-attached-tab-line) !important;
  border-block-end: 0 !important;
  margin-block-end: 0 !important;
  padding-block-end: 0 !important;
  background: var(--suite-attached-tab-surface) !important;
  color: var(--suite-primary-selected-ink, var(--suite-primary-ink, var(--primary))) !important;
  box-shadow: none !important;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab']:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']):hover,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab']:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']):hover {
  background: color-mix(in srgb, var(--text) 9%, transparent) !important;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):not([aria-current='page']):not([aria-selected='true']):not(:disabled):not([aria-disabled='true']):hover,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):not([aria-current='page']):not([aria-selected='true']):not(:disabled):not([aria-disabled='true']):hover,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):not([aria-current='page']):not([aria-selected='true']):not(:disabled):not([aria-disabled='true']):hover,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):not([aria-current='page']):not([aria-selected='true']):not(:disabled):not([aria-disabled='true']):hover {
  background: color-mix(in srgb, var(--text) 9%, transparent) !important;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab']:is(:disabled, [aria-disabled='true']),
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab']:is(:disabled, [aria-disabled='true']) {
  color: var(--suite-tab-item-disabled-color, var(--muted)) !important;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):is(:disabled, [aria-disabled='true']),
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab):is(:disabled, [aria-disabled='true']),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is(:disabled, [aria-disabled='true']),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is(:disabled, [aria-disabled='true']) {
  color: var(--suite-tab-item-disabled-color, var(--muted)) !important;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab'] .suite-segmented-label,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab'] > .suite-segmented-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  overflow-wrap: normal;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab) .suite-segmented-label,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab) .suite-segmented-label {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* The primary strip is outside the main content frame. Its active silhouette
   overlaps the content's top rule by one pixel to avoid a fractional-scale seam. */

.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) {
  align-items: stretch;
  min-block-size: var(--suite-attached-tab-height) !important;
  padding: 0 !important;
  margin-block: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading {
  align-self: stretch;
  align-items: flex-end;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :is(.suite-container-header-context, .suite-container-header-actions) {
  flex: 0 0 auto;
  padding-block: 0;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > > .suite-container-header-leading > [role='tablist'],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > > [role='tablist'],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > > [role='tablist'] {
  align-self: flex-end;
  margin-block: 0 !important;
  width: 100%;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation],
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] {
  align-self: flex-end;
  margin-block: 0 !important;
  width: 100%;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab'][aria-selected='true']::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab'][aria-selected='true']::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab'][aria-selected='true']::after,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab'][aria-selected='true']::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: var(--suite-attached-tab-radius);
  height: var(--suite-attached-tab-radius);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::after,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::after,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::before,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::after,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::before,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: var(--suite-attached-tab-radius);
  height: var(--suite-attached-tab-radius);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab'][aria-selected='true']::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab'][aria-selected='true']::before {
  left: calc(0px - var(--suite-attached-tab-radius));
  background: radial-gradient(circle at 0 0, transparent var(--suite-attached-tab-radius), var(--suite-attached-tab-surface) var(--suite-attached-tab-radius));
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::before,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::before,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::before,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::before {
  left: calc(0px - var(--suite-attached-tab-radius));
  background: radial-gradient(circle at 0 0, transparent var(--suite-attached-tab-radius), var(--suite-attached-tab-surface) var(--suite-attached-tab-radius));
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > [role='tablist'] > [role='tab'][aria-selected='true']::after,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > [role='tablist'] > [role='tab'][aria-selected='true']::after {
  right: calc(0px - var(--suite-attached-tab-radius));
  background: radial-gradient(circle at 100% 0, transparent var(--suite-attached-tab-radius), var(--suite-attached-tab-surface) var(--suite-attached-tab-radius));
}

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::after,
.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(.suite-container-header-leading) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *))[data-suite-primary-navigation] > :is(.suite-pill-tab, .suite-management-tab)[aria-current='page']::after,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::after,
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > :where(:not(.suite-workspace-body *, .suite-workspace-pane:not([data-suite-workspace-pane='content']) *)):is([role='tablist'],[data-suite-primary-navigation]) > :is(.suite-button,[role='tab']):is(.suite-pill-tab,.suite-management-tab):is([aria-selected],[aria-current]):is([aria-selected='true'],[aria-current='page'])::after {
  right: calc(0px - var(--suite-attached-tab-radius));
  background: radial-gradient(circle at 100% 0, transparent var(--suite-attached-tab-radius), var(--suite-attached-tab-surface) var(--suite-attached-tab-radius));
}

/* Primary body assembly: the adjacent body alone paints the attached surface.
   Layouts below are explicit structural carriers, never arbitrary
   descendants. Pane selectors require a declared region; semantic cards opt out. */

.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) {
  --suite-attached-tab-surface: var(--suite-primary-tabs-surface, var(--suite-panel-bg, var(--surface)));
  background: var(--suite-attached-tab-surface) !important;
  margin-block-start: 0 !important;
  border-block-start: 0 !important;
}

.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is(.suite-route-layout, .suite-workspace) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Only the admitted pane layouts lose their inter-pane gap; content spacing stays local. */

.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout):where(.suite-route-layout, .suite-workspace),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is(.suite-route-layout, .suite-workspace) {
  gap: 0 !important;
}

/* Static layouts alone use pane borders; controller modes own their divider paint. */

.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout):where(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):not([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):not([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) {
  border-inline-start: 1px solid var(--line) !important;
}

/* Static bottom panels separate declared panes horizontally. */

.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout):where(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):where([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):where([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) {
  border-inline-start: 0 !important;
  border-block-start: 1px solid var(--line) !important;
}

/* Consumers put status first in the existing body; never reorder domain content. */

.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > .suite-primary-body-status {
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* END SUITE_ATTACHED_TABS_CSS */

/* BEGIN SUITE_ADAPTIVE_CHOICE_CSS */

[data-suite-adaptive-choice][data-suite-adaptive-choice] {
  position: relative;
  min-inline-size: 0 !important;
  max-inline-size: 100%;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

/* No-wrap also covers rows a consumer lays out as an auto-fit grid: one column per option. */

[data-suite-adaptive-choice][data-suite-adaptive-choice]:not([aria-orientation='vertical']) {
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: minmax(0, 1fr);
}

[data-suite-adaptive-choice] > [data-suite-adaptive-choice-item] {
  flex: 0 0 auto !important;
}

[data-suite-adaptive-choice] > [data-suite-choice-presentation-hidden='true'] {
  display: none !important;
}

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-adaptive-choice='collapsed'] {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

[data-suite-adaptive-choice='collapsed']::before { display: none !important; }

/* Installed adaptive current items outrank hosted tab no-shrink rules in either
   stylesheet order. Keep this priority specific to collapsed/single flex. */

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-adaptive-choice='collapsed'] > [data-suite-adaptive-choice-item] {
  flex: 0 1 auto !important;
  inline-size: max-content !important;
}

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-count='1'] > [data-suite-adaptive-choice-item] { flex: 1 1 0 !important; }

[data-suite-adaptive-choice='collapsed'] > [data-suite-adaptive-choice-item],
[data-suite-adaptive-choice][data-suite-choice-count='1'] > [data-suite-adaptive-choice-item] {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  max-block-size: none !important;
  min-block-size: var(--suite-control-height, 30px);
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
}

[data-suite-adaptive-choice][data-suite-adaptive-choice='collapsed'] > [data-suite-adaptive-choice-item] :is(.suite-segmented-label, .suite-button-label),
[data-suite-adaptive-choice][data-suite-choice-count='1'] > [data-suite-adaptive-choice-item] :is(.suite-segmented-label, .suite-button-label) {
  min-inline-size: 0;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  display: block !important;
  text-align: start;
  line-height: var(--suite-line-body, 1.5) !important;
}

[data-suite-segmented-auto][data-suite-choice-grid-allocation='true'][data-suite-choice-measuring='true'] {
  inline-size: auto !important;
  justify-self: stretch !important;
}

/* DOM-discovered choices may contain raw text; retain their original nodes. */

[data-suite-segmented-auto][data-suite-choice-presentation='icon'] > button:has(svg, .suite-segmented-icon) {
  font-size: 0 !important;
}

[data-suite-segmented-auto][data-suite-choice-presentation='icon'] > button:has(svg, .suite-segmented-icon) > :not(svg):not(.suite-segmented-icon):not(:has(svg)):not(.suite-choice-disclosure) {
  display: none !important;
}

[data-suite-segmented-auto][data-suite-choice-presentation='icon'] > button :is(svg, .suite-segmented-icon, .suite-choice-disclosure) {
  font-size: var(--suite-font-size, 14px);
}

[data-suite-adaptive-choice] .suite-choice-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

[data-suite-adaptive-choice][data-suite-choice-presentation='icon'] > [data-suite-choice-icon='true'] .suite-segmented-label { display: none !important; }

/* Disclosure is an owned child inside the original button. Attached tabs
   retain both decorative joining pseudos, with no competing ::after caret. */

[data-suite-adaptive-choice] > [data-suite-adaptive-choice-item] > .suite-choice-disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 1em;
  margin-inline-start: var(--suite-space-2, 8px);
  line-height: 1;
  pointer-events: none;
}

[data-suite-choice-measuring='true'] > [data-suite-adaptive-choice-item] > .suite-choice-disclosure { display: none; }

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-measuring='true'] > [data-suite-adaptive-choice-item] {
  display: inline-flex !important;
  position: absolute !important;
  visibility: hidden !important;
  inline-size: max-content !important;
  max-inline-size: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-measuring='true'] > [data-suite-adaptive-choice-item] .suite-segmented-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-measuring='true'] > [data-suite-adaptive-choice-item][hidden] { display: none !important; }

.suite-adaptive-choice-menu {
  background-color: var(--suite-solid-surface-bg, #fff);
  background-image: linear-gradient(var(--suite-dropdowns-surface-bg, transparent), var(--suite-dropdowns-surface-bg, transparent));
  position: fixed;
  z-index: var(--suite-dropdown-z-index, 1000);
  inline-size: max-content;
  overflow: auto;
  box-sizing: border-box;
  margin: 0;
  inset: auto;
}

.suite-adaptive-choice-menu > .suite-menu-option {
  white-space: normal;
  overflow-wrap: anywhere;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.suite-adaptive-choice-menu > [aria-checked='true'] {
  color: var(--suite-primary-ink, var(--primary));
  background: var(--primary-soft);
}

/* Intrinsic form wrapping follows the containing field and current font scale. */

.suite-responsive-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--suite-space-2, 8px) var(--suite-space-3, 12px);
  min-inline-size: 0;
  max-inline-size: 100%;
}

.suite-responsive-field__label {
  flex: 1 0 10em;
  min-inline-size: min(100%, 10em);
  overflow-wrap: break-word;
  white-space: normal;
}

.suite-responsive-field__control {
  display: flex;
  flex: 1 0 12em;
  min-inline-size: min(100%, 12em);
  max-inline-size: 100%;
  align-items: center;
}

.suite-responsive-field__control > * { flex-shrink: 0; }

[data-suite-safe-min-width='intrinsic'] {
  inline-size: max-content;
  flex-shrink: 0;
  white-space: nowrap;
}

/* END SUITE_ADAPTIVE_CHOICE_CSS */

/* Selected command/toggle buttons use the same Suite tone roles as their
   controls. Segmented/radio and primary-action roles own their own selection. */

/* Least containers (owner choice A): a pressed toggle shows a soft fill and ink, not an outline. */

.suite-button[aria-pressed='true']:where(:not(.suite-button-primary):not(.primary):not(.suite-segmented-option):not(.suite-state-switcher-option)):not(:is(:disabled, .is-disabled)):not([aria-disabled='true']) {
  border-color: transparent;
  background: var(--suite-navigation-primary-soft-bg, var(--suite-segmented-active-bg, var(--primary-soft)));
  color: var(--suite-button-tone-color, var(--suite-primary-selected-ink, var(--suite-primary-ink, var(--primary))));
}

/* Registry navigation variants use the formal container and existing tab roles. */

.suite-segmented.is-pill {
  border-radius: calc(var(--suite-navigation-radius, 20px) + 999px);
}

.suite-segmented.is-pill > :is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab'] {
  border-radius: calc(var(--suite-tab-item-radius, 20px) + 999px);
}

.suite-segmented.is-underline > :is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab'] {
  border-bottom-width: max(2px, var(--suite-tab-item-border-bottom-width, 0px));
  border-bottom-color: transparent;
  background: transparent;
}

.suite-segmented.is-underline > :is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:is(.active, .is-selected, [aria-selected='true']) {
  border-bottom-color: var(--suite-navigation-active-color, var(--suite-primary-selected-ink, var(--primary)));
  color: var(--suite-navigation-active-color, var(--suite-primary-selected-ink, var(--primary)));
  background: transparent;
}

/* Combobox state belongs to the actual trigger. Formal classes share semantic
   and native states; the surrounding layout never owns state paint. */

.suite-dropdown-trigger:is(:hover, .is-hover):not(:disabled):not(.is-disabled):not([aria-disabled='true']) {
  background: var(--suite-dropdowns-hover-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-hover-on-surface, var(--suite-dropdowns-on-surface));
}

.suite-dropdown-trigger:is(:focus-visible, .is-focus) {
  background: var(--suite-dropdowns-focus-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-focus-on-surface, var(--suite-dropdowns-on-surface));
  outline: var(--suite-state-focus-ring-width, 3px) solid var(--suite-state-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-state-focus-ring-offset, 2px);
}

.suite-dropdown-trigger:is(.is-selected, [aria-selected='true']) {
  background: var(--suite-dropdowns-selected-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-selected-on-surface, var(--suite-dropdowns-on-surface));
}

.suite-dropdown-trigger:is(.is-expanded, [aria-expanded='true']) {
  background: var(--suite-dropdowns-expanded-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-expanded-on-surface, var(--suite-dropdowns-on-surface));
  border-color: var(--suite-state-open-border, var(--line));
  box-shadow: var(--suite-state-open-shadow, none);
}

.suite-dropdown-trigger:is(.is-readonly, [aria-readonly='true']) {
  background: var(--suite-dropdowns-readonly-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-readonly-on-surface, var(--suite-dropdowns-on-surface));
  border-color: var(--suite-state-readonly-border, var(--line));
}

.suite-dropdown-trigger.is-warning {
  background: var(--suite-dropdowns-warning-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-warning-on-surface, var(--suite-dropdowns-on-surface));
  border-color: var(--suite-state-warning-border, var(--line));
}

.suite-dropdown-trigger:is(.is-invalid, [aria-invalid='true']) {
  background: var(--suite-dropdowns-invalid-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-invalid-on-surface, var(--suite-dropdowns-on-surface));
  border-color: var(--suite-state-error-border, var(--line));
}

.suite-dropdown-trigger:is(.is-loading, [aria-busy='true']) {
  background: var(--suite-dropdowns-loading-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-loading-on-surface, var(--suite-dropdowns-on-surface));
}

.suite-dropdown-trigger.is-empty {
  background: var(--suite-dropdowns-empty-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-empty-on-surface, var(--suite-dropdowns-on-surface));
  border-color: var(--suite-state-empty-border, var(--line));
  border-style: var(--suite-state-empty-border-style, dashed);
}

.suite-dropdown-trigger.is-load-error {
  background: var(--suite-dropdowns-load-error-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-load-error-on-surface, var(--suite-dropdowns-on-surface));
  border-color: var(--suite-state-error-border, var(--line));
}

.suite-dropdown-trigger:disabled:not(.is-readonly):not(.is-loading):not([aria-readonly='true']):not([aria-busy='true']),
.suite-dropdown-trigger.is-disabled,
.suite-dropdown-trigger[aria-disabled='true'] {
  background: var(--suite-dropdowns-disabled-surface-bg, var(--suite-dropdowns-surface-bg));
  color: var(--suite-dropdowns-disabled-on-surface, var(--suite-dropdowns-on-surface));
  filter: saturate(var(--suite-state-disabled-saturation, 40%));
}

.suite-dropdown-menu.is-closing {
  pointer-events: none;
  transform-origin: top center;
  animation: suite-dropdown-exit var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease) both;
}

@keyframes suite-dropdown-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(calc(var(--suite-motion-distance, 8px) * -0.5)); }
}

@media (prefers-reduced-motion: reduce) {
  .suite-dropdown-menu:is(.open, .is-closing, [aria-hidden='false']) { animation: none; }
}

/* Original header slots share one line; presentation degrades before allocation. */

.suite-container-header[data-suite-header-presentation] {
  display: grid;
  grid-template-columns: minmax(min(100%, var(--suite-header-leading-minimum, 0px)), 1fr) auto;
  grid-template-areas: none;
  grid-template-rows: max-content;
  align-items: center;
  flex-wrap: nowrap;
}

.suite-container-header[data-suite-header-presentation] > * {
  grid-area: auto;
  grid-row: 1;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.suite-container-header[data-suite-header-presentation] :is(.suite-container-header-leading, .suite-container-header-actions, .suite-container-header-context) {
  flex-wrap: nowrap !important;
  min-inline-size: 0;
}

.suite-container-header[data-suite-header-presentation] :is(.suite-panel-title-text, h1, h2, h3, h4, h5, h6, strong, .suite-header-label) {
  white-space: nowrap;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suite-container-header[data-suite-header-presentation] button[data-suite-header-action] {
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  gap: var(--suite-space-2, 8px);
  block-size: auto !important;
  min-block-size: max(var(--suite-buttons-height, var(--suite-control-height, 30px)), 1lh);
}

.suite-container-header[data-suite-header-presentation] .suite-header-icon,
.suite-choice-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] > .suite-header-label,
.suite-container-header[data-suite-header-presentation='icon'] .suite-header-picker[data-suite-header-icon='true'] .suite-combobox-value,
.suite-container-header[data-suite-header-presentation='more'] .suite-header-picker[data-suite-header-icon='true'] .suite-combobox-value { display: none; }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='hidden'],
.suite-container-header[data-suite-header-presentation] .suite-header-more[hidden] { display: none !important; }

.suite-container-header[data-suite-header-presentation] .suite-header-more { flex: 0 0 auto; }

.suite-container-header[data-suite-header-presentation] .suite-header-picker { flex: 0 0 auto; min-inline-size: 0; max-inline-size: 100%; inline-size: max-content; }

.suite-container-header[data-suite-header-presentation] .suite-header-picker .suite-combobox-field { min-inline-size: 0; max-inline-size: 100%; white-space: nowrap; }

.suite-container-header[data-suite-header-presentation]:is([data-suite-header-presentation='icon'],[data-suite-header-presentation='more']) .suite-header-picker[data-suite-header-icon='true'] .suite-combobox-field { inline-size: max-content; }

.suite-container-header[data-suite-header-presentation][hidden] { display: none !important; }

.suite-container-header[data-suite-header-presentation] > .suite-container-header-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='icon']:not([data-suite-header-icon='true']) { flex-shrink: 1; min-inline-size: var(--suite-buttons-height, var(--suite-control-height, 30px)); max-inline-size: 100%; }

.suite-container-header[data-suite-header-presentation] > .suite-container-header-actions { gap: var(--suite-space-2, 8px); }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-action].suite-icon-button,
.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] { inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height))); min-inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height))); padding-inline: 0; justify-content: center; }

/* A single explicit-icon choice needs no menu, but follows its header icon presentation. */

.suite-container-header:is([data-suite-header-presentation='icon'],[data-suite-header-presentation='more']) [data-suite-choice-count='1']:not([data-suite-choice-measuring='true']):not([data-suite-choice-presentation='scroll']) > [data-suite-choice-icon='true'] .suite-segmented-label { display: none !important; }

/* Ordinary HTML hidden state must outrank public control/layout display rules.
   Keep hidden-until-found available to the browser's reveal mechanism. */

[hidden][hidden][hidden]:not([hidden='until-found' i]) {
  display: none !important;
}

/* Compact alignment: semantic trailing groups are indivisible at every width. */

.suite-list-item-content { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }

.suite-list-item:has(> .suite-list-item-trailing) { flex-wrap: nowrap; }

.suite-list-item > .suite-list-item-trailing,
[data-suite-compact-trailing],
.suite-controlbar > .suite-management-actions,
.suite-module-controlbar > .suite-management-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: auto;
  gap: var(--suite-space-2, 8px);
}

.suite-list-item-trailing > *, [data-suite-compact-trailing] > * { flex-shrink: 0; }

.suite-ui-components-data-row-actions { flex-wrap: nowrap; gap: var(--suite-space-2, 8px); }

.suite-compound-input-group[data-suite-input-layout="submit"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
}

.suite-compound-input-group[data-suite-input-layout="submit"] > :is(input, textarea) {
  min-width: 0; width: 100%; box-sizing: border-box;
}

.suite-compound-input-group[data-suite-input-layout="submit"] > :is(button, [data-suite-submit]) {
  width: auto; justify-self: end; align-self: start; white-space: nowrap;
}

/* Explicit multiline submit: editor first, all related actions below at every width. */

.suite-compound-input-group[data-suite-input-layout="submit-multiline"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%; min-width: 0;
  gap: var(--suite-space-2, 8px);
}

.suite-compound-input-group[data-suite-input-layout="submit-multiline"] > textarea {
  grid-column: 1; width: 100%; min-width: 0; box-sizing: border-box;
}

.suite-compound-input-group[data-suite-input-layout="submit-multiline"] > .suite-compound-input-actions {
  grid-column: 1; display: flex; flex-wrap: wrap; justify-content: flex-end;
  min-width: 0; gap: var(--suite-space-2, 8px);
}

.suite-compound-input-actions > * { flex: 0 0 auto; max-width: 100%; }

textarea[data-suite-textarea-autosize="true"],
.suite-compound-input-group[data-suite-input-layout="submit-multiline"] > textarea {
  field-sizing: content; height: auto; min-height: calc(var(--suite-control-height, 32px) * 2);
  resize: none; overflow-y: hidden;
}

/* Shared density is identical for touch and mouse pointers. */

/* Workspace controls use the same pointer-independent density. */

/* B1: natural-width action stages; no viewport breakpoint or clipped labels. */

:is(.suite-container-header,.suite-workspace-header,.suite-toolbar,[data-suite-action-row],.suite-management-actions,.suite-workspace-management-actions,.suite-container-header-actions)[data-suite-header-presentation] { flex-wrap: nowrap !important; }

[data-suite-header-presentation] button[data-suite-header-action] { flex: 0 0 auto; white-space: nowrap !important; }

[data-suite-header-presentation] button[data-suite-header-action] > .suite-header-label { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }

[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] > .suite-header-label { display: none !important; }

[data-suite-header-presentation] button[data-suite-header-presentation='hidden'],[data-suite-header-presentation] > .suite-header-more[hidden] { display: none !important; }

[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] { inline-size: var(--suite-icon-button-size, var(--suite-control-height, 30px)); min-inline-size: var(--suite-icon-button-size, var(--suite-control-height, 30px)); padding-inline: 0; justify-content: center; }

[data-suite-header-presentation] button[data-suite-header-presentation='full'] { inline-size: max-content; max-inline-size: none; }

[data-suite-adaptive-choice][data-suite-adaptive-choice] > [data-suite-adaptive-choice-item] :is(.suite-segmented-label,.suite-button-label) { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }

[data-suite-adaptive-choice][data-suite-adaptive-choice='collapsed'][data-suite-choice-presentation='icon']:not([data-suite-choice-measuring='true']) > [data-suite-adaptive-choice-item] :is(.suite-segmented-label,.suite-button-label),
[data-suite-adaptive-choice][data-suite-choice-presentation='icon'] > [data-suite-choice-icon='true'] .suite-segmented-label { display: none !important; }

[data-suite-adaptive-choice='collapsed'][data-suite-choice-presentation='icon']:not([data-suite-choice-measuring='true']) > [data-suite-choice-icon='true'] > .suite-choice-disclosure { display: none; }

[data-suite-adaptive-choice='collapsed'] > [data-suite-adaptive-choice-item] > .suite-choice-disclosure { margin-inline-start: 0; }

/* C1: one density for command buttons; content options/tabs keep their contracts. */

:is(.suite-button.suite-button,.suite-icon-button.suite-icon-button,.suite-toolbar-button.suite-toolbar-button,:where(button)[data-suite-header-action][data-suite-header-action]):not(:where(.suite-content-option,.suite-pill-tab,.suite-segmented-option,.suite-icon-button-chip-clear)) {
  --suite-button-height: var(--suite-buttons-height, var(--suite-control-height));
  --suite-icon-button-size: var(--suite-buttons-height, var(--suite-control-height));
  --suite-button-icon-size: var(--suite-icon-size);
  box-sizing: border-box;
  height: var(--suite-buttons-height, var(--suite-control-height));
  min-height: var(--suite-buttons-height, var(--suite-control-height));
}

:is(.suite-button.suite-button,.suite-icon-button.suite-icon-button,.suite-toolbar-button.suite-toolbar-button,:where(button)[data-suite-header-action][data-suite-header-action]) svg {
  width: var(--suite-icon-size);
  height: var(--suite-icon-size);
  flex-shrink: 0;
}

:is([data-suite-action-row],.suite-container-header-actions,.suite-management-actions,.suite-workspace-management-actions,.suite-toolbar,.suite-container-header,.suite-workspace-header) :is(.suite-button.suite-button,.suite-icon-button.suite-icon-button,.suite-toolbar-button.suite-toolbar-button,:where(button)[data-suite-header-action][data-suite-header-action]):not(:where(.suite-content-option,.suite-pill-tab,.suite-segmented-option,.suite-tool-button)) {
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: var(--surface-strong);
  background-image: none;
  color: var(--text);
  box-shadow: var(--suite-buttons-shadow, none);
}

:is([data-suite-action-row],.suite-container-header-actions,.suite-management-actions,.suite-workspace-management-actions,.suite-toolbar,.suite-container-header,.suite-workspace-header) :is(.suite-button-primary,.suite-button.primary,[data-suite-header-action=primary]) {
  border-color: var(--suite-primary-ink, var(--primary));
  background: var(--suite-buttons-primary-surface-bg, var(--primary));
  color: var(--suite-primary-on-color, #fff);
}

:is(.suite-button.suite-button,.suite-icon-button.suite-icon-button,.suite-toolbar-button.suite-toolbar-button,[data-suite-header-action][data-suite-header-action]):is(:disabled,.is-disabled,[aria-disabled='true']) {
  border-color: var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  box-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Least containers (owner choice A, 2026-10-24): inside command rows only filled roles keep a container; other text commands stay text. */

:is([data-suite-action-row],.suite-container-header-actions,.suite-management-actions,.suite-workspace-management-actions,.suite-toolbar,.suite-container-header,.suite-workspace-header) :is(.suite-button.suite-button,.suite-icon-button.suite-icon-button,.suite-toolbar-button.suite-toolbar-button,:where(button)[data-suite-header-action][data-suite-header-action]):not(:where(.suite-content-option,.suite-pill-tab,.suite-segmented-option,.suite-tool-button,.suite-button-primary,.primary,.suite-button-danger,[data-suite-header-action=primary],[data-suite-variant=primary],[data-suite-variant=danger])) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

:is([data-suite-action-row],.suite-container-header-actions,.suite-management-actions,.suite-workspace-management-actions,.suite-toolbar,.suite-container-header,.suite-workspace-header) :is(.suite-button.suite-button,.suite-icon-button.suite-icon-button,.suite-toolbar-button.suite-toolbar-button,:where(button)[data-suite-header-action][data-suite-header-action]):not(:where(.suite-content-option,.suite-pill-tab,.suite-segmented-option,.suite-tool-button,.suite-button-primary,.primary,.suite-button-danger,[data-suite-header-action=primary],[data-suite-variant=primary],[data-suite-variant=danger])):not(:disabled):not([aria-disabled='true']):is(:hover, :focus-visible, .is-hover, .is-focus) {
  background: var(--surface-soft);
}

/* Same rule outside command rows: secondary, outline and ghost text commands are text, not containers. */

:root .suite-button.suite-button:is(.suite-button-secondary,.suite-button-outline,.suite-button-ghost):not(:where(.suite-content-option,.suite-pill-tab,.suite-segmented-option,.suite-tool-button,.suite-button-tone-danger,[aria-pressed=true],[aria-selected=true])) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Danger-toned text commands at rest (including disabled) are text too; their own danger hover surface stays. */

:root .suite-button.suite-button.suite-button-tone-danger:is(.suite-button-secondary,.suite-button-outline,.suite-button-ghost):not([aria-pressed=true]):not(:is(:hover, :focus-visible, .is-hover, .is-focus)) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

:root .suite-button.suite-button:is(.suite-button-secondary,.suite-button-outline,.suite-button-ghost):not(:where(.suite-content-option,.suite-pill-tab,.suite-segmented-option,.suite-tool-button,.suite-button-tone-danger,[aria-pressed=true],[aria-selected=true])):not(:disabled):not([aria-disabled='true']):is(:hover, :focus-visible, .is-hover, .is-focus) {
  background: var(--surface-soft);
}

/* Keep the selected toolbar command visible without introducing another surface. */

.suite-toolbar .suite-toolbar-button[aria-pressed=true]:not(:disabled):not([aria-disabled=true]) { outline: 2px solid var(--suite-primary-ink, var(--primary)); outline-offset: -3px; }

:is([data-suite-action-row],.suite-container-header-actions,.suite-management-actions,.suite-workspace-management-actions,.suite-toolbar,.suite-container-header,.suite-workspace-header) .suite-button.suite-button-wrap-label { height: var(--suite-buttons-height, var(--suite-control-height)); padding-block: 0; }

/* C1b: only status pills in command rows share the command border-box height. */

:is([data-suite-action-row],.suite-container-header-actions,.suite-management-actions,.suite-workspace-management-actions,.suite-toolbar,[role="toolbar"],.suite-container-header,.suite-workspace-header,.suite-list-item-trailing) > .suite-status-pill {
  box-sizing: border-box;
  height: var(--suite-button-height, var(--suite-buttons-height, var(--suite-control-height)));
  min-height: var(--suite-button-height, var(--suite-buttons-height, var(--suite-control-height)));
  max-height: var(--suite-button-height, var(--suite-buttons-height, var(--suite-control-height)));
  padding-block: 0;
}

/* Auxiliary tools opt in; command defaults and global density remain unchanged. */

:root button.suite-tool-button.suite-tool-button.suite-tool-button {
  box-sizing: border-box;
  height: max(var(--suite-buttons-height, var(--suite-control-height)), var(--suite-pointer-target-min));
  min-height: max(var(--suite-buttons-height, var(--suite-control-height)), var(--suite-pointer-target-min));
  min-width: var(--suite-pointer-target-min);
  border: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--muted);
}

:root button.suite-tool-button.suite-tool-button.suite-tool-button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  background: var(--surface-soft);
  color: var(--text);
}

:root .suite-toolbar-button.suite-tool-button.suite-tool-button[aria-pressed="true"] {
  background: var(--surface-soft);
  color: var(--suite-primary-ink, var(--primary));
  box-shadow: inset 0 -2px 0 currentColor;
}

:root button.suite-tool-button.suite-tool-button.suite-tool-button:focus-visible {
  outline: 2px solid var(--suite-primary-ink, var(--primary));
  outline-offset: 2px;
}

/* Packaged modules get shared-tab-height-normalization.css appended, which gives .suite-management-tabs and switches in a
   module control bar a tray inset and a tray-height minimum with !important. An embedded switch has no tray, so it keeps
   neither and stays one control height inside a toolbar row (組織授權 10/29: 職務清冊工具列量到 51，應為 43). The extra
   class in each selector outranks the normalization's selectors, so the result does not depend on load order. */

.suite-segmented.suite-segmented--embedded.suite-management-tabs,
.suite-module-controlbar .suite-segmented.suite-segmented--embedded {
  padding-block: 0 !important;
  min-height: 0 !important;
}

/* The original integrated picker layout, owned by Shared UI. */

.suite-color-field { display: inline-flex; min-inline-size: 0; inline-size: max-content; max-inline-size: 100%; vertical-align: middle; }

.suite-color-field-trigger.suite-button { position: relative; flex: 0 0 auto; inline-size: var(--suite-control-height, 30px); min-inline-size: var(--suite-control-height, 30px); block-size: var(--suite-control-height, 30px); min-block-size: var(--suite-control-height, 30px); padding: 0; overflow: hidden; isolation: isolate; border-radius: var(--suite-color-field-well-radius, min(var(--suite-radius-control, 10px), calc(var(--suite-control-height, 30px) / 6))); }

.suite-color-field-swatch { position: absolute; inset: 0; z-index: -1; border-radius: inherit; }

.suite-color-field-popover { position: fixed; z-index: var(--suite-popover-z-index, 1100); box-sizing: border-box; inline-size: min(19rem, calc(100vw - 16px)); max-block-size: calc(100dvh - 16px); overflow: auto; padding: var(--suite-shared-padding-10px, 10px); border: 1px solid var(--line, #e6e6e6); border-radius: var(--suite-radius-main-panel, var(--suite-radius-control, 20px)); background: var(--surface-strong, #fff); color: var(--text, #0f172a); box-shadow: var(--suite-popover-shadow, var(--shadow-soft, 0 8px 30px rgb(0 0 0 / .12))); font: inherit; font-size: var(--suite-type-body, .875rem); }

.suite-color-field-picker-head { display: flex; align-items: center; justify-content: space-between; gap: var(--suite-space-2, 8px); margin-block-end: var(--suite-space-2, 8px); min-inline-size: 0; }

.suite-color-field-picker-head > span { min-inline-size: 0; overflow-wrap: anywhere; }

.suite-color-field-close.suite-button { flex: 0 0 auto; inline-size: var(--suite-pointer-target-min, 24px); min-inline-size: var(--suite-pointer-target-min, 24px); block-size: var(--suite-pointer-target-min, 24px); min-block-size: var(--suite-pointer-target-min, 24px); padding: 0; border: 0; background: transparent; box-shadow: none; }

.suite-color-field-plane { position: relative; inline-size: 100%; min-block-size: 132px; block-size: 8.25rem; overflow: hidden; border: 1px solid var(--line, #e6e6e6); border-radius: var(--suite-radius-control, 10px); touch-action: none; user-select: none; cursor: crosshair; }

.suite-color-field-plane canvas, .suite-color-field-hue canvas { inline-size: 100%; block-size: 100%; display: block; }

.suite-color-field-marker { position: absolute; inline-size: var(--suite-icon-size-18px, 18px); block-size: var(--suite-icon-size-18px, 18px); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(15 23 42 / .38); transform: translate(-50%, -50%); pointer-events: none; }

.suite-color-field-picker-strip { display: grid; grid-template-columns: var(--suite-control-height, 30px) minmax(0, 1fr) var(--suite-control-height, 30px); gap: var(--suite-space-2, 8px); align-items: center; min-inline-size: 0; margin-block: var(--suite-space-2, 8px); }

.suite-color-field-preview-swatch { display: block; inline-size: var(--suite-control-height, 30px); block-size: var(--suite-control-height, 30px); border: 1px solid var(--line, #e6e6e6); border-radius: var(--suite-color-field-well-radius, min(var(--suite-radius-control, 10px), calc(var(--suite-control-height, 30px) / 6))); }

.suite-color-field-hue { position: relative; min-inline-size: 0; block-size: var(--suite-icon-size-18px, 18px); overflow: hidden; border-radius: var(--suite-radius-pill, 999px); touch-action: none; user-select: none; cursor: pointer; }

.suite-color-field-hue .suite-color-field-marker { top: 50%; inline-size: 14px; block-size: 14px; }

.suite-color-field-eyedropper.suite-button { inline-size: var(--suite-control-height, 30px); min-inline-size: var(--suite-control-height, 30px); block-size: var(--suite-control-height, 30px); min-block-size: var(--suite-control-height, 30px); padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text, #0f172a); }

.suite-color-field-eyedropper .ui-icon, .suite-color-field-close .ui-icon { inline-size: var(--suite-icon-size-18px, 18px); block-size: var(--suite-icon-size-18px, 18px); display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.suite-color-field-editor { display: grid; gap: var(--suite-space-1, 4px); min-inline-size: 0; }

.suite-color-field-format.suite-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; min-inline-size: 0; gap: 0; border: 0; border-radius: var(--suite-radius-control, 10px); background: var(--surface-soft, #f1f5f9); }

.suite-color-field-format .suite-segmented-option { min-inline-size: 0; min-block-size: var(--suite-control-height, 30px); padding: var(--suite-space-1, 4px) var(--suite-space-2, 8px); text-align: start; justify-content: flex-start; border-radius: max(0px, calc(var(--suite-radius-control, 10px) - 3px)); color: var(--muted, #5b6879); }

.suite-color-field-format .suite-segmented-option.active { color: var(--suite-primary-ink, var(--primary, #0f8b8d)); background: var(--primary-soft, rgb(15 139 141 / .12)); }

.suite-color-field-channel.suite-field-control { box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: var(--suite-control-height, 30px); border: 0; background: var(--surface-soft, #f1f5f9); box-shadow: none; font-variant-numeric: tabular-nums; }

.suite-color-field-palette-label { margin-block: var(--suite-space-2, 8px) var(--suite-space-1, 4px); color: var(--muted, #5b6879); }

.suite-color-field-palette { display: flex; flex-wrap: wrap; gap: var(--suite-space-1, 4px); }

.suite-color-field-chip.suite-button { inline-size: var(--suite-pointer-target-min, 24px); block-size: var(--suite-pointer-target-min, 24px); min-inline-size: var(--suite-pointer-target-min, 24px); min-block-size: var(--suite-pointer-target-min, 24px); padding: 0; border: 1px solid var(--line-strong, #ccc); border-radius: var(--suite-color-field-well-radius, min(var(--suite-radius-control, 10px), calc(var(--suite-control-height, 30px) / 6))); }

.suite-color-field-chip[aria-pressed="true"] { outline: 2px solid var(--text, #0f172a); outline-offset: 1px; }

.suite-color-field-status { margin-block-start: var(--suite-space-1, 4px); color: var(--muted, #5b6879); overflow-wrap: anywhere; }

.suite-color-field-status:empty, .suite-color-field-palette[hidden], .suite-color-field-palette-label[hidden] { display: none; }

.suite-color-field-channel[aria-invalid="true"] { outline: 2px solid var(--suite-danger, #dc2626); outline-offset: -2px; }

.suite-color-field-trigger:focus-visible, .suite-color-field-chip:focus-visible, .suite-color-field-plane:focus-visible, .suite-color-field-hue:focus-visible { outline: 2px solid var(--primary, #0f8b8d); outline-offset: 2px; }

/* Source-owned embedding contract. Asset copying must not rewrite these rules. */

.app-shell.shell-hosted,
.overview-app.shell-hosted {
  padding: var(--suite-hosted-root-padding, 0px) !important;
}

.app-shell,
.module-workbench,
.suite-management-workbench,
.suite-scroll-snap-y {
  gap: var(--shell-content-gap, 0px) !important;
}

/* .suite-module-controlbar is a toolbar row with its own spacing in primitives.css (GLOBAL §3-F); not an inset container. */

.suite-management-switchbar,
.suite-button-group {
  box-sizing: border-box;
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
}

.suite-management-tabs {
  --suite-tab-item-height: var(--suite-tab-switch-height, var(--suite-navigation-height, 24px));
}

/* Text tabs size to their label. Square icon tools are an explicit product variant. */

.suite-segmented > .suite-button.suite-segmented-option,
.suite-segmented > .suite-button.suite-pill-tab,
.suite-management-tabs > .suite-button.suite-segmented-option {
  width: auto;
  min-width: max-content;
  height: var(--suite-tab-item-height, var(--suite-tab-switch-height, 24px));
  min-height: var(--suite-tab-item-height, var(--suite-tab-switch-height, 24px));
}

/* Workspace scope alone flattens pane carriers; semantic cards below stay intact. */

.suite-workspace-frame, .suite-workspace[data-suite-workspace-mode] {
  --suite-primary-tabs-radius: calc(var(--suite-tab-item-radius, 20px) * .5);
}

.suite-workspace-frame, .suite-workspace[data-suite-workspace-mode] {
  box-sizing: border-box;
  overflow: hidden;
  background: var(--suite-workspace-surface, var(--suite-panel-bg, var(--surface))) !important;
  border-top: var(--suite-workspace-border, var(--suite-panel-border-top-width, 1px) solid var(--suite-panel-border-color, var(--line))) !important;
  border-right: var(--suite-workspace-border, var(--suite-panel-border-right-width, 1px) solid var(--suite-panel-border-color, var(--line))) !important;
  border-bottom: var(--suite-workspace-border, var(--suite-panel-border-bottom-width, 1px) solid var(--suite-panel-border-color, var(--line))) !important;
  border-left: var(--suite-workspace-border, var(--suite-panel-border-left-width, 1px) solid var(--suite-panel-border-color, var(--line))) !important;
  border-radius: var(--suite-workspace-radius, var(--suite-radius-main-panel, var(--suite-radius-control, 20px))) !important;
  box-shadow: var(--suite-workspace-shadow, var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)))) !important;
  backdrop-filter: var(--suite-workspace-backdrop-filter, var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none)));
  -webkit-backdrop-filter: var(--suite-workspace-backdrop-filter, var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none)));
  padding: var(--suite-workspace-padding, 0) !important;
}

.suite-workspace[data-suite-workspace-mode] {
  box-sizing: border-box;
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 0 !important;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
  isolation: isolate;
}

.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane[data-suite-workspace-pane] {
  box-sizing: border-box;
  position: relative;
  /* Consumer z-layers belong to this pane, below sibling drawer/backdrop layers. */
  isolation: isolate;
  flex-basis: var(--suite-workspace-pane-basis, 0px) !important;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  min-inline-size: var(--suite-workspace-pane-min, 240px) !important;
  min-block-size: 0 !important;
  inline-size: auto !important;
  width: auto !important;
  max-inline-size: none !important;
  max-width: none !important;
  block-size: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden;
}

.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-header {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: var(--suite-workspace-header-tracks, minmax(0, 1fr) auto);
  grid-template-areas: none;
  grid-template-rows: minmax(var(--suite-workspace-row-title-height, 0px), max-content);
  grid-auto-rows: max-content;
  grid-auto-flow: column;
  /* The header row sits mid-height: a drawer pane header put its buttons 11 from the top and 21 from the line (時程管理 10/29). */
  align-content: center;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap !important;
  gap: var(--suite-space-2, 8px);
  position: relative;
  min-block-size: max(var(--suite-workspace-row-header-height, 0px), var(--suite-container-header-min-height, 48px), calc(max(1lh, var(--suite-buttons-height, var(--suite-control-height, 30px)), calc(max(1lh, var(--suite-tab-item-height, var(--suite-tab-switch-height, 30px))) + var(--suite-segmented-padding, var(--suite-container-safety-inset, 4px)) + var(--suite-segmented-padding, var(--suite-container-safety-inset, 4px)) + var(--suite-navigation-border-top-width, var(--suite-segmented-border-width, 0px)) + var(--suite-navigation-border-bottom-width, var(--suite-segmented-border-width, 0px)))) + var(--suite-workspace-header-padding-block) + var(--suite-workspace-header-padding-block))) !important;
  margin: 0 !important;
  /* Owner 2026-10-28: the header row is not a content inset; half the panel padding above and below the controls. */
  --suite-workspace-header-padding-block: max(8px, calc(var(--suite-main-panel-padding-top, 22px) / 2));
  padding: var(--suite-workspace-header-padding-block) var(--suite-main-panel-padding-right, 22px) var(--suite-workspace-header-padding-block) var(--suite-main-panel-padding-left, 22px) !important;
  border: 0 !important;
  font-size: var(--suite-type-body);
  cursor: grab;
}

/* Explicit primary header sizing is independent of the frame paint owner.
   A nested route or a function/detail pane may own page tabs while an outer
   strip owns the single painted frame. Ordinary title rows keep their insets. */

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content']):not(:has(> .suite-workspace-pane:not(:is([data-suite-workspace-pane='content'], [data-suite-workspace-pane='function'], [data-suite-workspace-pane='detail'])))):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] ~ .suite-workspace-pane[data-suite-workspace-pane='content'])):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='function'] ~ .suite-workspace-pane[data-suite-workspace-pane='function'])):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='detail'] ~ .suite-workspace-pane[data-suite-workspace-pane='detail']))) > .suite-workspace-pane:where(:is([data-suite-workspace-pane='content'], [data-suite-workspace-pane='function'], [data-suite-workspace-pane='detail']):not(:has(> .suite-workspace-header ~ .suite-workspace-header)):not(:has(> .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-header.suite-container-header--attached-tabs:where(:has(+ .suite-workspace-body):not(:has(> .suite-container-header-leading ~ .suite-container-header-leading)):not(:has(> [data-suite-primary-navigation] ~ [data-suite-primary-navigation])):not(:has(> .suite-container-header-leading > [data-suite-primary-navigation] ~ [data-suite-primary-navigation])):not(:has(> [data-suite-primary-navigation]):has(> .suite-container-header-leading > [data-suite-primary-navigation]))):where(:has(> [data-suite-primary-navigation]), :has(> .suite-container-header-leading > [data-suite-primary-navigation])) {
  min-height: 0 !important;
  min-block-size: max(var(--suite-attached-tab-height), 1lh, var(--suite-buttons-height, var(--suite-control-height, 30px))) !important;
  height: auto !important;
  grid-template-rows: max-content;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0;
  align-items: stretch;
}

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content']):not(:has(> .suite-workspace-pane:not(:is([data-suite-workspace-pane='content'], [data-suite-workspace-pane='function'], [data-suite-workspace-pane='detail'])))):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] ~ .suite-workspace-pane[data-suite-workspace-pane='content'])):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='function'] ~ .suite-workspace-pane[data-suite-workspace-pane='function'])):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='detail'] ~ .suite-workspace-pane[data-suite-workspace-pane='detail']))) > .suite-workspace-pane:where(:is([data-suite-workspace-pane='content'], [data-suite-workspace-pane='function'], [data-suite-workspace-pane='detail']):not(:has(> .suite-workspace-header ~ .suite-workspace-header)):not(:has(> .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-header.suite-container-header--attached-tabs:where(:has(+ .suite-workspace-body):not(:has(> .suite-container-header-leading ~ .suite-container-header-leading)):not(:has(> [data-suite-primary-navigation] ~ [data-suite-primary-navigation])):not(:has(> .suite-container-header-leading > [data-suite-primary-navigation] ~ [data-suite-primary-navigation])):not(:has(> [data-suite-primary-navigation]):has(> .suite-container-header-leading > [data-suite-primary-navigation]))):where(:has(> [data-suite-primary-navigation]), :has(> .suite-container-header-leading > [data-suite-primary-navigation])) > .suite-container-header-leading {
  align-self: stretch;
  align-items: flex-end;
}

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content']):not(:has(> .suite-workspace-pane:not(:is([data-suite-workspace-pane='content'], [data-suite-workspace-pane='function'], [data-suite-workspace-pane='detail'])))):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] ~ .suite-workspace-pane[data-suite-workspace-pane='content'])):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='function'] ~ .suite-workspace-pane[data-suite-workspace-pane='function'])):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='detail'] ~ .suite-workspace-pane[data-suite-workspace-pane='detail']))) > .suite-workspace-pane:where(:is([data-suite-workspace-pane='content'], [data-suite-workspace-pane='function'], [data-suite-workspace-pane='detail']):not(:has(> .suite-workspace-header ~ .suite-workspace-header)):not(:has(> .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-header.suite-container-header--attached-tabs:where(:has(+ .suite-workspace-body):not(:has(> .suite-container-header-leading ~ .suite-container-header-leading)):not(:has(> [data-suite-primary-navigation] ~ [data-suite-primary-navigation])):not(:has(> .suite-container-header-leading > [data-suite-primary-navigation] ~ [data-suite-primary-navigation])):not(:has(> [data-suite-primary-navigation]):has(> .suite-container-header-leading > [data-suite-primary-navigation]))):where(:has(> [data-suite-primary-navigation]), :has(> .suite-container-header-leading > [data-suite-primary-navigation]))::after { content: none; }

/* Declared primary strips sit outside the single painted body. A sole installed
   content pane is primary by the workspace contract; feature-owned strips
   explicitly declare a direct frame/strip/body pair. Ordinary headers retain
   their public insets. A Shell outer strip already owns its body frame. */

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has(> .suite-workspace-pane ~ .suite-workspace-pane)):not(:has(> .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body))),
.suite-workspace-frame[data-suite-primary-tabs-frame]:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation])):has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs + [data-suite-primary-tabs-body])):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace-frame)):not(:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs ~ [data-suite-primary-tabs-strip].suite-container-header--attached-tabs))):not(:where(:has(> [data-suite-primary-tabs-body] ~ [data-suite-primary-tabs-body]))) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible !important;
}

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has(> .suite-workspace-pane ~ .suite-workspace-pane)):not(:has(> .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-pane[data-suite-workspace-pane='content'] { overflow: visible !important; }

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has(> .suite-workspace-pane ~ .suite-workspace-pane)):not(:has(> .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs,
.suite-workspace-frame[data-suite-primary-tabs-frame]:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation])):has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs + [data-suite-primary-tabs-body])):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace-frame)):not(:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs ~ [data-suite-primary-tabs-strip].suite-container-header--attached-tabs))):not(:where(:has(> [data-suite-primary-tabs-body] ~ [data-suite-primary-tabs-body]))) > [data-suite-primary-tabs-strip].suite-container-header--attached-tabs {
  min-block-size: max(var(--suite-attached-tab-height), 1lh, var(--suite-buttons-height, var(--suite-control-height, 30px))) !important;
  padding: 0 !important;
  gap: 0;
  align-items: stretch;
  z-index: 1;
}

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has(> .suite-workspace-pane ~ .suite-workspace-pane)):not(:has(> .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs::after,
.suite-workspace-frame[data-suite-primary-tabs-frame]:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation])):has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs + [data-suite-primary-tabs-body])):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace-frame)):not(:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs ~ [data-suite-primary-tabs-strip].suite-container-header--attached-tabs))):not(:where(:has(> [data-suite-primary-tabs-body] ~ [data-suite-primary-tabs-body]))) > [data-suite-primary-tabs-strip].suite-container-header--attached-tabs::after { content: none; }

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has(> .suite-workspace-pane ~ .suite-workspace-pane)):not(:has(> .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading { align-self: stretch; align-items: flex-end; overflow: visible; }

.suite-workspace-frame[data-suite-primary-tabs-frame]:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation])):has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs + [data-suite-primary-tabs-body])):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace-frame)):not(:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs ~ [data-suite-primary-tabs-strip].suite-container-header--attached-tabs))):not(:where(:has(> [data-suite-primary-tabs-body] ~ [data-suite-primary-tabs-body]))) > [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation]) {
  min-inline-size: 0;
  min-block-size: var(--suite-attached-tab-height) !important;
  padding: 0 calc(var(--suite-primary-tabs-radius) * 2) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.suite-workspace[data-suite-workspace-mode]:where(:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has(> .suite-workspace-pane ~ .suite-workspace-pane)):not(:has(> .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has(> .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body))) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body,
.suite-workspace-frame[data-suite-primary-tabs-frame]:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation])):has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs + [data-suite-primary-tabs-body])):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace-frame)):not(:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs ~ [data-suite-primary-tabs-strip].suite-container-header--attached-tabs))):not(:where(:has(> [data-suite-primary-tabs-body] ~ [data-suite-primary-tabs-body]))) > [data-suite-primary-tabs-body] {
  box-sizing: border-box;
  position: relative;
  background: var(--suite-primary-tabs-surface, var(--suite-panel-bg, var(--surface))) !important;
  border: 1px solid var(--suite-panel-border-color, var(--line)) !important;
  border-top: 0 !important;
  border-radius: var(--suite-primary-tabs-radius) var(--suite-primary-tabs-radius) var(--suite-radius-main-panel, 16px) var(--suite-radius-main-panel, 16px) !important;
  box-shadow: var(--suite-panel-shadow) !important;
  backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
  -webkit-backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
  z-index: 0;
}

.suite-workspace-frame[data-suite-primary-tabs-frame]:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation])):has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs + [data-suite-primary-tabs-body])):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-workspace-frame)):not(:where(:has(> [data-suite-primary-tabs-strip].suite-container-header--attached-tabs ~ [data-suite-primary-tabs-strip].suite-container-header--attached-tabs))):not(:where(:has(> [data-suite-primary-tabs-body] ~ [data-suite-primary-tabs-body]))) > [data-suite-primary-tabs-body] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
}

/* Respect semantic hiding despite the workspace header's enforced grid layout. */

.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-header[hidden] { display: none !important; }

.suite-workspace-header::after { content: ''; position: absolute; inset-inline-start: var(--suite-main-panel-padding-left, 22px); inset-inline-end: var(--suite-main-panel-padding-right, 22px); inset-block-end: 0; inline-size: auto; block-size: 1px; background: var(--line); pointer-events: none; }

.suite-workspace-header [role='tablist'] { min-inline-size: 0; max-inline-size: 100%; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }

.suite-workspace-header [role='tablist']::-webkit-scrollbar { display: none; }

.suite-workspace-header [role='tablist'] > [role='tab'] { flex: 0 0 auto !important; }

/* Titles, context and actions retain a single row with bounded tracks. Column counts also support
   raw headers without moving consumer DOM or reserving empty action tracks. */

.suite-workspace-header > * { grid-area: auto; grid-row: 1; min-inline-size: 0; max-inline-size: 100%; align-self: center; }

/* Direct adaptive groups measure the allocated header track, including while collapsed. */

.suite-workspace-header > [data-suite-adaptive-choice] { justify-self: stretch; inline-size: 100%; }

.suite-workspace-header > :first-child:not(.suite-workspace-controls) { grid-area: 1 / 1; min-inline-size: 0; overflow-wrap: normal; white-space: nowrap; align-self: center; }

.suite-workspace-header > .suite-workspace-controls { grid-area: 1 / -2 / 2 / -1; }

.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-header:not(:has(> .suite-workspace-controls:not([hidden]))) { grid-template-columns: var(--suite-workspace-header-tracks, minmax(0, 1fr)); }

.suite-workspace-header > .suite-container-header-context { grid-area: auto; grid-row: 1; justify-content: flex-start; min-inline-size: 0; }

.suite-workspace-header > :not(:first-child):not(.suite-workspace-controls):not(.suite-container-header-context):not(button):not(input):not(select) { justify-content: safe flex-end; }

.suite-workspace-header > :not(.suite-workspace-controls) { overflow-x: auto; }

/* An installed sole-child choice owns its allocated width and disclosure.
   Attached selection may join the body edge by one pixel without turning the
   carrier into a native vertical scroller; keep borders and focus visible. */

.suite-workspace-header > .suite-container-header-leading:has(> [data-suite-adaptive-choice]:only-child) { overflow: visible; }

/* Ordinary text is ellipsized inside its allocated header track, not a native scroll track.
   Keep choices, presets, tabs and inline controls on their existing scrollers. */

.suite-workspace-header > .suite-container-header-leading:not(:has(button, a, input, select, textarea, [role='button'], [role='tablist'], [role='listbox'], [data-suite-adaptive-choice])) { overflow: hidden; }

/* Header action carriers remain a single row after adaptive presentation. Nested
   tab/preset/pick lists keep their own existing layout and scrolling contract. */

.suite-workspace-header > :is(.suite-container-header-actions, .suite-management-actions) { flex-wrap: nowrap; overflow: visible; }

.suite-workspace-header > :is(.suite-container-header-actions, .suite-management-actions) > :is(button, .suite-button) { min-inline-size: 0; max-inline-size: 100%; white-space: nowrap; overflow-wrap: normal; }

/* A constrained group scrolls as a whole: its control groups must not shrink
   to zero and paint over their siblings. Nested tabs keep their own scroller. */

.suite-workspace-header > :not(.suite-workspace-controls) > :not([role='tablist']):not([data-suite-adaptive-choice]):not(:is(h1, h2, h3, h4, h5, h6, strong, .suite-panel-title-text, .suite-panel-title-content, .suite-header-label, button[data-suite-header-action])) { flex-shrink: 0; min-inline-size: min-content; }

.suite-workspace-header > :not(.suite-workspace-controls) > :is([data-suite-adaptive-choice], :has([role='tablist']), :has([data-suite-adaptive-choice])) { flex-shrink: 1; min-inline-size: 0; max-inline-size: 100%; }

.suite-workspace-header :is(button, [role='tab'], .suite-toolbar-button) { height: auto !important; block-size: auto !important; max-height: none !important; max-block-size: none !important; }

.suite-workspace-header > :is(.suite-container-header-context, .suite-container-header-actions) > * { max-inline-size: 100%; }

.suite-workspace-header > :is(.suite-container-header-context, .suite-container-header-actions):is(:empty, :has(> :only-child:empty)) { display: none; }

.suite-workspace-controls { display: flex; gap: var(--suite-space-1, 4px); flex-shrink: 0; }

.suite-workspace-action.suite-button { display: inline-flex; align-items: center; justify-content: center; font-size: var(--suite-type-body); inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height))); min-inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height))); padding-inline: 0; }

.suite-workspace-action .suite-icon { inline-size: var(--suite-icon-size, 16px); block-size: var(--suite-icon-size, 16px); }

.suite-workspace-action .suite-icon,
.suite-workspace-menu .suite-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.suite-workspace-menu { position: absolute; z-index: 6; inline-size: max-content; max-inline-size: calc(100% - 8px); max-block-size: calc(100% - 8px); overflow: auto; }

.suite-workspace-menu .suite-icon { inline-size: var(--suite-icon-size, 16px); block-size: var(--suite-icon-size, 16px); flex-shrink: 0; }

.suite-workspace-menu .suite-menu-option { white-space: nowrap; overflow-wrap: normal; }

.suite-workspace-controls > [hidden] { display: none !important; }

.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-body { flex: 1 1 auto; min-block-size: 0; min-inline-size: 0; overflow: auto; padding: var(--suite-main-panel-padding-top, 22px) var(--suite-main-panel-padding-right, 22px) var(--suite-main-panel-padding-bottom, 22px) var(--suite-main-panel-padding-left, 22px) !important; }

.suite-workspace-toolbar[data-suite-toolbar-purpose='integrated'] {
  margin: 0 !important; gap: 0; border-radius: 0 !important; box-shadow: none !important;
  border: 0 !important; border-block-end: 1px solid var(--line) !important;
  background: transparent !important;
}

.suite-workspace-global-plane[data-suite-workspace-chrome] { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }

.suite-workspace-global-plane[data-suite-workspace-chrome='topbar'] { border-block-end: 1px solid var(--line) !important; }

.suite-workspace-global-plane[data-suite-workspace-chrome='sidebar'] { border-inline-end: 1px solid var(--line) !important; }

.suite-workspace-controls[hidden] { display: none !important; }

/* Controls with nothing to show take no grid row (the drawer pane's empty controls added a second row under the title). */

.suite-workspace-controls:not(:has(> :not([hidden]))) { display: none !important; }

.suite-workspace-divider { flex: 0 0 1px; position: relative; cursor: col-resize; touch-action: none; outline-offset: -2px; z-index: 2; }

.suite-workspace-divider::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: -12px; inline-size: 25px; }

.suite-workspace-divider::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 1px; background: var(--line); pointer-events: none; }

.suite-workspace-divider:hover::after, .suite-workspace-divider:focus-visible::after { background: var(--primary); }

.suite-workspace-divider[aria-disabled='true'] { cursor: default; }

.suite-workspace-divider[aria-disabled='true']::before { pointer-events: none; }

.suite-workspace-resize-hint { position: absolute; inset-block-start: 50%; inset-inline-start: 0; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; padding: var(--suite-space-2, 8px); border: 1px solid var(--line); border-radius: var(--suite-radius-control, 8px); background: var(--surface); color: var(--text); box-shadow: var(--shadow-soft); font-size: var(--suite-type-body); white-space: nowrap; }

.suite-workspace-resize-hint[hidden] { display: none !important; }

.suite-workspace-restore { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: flex; gap: var(--suite-space-1, 4px); padding: var(--suite-space-1, 4px); z-index: 2; max-inline-size: 100%; flex-wrap: wrap; background: transparent; }

.suite-workspace-restore.suite-workspace-restore--external { position: static; inset: auto; padding: 0; flex: 0 0 auto; flex-wrap: nowrap; }

.suite-workspace-restore[hidden] { display: none !important; }

/* Keep the internal toggle above the drawer; Shell's external rail stays outside. */

.suite-workspace[data-suite-workspace-mode='drawer'] > .suite-workspace-restore { z-index: 5; }

.suite-workspace:has(> .suite-workspace-restore:not([hidden])) { padding-block-start: var(--suite-workspace-restore-height, 40px) !important; }

.suite-workspace-backdrop { position: absolute; inset: 0; background: var(--suite-workspace-backdrop, color-mix(in srgb, var(--text) 25%, transparent)); z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 160ms ease; }

.suite-workspace[data-suite-workspace-drawer-open='true'] > .suite-workspace-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }

.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane[data-suite-workspace-state='hidden'] {
  position: absolute;
  /* Counter the existing physical slide so a nonpainted pane keeps its
     closed footprint inside the workspace without clipping visible overlays. */
  inset: 0 12px 0 -12px;
  min-inline-size: 0 !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px);
}

.suite-workspace[data-suite-workspace-visible='1'] > .suite-workspace-pane[data-suite-workspace-state='pane'] { min-inline-size: 0 !important; }

.suite-workspace[data-suite-workspace-mode='drawer'] > .suite-workspace-pane[data-suite-workspace-state='drawer'] {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(100%, var(--suite-workspace-drawer-width, 420px)) !important;
  min-inline-size: 0 !important;
  z-index: 4;
  background: var(--surface) !important;
  border-inline-start: 1px solid var(--line) !important;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.suite-workspace-pane { transition: opacity 160ms ease, transform 160ms ease; }

.suite-workspace[data-suite-workspace-mode='drawer'] .suite-workspace-header { cursor: default; }

.suite-workspace[data-suite-workspace-resizing='true'] { cursor: col-resize; user-select: none; }

.suite-workspace[data-suite-workspace-resizing='true'] iframe { pointer-events: none; }

.suite-workspace > [hidden], .suite-workspace-restore > [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { .suite-workspace-pane, .suite-workspace-backdrop { transition: none; } }

/* Original header slots share one line; presentation degrades before allocation. */

.suite-container-header[data-suite-header-presentation] {
  display: grid;
  grid-template-columns: minmax(min(100%, var(--suite-header-leading-minimum, 0px)), 1fr) auto;
  grid-template-areas: none;
  grid-template-rows: max-content;
  align-items: center;
  flex-wrap: nowrap;
}

.suite-container-header[data-suite-header-presentation] > * {
  grid-area: auto;
  grid-row: 1;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.suite-container-header[data-suite-header-presentation] :is(.suite-container-header-leading, .suite-container-header-actions, .suite-container-header-context) {
  flex-wrap: nowrap !important;
  min-inline-size: 0;
}

.suite-container-header[data-suite-header-presentation] :is(.suite-panel-title-text, h1, h2, h3, h4, h5, h6, strong, .suite-header-label) {
  white-space: nowrap;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suite-container-header[data-suite-header-presentation] button[data-suite-header-action] {
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  gap: var(--suite-space-2, 8px);
  block-size: auto !important;
  min-block-size: max(var(--suite-buttons-height, var(--suite-control-height, 30px)), 1lh);
}

.suite-container-header[data-suite-header-presentation] .suite-header-icon,
.suite-choice-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] > .suite-header-label,
.suite-container-header[data-suite-header-presentation='icon'] .suite-header-picker[data-suite-header-icon='true'] .suite-combobox-value,
.suite-container-header[data-suite-header-presentation='more'] .suite-header-picker[data-suite-header-icon='true'] .suite-combobox-value { display: none; }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='hidden'],
.suite-container-header[data-suite-header-presentation] .suite-header-more[hidden] { display: none !important; }

.suite-container-header[data-suite-header-presentation] .suite-header-more { flex: 0 0 auto; }

.suite-container-header[data-suite-header-presentation] .suite-header-picker { flex: 0 0 auto; min-inline-size: 0; max-inline-size: 100%; inline-size: max-content; }

.suite-container-header[data-suite-header-presentation] .suite-header-picker .suite-combobox-field { min-inline-size: 0; max-inline-size: 100%; white-space: nowrap; }

.suite-container-header[data-suite-header-presentation]:is([data-suite-header-presentation='icon'],[data-suite-header-presentation='more']) .suite-header-picker[data-suite-header-icon='true'] .suite-combobox-field { inline-size: max-content; }

.suite-container-header[data-suite-header-presentation][hidden] { display: none !important; }

.suite-container-header[data-suite-header-presentation] > .suite-container-header-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='icon']:not([data-suite-header-icon='true']) { flex-shrink: 1; min-inline-size: var(--suite-buttons-height, var(--suite-control-height, 30px)); max-inline-size: 100%; }

.suite-container-header[data-suite-header-presentation] > .suite-container-header-actions { gap: var(--suite-space-2, 8px); }

.suite-container-header[data-suite-header-presentation] button[data-suite-header-action].suite-icon-button,
.suite-container-header[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] { inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height))); min-inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height))); padding-inline: 0; justify-content: center; }

/* A single explicit-icon choice needs no menu, but follows its header icon presentation. */

.suite-container-header:is([data-suite-header-presentation='icon'],[data-suite-header-presentation='more']) [data-suite-choice-count='1']:not([data-suite-choice-measuring='true']):not([data-suite-choice-presentation='scroll']) > [data-suite-choice-icon='true'] .suite-segmented-label { display: none !important; }

/* Ordinary HTML hidden state must outrank public control/layout display rules.
   Keep hidden-until-found available to the browser's reveal mechanism. */

[hidden][hidden][hidden]:not([hidden='until-found' i]) {
  display: none !important;
}

/* Opt-in two-pane preview/settings presentation; carriers never change parents. */

.suite-workspace[data-suite-workspace-mode='preview-settings'] {
  flex-direction: column !important;
  max-block-size: var(--suite-workspace-visible-height, 100%);
  padding-block-start: 0 !important;
}

.suite-workspace[data-suite-workspace-mode='preview-settings'] > .suite-workspace-pane[data-suite-workspace-pane] {
  flex: 0 0 var(--suite-workspace-pane-basis) !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
}

.suite-workspace[data-suite-workspace-mode='preview-settings'] > .suite-workspace-pane > .suite-workspace-body {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.suite-workspace[data-suite-workspace-mode='preview-settings'] > .suite-workspace-restore {
  position: relative;
  inset: auto;
  order: -1;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-self: flex-end;
}

.suite-workspace[data-suite-workspace-mode='preview-settings'] > .suite-workspace-divider {
  flex: 0 0 1px;
  min-inline-size: 44px;
  cursor: row-resize;
}

.suite-workspace[data-suite-workspace-mode='preview-settings'] > .suite-workspace-divider::before {
  inset-inline: 0;
  inset-block-start: -21px;
  inset-block-end: auto;
  inline-size: auto;
  block-size: 44px;
}

.suite-workspace[data-suite-workspace-mode='preview-settings'] > .suite-workspace-divider::after {
  inset-inline: 0;
  inset-block-start: 0;
  inset-block-end: auto;
  inline-size: auto;
  block-size: 1px;
}

.suite-workspace[data-suite-workspace-mode='preview-settings'] .suite-workspace-restore .suite-button,
.suite-workspace-keyboard-dismiss {
  min-inline-size: var(--suite-control-height, 30px);
  min-block-size: var(--suite-control-height, 30px);
}

/* Flat context/actions slots form one continuous trailing area, without DOM moves. */

.suite-container-header[data-suite-header-presentation] {
  grid-template-columns: minmax(min(100%, var(--suite-header-leading-minimum, 0px)), 1fr) auto;
  grid-auto-columns: auto;
  column-gap: var(--suite-space-2, 8px);
}

.suite-container-header[data-suite-header-presentation][data-suite-header-context-layout="selector"]:has(> .suite-container-header-context):has(> .suite-container-header-actions) {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.suite-container-header[data-suite-header-presentation] > :is(.suite-container-header-context, .suite-container-header-actions) {
  justify-self: end;
  width: max-content;
  margin-inline-start: 0;
  flex-wrap: nowrap !important;
}

.suite-container-header[data-suite-header-presentation][data-suite-header-context-layout="status"] > .suite-container-header-context {
  overflow: visible; flex-shrink: 0; justify-content: flex-end;
}

/* Compact alignment: semantic trailing groups are indivisible at every width. */

.suite-list-item-content { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }

.suite-list-item:has(> .suite-list-item-trailing) { flex-wrap: nowrap; }

.suite-list-item > .suite-list-item-trailing,
[data-suite-compact-trailing],
.suite-controlbar > .suite-management-actions,
.suite-module-controlbar > .suite-management-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: auto;
  gap: var(--suite-space-2, 8px);
}

.suite-list-item-trailing > *, [data-suite-compact-trailing] > * { flex-shrink: 0; }

.suite-ui-components-data-row-actions { flex-wrap: nowrap; gap: var(--suite-space-2, 8px); }

.suite-compound-input-group[data-suite-input-layout="submit"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  width: 100%;
}

.suite-compound-input-group[data-suite-input-layout="submit"] > :is(input, textarea) {
  min-width: 0; width: 100%; box-sizing: border-box;
}

.suite-compound-input-group[data-suite-input-layout="submit"] > :is(button, [data-suite-submit]) {
  width: auto; justify-self: end; align-self: start; white-space: nowrap;
}

/* Explicit multiline submit: editor first, all related actions below at every width. */

.suite-compound-input-group[data-suite-input-layout="submit-multiline"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%; min-width: 0;
  gap: var(--suite-space-2, 8px);
}

.suite-compound-input-group[data-suite-input-layout="submit-multiline"] > textarea {
  grid-column: 1; width: 100%; min-width: 0; box-sizing: border-box;
}

.suite-compound-input-group[data-suite-input-layout="submit-multiline"] > .suite-compound-input-actions {
  grid-column: 1; display: flex; flex-wrap: wrap; justify-content: flex-end;
  min-width: 0; gap: var(--suite-space-2, 8px);
}

.suite-compound-input-actions > * { flex: 0 0 auto; max-width: 100%; }

textarea[data-suite-textarea-autosize="true"],
.suite-compound-input-group[data-suite-input-layout="submit-multiline"] > textarea {
  field-sizing: content; height: auto; min-height: calc(var(--suite-control-height, 32px) * 2);
  resize: none; overflow-y: hidden;
}

/* Workspace density is identical for touch and mouse pointers. */

/* B1: natural-width action stages; no viewport breakpoint or clipped labels. */

:is(.suite-container-header,.suite-workspace-header,.suite-toolbar,[data-suite-action-row],.suite-management-actions,.suite-workspace-management-actions,.suite-container-header-actions)[data-suite-header-presentation] { flex-wrap: nowrap !important; }

[data-suite-header-presentation] button[data-suite-header-action] { flex: 0 0 auto; white-space: nowrap !important; }

[data-suite-header-presentation] button[data-suite-header-action] > .suite-header-label { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }

[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] > .suite-header-label { display: none !important; }

[data-suite-header-presentation] button[data-suite-header-presentation='hidden'],[data-suite-header-presentation] > .suite-header-more[hidden] { display: none !important; }

[data-suite-header-presentation] button[data-suite-header-presentation='icon'][data-suite-header-icon='true'] { inline-size: var(--suite-icon-button-size, var(--suite-control-height, 30px)); min-inline-size: var(--suite-icon-button-size, var(--suite-control-height, 30px)); padding-inline: 0; justify-content: center; }

[data-suite-header-presentation] button[data-suite-header-presentation='full'] { inline-size: max-content !important; max-inline-size: none !important; }

[data-suite-header-presentation] > :is(.suite-container-header-actions,.suite-management-actions) { min-inline-size: max-content; }

[data-suite-adaptive-choice][data-suite-adaptive-choice] > [data-suite-adaptive-choice-item] :is(.suite-segmented-label,.suite-button-label) { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }

[data-suite-adaptive-choice][data-suite-adaptive-choice='collapsed'][data-suite-choice-presentation='icon']:not([data-suite-choice-measuring='true']) > [data-suite-adaptive-choice-item] :is(.suite-segmented-label,.suite-button-label),
[data-suite-adaptive-choice][data-suite-choice-presentation='icon'] > [data-suite-choice-icon='true'] .suite-segmented-label { display: none !important; }

[data-suite-adaptive-choice='collapsed'][data-suite-choice-presentation='icon']:not([data-suite-choice-measuring='true']) > [data-suite-choice-icon='true'] > .suite-choice-disclosure { display: none; }

[data-suite-adaptive-choice='collapsed'] > [data-suite-adaptive-choice-item] > .suite-choice-disclosure { margin-inline-start: 0; }

/* A header switches its choices and actions together; natural probes stay full. */

.suite-container-header:is([data-suite-header-presentation="icon"],[data-suite-header-presentation="more"]) [data-suite-adaptive-choice]:not([data-suite-choice-measuring="true"]):not([data-suite-choice-presentation="scroll"]) > [data-suite-choice-icon="true"] :is(.suite-segmented-label,.suite-button-label) { display: none !important; }

/* A single primary tab keeps its natural tab footprint instead of filling the strip. */

.suite-container-header--attached-tabs [data-suite-choice-count="1"][data-suite-choice-count="1"] > [data-suite-adaptive-choice-item] { flex: 0 1 auto !important; }

/* Opt-in scroll overflow (formal primary page tabs only): text only, one shorter
   swipeable line, hidden scrollbar, never a menu. Original items stay in place. */

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-presentation='scroll'] {
  --suite-attached-tab-height: var(--suite-control-height, 30px);
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-height: 0 !important;
  min-block-size: 0 !important;
  padding-block: 0 !important;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

[data-suite-adaptive-choice][data-suite-choice-presentation='scroll']::-webkit-scrollbar { display: none; }

/* Owner 2026-10-28: the shorter swipeable tab must still meet its container; the attached header shrinks with it. */

.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]):has([data-suite-adaptive-choice][data-suite-choice-presentation='scroll']) { --suite-attached-tab-height: var(--suite-control-height, 30px); }

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-presentation='scroll']:not([data-suite-choice-measuring='true']) > [data-suite-adaptive-choice-item] { flex: 0 0 auto !important; min-inline-size: max-content !important; max-inline-size: none !important; white-space: nowrap !important; }

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-presentation='scroll']:not([data-suite-choice-measuring='true']) > [data-suite-adaptive-choice-item] :is(svg,.suite-choice-icon,.suite-segmented-icon) { display: none !important; }

/* Owner 2026-10-29「主頁籤文字左側留這麼大的空白要幹嘛？」: an unclassed icon wrapper must go with its icon. */

[data-suite-adaptive-choice][data-suite-adaptive-choice][data-suite-choice-presentation='scroll']:not([data-suite-choice-measuring='true']) > [data-suite-adaptive-choice-item] > span[aria-hidden='true']:has(> svg:only-child) { display: none !important; }

/* Header overflow includes pane options in the same menu. Keep original handlers. */

.suite-container-header[data-suite-header-presentation="more"] [data-suite-pane-menu] { display: none !important; }

.suite-header-more { inline-size: var(--suite-icon-button-size, var(--suite-control-height)); min-inline-size: var(--suite-icon-button-size, var(--suite-control-height)); padding-inline: 0; }

/* Opt-in switch layout: no pane/iframe/canvas is reparented or unmounted. */

.suite-workspace[data-suite-workspace-mode='preview-settings-switch'],
.suite-workspace[data-suite-workspace-mode='preview-settings-switch']:has(> .suite-workspace-restore:not([hidden])) {
  padding-block-start: 0 !important;
  flex-direction: column !important;
}

.suite-workspace[data-suite-workspace-mode='preview-settings-switch'] > .suite-workspace-pane[data-suite-workspace-pane] {
  flex: 1 1 0 !important;
  min-inline-size: 0 !important;
  order: 1 !important;
}

.suite-workspace[data-suite-workspace-mode='preview-settings-switch'] > .suite-workspace-restore {
  position: static; order: 0; flex: 0 0 auto; inline-size: 100%; box-sizing: border-box; flex-wrap: wrap; padding: var(--suite-space-2, 8px);
}

.suite-workspace[data-suite-workspace-mode='preview-settings-switch'] > .suite-workspace-divider { display: none; }

.suite-workspace-switch-back[hidden] { display: none !important; }

.suite-workspace[data-suite-workspace-mode='preview-settings-switch'] .suite-workspace-switch-back { flex: 0 0 auto; }

/* Explicit switch restoration owns these offsets; header reflow must not scroll-anchor them. */

.suite-workspace[data-suite-workspace-mode='preview-settings-switch'] .suite-workspace-body { overflow-anchor: none; }

/* Match the visible pane footprint so hidden scrollers are not range-clamped. */

.suite-workspace[data-suite-workspace-mode='preview-settings-switch'] > .suite-workspace-pane[data-suite-workspace-state='hidden'] {
  inset: var(--suite-workspace-switch-rail-height, 0px) 0 0; transform: none;
}

.suite-pane-switch { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: var(--suite-space-2, 8px); }

.suite-pane-switch[hidden] { display: none !important; }

[data-suite-pane-switch] > [data-suite-mobile-pane][hidden] { display: none !important; }

/* Opt-in content contracts; Shell chrome and primary tabs keep their owners. */

.suite-mobile-back, .suite-filter-sheet-trigger, .suite-filter-sheet-heading { display: none; }

.suite-filter-sheet, .suite-filter-sheet-panel, .suite-filter-sheet-fields { display: contents; }

.suite-mobile-summary > .suite-collapsible-group > button { display: none; }

.suite-mobile-summary > .suite-collapsible-group,
.suite-mobile-summary > .suite-collapsible-group > .suite-collapsible-group-body,
.suite-mobile-summary > .suite-collapsible-group > .suite-collapsible-group-body > .suite-collapsible-group-content {
  border: 0; background: transparent; box-shadow: none; padding: 0;
}

@container suite-fill-body (width < 720px) {
  [data-suite-mobile-view] > [data-suite-mobile-pane][hidden] { display: none !important; }
  [data-suite-mobile-view].suite-list-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .suite-mobile-back { display: inline-flex; flex: 0 0 auto; }
  .suite-toolbar-search { flex-basis: auto; min-inline-size: 0; max-inline-size: 100%; }
  [data-suite-mobile-flatten]:not([data-suite-mobile-flatten='false']),
  [data-suite-mobile-flatten]:not([data-suite-mobile-flatten='false']) > [data-suite-inner-surface-slot='content'] {
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important; padding: 0 !important;
  }
  .suite-mobile-summary { flex: 0 0 auto; min-inline-size: 0; }
  .suite-mobile-summary > .suite-collapsible-group > button {
    display: flex; align-items: center; justify-content: space-between; gap: var(--suite-space-2, 8px);
    inline-size: 100%; min-inline-size: 0; padding: 0; min-block-size: var(--suite-control-height, 30px);
    border: 0; background: transparent; font: inherit; color: inherit; text-align: start;
  }
  .suite-mobile-summary > .suite-collapsible-group > button > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .suite-mobile-summary[data-suite-summary-critical] > .suite-collapsible-group > button > span { white-space: normal; overflow: visible; }
}

/* JS owns panel visibility; its controls must use the same state without a named container. */

[data-suite-mobile-view] > [data-suite-mobile-pane][hidden] { display: none !important; }

[data-suite-mobile-view][data-suite-mobile-active='true'].suite-list-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }

[data-suite-mobile-view][data-suite-mobile-active='true'] .suite-mobile-back:not([hidden]),
.suite-mobile-back[data-suite-mobile-active='true']:not([hidden]) { display: inline-flex; flex: 0 0 auto; }

.suite-filter-sheet[data-suite-mobile-active='true'] { display: inline-flex; flex: 0 0 auto; }

.suite-filter-sheet[data-suite-mobile-active='true'] > .suite-filter-sheet-trigger { display: inline-flex; align-items: center; position: relative; }

.suite-filter-sheet[data-suite-mobile-active='true'] > .suite-filter-sheet-trigger small { position: absolute; inset-block-start: -3px; inset-inline-end: -3px; background: var(--primary); color: var(--primary-contrast, #fff); border-radius: 1em; padding-inline: 4px; }

.suite-filter-sheet[data-suite-mobile-active='true'] > .suite-filter-sheet-panel { display: block; }

.suite-filter-sheet[data-suite-mobile-active='true'] > .suite-filter-sheet-panel[hidden] { display: none !important; }

.suite-filter-sheet[data-suite-mobile-active='true'] > .suite-filter-sheet-panel[popover] {
  position: fixed; inset: auto 0 0; margin: 0; inline-size: 100%; max-inline-size: 100%;
  max-block-size: min(75dvh, 42rem); box-sizing: border-box; overflow: auto;
  padding: var(--suite-space-3, 12px); padding-block-end: max(var(--suite-space-3, 12px), env(safe-area-inset-bottom));
  background: var(--suite-solid-surface-bg, #fff); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px 12px 0 0;
}

.suite-filter-sheet[data-suite-mobile-active='true'] > .suite-filter-sheet-panel::backdrop { background: rgb(0 0 0 / 35%); }

/* Desktop row too narrow for inline filters: a small panel under the icon, no dimming. */

.suite-filter-sheet[data-suite-filter-compact='true'] > .suite-filter-sheet-panel[popover] {
  inset: var(--suite-filter-popover-top, auto) auto auto var(--suite-filter-popover-left, auto);
  inline-size: min(320px, calc(100vw - 16px)); border-radius: 12px; box-shadow: var(--suite-shadow-popover, 0 8px 24px rgb(0 0 0 / 14%));
  padding-block-end: var(--suite-space-3, 12px);
}

.suite-filter-sheet[data-suite-filter-compact='true'] > .suite-filter-sheet-panel::backdrop { background: transparent; }

.suite-filter-sheet[data-suite-mobile-active='true'] .suite-filter-sheet-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--suite-space-2, 8px); }

.suite-filter-sheet[data-suite-mobile-active='true'] .suite-filter-sheet-fields { display: flex; flex-direction: column; gap: var(--suite-space-3, 12px); padding-block-start: var(--suite-space-3, 12px); }

.suite-filter-sheet[data-suite-mobile-active='true'] .suite-filter-sheet-fields > * { max-inline-size: 100%; min-inline-size: 0; }

/* Cards share the JS content-width owner, including pages without a named container. */

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'][data-suite-mobile-presentation] {
  display: block; inline-size: 100% !important; width: 100% !important;
  min-inline-size: 0 !important; min-width: 0 !important; max-inline-size: 100%; table-layout: auto;
}

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > colgroup { display: none; }

/* Headers remain available to assistive technology. */

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > thead {
  position: absolute !important; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) { display: block; min-inline-size: 0; }

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) > tr {
  display: flex; flex-direction: column; gap: var(--suite-space-2, 8px);
  /* Rule §3-D.1 item 4: rows stack as one list, separated by a line, never framed as cards. */
  padding: var(--suite-space-3, 12px) 0; margin: 0;
  border: 0; border-block-end: 1px solid var(--line); border-radius: 0;
  min-inline-size: 0; background: transparent;
  /* Desktop row heights would squeeze the stacked cells to nothing. */
  block-size: auto !important; height: auto !important; max-block-size: none !important;
}

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) > tr > :is(td, th) {
  display: grid !important; grid-template-columns: minmax(5em, 28%) minmax(0, 1fr); gap: var(--suite-space-2, 8px);
  position: static !important; inset: auto !important; transform: none !important;
  inline-size: auto !important; width: auto !important; min-inline-size: 0 !important; min-width: 0 !important;
  max-inline-size: 100%; block-size: auto !important; height: auto !important;
  padding: 0 !important; border: 0 !important; box-shadow: none !important;
  white-space: normal !important; overflow-wrap: anywhere; background: transparent;
  flex: 0 0 auto; overflow: visible !important; text-overflow: clip !important;
}

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) > tr > :is(td, th)::before {
  content: attr(data-suite-column-label); color: var(--muted); font-weight: 400;
}

/* Unlabelled cells (empty states, spanning notes) use the whole card width. */

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) > tr > :is(td, th):not([data-suite-column-label]) { grid-template-columns: minmax(0, 1fr); }

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) > tr > :is(td, th):not([data-suite-column-label])::before { content: none; }

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) > tr > [data-suite-card-title] { order: -2; font-weight: 700; }

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] > :is(tbody, tfoot) > tr > [data-suite-card-secondary] { order: -1; }

[data-suite-mobile-presentation='cards'][data-suite-mobile-active='true'] :is(input:not([type='checkbox']):not([type='radio']), select, textarea, button, code) {
  min-inline-size: 0; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere;
}

/* Static cards without the JS owner keep the named-container contract, on a phone screen only: a desktop
   list narrowed by an open in-frame detail stays a table (本人 10/30, same rule as mobileTable.ts). */

@media (max-width: 760px) {
@container suite-fill-body (width < 720px) {
  [data-suite-mobile-presentation='cards'] {
    display: block; inline-size: 100% !important; width: 100% !important;
    min-inline-size: 0 !important; min-width: 0 !important; max-inline-size: 100%; table-layout: auto;
  }
  [data-suite-mobile-presentation='cards'] > colgroup { display: none; }
  /* Headers remain available to assistive technology. */
  [data-suite-mobile-presentation='cards'] > thead {
    position: absolute !important; inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) { display: block; min-inline-size: 0; }
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) > tr {
    display: flex; flex-direction: column; gap: var(--suite-space-2, 8px);
    /* Rule §3-D.1 item 4: rows stack as one list, separated by a line, never framed as cards. */
    padding: var(--suite-space-3, 12px) 0; margin: 0;
    border: 0; border-block-end: 1px solid var(--line); border-radius: 0;
    min-inline-size: 0; background: transparent;
    /* Desktop row heights would squeeze the stacked cells to nothing. */
    block-size: auto !important; height: auto !important; max-block-size: none !important;
  }
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) > tr > :is(td, th) {
    display: grid !important; grid-template-columns: minmax(5em, 28%) minmax(0, 1fr); gap: var(--suite-space-2, 8px);
    position: static !important; inset: auto !important; transform: none !important;
    inline-size: auto !important; width: auto !important; min-inline-size: 0 !important; min-width: 0 !important;
    max-inline-size: 100%; block-size: auto !important; height: auto !important;
    padding: 0 !important; border: 0 !important; box-shadow: none !important;
    white-space: normal !important; overflow-wrap: anywhere; background: transparent;
    flex: 0 0 auto; overflow: visible !important; text-overflow: clip !important;
  }
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) > tr > :is(td, th)::before {
    content: attr(data-suite-column-label); color: var(--muted); font-weight: 400;
  }
  /* Unlabelled cells (empty states, spanning notes) use the whole card width. */
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) > tr > :is(td, th):not([data-suite-column-label]) { grid-template-columns: minmax(0, 1fr); }
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) > tr > :is(td, th):not([data-suite-column-label])::before { content: none; }
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) > tr > [data-suite-card-title] { order: -2; font-weight: 700; }
  [data-suite-mobile-presentation='cards'] > :is(tbody, tfoot) > tr > [data-suite-card-secondary] { order: -1; }
  [data-suite-mobile-presentation='cards'] :is(input:not([type='checkbox']):not([type='radio']), select, textarea, button, code) {
    min-inline-size: 0; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere;
  }
}
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 0;
  background: var(--suite-canvas-bg, var(--surface-strong));
  color: var(--text);
  font-family: var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif);
  font-size: var(--suite-type-body);
  line-height: var(--suite-line-body);
  letter-spacing: 0;
}

body.is-resizing-sidebar {
  cursor: col-resize;
  user-select: none;
}

button,
input,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell-frame {
  --shell-workspace-top-gap: var(--suite-shell-workspace-margin-top, 0px);
  --shell-workspace-right-gap: var(--suite-shell-workspace-margin-right, 0px);
  --shell-workspace-bottom-gap: var(--suite-shell-workspace-margin-bottom, 0px);
  --shell-workspace-left-gap: var(--suite-shell-workspace-margin-left, 0px);
  --shell-content-padding-left: var(--shell-workspace-left-gap);
  --shell-content-padding-right: var(--shell-workspace-right-gap);
  --shell-page-container-radius: var(--suite-radius-main-panel, var(--suite-radius-control, 20px));
  --shell-sidebar-container-radius: var(--suite-shell-sidebar-radius, 20px);
  --shell-sidebar-container-margin-top: var(--suite-shell-sidebar-container-margin-top, 15px);
  --shell-sidebar-container-margin-right: var(--suite-shell-sidebar-container-margin-right, 0px);
  --shell-sidebar-container-margin-bottom: var(--suite-shell-sidebar-container-margin-bottom, 15px);
  --shell-sidebar-container-margin-left: var(--suite-shell-sidebar-container-margin-left, 15px);
  --shell-sidebar-container-margin-block: var(--suite-shell-sidebar-container-margin-block, var(--shell-sidebar-container-margin-top));
  --shell-sidebar-container-margin: var(
    --suite-shell-sidebar-container-margin,
    var(--shell-sidebar-container-margin-top) var(--shell-sidebar-container-margin-right) var(--shell-sidebar-container-margin-bottom) var(--shell-sidebar-container-margin-left)
  );
  --shell-sidebar-container-padding-block: 5px;
  --shell-sidebar-pill-radius: var(--suite-shell-sidebar-radius, 20px);
  --shell-placeholder-workbench-gutter: var(
    --suite-main-panel-margin-right,
    var(--suite-theme-card-margin-right, 0px)
  );
  --suite-scroll-snap-offset: var(--shell-sidebar-container-margin-top);
  --shell-workspace-bg: var(--suite-canvas-bg, var(--surface-strong));
  --shell-sidebar-bg: var(--suite-shell-sidebar-strong-bg, var(--suite-canvas-bg, var(--surface-strong)));
  --shell-sidebar-backdrop: var(--suite-shell-sidebar-backdrop, blur(18px));
  --shell-feature-frame-bg: transparent;
  --suite-top-tab-active-bg: var(--primary-soft);
  --suite-top-tab-active-color: var(--primary);
  --suite-spacing-main-panel-inline-size: max(0px, calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))));
  --suite-spacing-main-panel-block-size: max(0px, calc(100% - var(--suite-main-panel-margin-top, var(--suite-theme-card-margin-top, 0px)) - var(--suite-main-panel-margin-bottom, var(--suite-theme-card-margin-bottom, 0px))));
  --suite-spacing-sub-panel-inline-size: max(0px, calc(100% - var(--suite-sub-panel-margin-left, 0px) - var(--suite-sub-panel-margin-right, 0px)));
  --suite-spacing-toolbar-inline-size: max(0px, calc(100% - var(--suite-module-toolbar-margin-left, 0px) - var(--suite-module-toolbar-margin-right, 0px)));
  --suite-management-switchbar-sticky-top: 0px;
  --suite-shell-sidebar-collapsed-target-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  --suite-form-invalid-ring: 0 0 0 3px color-mix(in srgb, var(--danger, #c94747) 14%, transparent);
  --suite-shell-menu-option-inner-radius: max(0px, calc(var(--suite-dropdowns-radius, var(--suite-radius-control, 20px)) - var(--suite-space-1, 4px)));
  --suite-shell-project-option-inner-radius: max(0px, calc(var(--suite-dropdowns-radius, var(--suite-shared-radius-8px, 8px)) - var(--suite-shared-border-width-3px, 3px)));
  --suite-settings-menu-max-width: min(var(--suite-shared-width-284px, 284px), calc(100vw - var(--suite-space-6, 24px)));
  --suite-ui-icon-swatch-selected-ring: inset 0 0 0 var(--suite-shared-border-width-1px, 1px) color-mix(in srgb, var(--primary) 30%, transparent);
  --suite-ui-preview-selected-shadow: 0 0 0 var(--suite-space-1, 4px) color-mix(in srgb, var(--primary-soft) 62%, transparent);
  --permission-admin-scope-active-indicator: inset var(--suite-shared-border-width-3px, 3px) 0 0 var(--primary);
  --permission-admin-scope-depth-indicator: inset var(--suite-shared-border-width-3px, 3px) 0 0 color-mix(in srgb, var(--primary) 42%, transparent);
  --permission-admin-scope-root-marker-size: var(--suite-shared-size-8px, 8px);
  --permission-admin-scope-root-marker-radius: var(--suite-pill-radius, 999px);
  --permission-admin-scope-role-border: color-mix(in srgb, var(--primary) 16%, var(--line));
  --permission-admin-scope-role-background: color-mix(in srgb, var(--primary-soft) 26%, var(--surface));
  --permission-admin-scope-role-grid-template: var(--suite-shared-width-16px, 16px) minmax(0, 1fr) auto var(--suite-shared-width-22px, 22px);
  --permission-admin-member-grid-template: 42px minmax(300px, 1.5fr) 120px 130px 130px;
  --permission-admin-member-grid-min-width: 780px;
  --permission-admin-scope-name-input-min-width: var(--suite-shared-min-width-130px, 130px);
  position: relative;
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--shell-workspace-bg);
}

.auth-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--surface-strong);
}

.auth-gate-shell {
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
}

.auth-gate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.auth-gate-brand .toolbar-monitor {
  width: var(--suite-shared-width-22px, 22px);
  height: var(--suite-icon-size-18px, 18px);
  position: relative;
  flex: 0 0 auto;
  border: var(--suite-shared-border-2px-solid-primary, 2px solid var(--primary));
  border-radius: var(--suite-shared-radius-4px, 4px);
}

.auth-gate-brand .toolbar-monitor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: var(--suite-shared-width-10px, 10px);
  height: var(--suite-shared-height-2px, 2px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
  transform: translateX(-50%);
}

.auth-gate-brand strong {
  font-size: var(--suite-type-title);
}

.suite-main-panel.auth-gate-panel {
  display: grid;
  gap: 14px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: 20px;
  padding: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.suite-main-panel.auth-gate-panel-pending {
  gap: 16px;
}

.auth-restore-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--suite-type-body);
}

.auth-restore-spinner {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
  flex: 0 0 auto;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: auth-restore-spin 0.8s linear infinite;
}

@keyframes auth-restore-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-restore-spinner {
    animation: none;
  }
}

.auth-gate-kicker {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.suite-main-panel.auth-gate-panel h1 {
  margin: 0;
  font-size: var(--suite-type-title);
  line-height: 1.15;
}

.suite-main-panel.auth-gate-panel p {
  color: var(--muted);
  font-size: var(--suite-type-body);
  line-height: 1.55;
}

.suite-segmented.auth-mode-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: var(--suite-shared-padding-4px, 4px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-muted);
}

.suite-segmented.auth-mode-switcher .suite-segmented-option {
  min-width: 0;
  border: 0;
  border-radius: var(--suite-shared-radius-6px, 6px);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.suite-segmented.auth-mode-switcher .suite-segmented-option.active {
  color: var(--primary);
  background: var(--primary-soft);
}

.auth-registration-intent {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.auth-registration-intent > span,
.account-registration-scope-head span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.auth-registration-intent small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.5;
}

.suite-segmented.auth-account-type-switcher,
.suite-segmented.account-registration-type-switcher {
  width: fit-content;
  max-width: 100%;
}

.suite-segmented.auth-account-type-switcher .suite-segmented-option,
.suite-segmented.account-registration-type-switcher .suite-segmented-option {
  border: 0;
  border-radius: var(--suite-shared-radius-6px, 6px);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.suite-segmented.auth-account-type-switcher .suite-segmented-option.active,
.suite-segmented.account-registration-type-switcher .suite-segmented-option.active {
  color: var(--primary);
  background: var(--primary-soft);
}

.auth-gate-form {
  display: grid;
  gap: 12px;
}

.auth-field {
  padding: 0;
}

.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-wrap .suite-field-control {
  padding-inline-end: calc(var(--suite-icon-button-size, var(--suite-control-height)) + var(--suite-space-2));
}

.suite-button.password-toggle {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  width: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-button.password-toggle:hover,
.suite-button.password-toggle[aria-pressed='true'] {
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-button.password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.suite-button.password-toggle .ui-icon {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
}

.auth-gate-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.auth-gate-login {
  width: fit-content;
  min-height: var(--suite-shared-min-height-40px, 40px);
}

.auth-reset-contact {
  width: 100%;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  line-height: 1.55;
}

.auth-sso-panel {
  display: grid;
  gap: 10px;
}

.auth-sso-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.auth-sso-divider::before,
.auth-sso-divider::after {
  content: '';
  height: var(--suite-shared-height-1px, 1px);
  background: var(--line);
}

.auth-sso-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.suite-button.auth-sso-button {
  width: 100%;
  justify-content: center;
}

.suite-button.auth-sso-button .ui-icon {
  width: var(--suite-icon-size-17px, 17px);
  height: var(--suite-icon-size-17px, 17px);
}

.auth-google-button-shell,
.auth-google-button-shell > div {
  width: 100%;
}

.auth-google-button-shell iframe {
  max-width: 100%;
}

.auth-sso-config-warning {
  color: var(--warning);
}

.auth-gate-force {
  min-height: var(--suite-shared-min-height-40px, 40px);
  color: var(--warning);
  background: var(--warning-soft);
  border-color: rgba(168, 98, 7, 0.24);
}

.auth-gate-login .ui-icon {
  width: var(--suite-icon-size-17px, 17px);
  height: var(--suite-icon-size-17px, 17px);
}

.auth-gate-force .ui-icon {
  width: var(--suite-icon-size-17px, 17px);
  height: var(--suite-icon-size-17px, 17px);
}

.suite-main-panel.auth-gate-panel small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.suite-main-panel.auth-gate-panel small.warn {
  color: var(--warning);
}

.auth-force-hint {
  display: block;
  margin-top: 4px;
}

.auth-device-limit {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: 1px solid rgba(168, 98, 7, 0.24);
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--warning-soft);
}

.auth-device-limit > strong {
  color: var(--warning);
  font-size: var(--suite-type-body);
}

.auth-device-limit p {
  margin: 0;
  font-size: var(--suite-type-caption);
}

.auth-current-device {
  display: grid;
  gap: 3px;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: rgba(37, 99, 235, 0.08);
}

.auth-current-device span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.auth-current-device strong {
  font-size: var(--suite-type-body);
}

.auth-current-device small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--suite-type-caption);
}

.auth-device-list {
  display: grid;
  gap: 8px;
}

.auth-device-option {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--text);
  background: var(--surface-strong);
  text-align: left;
  cursor: pointer;
}

.auth-device-option:hover {
  border-color: var(--warning);
}

.auth-device-option span {
  min-width: 0;
}

.auth-device-copy {
  display: grid;
  gap: 6px;
}

.auth-device-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.auth-device-option b,
.auth-device-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-device-meta {
  display: grid;
  gap: 2px;
}

.auth-device-meta small:last-child {
  font-family: var(--mono);
}

.auth-device-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.auth-device-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--suite-shared-height-20px, 20px);
  border-radius: var(--suite-radius-pill, 999px);
  padding: 0 7px;
  font-size: var(--suite-type-caption);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.auth-device-badge.online,
.auth-device-badge.current {
  color: var(--success);
  background: rgba(8, 127, 91, 0.12);
}

.auth-device-badge.recent {
  color: var(--primary);
  background: var(--primary-soft);
}

.auth-device-badge.kind {
  color: var(--text-muted);
  background: rgba(90, 104, 122, 0.12);
}

.auth-device-badge.old,
.auth-device-badge.unknown {
  color: var(--warning);
  background: var(--suite-shared-bg-168-98-7-0-12, rgba(168, 98, 7, 0.12));
}

.auth-device-option em {
  color: var(--warning);
  font-size: var(--suite-type-caption);
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.smooth-disclosure-summary {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
}

.smooth-disclosure-summary:focus-visible {
  outline: var(--suite-state-focus-ring-width, 3px) solid var(--suite-state-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-state-focus-ring-offset, 2px);
}

.smooth-disclosure-summary .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
  color: var(--muted);
  transition: transform 220ms ease, color 180ms ease;
}

.smooth-disclosure.expanded > .smooth-disclosure-summary .ui-icon {
  transform: rotate(180deg);
}

.smooth-disclosure-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition:
    grid-template-rows 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease,
    transform 220ms ease,
    visibility 0s linear 260ms;
}

.smooth-disclosure.expanded > .smooth-disclosure-body {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    grid-template-rows 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease,
    transform 220ms ease,
    visibility 0s linear 0s;
}

.smooth-disclosure-inner {
  min-height: 0;
  overflow: hidden;
}

.suite-toolbar.shell-toolbar {
  --shell-toolbar-control-height: var(--suite-control-height, 30px);
  position: relative;
  z-index: 50;
  box-sizing: border-box;
  align-self: stretch;
  width: auto;
  inline-size: auto;
  min-width: 0;
  min-inline-size: 0;
  max-width: none;
  max-inline-size: none;
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(220px, 1fr) auto;
  align-items: var(--suite-shell-topbar-align-items, center);
  gap: var(--suite-shell-topbar-gap, 12px);
  margin: var(--suite-shell-topbar-margin, 0px);
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border-width: var(--suite-shell-topbar-border-width, 0 0 1px 0);
  border-style: solid;
  border-color: var(--suite-shell-topbar-border-color, var(--line));
  border-radius: var(--suite-shell-topbar-radius, 0px);
  background: var(--suite-shell-topbar-strong-bg, rgba(255, 255, 255, 0.84));
  -webkit-backdrop-filter: var(--suite-shell-topbar-backdrop, blur(18px));
  backdrop-filter: var(--suite-shell-topbar-backdrop, blur(18px));
  box-shadow: var(--shadow-soft);
  text-align: var(--suite-shell-topbar-text-align, left);
}

.suite-toolbar.shell-toolbar.is-overlay-open {
  z-index: var(--suite-shell-topbar-overlay-z-index, 5000);
}

:root[data-theme='dark'] .suite-toolbar.shell-toolbar {
  background: var(--suite-shell-topbar-strong-bg, rgba(15, 23, 42, 0.86));
}

.suite-toolbar.shell-toolbar .toolbar-left,
.suite-toolbar.shell-toolbar .toolbar-center,
.suite-toolbar.shell-toolbar .toolbar-right {
  min-width: 0;
  display: flex;
  align-items: var(--suite-shell-topbar-align-items, center);
  gap: 8px;
}

.suite-toolbar.shell-toolbar .toolbar-left {
  justify-content: flex-start;
}

.suite-toolbar.shell-toolbar .toolbar-left > strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-body);
}

.suite-workspace-brand-control {
  position: relative;
  min-width: 0;
  flex: 0 1 auto;
}

.suite-workspace-brand-trigger.suite-button {
  width: auto;
  max-width: min(220px, 30vw);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--suite-radius-control, 12px);
  color: var(--text);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.suite-workspace-brand-trigger.suite-button:hover,
.suite-workspace-brand-trigger.suite-button:focus-visible,
.suite-workspace-brand-control.is-open .suite-workspace-brand-trigger {
  color: var(--text);
  background: var(--primary-soft);
}

.suite-workspace-brand-logo,
.suite-workspace-brand-logo > .toolbar-logo {
  display: grid;
  place-items: center;
}

.suite-workspace-brand-copy {
  min-width: 0;
  display: grid;
  gap: 0;
  line-height: 1.1;
}

.suite-workspace-brand-title,
.suite-workspace-brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-workspace-brand-title {
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-workspace-brand-name {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.suite-workspace-menu {
  position: absolute;
  z-index: var(--suite-shell-topbar-overlay-menu-z-index, 5001);
  inset-block-start: calc(100% + 7px);
  inset-inline-start: 0;
  width: min(300px, calc(100vw - 24px));
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  padding: var(--suite-container-safety-inset, 12px);
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-main-panel, 16px);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.suite-workspace-menu-current {
  display: grid;
  gap: 3px;
  padding: 5px 7px 9px;
  border-bottom: 1px solid var(--line);
}

.suite-workspace-menu-current span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-workspace-menu-current strong {
  overflow-wrap: anywhere;
}

.suite-workspace-menu-actions {
  display: grid;
  gap: 4px;
}

.suite-workspace-menu-workspaces {
  display: grid;
  gap: 4px;
  padding-block-end: 8px;
  border-bottom: 1px solid var(--line);
}

.suite-workspace-menu-item.suite-button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.suite-workspace-menu-workspace.suite-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.suite-workspace-menu-workspace.is-active.suite-button:disabled {
  cursor: default;
  opacity: 1;
  color: var(--text);
  background: var(--primary-soft);
}

.suite-workspace-menu-workspace-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-workspace-menu-current-mark {
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  white-space: nowrap;
}

.suite-workspace-menu-item.suite-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.suite-toolbar.shell-toolbar .toolbar-center {
  position: relative;
  justify-content: center;
}

.suite-toolbar.shell-toolbar .toolbar-right {
  justify-content: flex-end;
  justify-self: end;
}

.suite-toolbar.shell-toolbar .toolbar-monitor {
  width: var(--suite-shared-width-22px, 22px);
  height: var(--suite-icon-size-18px, 18px);
  position: relative;
  flex: 0 0 auto;
  border: var(--suite-shared-border-2px-solid-primary, 2px solid var(--primary));
  border-radius: var(--suite-shared-radius-4px, 4px);
}

.suite-toolbar.shell-toolbar .toolbar-monitor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: var(--suite-shared-width-10px, 10px);
  height: var(--suite-shared-height-2px, 2px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
  transform: translateX(-50%);
}

.suite-toolbar.shell-toolbar .toolbar-logo,
.auth-gate-brand .toolbar-logo {
  width: var(--suite-shared-width-22px, 22px);
  height: var(--suite-shared-height-22px, 22px);
  display: grid;
  place-items: center;
  color: var(--primary);
  border: 0;
  border-radius: 0;
}

.suite-toolbar.shell-toolbar .toolbar-logo::after,
.auth-gate-brand .toolbar-logo::after {
  content: none;
}

.suite-toolbar.shell-toolbar .toolbar-logo .ui-icon,
.auth-gate-brand .toolbar-logo .ui-icon {
  width: var(--suite-icon-size-20px, 20px);
  height: var(--suite-icon-size-20px, 20px);
}

.suite-toolbar-button.toolbar-settings {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--suite-shell-topbar-radius, 20px);
  color: var(--primary);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.suite-toolbar-button.toolbar-settings .ui-icon {
  width: var(--suite-icon-size-19px, 19px);
  height: var(--suite-icon-size-19px, 19px);
}

.suite-toolbar-button.toolbar-settings:hover {
  color: var(--primary);
  background: var(--primary-soft);
}


.sidebar-toolbar-toggle .ui-icon {
  width: var(--suite-icon-size-19px, 19px);
  height: var(--suite-icon-size-19px, 19px);
}

.suite-toolbar-button.sidebar-toolbar-toggle:hover {
  color: var(--primary);
  background: transparent;
}

.suite-toolbar.shell-toolbar .toolbar-left .settings-menu {
  left: 0;
  right: auto;
}

.suite-toolbar.shell-toolbar .toolbar-status,
.suite-control.toolbar-sync-status,
.suite-control.toolbar-shared-ui-status,
.suite-combobox-shell.toolbar-scope {
  display: inline-flex;
  gap: 7px;
  padding: 0 12px;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 800;
  white-space: nowrap;
}

.suite-toolbar.shell-toolbar .toolbar-status,
.suite-control.toolbar-sync-status,
.suite-control.toolbar-shared-ui-status {
  height: var(--suite-status-height, var(--shell-toolbar-control-height));
  min-height: var(--suite-status-height, var(--shell-toolbar-control-height));
  align-items: var(--suite-status-align-items, center);
  justify-content: var(--suite-status-justify-content, flex-start);
  border-width: var(--suite-status-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-status-border-color, var(--line));
  border-radius: var(--suite-status-radius, var(--suite-radius-control, 20px));
  background: var(--suite-status-surface-bg, var(--surface));
  text-align: var(--suite-status-text-align, left);
}


.suite-combobox-shell.toolbar-scope {
  height: var(--suite-dropdowns-height, var(--shell-toolbar-control-height));
  min-height: var(--suite-dropdowns-height, var(--shell-toolbar-control-height));
  min-width: var(--suite-shared-min-width-230px, 230px);
  align-items: var(--suite-dropdowns-align-items, center);
  justify-content: var(--suite-dropdowns-justify-content, space-between);
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-control, 20px));
  background: var(--suite-dropdowns-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-combobox-shell.toolbar-project-combobox {
  width: var(--suite-shared-width-min-100-360px, min(100%, 360px));
  max-width: var(--suite-shared-width-360px, 360px);
  min-width: 0;
  position: relative;
}

.suite-toolbar.shell-toolbar .toolbar-project-picker {
  --suite-dropdown-trigger-width: 100%;
  --suite-dropdowns-menu-width: var(--suite-dropdown-trigger-width);
  --suite-dropdowns-menu-min-width: var(--suite-dropdown-trigger-width);
  --suite-dropdowns-menu-max-width: var(--suite-dropdown-trigger-width);
  position: relative;
  width: var(--suite-shared-width-min-100-360px, min(100%, 360px));
  max-width: var(--suite-shared-width-360px, 360px);
  min-width: 0;
}

.suite-toolbar.shell-toolbar .toolbar-project-picker.open {
  z-index: var(--suite-shell-topbar-overlay-menu-z-index, 5001);
}

.suite-combobox-shell.toolbar-project-combobox .suite-dropdown-trigger {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--suite-dropdowns-height, var(--shell-toolbar-control-height));
  padding: 0 calc(var(--suite-dropdowns-height, var(--shell-toolbar-control-height)) + 4px) 0 12px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-combobox-shell.toolbar-project-combobox .suite-dropdown-trigger:focus-visible,
.toolbar-project-picker.open .suite-combobox-shell.toolbar-project-combobox .suite-dropdown-trigger {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  outline-offset: 1px;
}

.suite-combobox-shell.toolbar-project-combobox .suite-dropdown-trigger::placeholder {
  color: var(--muted);
  opacity: 0.84;
}

.suite-combobox-shell.toolbar-project-combobox small {
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.suite-combobox-affordance.toolbar-project-toggle {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  width: var(--suite-buttons-height, var(--suite-control-height));
  height: var(--suite-buttons-height, var(--suite-control-height));
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: var(--suite-shell-topbar-radius, var(--suite-radius-button, var(--suite-radius-control)));
  color: var(--muted);
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.suite-combobox-affordance.toolbar-project-toggle:hover,
.suite-combobox-affordance.toolbar-project-toggle:focus-visible,
.suite-combobox-affordance.toolbar-project-toggle:active,
.toolbar-project-picker.open .suite-combobox-affordance.toolbar-project-toggle {
  color: var(--primary);
  border-color: transparent;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

.suite-combobox-affordance.toolbar-project-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.toolbar-project-picker.locked .suite-combobox-shell.toolbar-project-combobox {
  cursor: not-allowed;
  opacity: 0.78;
}

.toolbar-project-picker.locked .suite-combobox-shell.toolbar-project-combobox small {
  display: none;
}

.toolbar-project-picker.open .suite-combobox-shell.toolbar-project-combobox small {
  transform: rotate(225deg) translate(-1px, -1px);
}

.suite-menu.suite-dropdown-menu.toolbar-project-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  z-index: var(--suite-shell-topbar-overlay-menu-z-index, 5001);
  box-sizing: border-box;
  width: var(--suite-dropdowns-menu-width, var(--suite-dropdown-trigger-width, max-content));
  min-width: var(--suite-dropdowns-menu-min-width, var(--suite-dropdown-trigger-width, max-content));
  max-width: var(--suite-dropdowns-menu-max-width, min(420px, calc(100vw - 24px)));
  max-height: var(--suite-shared-height-min-420px-calc-100vh-70px, min(420px, calc(100vh - var(--suite-control-height, 30px) - var(--suite-container-safety-inset, 4px) - var(--suite-container-safety-inset, 4px) - 25px)));
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--suite-shared-padding-8px, 8px);
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-panel, var(--suite-shared-radius-20px, 20px)));
  background: var(--suite-dropdowns-menu-surface-bg, var(--suite-dropdowns-strong-bg, var(--suite-dropdowns-surface-bg, var(--surface))));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, blur(24px) saturate(1.35));
  backdrop-filter: var(--suite-dropdowns-backdrop, blur(24px) saturate(1.35));
  box-shadow: var(--suite-dropdowns-shadow, 0 22px 56px rgba(15, 23, 42, 0.22));
  text-align: var(--suite-dropdowns-text-align, left);
  overflow-y: auto;
}

.suite-menu.suite-dropdown-menu {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: var(--suite-shared-padding-6px, 6px);
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-control, 10px));
  background: var(--suite-dropdowns-menu-surface-bg, var(--suite-dropdowns-strong-bg, var(--suite-dropdowns-surface-bg, var(--surface))));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  box-shadow: var(--suite-dropdowns-shadow, var(--shadow-soft));
}

.suite-dropdown-option.suite-menu-option {
  width: 100%;
  min-height: var(--suite-dropdowns-height, var(--suite-control-height, 30px));
  display: flex;
  align-items: var(--suite-dropdowns-align-items, center);
  justify-content: var(--suite-dropdowns-justify-content, flex-start);
  padding: var(--suite-dropdown-option-padding, 5px 8px);
  border: 0;
  border-radius: max(0px, calc(var(--suite-dropdowns-radius, var(--suite-radius-control, 10px)) - 3px));
  color: var(--text);
  background: transparent;
  font-size: var(--suite-type-caption);
  font-weight: 800;
  text-align: var(--suite-dropdowns-text-align, left);
  box-shadow: none;
}

.suite-dropdown-option:hover,
.suite-dropdown-option:focus-visible,
.suite-dropdown-option.active {
  color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}

.suite-menu.toolbar-project-menu .toolbar-project-options {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.suite-menu.toolbar-project-menu .toolbar-project-year-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suite-menu.toolbar-project-menu .toolbar-project-year-group + .toolbar-project-year-group {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--line);
}

.suite-menu-option.toolbar-project-year-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--suite-dropdowns-height, var(--suite-shared-min-height-30px, 30px));
  padding: var(--suite-shared-padding-5px-8px, 5px 8px);
  border: 0;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: var(--suite-type-caption);
  font-weight: 850;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.suite-menu-option.toolbar-project-year-label:hover,
.suite-menu-option.toolbar-project-year-label:focus-visible {
  color: var(--text);
  background: var(--surface-soft);
  outline: none;
}

.suite-menu-option.toolbar-project-year-label::after {
  content: "";
  width: var(--suite-shared-width-6px, 6px);
  height: var(--suite-shared-height-6px, 6px);
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.toolbar-project-year-group.collapsed .suite-menu-option.toolbar-project-year-label::after {
  transform: rotate(-45deg);
}

.suite-menu-option.toolbar-project-year-label span {
  flex: 1;
}

.suite-menu.toolbar-project-menu .toolbar-project-year-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option {
  min-height: var(--suite-dropdowns-height, var(--suite-form-height, 30px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--suite-shell-menu-option-inner-radius);
  background: transparent;
  box-shadow: none;
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-menu.toolbar-project-menu .suite-menu-option.project-option {
  min-height: var(--suite-dropdowns-height, var(--suite-form-height, 30px));
  padding: 0 10px;
  border-radius: var(--suite-shell-menu-option-inner-radius);
}

.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 760;
  text-align: inherit;
}

.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option span {
  max-width: var(--suite-shared-width-88px, 88px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 760;
  text-align: inherit;
}

.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option:hover,
.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option.active {
  border-color: transparent;
  background: var(--primary-soft);
}

.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option:hover strong,
.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option.active strong {
  color: var(--primary);
}

.suite-menu.toolbar-project-menu .suite-menu-option.toolbar-project-option.active span {
  color: var(--primary);
  opacity: 0.82;
}

.suite-toolbar-button.toolbar-diagnostics {
  cursor: pointer;
}

.suite-control.toolbar-sync-status {
  padding: 0 10px;
  color: var(--muted);
}

.suite-control.toolbar-shared-ui-status {
  padding: 0 10px;
  color: var(--muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.suite-control.toolbar-shared-ui-status:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 58%, transparent);
  outline-offset: 2px;
}

.suite-control.toolbar-sync-status i {
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.suite-control.toolbar-shared-ui-status i {
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  flex: 0 0 auto;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.suite-control.toolbar-sync-status strong {
  max-width: var(--suite-shared-width-72px, 72px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-caption);
}

.suite-control.toolbar-shared-ui-status strong {
  max-width: var(--suite-shared-width-94px, 94px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-caption);
}

.suite-control.toolbar-sync-status.success i {
  background: var(--success);
}

.suite-control.toolbar-shared-ui-status.success i {
  background: var(--success);
}

.suite-control.toolbar-sync-status.warning i {
  background: var(--warning);
}

.suite-control.toolbar-shared-ui-status.warning i {
  background: var(--warning);
}

.suite-control.toolbar-sync-status.danger i {
  background: var(--danger);
}

.suite-control.toolbar-shared-ui-status.danger i {
  background: var(--danger);
}

.suite-control.toolbar-shared-ui-status.success {
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
  background: color-mix(in srgb, var(--success) 8%, var(--surface-soft));
}

.suite-control.toolbar-sync-status.warning {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-soft));
}

.suite-control.toolbar-shared-ui-status.warning {
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-soft));
}

.suite-control.toolbar-shared-ui-status.danger {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-soft));
}

.toolbar-diagnostics [data-toolbar-system-status-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toolbar-diagnostics [data-toolbar-system-status-icon] > .ui-icon {
  color: inherit;
}

.suite-toolbar-button.toolbar-diagnostics strong {
  font-size: var(--suite-type-caption);
}

.suite-toolbar-button.toolbar-diagnostics b {
  min-width: var(--suite-icon-size-17px, 17px);
  height: var(--suite-icon-size-17px, 17px);
  display: inline-grid;
  place-items: center;
  border-radius: var(--suite-radius-pill, 999px);
  color: #ffffff;
  background: var(--primary);
  font-size: var(--suite-type-caption);
  line-height: 1;
}

.toolbar-diagnostics:hover,
.toolbar-diagnostics.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.suite-combobox-shell.toolbar-scope span,
.suite-combobox-shell.toolbar-scope small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.suite-combobox-shell.toolbar-scope strong {
  max-width: var(--suite-shared-width-150px, 150px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-caption);
}

.suite-toolbar.shell-toolbar .toolbar-tab {
  padding-inline-start: var(--suite-button-padding-x, var(--suite-space-3));
}

.suite-toolbar.shell-toolbar .toolbar-tab span {
  min-width: var(--suite-shared-width-22px, 22px);
  height: var(--suite-shared-height-20px, 20px);
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-7px, 7px);
  color: var(--primary);
  background: var(--primary-soft);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.suite-toolbar.shell-toolbar .toolbar-tab.active {
  color: #ffffff;
  border-color: var(--primary);
  background: var(--primary);
}

.suite-toolbar.shell-toolbar .toolbar-tab.active span {
  color: var(--primary);
  background: var(--suite-shared-bg-hex-ffffff, #ffffff);
}

.suite-toolbar.shell-toolbar .toolbar-tab.locked {
  opacity: 0.64;
}

.suite-toolbar.shell-toolbar .toolbar-separator {
  width: var(--suite-shared-width-1px, 1px);
  height: var(--suite-shared-height-20px, 20px);
  background: var(--line);
}

.suite-toolbar.shell-toolbar .toolbar-utility {
  color: var(--muted);
}

.suite-toolbar.shell-toolbar .toolbar-status {
  color: var(--muted);
  background: var(--suite-shell-topbar-surface-bg, transparent);
}

.suite-toolbar.shell-toolbar .toolbar-status i {
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.suite-toolbar.shell-toolbar .toolbar-status.good {
  color: var(--success);
}

.suite-toolbar.shell-toolbar .toolbar-status.good i {
  background: var(--success);
}

.suite-toolbar.shell-toolbar .toolbar-status.bad {
  color: var(--danger);
}

.suite-toolbar.shell-toolbar .toolbar-status.bad i {
  background: var(--danger);
}

.suite-toolbar.shell-toolbar .toolbar-status.warn {
  color: var(--warning);
}

.suite-toolbar.shell-toolbar .toolbar-status.warn i {
  background: var(--warning);
}

.suite-toolbar.shell-toolbar .toolbar-current {
  min-width: var(--suite-shared-min-width-154px, 154px);
  justify-content: space-between;
  color: var(--muted);
  background: var(--surface);
}

.suite-toolbar.shell-toolbar .toolbar-current::after {
  content: "⌄";
  color: var(--primary);
  font-weight: 900;
}

.suite-toolbar.shell-toolbar .toolbar-primary {
  color: #ffffff;
  border-color: #2f73ff;
  background: var(--suite-shared-bg-hex-2f73ff, #2f73ff);
  box-shadow: 0 8px 20px rgba(47, 115, 255, 0.22);
}

.suite-toolbar.shell-toolbar .toolbar-primary::before {
  content: "↗";
  font-weight: 900;
}

.shell-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: calc(var(--sidebar-width, 286px) + var(--suite-shell-sidebar-container-margin-right, 0px)) minmax(0, 1fr);
  will-change: grid-template-columns;
  transition: grid-template-columns 260ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
  background: var(--shell-workspace-bg);
}

.shell-frame.resizing .shell-body {
  transition: none;
}

.sidebar {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-shell-sidebar-gap, 0px);
  margin: var(--shell-sidebar-container-margin);
  padding: var(--shell-sidebar-container-padding-block) 0;
  border-width: var(--suite-shell-sidebar-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-shell-sidebar-border-color, var(--line));
  border-radius: var(--shell-sidebar-container-radius);
  background: var(--shell-sidebar-bg);
  -webkit-backdrop-filter: var(--shell-sidebar-backdrop);
  backdrop-filter: var(--shell-sidebar-backdrop);
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
  overflow: hidden;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

:root[data-theme='dark'] .sidebar {
  background: var(--shell-sidebar-bg);
}

.brand-block {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 14px 16px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-14px, 14px);
  color: #ffffff;
  background: var(--primary);
  font-size: var(--suite-type-body);
  font-weight: 900;
  box-shadow: 0 10px 24px var(--primary-soft);
}

h1 {
  margin: 0;
  font-size: var(--suite-type-title);
  line-height: 1.2;
}

p {
  margin: 0;
}

.brand-block p,
.body-copy,
.empty-copy {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.55;
}

.nav-list {
  position: relative;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--suite-shared-padding-8px, 8px) 12px;
  transition:
    gap 220ms cubic-bezier(0.2, 0, 0, 1),
    padding 260ms cubic-bezier(0.2, 0, 0, 1);
  overflow-y: auto;
}

.nav-group-list {
  gap: var(--suite-shared-gap-8px, 8px);
}

.nav-group-list .nav-active-indicator {
  display: none;
}

.nav-group {
  position: relative;
  min-width: 0;
  flex: 0 0 auto;
  display: grid;
  padding: var(--suite-container-safety-inset, var(--suite-navigation-group-padding, 4px));
  border-width: var(--suite-navigation-group-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-group-border-color, var(--line));
  border-radius: var(--suite-navigation-group-radius, var(--suite-shared-radius-12px, 12px));
  background: var(--suite-navigation-group-surface-bg, color-mix(in srgb, var(--surface) 88%, transparent));
  -webkit-backdrop-filter: var(--suite-navigation-group-backdrop, none);
  backdrop-filter: var(--suite-navigation-group-backdrop, none);
  transition:
    border-color 140ms ease,
    background 140ms ease;
}

/* The selected item carries the highlight; its group keeps the plain group surface. */
.nav-group.active {
  border-color: var(--suite-navigation-group-border-color, var(--line));
  background: var(--suite-navigation-group-surface-bg, transparent);
}

.nav-group-head {
  min-width: 0;
  width: 100%;

  display: flex;
  align-items: center;
  gap: var(--suite-shared-gap-6px, 6px);

  border: 0;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--muted);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-group-head:hover {
  color: var(--text);
  background: transparent;
}

.nav-group-head:focus-visible {
  color: var(--text);
  background: transparent;
  outline: var(--suite-state-focus-ring-width, 2px) solid var(--suite-state-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-state-focus-ring-offset, 1px);
}

.nav-group-head strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: var(--suite-type-caption);
  font-weight: 900;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-icon {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.nav-group-icon .ui-icon,
.nav-group-icon svg {
  width: 100%;
  height: 100%;
}

.nav-group-chevron {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  transition: transform 160ms ease;
}

.nav-group-chevron .ui-icon,
.nav-group-chevron svg {
  width: var(--suite-icon-size-14px, 14px);
  height: var(--suite-icon-size-14px, 14px);
}

.nav-group.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

.suite-collapsible-group.collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-body {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--suite-navigation-group-motion-duration, 180ms) var(--suite-navigation-group-motion-easing, cubic-bezier(0.2, 0, 0, 1)),
    opacity var(--suite-navigation-group-motion-duration, 180ms) var(--suite-navigation-group-motion-easing, cubic-bezier(0.2, 0, 0, 1));
}

.nav-group.collapsed .nav-group-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.nav-group-inner {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: var(--suite-navigation-group-gap, var(--suite-shared-gap-4px, 4px));
  overflow: hidden;
}

.nav-group .nav-item {
  height: var(--suite-navigation-item-height, var(--suite-shared-height-40px, 40px));
  min-height: var(--suite-navigation-item-height, var(--suite-shared-height-40px, 40px));
}

.nav-group .nav-item.active,
.nav-group .nav-item.active:hover {
  background: var(--primary-soft);
}

.nav-active-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border: 0;
  border-radius: var(--suite-shell-sidebar-radius, var(--shell-sidebar-pill-radius));
  background: var(--primary-soft);
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, width, height, opacity;
  transition:
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms ease,
    background 160ms ease;
}

.nav-active-indicator.visible {
  opacity: 1;
}

.nav-active-indicator.stable-refresh {
  transition: none !important;
}

.nav-active-indicator.is-moving {
  box-shadow: none;
}

.shell-frame.nav-layout-switching .nav-active-indicator {
  opacity: 0;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .shell-body,
  .sidebar,
  .nav-list,
  .nav-item,
  .nav-copy,
  .nav-active-indicator,
  .sidebar-footer,
  .sidebar-account-icon,
  .sidebar-account-copy,
  .sidebar-resizer {
    transition: none;
  }
}

.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: var(--suite-navigation-item-align-items, var(--suite-shell-sidebar-align-items, center));
  align-content: center;
  height: var(--suite-navigation-item-height, var(--suite-shell-sidebar-height, 44px));
  min-height: var(--suite-navigation-item-height, var(--suite-shell-sidebar-height, 44px));
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  border: 0;
  border-radius: var(--suite-navigation-item-radius, var(--suite-shell-sidebar-radius, var(--shell-sidebar-pill-radius)));
  text-align: var(--suite-navigation-item-text-align, var(--suite-shell-sidebar-text-align, left));
  overflow: hidden;
  transition:
    width 260ms cubic-bezier(0.2, 0, 0, 1),
    height 260ms cubic-bezier(0.2, 0, 0, 1),
    min-height 260ms cubic-bezier(0.2, 0, 0, 1),
    padding 260ms cubic-bezier(0.2, 0, 0, 1),
    gap 220ms cubic-bezier(0.2, 0, 0, 1),
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.nav-item:hover:not(.active) {
  border-color: transparent;
  background: var(--surface-soft);
  box-shadow: none;
}

.nav-item.active {
  border-color: transparent;
  color: var(--suite-navigation-active-color, color-mix(in srgb, var(--primary) 45%, var(--text)));
  background: transparent;
  box-shadow: none;
}

.nav-item.active:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--primary);
  line-height: 0;
}

.nav-copy {
  min-width: 0;
  max-width: 180px;
  max-height: 32px;
  display: grid;
  align-self: stretch;
  align-content: center;
  justify-content: stretch;
  justify-items: var(--suite-navigation-item-text-align, left);
  text-align: var(--suite-navigation-item-text-align, left);
  gap: 2px;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width 240ms cubic-bezier(0.2, 0, 0, 1),
    max-height 220ms cubic-bezier(0.2, 0, 0, 1),
    opacity 140ms ease,
    transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.ui-icon {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-command {
  width: var(--suite-shared-width-34px, 34px);
  height: var(--suite-shared-height-34px, 34px);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: var(--suite-shared-radius-8px, 8px);
  padding: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.icon-command:hover {
  border-color: var(--primary);
  color: var(--text);
  background: var(--primary-soft);
}

.icon-command:active {
  transform: translateY(1px);
}

.icon-command:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.icon-command:disabled:hover {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  transform: none;
}

.nav-dot {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  margin-top: 5px;
  border-radius: 99px;
  background: var(--muted);
}

.nav-dot.ready {
  background: var(--success);
}

.nav-dot.experiment {
  background: var(--accent);
}

.nav-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-body);
  line-height: 1.2;
}

.nav-status {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item.planned {
  color: var(--muted);
}

.nav-item.planned .nav-icon {
  color: var(--muted);
}

.nav-status.planned {
  color: var(--warning);
}

.nav-item.locked {
  cursor: not-allowed;
  opacity: 0.78;
}

.nav-item.locked:hover:not(.active) {
  border-color: var(--line);
  background: transparent;
  box-shadow: none;
}

.nav-item.locked .nav-icon {
  color: var(--primary);
}

.nav-item.planned.locked .nav-icon {
  color: var(--muted);
}

.shell-frame.nav-layout-switching .nav-item,
.shell-frame.nav-layout-switching .nav-copy,
.shell-frame.nav-layout-switching .nav-list,
.shell-frame.nav-layout-switching .sidebar-footer,
.shell-frame.nav-layout-switching .sidebar-account-icon,
.shell-frame.nav-layout-switching .sidebar-account-copy {
  transition: none !important;
}

.sidebar-footer {
  box-sizing: border-box;
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  height: var(--suite-buttons-height, var(--suite-control-height));
  min-height: var(--suite-buttons-height, var(--suite-control-height));
  max-height: var(--suite-buttons-height, var(--suite-control-height));
  display: flex;
  align-items: var(--suite-shell-sidebar-align-items, center);
  justify-content: var(--suite-shell-sidebar-justify-content, flex-start);
  gap: 10px;
  border-width: var(--suite-shell-sidebar-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-shell-sidebar-border-color, var(--line));
  border-radius: var(--suite-shell-sidebar-radius, var(--shell-sidebar-pill-radius));
  background: var(--suite-shell-sidebar-surface-bg, var(--surface));
  color: var(--text);
  font: inherit;
  text-align: var(--suite-shell-sidebar-text-align, left);
  appearance: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition:
    width 260ms cubic-bezier(0.2, 0, 0, 1),
    height 260ms cubic-bezier(0.2, 0, 0, 1),
    max-height 240ms cubic-bezier(0.2, 0, 0, 1),
    margin 240ms cubic-bezier(0.2, 0, 0, 1),
    padding 240ms cubic-bezier(0.2, 0, 0, 1),
    gap 220ms cubic-bezier(0.2, 0, 0, 1),
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.2, 0, 0, 1),
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.sidebar-account-card:hover,
.sidebar-account-card.active {
  border-color: var(--primary);
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
}

.sidebar-account-card:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--suite-shared-shadow-0-0-0-3px-primary-soft, 0 0 0 3px var(--primary-soft));
  outline: none;
}

.sidebar-account-icon {
  width: var(--suite-shared-width-34px, 34px);
  height: var(--suite-shared-height-34px, 34px);
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: var(--primary);
  transition:
    width 240ms cubic-bezier(0.2, 0, 0, 1),
    height 240ms cubic-bezier(0.2, 0, 0, 1),
    flex-basis 240ms cubic-bezier(0.2, 0, 0, 1);
}

.sidebar-account-icon .ui-icon {
  width: 20px;
  height: var(--suite-shared-height-20px, 20px);
  stroke-width: 2;
}

.sidebar-account-copy {
  min-width: 0;
  max-width: 100%;
  max-height: 38px;
  display: grid;
  justify-content: var(--suite-shell-sidebar-justify-content, flex-start);
  justify-items: var(--suite-shell-sidebar-text-align, left);
  text-align: var(--suite-shell-sidebar-text-align, left);
  gap: 2px;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width 240ms cubic-bezier(0.2, 0, 0, 1),
    max-height 220ms cubic-bezier(0.2, 0, 0, 1),
    opacity 140ms ease,
    transform 220ms cubic-bezier(0.2, 0, 0, 1);
}

.sidebar-account-copy strong,
.sidebar-account-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-copy strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 800;
  line-height: 1.25;
}

.sidebar-account-copy small {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.15;
}

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: var(--suite-status-dot-size-8px, 8px);
  height: 100%;
  cursor: col-resize;
  opacity: 1;
  transition: opacity 160ms ease;
}

.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 48%;
  right: 3px;
  width: 2px;
  height: 58px;
  border-radius: var(--suite-radius-pill, 999px);
  background: transparent;
  transition: background 140ms ease;
}

.sidebar-resizer:hover::after,
.shell-frame.resizing .sidebar-resizer::after {
  background: var(--primary);
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar {
  align-items: center;
  z-index: 170;
  overflow: visible;
}

.shell-frame.sidebar-collapsed .shell-body {
  grid-template-columns: calc(var(--suite-shell-sidebar-collapsed-inline-size, 56px) + var(--suite-shell-sidebar-container-margin-left, 8px) + var(--suite-shell-sidebar-container-margin-right, 8px)) minmax(0, 1fr);
  overflow: visible;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-list {
  width: 100%;
  align-items: center;
  padding: var(--suite-shared-padding-8px, 8px) 0;
  /* Collapsed group icons keep the expanded item rhythm: one target plus the item gap. */
  gap: var(--suite-navigation-group-gap, var(--suite-shared-gap-4px, 4px));
  overflow: visible;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group {
  width: var(--suite-shell-sidebar-collapsed-target-size);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group-head {
  width: var(--suite-shell-sidebar-collapsed-target-size);
  /* Same height as an expanded navigation item, so the icon rhythm matches. */
  height: var(--suite-navigation-item-height, var(--suite-shared-height-40px, 40px));
  min-height: var(--suite-navigation-item-height, var(--suite-shared-height-40px, 40px));
  display: grid;
  place-items: center;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group-body,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group.collapsed .nav-group-body {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 90;
  width: max-content;
  min-width: 220px;
  max-width: min(320px, calc(100vw - var(--suite-ui-preview-sidebar-collapsed-width, 64px) - 24px));
  padding-left: var(--suite-shared-padding-8px, 8px);
  grid-template-rows: 1fr;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition:
    opacity 140ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group-inner {
  position: relative;
  z-index: 1;
  max-height: min(70vh, 560px);
  justify-items: stretch;
  gap: var(--suite-navigation-group-gap, var(--suite-shared-gap-4px, 4px));
  padding: var(--suite-shared-padding-6px, 6px);
  border: var(--suite-navigation-group-border-width, 1px) solid var(--suite-navigation-group-border-color, var(--line));
  border-radius: var(--suite-navigation-group-radius, var(--suite-shared-radius-12px, 12px));
  background: var(--surface-strong, var(--suite-menu-bg, var(--surface)));
  box-shadow: var(--suite-menu-shadow, var(--shadow-lg));
  -webkit-backdrop-filter: var(--suite-navigation-group-backdrop, none);
  backdrop-filter: var(--suite-navigation-group-backdrop, none);
  overflow-y: auto;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group-head strong,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group-chevron {
  display: none;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:hover,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:focus-within {
  z-index: 91;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:hover .nav-group-body,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:focus-within .nav-group-body {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-item {
  width: var(--suite-shell-sidebar-collapsed-target-size);
  height: var(--suite-shell-sidebar-collapsed-target-size);
  min-height: var(--suite-shell-sidebar-collapsed-target-size);
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  gap: 0;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-icon,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-copy {
  grid-column: 1;
  grid-row: 1;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-copy,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-resizer {
  pointer-events: none;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-copy {
  max-width: 0;
  max-height: 0;
  opacity: 0;
  transform: translateX(-8px);
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-footer {
  width: var(--suite-shell-sidebar-collapsed-target-size);
  height: var(--suite-shell-sidebar-collapsed-target-size);
  max-height: var(--suite-shell-sidebar-collapsed-target-size);
  margin: 0 auto 12px;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  justify-content: center;
  gap: 0;
  border-color: var(--line);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-footer.sidebar-account-card {
  justify-content: center;
  text-align: center;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-account-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-account-copy {
  display: none;
  max-width: 0;
  max-height: 0;
  opacity: 0;
  transform: translateX(-8px);
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-resizer {
  opacity: 0;
}

.workspace {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--shell-workspace-bg);
}

.topbar {
  position: relative;
  z-index: 40;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--suite-shared-padding-12px, 12px) 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
}

:root[data-theme='dark'] .topbar {
  background: rgba(15, 23, 42, 0.74);
}

.route-title span,
.fact span,
.tile-kicker {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
  text-transform: uppercase;
}

.suite-panel-title.panel-head > small,
.suite-panel-title.panel-head > div:first-child > small {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.route-title strong {
  display: block;
  margin-top: 4px;
  font-family: var(--suite-ui-title-font-family, var(--suite-title-font-family, var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif)));
  font-size: var(--suite-ui-title-preview-size, var(--suite-title-preview-size, var(--suite-type-title)));
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, 700));
  letter-spacing: var(--suite-ui-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-ui-title-line-height, var(--suite-title-line-height, var(--suite-line-title, 1.25)));
}

.route-title p {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
}

.toolbar,
.button-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.suite-control.status-pill,
.suite-button.tool-button,
.suite-button.command {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  color: var(--text);
  background: var(--suite-buttons-surface-bg, var(--surface));
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.suite-control.status-pill {
  min-height: var(--suite-shared-min-height-34px, 34px);
  padding: 0 12px;
  font-size: var(--suite-type-caption);
}

.suite-control.status-pill i {
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.suite-control.status-pill.good,
.suite-control.status-pill.success {
  color: var(--suite-status-success-on-surface, color-mix(in srgb, var(--success) 82%, var(--text)));
  background: var(--suite-status-success-surface-bg, var(--suite-shared-bg-8-127-91-0-1, rgba(8, 127, 91, 0.1)));
}

.suite-control.status-pill.warn,
.suite-control.status-pill.warning {
  color: var(--suite-status-warning-on-surface, color-mix(in srgb, var(--warning) 82%, var(--text)));
  background: var(--suite-status-warning-surface-bg, var(--suite-shared-bg-168-98-7-0-12, rgba(168, 98, 7, 0.12)));
}

.suite-control.status-pill.pending {
  color: var(--suite-status-pending-on-surface, color-mix(in srgb, var(--warning) 82%, var(--text)));
  background: var(--suite-status-pending-surface-bg, var(--suite-shared-bg-168-98-7-0-12, rgba(168, 98, 7, 0.12)));
}

.suite-control.status-pill.bad,
.suite-control.status-pill.danger {
  color: var(--suite-status-danger-on-surface, var(--danger));
  background: var(--suite-status-danger-surface-bg, var(--danger-soft));
}

.suite-control.status-pill.info {
  color: var(--suite-status-info-on-surface, var(--primary));
  background: var(--suite-status-info-surface-bg, var(--primary-soft));
}

.suite-control.status-pill:is(.info, .good, .success, .warn, .warning, .pending, .bad, .danger) i {
  background: currentColor;
}

.suite-control.status-pill.neutral {
  color: var(--muted);
  background: var(--suite-status-soft-bg, var(--surface-soft));
}

.suite-control.status-pill.neutral i {
  background: var(--muted);
}

.suite-button.tool-button,
.suite-button.command {
  min-height: var(--suite-buttons-height, var(--suite-control-height));
  align-items: var(--suite-buttons-align-items, center);
  justify-content: var(--suite-buttons-justify-content, center);
  border-width: var(--suite-buttons-border-width, 1px);
  border-radius: var(--suite-buttons-radius, var(--suite-radius-button, var(--suite-radius-control)));
  text-align: var(--suite-buttons-text-align, center);
}

.suite-control.status-pill {
  min-height: var(--suite-status-height, var(--suite-control-height));
  align-items: var(--suite-status-align-items, center);
  justify-content: var(--suite-status-justify-content, flex-start);
  border-width: var(--suite-status-border-width, 1px);
  border-radius: var(--suite-status-radius, var(--suite-radius-control));
  background: var(--suite-status-surface-bg, var(--surface));
  text-align: var(--suite-status-text-align, left);
}

.suite-button.command {
  border-radius: var(--suite-buttons-radius, var(--suite-radius-button, var(--suite-radius-control)));
}

.suite-button.tool-button,
.suite-button.command {
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, filter 140ms ease;
}

.suite-button.command.compact {
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
  gap: 5px;
}

.suite-button.tool-button:hover,
.suite-button.command:hover {
  border-color: var(--primary);
  background: var(--suite-buttons-primary-soft-bg, var(--primary-soft));
}

.suite-button.tool-button:not(:disabled):hover,
.suite-button.command:not(:disabled):hover {
  transform: translateY(calc(-1 * var(--suite-buttons-hover-lift, 1px)));
  box-shadow: var(--suite-buttons-hover-shadow, var(--shadow-soft));
  background: color-mix(in srgb, var(--primary) var(--suite-buttons-hover-layer-alpha, 10%), var(--suite-buttons-surface-bg, var(--surface)));
}

.suite-button.tool-button:focus-visible,
.suite-button.command:focus-visible {
  outline-style: solid;
  outline-width: var(--suite-buttons-focus-ring-width, 3px);
  outline-color: var(--suite-buttons-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-buttons-focus-ring-offset, 2px);
}

.suite-button.tool-button:disabled,
.suite-button.command:disabled,
.suite-button.suite-icon-button:disabled {
  cursor: not-allowed;
  filter: saturate(var(--suite-buttons-disabled-saturation, 32%));
  opacity: var(--suite-buttons-disabled-opacity, 0.56);
  transform: none;
  box-shadow: none;
}

.suite-button.tool-button[aria-busy='true'],
.suite-button.command[aria-busy='true'],
.suite-button.suite-icon-button[aria-busy='true'] {
  cursor: wait;
  filter: none;
  opacity: 1;
  gap: var(--suite-buttons-loading-gap, 7px);
}

.settings-anchor {
  position: relative;
}

.settings-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--suite-shell-topbar-overlay-menu-z-index, 5001);
  width: var(--suite-shared-width-284px, 284px);
  max-width: var(--suite-settings-menu-max-width);
}

.settings-title {
  padding: var(--suite-shared-padding-6px-8px, 6px 8px) 8px;
  border-bottom: 1px solid var(--line);
}

.settings-title span,
.settings-row > span {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.settings-title strong {
  display: block;
  margin-top: 3px;
  font-size: var(--suite-type-body);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--suite-shared-min-height-40px, 40px);
  padding: var(--suite-shared-padding-6px-8px, 6px 8px);
  border-bottom: 1px solid var(--line);
}

.settings-row:last-child {
  border-bottom: 0;
}

.suite-button.segmented-action,
.suite-segmented.segmented-control,
.suite-stepper-field.stepper,
.swatches {
  flex: 0 0 auto;
}

.suite-segmented.segmented-control {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: var(--suite-shared-min-width-116px, 116px);
  padding: var(--suite-shared-padding-2px, 2px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface-soft);
}

.suite-segmented.segmented-control .suite-segmented-option {
  flex: 1;
  border: 0;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.suite-segmented.segmented-control .suite-segmented-option.active {
  color: #ffffff;
  background: var(--primary);
  box-shadow: none;
}

.suite-button.segmented-action {
  min-width: var(--suite-shared-width-94px, 94px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  color: #ffffff;
  background: var(--primary);
  font-weight: 900;
  cursor: pointer;
}

.suite-stepper-field.stepper {
  display: grid;
  grid-template-columns: 28px 48px 28px;
  align-items: center;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface-soft);
  overflow: hidden;
}

.suite-stepper-field.stepper .suite-button {
  border: 0;
  color: var(--text);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.suite-stepper-field.stepper strong {
  text-align: center;
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.swatches {
  display: flex;
  gap: 7px;
}

.swatch {
  width: 20px;
  height: var(--suite-shared-height-20px, 20px);
  border: 2px solid transparent;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--swatch);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

.swatch.active {
  border-color: var(--text);
  transform: scale(1.08);
}

.settings-row.compact {
  min-height: var(--suite-dropdowns-height, var(--suite-shared-min-height-34px, 34px));
  padding: var(--suite-dropdown-option-padding, 5px 8px);
  border-bottom: 0;
}

.settings-row.compact > .suite-menu-label,
.settings-section > .suite-menu-label {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.settings-icon-action {
  width: var(--suite-shared-width-24px, 24px);
  height: var(--suite-shared-height-24px, 24px);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--suite-radius-pill, 999px);
  color: var(--primary);
  background: var(--primary-soft);
  cursor: pointer;
}

.settings-icon-action .ui-icon {
  width: var(--suite-icon-size-15px, 15px);
  height: var(--suite-icon-size-15px, 15px);
}

.settings-text-action {
  min-width: 28px;
  height: 22px;
  border: 0;
  border-radius: var(--suite-shared-radius-6px, 6px);
  color: var(--muted);
  background: transparent;
  font-size: var(--suite-type-caption);
  font-weight: 900;
  cursor: pointer;
}

.settings-text-action:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.settings-section {
  display: grid;
  gap: var(--suite-space-2, 8px);
  padding: var(--suite-dropdown-option-padding, 5px 8px);
  border-top: 1px solid var(--suite-dropdowns-border-color, var(--line));
}

.settings-section .swatches {
  gap: 8px;
}

.settings-wide-action {
  width: 100%;
  justify-content: center;
}

.suite-segmented.font-scale-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface-soft);
}

.suite-segmented.font-scale-actions .suite-segmented-option {
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.suite-segmented.font-scale-actions .suite-segmented-option:last-child {
  border-right: 0;
}

.suite-segmented.font-scale-actions .suite-segmented-option:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-segmented.font-scale-actions .suite-segmented-option.active {
  color: #ffffff;
  background: var(--primary);
}

.suite-update-section {
  gap: 7px;
}

.suite-update-card {
  display: grid;
  gap: 7px;
  padding: var(--suite-shared-padding-8px, 8px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface-soft);
}

.suite-update-card.good {
  border-color: rgba(38, 137, 88, 0.28);
}

.suite-update-card.warn {
  border-color: rgba(183, 119, 0, 0.34);
}

.suite-update-card.bad {
  border-color: rgba(190, 61, 61, 0.36);
}

.suite-update-status {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.suite-update-status i {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  flex: 0 0 auto;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
}

.suite-update-card.good .suite-update-status i {
  background: var(--suite-shared-bg-hex-268958, #268958);
}

.suite-update-card.warn .suite-update-status i {
  background: var(--suite-shared-bg-hex-b77700, #b77700);
}

.suite-update-card.bad .suite-update-status i {
  background: var(--suite-shared-bg-hex-be3d3d, #be3d3d);
}

.suite-update-status strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-update-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
}

.suite-update-card dl div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.suite-update-card dt,
.suite-update-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-update-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-update-progress {
  width: 100%;
  height: var(--suite-shared-height-7px, 7px);
  overflow: hidden;
  border: 1px solid rgba(20, 45, 72, 0.12);
  border-radius: var(--suite-radius-pill, 999px);
  background: rgba(129, 146, 168, 0.18);
}

.suite-update-progress-bar {
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--primary);
  transition: width 180ms ease;
}

.suite-update-card.warn .suite-update-progress-bar {
  background: var(--suite-shared-bg-hex-b77700, #b77700);
}

.suite-update-card.bad .suite-update-progress-bar {
  background: var(--suite-shared-bg-hex-be3d3d, #be3d3d);
}

.suite-update-progress-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-update-progress-text span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-update-progress-text strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
}

.suite-update-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.suite-update-notes {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-update-notes summary {
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
}

.suite-update-notes ul {
  margin: 6px 0 0;
  padding-inline-start: 18px;
}

.suite-update-reminder,
.suite-update-host-guidance {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.suite-update-owner-entry {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.suite-release-management-backdrop {
  z-index: 180;
}

.suite-release-management-dialog {
  width: min(920px, calc(100vw - 32px));
  max-width: 920px;
  max-height: min(820px, calc(100vh - 32px));
}

.suite-release-management-dialog .dialog-head > div {
  display: grid;
  gap: 4px;
}

.suite-release-management-dialog .dialog-head small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-release-management-body {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding: 16px;
}

.suite-release-management-toolbar,
.suite-release-management-fields,
.suite-release-management-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.suite-release-management-toolbar .suite-field,
.suite-release-management-fields .suite-field {
  min-width: 180px;
  flex: 1 1 220px;
}

.suite-release-management-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.suite-release-management-summary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface-soft);
}

.suite-release-management-summary span,
.suite-release-management-section small,
.suite-release-management-health small,
.suite-release-management-reason small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-release-management-summary strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-release-management-health {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.suite-release-management-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface-soft);
}

.suite-release-management-error,
.suite-release-management-proof-boundary {
  padding: 10px 12px;
  border-radius: var(--suite-shared-radius-10px, 10px);
  font-size: var(--suite-type-caption);
  line-height: 1.5;
}

.suite-release-management-error {
  color: var(--bad, #a32727);
  border: 1px solid rgba(190, 61, 61, 0.36);
  background: rgba(190, 61, 61, 0.08);
}

.suite-release-management-proof-boundary {
  color: var(--muted);
  border: 1px dashed var(--line);
  background: var(--surface-soft);
}

@media (max-width: 720px) {
  .suite-release-management-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.suite-button.command.primary {
  color: var(--suite-buttons-primary-on-surface, var(--suite-buttons-on-primary, var(--suite-primary-action-text, #ffffff)));
  background: var(--suite-buttons-primary-surface-bg, var(--suite-buttons-primary-bg, var(--suite-primary-action-bg, #087476)));
  border-color: color-mix(in srgb, var(--suite-primary-border, var(--primary)) 64%, var(--suite-buttons-border-color, var(--line)));
  box-shadow: var(--suite-buttons-primary-shadow,
    inset 0 0 0 1px var(--suite-primary-border-soft, transparent),
    var(--shadow-soft));
}

.suite-button.command.primary:hover,
.suite-button.command.primary:focus-visible {
  color: var(--suite-buttons-hover-on-surface, var(--suite-buttons-primary-on-surface, var(--suite-buttons-on-primary, #ffffff)));
  background: var(--suite-buttons-hover-surface-bg, var(--suite-buttons-primary-surface-bg, var(--suite-buttons-primary-bg, var(--primary))));
  border-color: color-mix(in srgb, var(--suite-primary-border-strong, var(--suite-primary-border, var(--primary))) 72%, var(--suite-buttons-border-color, var(--line)));
  box-shadow: var(--suite-buttons-hover-shadow,
    var(--suite-buttons-primary-hover-shadow,
      inset 0 0 0 1px color-mix(in srgb, var(--suite-primary-border-strong, var(--suite-primary-border, var(--primary))) 52%, transparent),
      var(--shadow-soft)));
}

.suite-button.command.secondary,
.suite-button.suite-button-secondary {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-strong);
  box-shadow: none;
}

.suite-button.command.secondary:not(:disabled):hover,
.suite-button.command.secondary:focus-visible,
.suite-button.suite-button-secondary:not(:disabled):hover,
.suite-button.suite-button-secondary:focus-visible {
  color: var(--suite-buttons-hover-on-surface, var(--suite-buttons-secondary-on-surface, var(--suite-primary-ink, var(--primary))));
  border-color: var(--primary);
  background: var(--suite-buttons-hover-surface-bg, var(--primary-soft));
}

.suite-field-control[readonly] {
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
}

.suite-button.command::before {
  display: inline-block;
  min-width: 1em;
  text-align: center;
  font-weight: 900;
}

.form-panel .suite-button.command[type='submit']::before {
  content: "✓";
}

.suite-button.command[data-action='test-health']::before,
.suite-button.command[data-action='load-projects']::before,
.suite-button.command[data-action='area-rules']::before {
  content: "↻";
}

.suite-button.command[data-host-command]::before {
  content: "›";
}

.suite-button.command.danger {
  color: var(--suite-buttons-on-surface, var(--text));
  border-color: var(--suite-buttons-border-color, var(--line));
  background: var(--suite-buttons-surface-bg, var(--surface));
}

.suite-button.command.danger::before {
  content: "×";
}

.suite-button.command.danger.confirm-save {
  color: #ffffff;
  border-color: var(--danger);
  background: var(--danger);
}

.suite-button.command.danger.confirm-save:hover {
  color: #ffffff;
  border-color: var(--danger);
  background: var(--danger);
  filter: brightness(0.96);
}

.suite-button.command.danger.confirm-save::before {
  content: "✓";
}

.link-command {
  text-decoration: none;
}

.content {
  min-height: 0;
  flex: 1;
  overflow: visible;
  padding: var(--shell-workspace-top-gap, 0px) var(--shell-content-padding-right) var(--shell-workspace-bottom-gap, 0px) var(--shell-workspace-left-gap, var(--shell-content-padding-left));
}

.content.feature-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: var(--shell-workspace-bg);
}

.content.ui-design-content {
  overflow: visible;
}

.suite-shell-page-scroll-region {
  --suite-shell-page-shadow-bleed: 24px;
  box-sizing: border-box;
  inline-size: calc(100% + var(--suite-shell-page-shadow-bleed));
  block-size: calc(100% + var(--suite-shell-page-shadow-bleed));
  min-inline-size: 0;
  min-block-size: 0;
  margin-block-start: calc(-1 * var(--suite-shell-page-shadow-bleed));
  margin-inline-start: calc(-1 * var(--suite-shell-page-shadow-bleed));
  padding-block-start: var(--suite-shell-page-shadow-bleed);
  padding-inline-start: var(--suite-shell-page-shadow-bleed);
  overflow: auto;
  overscroll-behavior: contain;
}

.module-workbench {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--shell-content-gap, 0px);
}

.workspace-management-workbench {
  min-height: 0;
}

.suite-workspace-management-page {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.suite-workspace-management-page > .suite-container-header {
  flex: 0 0 auto;
  margin: 0;
  padding:
    var(--suite-main-panel-padding-top, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-title-padding-bottom, 12px)
    var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px));
  border-bottom: 1px solid var(--line);
}

.suite-workspace-management-page > .suite-container-header h2,
.suite-workspace-management-page > .suite-container-header p {
  margin: 0;
}

.suite-workspace-management-page > .suite-container-header p {
  margin-top: 4px;
  color: var(--muted);
}

.suite-workspace-management-page > .suite-main-panel-scroll-region {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: var(--suite-main-container-content-gap, 16px);
  padding:
    var(--suite-main-panel-padding-top, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-bottom, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px));
  overflow: auto;
}

.suite-workspace-overview {
  display: grid;
  gap: 12px;
  padding:
    var(--suite-sub-panel-padding-top, 12px)
    var(--suite-sub-panel-padding-right, 12px)
    var(--suite-sub-panel-padding-bottom, 12px)
    var(--suite-sub-panel-padding-left, 12px);
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-inner-panel, 14px);
  background: var(--surface-soft);
}

.suite-workspace-overview h3,
.suite-workspace-overview p,
.suite-workspace-overview dl,
.suite-workspace-overview dd {
  margin: 0;
}

.suite-workspace-overview dl {
  display: grid;
  gap: 8px;
}

.suite-workspace-overview dl > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr);
  gap: 12px;
}

.suite-workspace-overview dt {
  color: var(--muted);
}

.suite-page-footer > .suite-workspace-bootstrap-status {
  font-weight: 700;
}

/* 窄寬放不下時動作換到第二列，不橫向捲動。 */
.suite-workspace-management-page .suite-page-footer,
.suite-workspace-management-page .suite-page-footer > [data-suite-footer-actions] {
  flex-wrap: wrap;
}

.suite-workspace-management-page .suite-page-footer > [data-suite-footer-actions] {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .suite-workspace-management-page .suite-page-footer {
    position: static;
  }
}

.suite-workspace-manager-setup {
  display: grid;
  gap: var(--suite-main-container-content-gap, 16px);
  padding:
    var(--suite-sub-panel-padding-top, 12px)
    var(--suite-sub-panel-padding-right, 12px)
    var(--suite-sub-panel-padding-bottom, 12px)
    var(--suite-sub-panel-padding-left, 12px);
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-inner-panel, 14px);
  background: var(--surface);
}

.suite-workspace-section-heading {
  display: grid;
  gap: 4px;
}

.suite-workspace-section-heading h3,
.suite-workspace-section-heading p,
.suite-workspace-inline-status,
.suite-workspace-manager-list {
  margin: 0;
}

.suite-workspace-section-heading p,
.suite-workspace-manager-list span {
  color: var(--muted);
}

.suite-workspace-manager-picker {
  display: grid;
  grid-template-columns: minmax(160px, 0.28fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.suite-workspace-manager-picker .suite-field-control {
  min-width: 0;
  width: 100%;
}

.suite-workspace-manager-picker > .suite-compound-input-group[data-suite-input-layout="submit"] {
  grid-column: 2 / -1;
}

.suite-workspace-inline-status {
  padding: 10px 12px;
  border-radius: var(--suite-radius-control, 10px);
  background: var(--soft);
}

.suite-workspace-inline-status.is-error {
  color: var(--danger, #b42318);
}

.suite-workspace-inline-status.is-success {
  color: var(--success, #087a5b);
}

.suite-workspace-load-error {
  display: flex;
  align-items: center;
  gap: 10px;
}

.suite-workspace-load-error .suite-workspace-inline-status {
  flex: 1 1 auto;
}

.suite-workspace-manager-list {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.suite-workspace-manager-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control, 10px);
}

.suite-workspace-manager-identity {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.suite-workspace-manager-identity strong,
.suite-workspace-manager-identity span {
  overflow-wrap: anywhere;
}

.suite-workspace-manager-list .suite-button {
  flex: 0 0 auto;
}

.placeholder-workbench {
  margin-inline-end: var(--shell-placeholder-workbench-gutter);
}

.suite-module-controlbar.module-toolbar,
.suite-main-panel.area-context-strip,
.suite-main-panel.area-binding-panel,
.suite-main-panel.area-metrics,
.suite-main-panel.area-table-panel,
.shell-diagnostics-panel {
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-18px, 18px);
  background: var(--suite-panel-bg, var(--surface));
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
  -webkit-backdrop-filter: var(--suite-panel-backdrop, blur(10px));
  backdrop-filter: var(--suite-panel-backdrop, blur(10px));
}

.suite-module-controlbar.module-toolbar {
  display: flex;
  align-items: var(--suite-module-toolbar-align-items, center);
  justify-content: space-between;
  gap: var(--suite-module-toolbar-gap, 14px);
  margin: var(--suite-module-toolbar-margin, 0px);
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
}

.module-title,
.module-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.module-title > span {
  width: var(--suite-shared-width-34px, 34px);
  height: var(--suite-shared-height-34px, 34px);
  display: grid;
  place-items: center;
  color: var(--primary);
  line-height: 0;
}

.module-title > span .ui-icon {
  width: var(--suite-icon-size-19px, 19px);
  height: var(--suite-icon-size-19px, 19px);
}

.module-title strong {
  display: block;
  font-family: var(--suite-ui-title-font-family, var(--suite-title-font-family, var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif)));
  font-size: var(--suite-ui-title-preview-size, var(--suite-title-preview-size, var(--suite-type-title)));
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, 700));
  letter-spacing: var(--suite-ui-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-ui-title-line-height, var(--suite-title-line-height, var(--suite-line-title, 1.25)));
}

.module-title p {
  display: none;
}

.module-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.planned-module-actions {
  max-width: 360px;
}

.planned-module-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: var(--suite-shared-padding-12px, 12px);
  border: 1px solid rgba(168, 98, 7, 0.32);
  border-radius: var(--suite-shared-radius-14px, 14px);
  background: var(--suite-shared-bg-168-98-7-0-08, rgba(168, 98, 7, 0.08));
}

.planned-module-banner > div {
  min-width: 0;
}

.planned-module-banner strong {
  display: block;
  font-size: var(--suite-type-body);
}

.planned-module-banner p {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.mode-pill {
  min-height: var(--suite-shared-min-height-34px, 34px);
  display: inline-flex;
  align-items: center;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  padding: 0 12px;
  color: var(--muted);
  background: var(--surface-strong);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.suite-main-panel.area-context-strip {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(190px, 1fr) minmax(150px, 0.8fr) minmax(210px, 1fr);
  overflow: hidden;
}

.suite-main-panel.area-context-strip > div {
  min-width: 0;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border-right: 1px solid var(--line);
}

.suite-main-panel.area-context-strip > div:last-child {
  border-right: 0;
}

.suite-main-panel.area-context-strip span,
.area-binding-copy span,
.area-metric span,
.section-title span,
.area-side-note span {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.suite-main-panel.area-context-strip strong,
.area-binding-copy strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-body);
}

.suite-main-panel.area-binding-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: var(--suite-shared-padding-12px, 12px);
}

.area-binding-copy {
  min-width: 0;
}

.area-binding-copy p,
.area-side-note p {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.area-binding-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.suite-main-panel.area-metrics {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  overflow: hidden;
}

.area-metric {
  min-height: 74px;
  padding: var(--suite-shared-padding-12px, 12px);
  border-right: 1px solid var(--line);
  background: var(--surface-strong);
}

.area-metric:last-child {
  border-right: 0;
}

.area-metric strong {
  display: block;
  margin-top: 8px;
  font-size: var(--suite-type-title);
  line-height: 1;
}

.area-metric.success strong,
.diagnostic.success strong {
  color: var(--success);
}

.area-metric.warning strong,
.diagnostic.warning strong {
  color: var(--warning);
}

.area-metric.danger strong,
.diagnostic.danger strong {
  color: var(--danger);
}

.area-work-area {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.suite-main-panel.area-table-panel {
  min-height: 0;
  overflow: hidden;
}

.feature-frame-workbench {
  height: 100%;
  min-height: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--shell-workspace-bg);
}

.feature-frame-workbench.has-host-mismatch {
  background: var(--surface-strong);
}

.feature-frame-exit-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: var(--shell-workspace-bg);
  contain: paint;
  pointer-events: none;
  opacity: 1;
  transition: opacity 160ms ease;
}

.feature-frame-exit-layer.is-leaving {
  opacity: 0;
}

.feature-frame-exit-layer > .feature-frame-workbench {
  flex: 1 1 auto;
  width: 100%;
}

.feature-frame-exit-layer > .feature-frame-workbench:not(.feature-frame-stack-workbench) {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.feature-frame-stack-workbench {
  position: relative;
  padding-block-start: 0;
  contain: paint;
  overflow: hidden;
}

.module-design-shell-workbench {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.module-design-tabsbar {
  flex: 0 0 auto;
}

.module-design-route-body {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  padding-block-end: 0;
  overflow: visible !important;
}

.module-design-route-body > .suite-dynamic-module-host {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible !important;
}

.module-design-route-body > .suite-dynamic-module-host > * {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.suite-dynamic-module-workbench {
  height: 100%;
  min-height: 0;
}

.suite-dynamic-module-route-body {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.suite-dynamic-module-route-body > .suite-dynamic-module-host {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.suite-dynamic-module-workbench,
.suite-dynamic-module-route-body,
.suite-dynamic-module-route-body > .suite-dynamic-module-host,
.suite-dynamic-module-route-body > .suite-dynamic-module-host > * {
  overflow: visible !important;
}

.project-info-route-body {
  overflow: visible !important;
}

[data-suite-dynamic-module-route="window-module"] .suite-function-toolbar-portal {
  justify-content: flex-start !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

[data-suite-dynamic-module-route="window-module"] .suite-function-toolbar-portal .suite-toolbar {
  width: max-content !important;
  min-width: 100%;
  flex-wrap: nowrap !important;
}

[data-suite-dynamic-module-route="window-module"] .suite-function-toolbar-portal .suite-toolbar-button {
  flex: 0 0 auto !important;
}

[data-suite-dynamic-module-route="window-module"] .suite-function-toolbar-portal .suite-toolbar-divider {
  display: block !important;
}

.suite-dynamic-module-host > .suite-route-layout:not(.suite-workspace[data-suite-workspace-mode]) > .suite-route-layout-region {
  inset: auto !important;
}

/* Measure the available header width, independent of collapsed tab content. */
:is([data-suite-workspace-page-tabs="shell"], .suite-workspace-toolbar.suite-container-header--attached-tabs) > .suite-management-left > .suite-management-tabs[role="tablist"][data-suite-adaptive-choice],
:root .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'],[data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > .suite-management-tabs:is([role='tablist'],[data-suite-primary-navigation])[data-suite-adaptive-choice] {
  flex: 1 1 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  box-sizing: border-box;
}

.project-info-route-body {
  overflow: visible !important;
}

.suite-dynamic-module-route-body > .suite-dynamic-module-host > * {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.suite-route-layout-switcher {
  flex: 0 0 auto;
}

.suite-dynamic-module-host[data-suite-effective-layout-mode='left-panel'] > .suite-route-layout {
  grid-template-areas: 'function content';
  grid-template-columns: var(--suite-route-function-inline-size) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.suite-dynamic-module-host[data-suite-effective-layout-mode='right-panel'] > .suite-route-layout {
  grid-template-areas: 'content function';
  grid-template-columns: minmax(0, 1fr) var(--suite-route-function-inline-size);
  grid-template-rows: minmax(0, 1fr);
}

.suite-dynamic-module-host[data-suite-effective-layout-mode='bottom-panel'] > .suite-route-layout {
  grid-template-areas:
    'content'
    'function';
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    minmax(0, 1fr)
    minmax(
      0,
      max(
        0px,
        min(
          var(--suite-route-function-block-size),
          calc(100% - var(--suite-route-content-min-block-size) - var(--suite-route-layout-gap))
        )
      )
    );
}

.suite-dynamic-module-host:not([data-suite-effective-layout-mode='bottom-panel'])
  [data-suite-route-region='function']
  .cursor-row-resize {
  display: none;
}

.module-design-route-body > .module-design-frame-stack {
  flex: 1 1 0;
  width: 100%;
  height: auto !important;
  min-height: 0;
}

.feature-frame-stack-pane {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: flex;
  background: var(--shell-workspace-bg);
  contain: paint;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    visibility 0s linear 160ms;
}

.feature-frame-stack-pane.active {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 160ms ease,
    visibility 0s linear 0s;
}

.feature-frame-stack-pane.incoming {
  z-index: 2;
  visibility: visible;
}

.feature-frame-stack-pane.has-host-mismatch .feature-module-frame {
  opacity: 0;
  pointer-events: none;
}

.area-management-shell-workbench {
  height: auto;
  min-height: 100%;
  min-block-size: 100%;
  display: flex;
  flex-direction: column;
  --area-management-shell-workspace-gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-card-gap, 16px)));
  gap: var(--area-management-shell-workspace-gap);
  background: var(--shell-workspace-bg);
}

.area-management-route-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.area-management-route-body[data-workspace-surface="shell-native-source-parity"] {
  overflow: visible;
}

.area-management-route-body > .area-management-workbench {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.area-management-route-body[data-workspace-surface="shell-native-source-parity"] > .area-management-frame-stack {
  display: none !important;
}

.area-management-route-body[data-workspace-surface="shell-native-source-parity"] > .area-management-native-source-host {
  box-sizing: border-box;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: visible;
}

.area-management-route-body[data-workspace-surface="shell-native-source-parity"] > .area-management-native-source-host > .app-shell,
.area-management-route-body[data-workspace-surface="shell-native-source-parity"] > .area-management-native-source-host > .overview-app {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.area-management-route-body[data-workspace-surface="shell-native-source-parity"] > .area-management-native-source-host > .app-shell.native-shell-mounted,
.area-management-route-body[data-workspace-surface="shell-native-source-parity"] > .area-management-native-source-host > .overview-app.native-shell-mounted {
  min-height: 0 !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  padding-block-start: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.area-management-workbench {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  background: var(--surface-strong);
}

.suite-management-switchbar.area-management-switchbar {
  --suite-management-toolbar-gap: var(--suite-module-toolbar-gap, var(--suite-space-3, 12px));
  top: var(--suite-management-switchbar-sticky-top, var(--shell-workspace-top-gap, 0px));
  z-index: var(--suite-module-toolbar-z-index, 80);
  isolation: isolate;
  flex: 0 0 auto;
  display: flex;
  align-items: var(--suite-module-toolbar-align-items, center);
  justify-content: space-between;
  gap: var(--suite-management-toolbar-gap);
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
}

.suite-management-switchbar.area-management-switchbar .module-title {
  gap: 8px;
}

.suite-management-switchbar.area-management-switchbar .module-title > span {
  width: 28px;
  height: var(--suite-shared-height-28px, 28px);
}

.suite-management-switchbar.area-management-switchbar .module-title strong {
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.suite-management-tabs.area-management-tabs {
  min-width: min(100%, var(--suite-management-tabs-min-width, var(--suite-shared-min-width-196px, 196px)));
}

.suite-management-tabs.area-management-tabs .suite-segmented-option {
  min-height: var(--suite-tab-switch-height, var(--suite-navigation-height, var(--suite-shared-min-height-28px, 28px)));
  padding: 0 var(--suite-segmented-option-padding-inline, var(--suite-top-tab-padding-inline, 12px));
  white-space: nowrap;
}

.suite-management-tab.area-management-workspace-tab {
  border: 0;
  appearance: none;
  cursor: pointer;
}

.area-management-shell-actions {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--suite-management-toolbar-gap, var(--suite-module-toolbar-gap, var(--suite-space-2, 8px)));
}

.area-management-shell-actions:empty {
  display: none;
}

.area-management-shell-actions > .area-review-toolbar-actions,
.area-management-shell-actions .area-overview-toolbar-slot,
.area-management-shell-actions .massing-plan-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--suite-management-toolbar-gap, var(--suite-module-toolbar-gap, var(--suite-space-2, 8px)));
}

.area-management-shell-actions .massing-plan-save-status:empty {
  display: none;
}

.suite-management-workbench {
  min-height: 100%;
  gap: var(--shell-content-gap, 0px);
  background: transparent;
}

.area-management-shell-workbench.suite-management-workbench {
  --area-management-shell-workspace-gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-card-gap, 16px)));
  gap: var(--area-management-shell-workspace-gap);
}

.area-management-shell-workbench.suite-management-workbench[data-active-workspace="cTable"] {
  height: 100%;
  min-height: 0;
  min-block-size: 0;
}

.area-management-shell-workbench.suite-management-workbench[data-active-workspace="cTable"]
  > .area-management-route-body[data-workspace-surface="shell-native-source-parity"],
.area-management-shell-workbench.suite-management-workbench[data-active-workspace="cTable"]
  > .area-management-route-body[data-workspace-surface="shell-native-source-parity"]
  > .area-management-native-source-host {
  min-height: 0;
  min-block-size: 0;
}

.area-management-shell-workbench.suite-management-workbench[data-active-workspace="cTable"]
  > .area-management-route-body[data-workspace-surface="shell-native-source-parity"]
  > .area-management-native-source-host
  > .app-shell {
  height: 100%;
  min-height: 0;
  min-block-size: 0;
}

.suite-management-workbench.ui-design-workbench {
  height: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.suite-management-route-body.ui-design-route-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
}

.suite-management-switchbar {
  --suite-management-control-row-height: max(var(--suite-navigation-height, var(--suite-control-height, 30px)), var(--suite-control-height, 30px));
  --suite-management-tab-height: var(--suite-tab-switch-height, var(--suite-navigation-height, calc(var(--suite-management-control-row-height) - 2px)));
  position: sticky;
  top: var(--suite-management-switchbar-sticky-top, var(--shell-workspace-top-gap, 0px));
  z-index: 20;
  margin: var(--suite-module-toolbar-margin, 0px);
  border-width: var(--suite-module-toolbar-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-module-toolbar-border-color, var(--line));
  border-radius: var(--suite-module-toolbar-radius, var(--suite-radius-main-panel, var(--suite-radius-control, 20px)));
  background: var(--suite-module-toolbar-surface-bg, var(--surface));
  box-shadow: var(--suite-module-toolbar-shadow, var(--shadow-soft));
  -webkit-backdrop-filter: var(--suite-module-toolbar-backdrop, blur(14px) saturate(1.02));
  backdrop-filter: var(--suite-module-toolbar-backdrop, blur(14px) saturate(1.02));
}

.suite-management-left {
  flex: 1 1 auto;
  min-width: 0;
  min-height: calc(
    var(--suite-management-tab-height)
    + (var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)) * 2)
  );
  height: auto;
  display: flex;
  align-items: center;
  gap: var(--suite-management-left-gap, 10px);
}

.suite-management-title {
  flex: 0 0 auto;
}

.suite-management-tabs {
  --suite-segmented-border-width: var(--suite-navigation-border-width, 1px);
  --suite-segmented-bg: transparent;
  --suite-segmented-padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  --suite-segmented-gap: 6px;
  --suite-segmented-active-bg: var(--suite-top-tab-active-bg, var(--primary-soft));
  --suite-segmented-active-color: var(--suite-top-tab-active-color, var(--primary));
  --suite-segmented-active-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --suite-segmented-option-font-size: var(--suite-top-tab-font-size, 12px);
  --suite-segmented-option-padding-inline: var(--suite-top-tab-padding-inline, 12px);
  --suite-management-tab-bg-x: 0px;
  --suite-management-tab-bg-y: 0px;
  --suite-management-tab-bg-width: 0px;
  --suite-management-tab-bg-height: var(--suite-management-tab-height);
  position: relative;
  flex: 0 1 auto;
  inline-size: fit-content;
  width: fit-content;
  height: auto;
  min-height: calc(var(--suite-management-tab-height) + (var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)) * 2));
  min-width: 0;
  max-inline-size: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: var(--suite-segmented-padding, var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)));
  border-width: var(--suite-navigation-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-border-color, var(--line));
  background: transparent;
  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
  isolation: isolate;
}

.suite-management-tabs::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: var(--suite-management-tab-bg-width);
  height: var(--suite-management-tab-bg-height);
  border-radius: var(--suite-tab-item-radius, var(--suite-radius-control));
  background: var(--suite-segmented-active-bg, var(--primary-soft));
  box-shadow: var(--suite-segmented-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--suite-management-tab-bg-x), -50%, 0);
  will-change: transform, width, height, opacity;
  transition: none;
}

.suite-management-tabs.has-tab-background::before {
  opacity: 1;
}

.suite-management-tabs.indicator-moving::before {
  opacity: 1;
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    width 180ms ease,
    height 180ms ease,
    opacity 120ms ease;
}

.suite-management-tabs.tab-background-preparing::before {
  opacity: 1;
  transition: none !important;
}

.suite-management-tabs.stable-refresh::before {
  transition: none !important;
}

.suite-management-tab {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: var(--suite-management-tab-height);
  min-height: var(--suite-management-tab-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--suite-segmented-option-padding-inline, 12px);
  border: 0;
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
  color: var(--muted);
  background: transparent;
  font-size: var(--suite-segmented-option-font-size, 12px);
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition:
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.suite-management-tabs > .suite-management-tab.suite-segmented-option {
  height: var(--suite-management-tab-height);
  min-height: var(--suite-management-tab-height);
  font-size: var(--suite-segmented-option-font-size, 12px);
  font-weight: 650;
  line-height: 1;
  padding-block: 0;
}

.suite-management-tab:not(.locked):hover {
  color: var(--suite-segmented-active-color, var(--primary));
  background: color-mix(in srgb, var(--suite-segmented-active-bg, var(--primary-soft)) 74%, transparent);
}

.suite-management-tab.active {
  z-index: 2;
  color: var(--suite-segmented-active-color, var(--primary));
  background: var(--suite-segmented-active-bg, var(--primary-soft));
  box-shadow: var(--suite-segmented-active-shadow, 0 1px 2px rgba(15, 23, 42, 0.08));
}

.suite-management-tab.active:not(.locked):hover {
  background: var(--suite-segmented-active-bg, var(--primary-soft));
}

.suite-management-tabs.has-tab-background > .suite-management-tab.active,
.suite-management-tabs.has-tab-background > .suite-management-tab.suite-segmented-option[data-state='active'] {
  background: transparent;
  box-shadow: none;
}

.suite-management-tabs.has-tab-background > .suite-management-tab.active:not(.locked):hover,
.suite-management-tabs.has-tab-background > .suite-management-tab.suite-segmented-option[data-state='active']:not(.locked):hover {
  background: transparent;
  box-shadow: none;
}

.suite-management-tab.locked {
  opacity: 0.6;
  cursor: default;
}

.suite-management-tab .ui-icon {
  width: var(--suite-navigation-icon-size, var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px)));
  height: var(--suite-navigation-icon-size, var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px)));
}

.suite-management-tab > span[aria-hidden="true"] {
  width: var(--suite-navigation-icon-size, var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px)));
  height: var(--suite-navigation-icon-size, var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--suite-navigation-icon-size, var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px)));
  line-height: 0;
}

.suite-management-tab b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
}

.suite-management-tab .suite-segmented-label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.suite-management-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.permission-admin-management-actions {
  flex: 0 1 auto;
}

.permission-admin-management-actions .permission-admin-save-state {
  max-width: min(220px, 30vw);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-toolbar-actions {
  flex: 0 0 auto;
}

.suite-management-action {
  appearance: none;
  display: inline-grid;
  place-items: center;


  border-width: 1px;
  border-style: solid;
  border-color: var(--line);
  border-radius: var(--suite-radius-button, var(--suite-radius-control));
  font: inherit;
  color: var(--text);
  background: var(--surface-strong);
  box-shadow: none;
  cursor: pointer;
}

.suite-management-action.primary {
  color: var(--suite-primary-on-color, #fff);
  border-color: var(--suite-primary-ink, var(--primary));
  background: var(--suite-buttons-primary-surface-bg, var(--primary));
}

.suite-management-action.danger {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface-strong);
}

.suite-management-action:not(:disabled):hover,
.suite-management-action:not(:disabled):focus-visible {
  border-color: transparent;
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}

.suite-management-action.danger:not(:disabled):hover,
.suite-management-action.danger:not(:disabled):focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

.suite-management-action:not(:disabled):active {
  background: color-mix(in srgb, var(--primary-soft) 78%, var(--primary) 10%);
}

.suite-management-action.danger:not(:disabled):active {
  background: color-mix(in srgb, var(--danger-soft) 80%, var(--danger) 10%);
}

.suite-management-action .ui-icon {
  width: var(--suite-icon-size);
  height: var(--suite-icon-size);
}

@media (prefers-reduced-motion: reduce) {
  .suite-management-tab,
  .suite-management-action,
  .feature-frame-exit-layer,
  .feature-frame-stack-pane,
  .icon-command {
    transition: none;
  }
}

.suite-management-route-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: visible;
}

.suite-ui-theme-editor {
  box-sizing: border-box;
  min-width: 0;
  min-height: calc(100vh - 116px);
  display: grid;
  grid-template-columns: clamp(116px, 10vw, 136px) minmax(340px, 0.68fr) minmax(0, 1fr);
  gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px)));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui-design-route-body .suite-ui-theme-editor {
  height: 100%;
  min-height: 0;
}

.ui-design-route-body .suite-ui-theme-inspector,
.ui-design-route-body .suite-ui-theme-preview-scroll {
  max-height: none;
}

.suite-ui-theme-rail,
.suite-ui-theme-inspector,
.suite-ui-theme-canvas {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border-width: var(--suite-panel-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-panel-border-color, var(--line));
  border-radius: var(--suite-radius-main-panel, var(--suite-theme-card-radius, var(--suite-radius-control, 20px)));
  background: var(--suite-panel-bg, var(--suite-theme-card-bg, var(--surface)));
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
  -webkit-backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
  backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
  overflow: hidden;
}

.suite-ui-theme-rail {
  padding: var(--suite-main-panel-padding, var(--suite-theme-card-padding, 22px));
}

.suite-ui-theme-section header small,
.suite-ui-theme-token-row small,
.suite-ui-theme-token-list b,
.suite-ui-theme-scope-list small,
.suite-ui-theme-preview-copy p,
.suite-ui-theme-preview-card.module p {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.suite-ui-theme-rail {
  display: flex;
  flex-direction: column;
  gap: var(--suite-main-container-content-gap, var(--suite-theme-card-content-gap, 16px));
  overflow-x: hidden;
  overflow-y: auto;
}

.suite-ui-theme-rail-item.suite-button {
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  transition:
    color var(--suite-motion-duration, 180ms) var(--suite-motion-easing, ease),
    background-color var(--suite-motion-duration, 180ms) var(--suite-motion-easing, ease);
}

.suite-ui-theme-rail-item .ui-icon {
  width: var(--suite-navigation-icon-size, var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px)));
  height: var(--suite-navigation-icon-size, var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px)));
}

.suite-ui-theme-rail-item span {
  min-width: 0;
  font-size: var(--suite-type-caption);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: normal;
}

.suite-ui-theme-rail-item.active,
.suite-ui-theme-rail-item:hover,
.suite-ui-theme-rail-item:focus-visible {
  color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}

.suite-ui-theme-editor.is-components-mode {
  grid-template-columns: clamp(116px, 10vw, 136px) minmax(230px, 0.72fr) minmax(440px, 1.8fr);
  grid-template-rows: minmax(250px, 0.82fr) minmax(300px, 1.18fr);
  grid-template-areas:
    "rail catalog stage"
    "rail catalog inspector";
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.suite-ui-theme-editor.is-components-mode > .suite-ui-theme-rail {
  grid-area: rail;
}

.suite-ui-theme-inspector {
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 222px);
  overflow: hidden;
}

.suite-ui-theme-main-head {
  min-width: 0;
}

.suite-ui-theme-inspector > .suite-ui-theme-main-head {
  min-inline-size: 0;
}

.suite-ui-theme-inspector-scroll-region {
  --suite-scrollbar-track-inset-block: min(var(--suite-radius-main-panel, var(--suite-radius-control, 20px)), 12px);
  overflow-x: hidden;
}

.suite-ui-theme-canvas > .suite-ui-theme-main-head {
  margin: 0;
  padding: max(10px, calc(var(--suite-main-panel-padding-top, 22px) - 10px)) var(--suite-main-panel-padding-right, var(--suite-theme-card-padding-right, 22px)) max(8px, calc(var(--suite-main-panel-title-padding-bottom, 12px) - 2px)) var(--suite-main-panel-padding-left, var(--suite-theme-card-padding-left, 22px));
}

.suite-ui-theme-section {
  display: grid;
  gap: var(--suite-main-container-content-gap, var(--suite-theme-card-content-gap, 16px));
  padding: 0;
}

.suite-ui-theme-section.hidden {
  display: none;
}

.suite-ui-theme-section + .suite-ui-theme-section {
  padding-top: 0;
  border-top: 0;
}

.suite-ui-theme-section header {
  display: grid;
  gap: 4px;
}

.suite-ui-theme-section header strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.suite-ui-icon-library {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.suite-ui-icon-library > header {
  display: grid;
  gap: 4px;
}

.suite-ui-icon-library-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.suite-ui-icon-library-summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.suite-ui-icon-library-summary strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.suite-ui-icon-library-summary small {
  min-width: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
}

.suite-ui-icon-mapping-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.suite-ui-icon-mapping-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.suite-ui-icon-mapping-head strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: normal;
}

.suite-ui-icon-mapping-head small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1;
}

.suite-ui-icon-mapping-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}

.suite-ui-icon-mapping-card {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--suite-shared-min-height-34px, 34px) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 8px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--surface));
}

.suite-ui-icon-mapping-card.is-overridden {
  border-color: var(--suite-primary-border-soft, color-mix(in srgb, var(--primary) 30%, var(--line)));
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface-soft));
}

.suite-ui-icon-current {
  width: var(--suite-shared-min-height-34px, 34px);
  height: var(--suite-shared-min-height-34px, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--primary);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.suite-ui-icon-current:hover,
.suite-ui-icon-current:focus-visible,
.suite-ui-icon-mapping-card.is-picker-open .suite-ui-icon-current {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  background: var(--primary-soft);
  box-shadow: var(--suite-focus-ring, 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent));
}

.suite-ui-icon-current .ui-icon,
.suite-ui-icon-swatch .ui-icon {
  width: var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px));
  height: var(--suite-action-icon-size, var(--suite-icon-size-16px, 16px));
}

.suite-ui-icon-mapping-main {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.suite-ui-icon-mapping-main strong {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.suite-ui-icon-mapping-main strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suite-ui-icon-mapping-main small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suite-ui-icon-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  font-size: var(--suite-type-caption);
  font-weight: 800;
  line-height: 1;
}

.suite-ui-icon-status.is-custom {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  color: var(--primary-strong, var(--primary));
  background: var(--primary-soft);
}

.suite-ui-icon-reset.suite-button {
  min-width: 0;
}

.suite-ui-icon-picker-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  max-height: 178px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--suite-shadow-popover, 0 14px 34px color-mix(in srgb, var(--text) 12%, transparent));
}

.suite-ui-icon-swatch {
  width: 100%;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-soft);
  cursor: pointer;
}

.suite-ui-icon-swatch:hover,
.suite-ui-icon-swatch:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-ui-icon-swatch.is-selected {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: var(--suite-ui-icon-swatch-selected-ring);
}

.suite-ui-theme-selected-empty {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--suite-radius-control, 10px);
  background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
}

.suite-ui-theme-selected-empty strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.suite-ui-theme-selected-empty small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.55;
}

.suite-ui-theme-selected-target {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface-soft);
}

.suite-ui-theme-selected-target span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.suite-ui-theme-selected-target b {
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.suite-ui-theme-selected-control-list {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.suite-ui-theme-selected-control-section {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.suite-ui-theme-selected-control-section > strong {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.suite-ui-theme-state-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.suite-ui-theme-color-list,
.suite-ui-theme-token-stack,
.suite-ui-theme-scope-list,
.suite-ui-theme-token-list {
  display: grid;
  gap: 8px;
}

.suite-ui-theme-color-list {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.suite-ui-theme-color-field {
  display: grid;
  gap: 6px;
}

.suite-ui-theme-secondary-palette {
  display: grid;
  gap: 8px;
}

.suite-ui-theme-secondary-palette-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.suite-ui-theme-secondary-palette-row > .suite-ui-theme-color-field {
  min-width: 0;
}

.suite-ui-theme-secondary-palette-row > .suite-button-icon {
  margin-top: 25px;
}

.suite-ui-theme-add-secondary-accent.suite-button {
  width: fit-content;
  justify-self: start;
  gap: 6px;
}

.suite-ui-theme-color-field > span,
.suite-ui-theme-select-stack label > span,
.suite-ui-theme-setting-group > div:first-child > strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-color-field > .suite-button,
.suite-ui-theme-select-row.suite-button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  justify-content: stretch;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  cursor: default;
}

.suite-ui-theme-color-field i {
  width: var(--suite-shared-width-22px, 22px);
  height: var(--suite-shared-height-22px, 22px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: calc(var(--suite-radius-control, 10px) - 4px);
  background: var(--swatch);
}

.suite-ui-theme-color-field strong,
.suite-ui-theme-select-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-color-field em,
.suite-ui-theme-select-row small {
  justify-self: end;
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.suite-ui-theme-color-field.pending em,
.suite-ui-theme-select-row:not(.live) small {
  color: var(--muted);
}

.suite-ui-theme-color-field > small,
.suite-ui-theme-setting-group > div:first-child > small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.suite-ui-theme-soft-editor {
  width: 100%;
  min-width: 0;
  min-height: var(--suite-shared-min-height-42px, 42px);
  display: grid;
  grid-template-columns: 28px minmax(52px, 1fr) minmax(58px, 74px) auto;
  gap: 7px;
  align-items: center;
  justify-content: stretch;
  overflow: hidden;
  padding: 6px 8px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface);
  color: var(--text);
}

.suite-ui-theme-soft-editor i {
  width: var(--suite-shared-width-22px, 22px);
  height: var(--suite-shared-height-22px, 22px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: calc(var(--suite-radius-control, 10px) - 4px);
  background: var(--swatch);
}

.suite-ui-theme-soft-editor strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-soft-editor input[type="range"] {
  width: 100%;
  min-width: 0;
  height: var(--suite-icon-size-18px, 18px);
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.suite-ui-theme-soft-editor input[type="range"]:focus-visible {
  outline: none;
}

.suite-ui-theme-soft-editor input[type="range"]::-webkit-slider-runnable-track {
  height: var(--suite-shared-height-6px, 6px);
  border-radius: var(--suite-radius-pill, 999px);
  background: linear-gradient(
    to right,
    var(--primary) 0 var(--soft-alpha-progress, 28%),
    var(--line) var(--soft-alpha-progress, 28%) 100%
  );
}

.suite-ui-theme-soft-editor input[type="range"]::-webkit-slider-thumb {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
  margin-top: -5px;
  border: 2px solid var(--surface);
  border-radius: var(--suite-radius-pill, 999px);
  appearance: none;
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 58%, transparent);
}

.suite-ui-theme-soft-editor input[type="range"]::-moz-range-track {
  height: var(--suite-shared-height-6px, 6px);
  border-radius: var(--suite-radius-pill, 999px);
  background: linear-gradient(
    to right,
    var(--primary) 0 var(--soft-alpha-progress, 28%),
    var(--line) var(--soft-alpha-progress, 28%) 100%
  );
}

.suite-ui-theme-soft-editor input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 58%, transparent);
}

.suite-ui-theme-soft-editor em {
  justify-self: end;
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.suite-ui-theme-soft-percent {
  min-width: 0;
  width: 100%;
  max-width: 74px;
  height: var(--suite-form-height, var(--suite-control-height));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface-soft);
}

.suite-ui-theme-soft-percent .suite-field-control {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.suite-ui-theme-soft-percent .suite-field-control::-webkit-outer-spin-button,
.suite-ui-theme-soft-percent .suite-field-control::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.suite-ui-theme-soft-percent span {
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.suite-ui-theme-color-editor {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.suite-ui-theme-color-editor.has-save {
  grid-template-columns: minmax(0, 1fr) 26px;
}

.suite-ui-theme-color-editor.has-save .suite-ui-theme-color-format {
  grid-column: 1 / -1;
}

.suite-ui-theme-color-format {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: var(--suite-shared-padding-2px, 2px);
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface-soft);
}

.suite-ui-theme-color-format .suite-button {
  min-width: 0;
  border: 0;
  border-radius: calc(var(--suite-radius-control, 10px) - 3px);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: 850;
}

.suite-ui-theme-color-format .suite-button.active,
.suite-ui-theme-color-format .suite-button:hover,
.suite-ui-theme-color-format .suite-button:focus-visible {
  color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}

.suite-ui-theme-color-summary.suite-button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  text-align: left;
  cursor: pointer;
}

.suite-ui-theme-color-summary-wrap {
  min-width: 0;
  height: 42px;
  min-height: var(--suite-shared-min-height-42px, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: var(--suite-shared-padding-6px, 6px) 9px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface);
  box-shadow: none;
}

.suite-ui-theme-color-summary-wrap:hover,
.suite-ui-theme-color-summary-wrap:focus-within,
.suite-ui-theme-color-summary-wrap.open {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  background: var(--primary-soft);
}

.suite-ui-theme-color-summary-wrap > em {
  justify-self: end;
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.suite-ui-theme-color-summary-wrap .suite-ui-theme-color-summary.suite-button {
  grid-template-columns: 30px minmax(0, 1fr) 22px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.suite-ui-theme-color-summary-wrap .suite-ui-theme-color-summary:hover,
.suite-ui-theme-color-summary-wrap .suite-ui-theme-color-summary:focus-visible,
.suite-ui-theme-color-summary-wrap .suite-ui-theme-color-summary.open {
  border-color: transparent;
  background: transparent;
}

.suite-ui-theme-save-swatch.suite-button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--primary);
  width: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-ui-theme-save-swatch:hover,
.suite-ui-theme-save-swatch:focus-visible {
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
}

.suite-ui-theme-save-swatch .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
}

.suite-ui-theme-color-summary:hover,
.suite-ui-theme-color-summary:focus-visible,
.suite-ui-theme-color-summary.open {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
  background: var(--primary-soft);
  outline: none;
}

.suite-ui-theme-color-summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.suite-ui-theme-color-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-color-summary b {
  width: var(--suite-shared-width-22px, 22px);
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 160ms ease, color 160ms ease;
}

.suite-ui-theme-color-summary b .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
}

.suite-ui-theme-color-summary.open b {
  color: var(--primary);
  transform: rotate(180deg);
}

.suite-ui-theme-picker-disclosure {
  min-width: 0;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 180ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.suite-ui-theme-picker-disclosure.open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.suite-ui-theme-picker-disclosure > div {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .suite-ui-theme-color-summary b,
  .suite-ui-theme-picker-disclosure {
    transition: none;
  }
}

.suite-ui-theme-picker-panel,
.suite-ui-theme-swatch-panel,
.suite-ui-theme-preset-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-main-panel, 12px);
  background: var(--surface);
}

.suite-ui-theme-swatch-panel.embedded {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--suite-shell-topbar-radius, 0px);
  background: transparent;
}

.suite-ui-theme-picker-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: var(--suite-segmented-padding, var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)));
  border-width: var(--suite-navigation-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-border-color, var(--line));
  border-radius: var(--suite-navigation-radius, var(--suite-radius-control, 10px));
  background: var(--suite-navigation-soft-bg, var(--surface-soft));
}

.suite-ui-theme-picker-tabs span {
  height: var(--suite-navigation-height, var(--suite-tab-switch-height, var(--suite-shared-min-height-24px, 24px)));
  min-height: var(--suite-navigation-height, var(--suite-tab-switch-height, var(--suite-shared-min-height-24px, 24px)));
  display: inline-flex;
  align-items: var(--suite-navigation-align-items, center);
  justify-content: var(--suite-navigation-justify-content, center);
  border-radius: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-control, 10px)) - 3px));
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: var(--suite-navigation-text-align, center);
}

.suite-ui-theme-picker-tabs span.active {
  color: var(--suite-navigation-primary-bg, var(--primary));
  background: var(--suite-navigation-primary-soft-bg, var(--primary-soft));
}

.suite-ui-theme-color-plane {
  position: relative;
  min-height: 132px;
  display: block;
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--picker-hue, var(--primary)));
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.suite-ui-theme-color-plane:focus-visible,
.suite-ui-theme-hue-strip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 64%, transparent);
  outline-offset: 2px;
}

.suite-ui-theme-color-plane-marker {
  position: absolute;
  left: var(--picker-marker-x, 14px);
  top: var(--picker-marker-y, 50%);
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
  border: 2px solid var(--surface);
  border-radius: var(--suite-radius-pill, 999px);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.38);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.suite-ui-theme-picker-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
}

.suite-ui-theme-picker-strip > i {
  width: 28px;
  height: var(--suite-shared-height-28px, 28px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: calc(var(--suite-radius-control, 10px) - 4px);
  background: var(--swatch);
}

.suite-ui-theme-hue-strip {
  position: relative;
  height: var(--suite-icon-size-18px, 18px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--suite-radius-pill, 999px);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.suite-ui-theme-hue-strip span {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.suite-ui-theme-hue-strip b {
  position: absolute;
  left: var(--hue-marker-x, 0%);
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: var(--suite-radius-pill, 999px);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.38);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.is-picking-suite-color {
  cursor: crosshair;
  user-select: none;
}

.suite-ui-theme-hex-input.suite-field-control {
  width: 100%;
  min-width: 0;
  border: 0;
  background: var(--surface-soft);
  box-shadow: none;
  font-weight: 800;
}

.suite-ui-theme-eyedropper.suite-button {
  width: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-ui-theme-eyedropper:disabled {
  opacity: 0.45;
}

.suite-ui-theme-color-editor em {
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.suite-ui-theme-color-editor > span {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-swatch-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.suite-ui-theme-swatch-title {
  min-width: 0;
  flex: 1 1 120px;
  display: grid;
  gap: 2px;
}

.suite-ui-theme-swatch-header strong,
.suite-ui-theme-swatch-title strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-swatch-title small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-swatch-header .status-pill {
  min-height: var(--suite-shared-min-height-26px, 26px);
  flex: 0 0 auto;
}

.suite-ui-theme-swatch-grid {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.suite-ui-theme-swatch-grid > small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-ui-theme-swatch-button.suite-button {
  width: var(--suite-icon-size-18px, 18px);
  min-width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--suite-shell-topbar-radius, 0px);
  background: transparent;
  box-shadow: none;
}

.suite-ui-theme-swatch-button.active,
.suite-ui-theme-swatch-button:hover,
.suite-ui-theme-swatch-button:focus-visible {
  background: transparent;
  outline: none;
}

.suite-ui-theme-swatch-button i {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--swatch);
}

.suite-ui-theme-swatch-button:hover i,
.suite-ui-theme-swatch-button:focus-visible i {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--primary) 72%, transparent);
}

.suite-ui-theme-color-row.suite-button,
.suite-ui-theme-token-row {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  justify-content: stretch;
  padding: 7px 9px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 8px);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.suite-ui-theme-color-row.active,
.suite-ui-theme-color-row:hover,
.suite-ui-theme-color-row:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 56%, transparent);
  background: var(--primary-soft);
  outline: none;
}

.suite-ui-theme-color-row i,
.suite-ui-theme-token-row i {
  width: 20px;
  height: var(--suite-shared-height-20px, 20px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-6px, 6px);
  background: var(--swatch);
}

.suite-ui-theme-color-row span,
.suite-ui-theme-token-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.suite-ui-theme-color-row strong,
.suite-ui-theme-token-row strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-transform: capitalize;
}

.suite-ui-theme-segmented {
  width: 100%;
}

.suite-ui-theme-font-group {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.suite-ui-theme-font-group > strong {
  color: var(--text);
  font-size: var(--suite-type-title);
  font-weight: 900;
  letter-spacing: 0;
}

.suite-ui-theme-font-stack {
  display: grid;
  gap: 8px;
}

.suite-ui-theme-font-select {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.suite-ui-theme-font-select > span,
.suite-ui-theme-type-advanced-panel > span,
.suite-ui-theme-size-editor > span {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-dropdown {
  --suite-dropdown-trigger-width: 100%;
  position: relative;
  min-width: 0;
}

.suite-ui-theme-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: auto;
  z-index: 60;
  box-sizing: border-box;
  width: var(--suite-dropdowns-menu-width, var(--suite-dropdown-trigger-width, max-content));
  min-width: var(--suite-dropdowns-menu-min-width, var(--suite-dropdown-trigger-width, max-content));
  max-width: var(--suite-dropdowns-menu-max-width, min(420px, calc(100vw - 24px)));
  max-height: 190px;
  overflow: auto;
}

.suite-ui-theme-dropdown-trigger.suite-button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 8px;
  align-items: center;
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-control, 10px));
  color: var(--text);
  background: var(--suite-dropdowns-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  box-shadow: none;
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-ui-theme-dropdown-trigger:hover,
.suite-ui-theme-dropdown-trigger:focus-visible,
.suite-ui-theme-dropdown.open .suite-ui-theme-dropdown-trigger {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--line));
  background: var(--primary-soft);
  outline: none;
}

.suite-ui-theme-dropdown-trigger span {
  min-width: 0;
  overflow: hidden;
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-dropdown-trigger b {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 0.16s ease;
}

.suite-ui-theme-dropdown.open .suite-ui-theme-dropdown-trigger b {
  transform: rotate(180deg);
}

.suite-ui-theme-type-advanced-toggle.suite-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface-soft);
  color: var(--text);
  box-shadow: none;
}

.suite-ui-theme-type-advanced-toggle b {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 0.16s ease;
}

.suite-ui-theme-type-advanced-toggle[aria-expanded="true"] b {
  transform: rotate(180deg);
}

.suite-ui-theme-type-advanced-disclosure {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.18s ease, opacity 0.18s ease;
}

.suite-ui-theme-type-advanced-disclosure.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.suite-ui-theme-type-advanced-disclosure > div {
  min-height: 0;
  overflow: hidden;
}

.suite-ui-theme-type-advanced-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: var(--suite-shared-padding-12px, 12px);
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface-soft);
}

.suite-ui-theme-type-advanced-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.suite-ui-theme-number-field {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 6px;
  align-items: center;
}

.suite-ui-theme-number-field > span {
  grid-column: 1 / -1;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-number-field .suite-field-control {
  min-height: var(--suite-control-height, 34px);
  text-align: var(--suite-shell-topbar-text-align, right);
}

.suite-ui-theme-number-field small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-text-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.suite-ui-theme-text-field > span {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-text-field .suite-field-control {
  min-height: var(--suite-control-height, 34px);
  text-align: left;
}

.suite-ui-theme-size-editor {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 7px 10px;
  align-items: center;
}

.suite-ui-theme-size-editor > span {
  grid-column: 1 / -1;
}

.suite-ui-theme-size-editor input[type="range"] {
  width: 100%;
  height: var(--suite-icon-size-18px, 18px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.suite-ui-theme-size-editor input[type="range"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 3px;
}

.suite-ui-theme-size-editor input[type="range"]::-webkit-slider-runnable-track {
  height: var(--suite-shared-height-6px, 6px);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  background:
    linear-gradient(
      90deg,
      var(--primary) 0 var(--type-size-progress, 50%),
      color-mix(in srgb, var(--line) 70%, var(--surface)) var(--type-size-progress, 50%) 100%
    );
}

.suite-ui-theme-size-editor input[type="range"]::-webkit-slider-thumb {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
  margin-top: -6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 3px 8px rgba(15, 23, 42, 0.16);
  appearance: none;
}

.suite-ui-theme-size-editor input[type="range"]::-moz-range-track {
  height: var(--suite-shared-height-6px, 6px);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  background: color-mix(in srgb, var(--line) 70%, var(--surface));
}

.suite-ui-theme-size-editor input[type="range"]::-moz-range-progress {
  height: var(--suite-shared-height-6px, 6px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
}

.suite-ui-theme-size-editor input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 3px 8px rgba(15, 23, 42, 0.16);
}

.suite-ui-theme-size-editor small {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-size-editor .suite-field-control {
  text-align: center;
}

.suite-ui-presentation-settings,
.suite-ui-presentation-inline-grid {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.suite-ui-presentation-inline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.suite-ui-presentation-setting,
.suite-ui-presentation-switch-row,
.suite-ui-presentation-field,
.suite-ui-presentation-watermark-row {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.suite-ui-presentation-switch-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.suite-ui-presentation-setting > span,
.suite-ui-presentation-switch-row > span,
.suite-ui-presentation-field > span {
  min-width: 0;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-presentation-field .suite-field-control {
  width: 100%;
}

.suite-toggle.suite-button {
  width: 38px;
  border: 1px solid color-mix(in srgb, var(--muted) 20%, var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  background: color-mix(in srgb, var(--muted) 16%, var(--surface));
  box-shadow: none;
}

.suite-toggle.suite-button i {
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.suite-toggle.suite-button.active {
  border-color: color-mix(in srgb, var(--primary) 48%, transparent);
  background: var(--primary);
}

.suite-toggle.suite-button.active i {
  transform: translateX(16px);
}

.suite-ui-theme-select-stack {
  display: grid;
  gap: 10px;
}

.suite-ui-theme-select-stack label {
  display: grid;
  gap: 6px;
}

.suite-ui-theme-mini-segmented {
  width: fit-content;
  min-width: 136px;
}

.suite-ui-theme-background-control {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 12px);
  background: var(--surface-soft);
}

.suite-ui-theme-background-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.suite-ui-theme-background-head > span,
.suite-ui-theme-background-url > span {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-background-url {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.suite-ui-theme-background-image-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.suite-ui-theme-background-image-panel.hidden {
  display: none;
}

.suite-ui-theme-background-source-list {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.suite-button.suite-ui-theme-background-source-option {
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-color: transparent;
  border-radius: var(--suite-radius-control, 8px);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  text-align: left;
}

.suite-button.suite-ui-theme-background-source-option:hover:not(:disabled),
.suite-button.suite-ui-theme-background-source-option.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary-soft) 76%, var(--surface));
}

.suite-button.suite-ui-theme-background-source-option:disabled {
  cursor: default;
  opacity: 0.74;
}

.suite-ui-theme-background-source-option span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 820;
}

.suite-ui-theme-background-source-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface));
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0;
}

.suite-ui-theme-background-source-option.active .suite-ui-theme-background-source-icon {
  color: var(--surface);
  background: var(--primary);
}

.suite-ui-theme-background-source-option i {
  width: 7px;
  height: 12px;
  justify-self: center;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(40deg);
}

.suite-ui-theme-background-source-option em {
  justify-self: end;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-style: normal;
  font-weight: 750;
}

.suite-ui-theme-background-preset-panel {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
}

.suite-ui-theme-background-preset-panel > span {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-background-preset-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.suite-button.suite-ui-theme-background-preset {
  min-width: 0;
  min-height: 84px;
  display: grid;
  grid-template-rows: 58px auto;
  gap: 6px;
  align-items: stretch;
  padding: 6px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
  text-align: left;
}

.suite-button.suite-ui-theme-background-preset:hover {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.suite-ui-theme-background-preset-thumb {
  min-width: 0;
  border-radius: calc(var(--suite-radius-control, 10px) - 3px);
  background-color: var(--surface-soft);
  background-image: var(--suite-ui-bg-preset);
  background-size: cover;
  background-position: center;
}

.suite-ui-theme-background-preset span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.suite-ui-theme-background-upload-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
}

.suite-ui-theme-background-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suite-ui-theme-background-upload {
  position: relative;
  cursor: pointer;
}

.suite-ui-theme-background-file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.suite-ui-theme-global-scale-row {
  padding-top: 2px;
}

.suite-ui-theme-token-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.suite-ui-theme-token-list span {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-8px, 8px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 8px);
  background: var(--surface);
}

.suite-ui-theme-token-list code {
  overflow: hidden;
  color: var(--text);
  font: 800 var(--suite-type-caption) / 1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-contrast-menu {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.suite-ui-theme-contrast-menu > span {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-contrast-swatches {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.suite-ui-theme-setting-group {
  display: grid;
  gap: 9px;
}

.suite-ui-theme-setting-note {
  margin: 0;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border-radius: var(--suite-radius-control, 10px);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.45;
}

.suite-ui-theme-setting-group > div:first-child {
  display: grid;
  gap: 4px;
}

.suite-ui-theme-token-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(76px, 96px);
  gap: 8px;
  align-items: center;
}

.suite-ui-theme-token-control input[type="range"] {
  width: 100%;
  min-width: 0;
  height: var(--suite-icon-size-18px, 18px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.suite-ui-theme-token-control input[type="range"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 3px;
}

.suite-ui-theme-token-control input[type="range"]::-webkit-slider-runnable-track {
  height: var(--suite-shared-height-6px, 6px);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  background:
    linear-gradient(
      90deg,
      var(--primary) 0 var(--theme-token-progress, 50%),
      color-mix(in srgb, var(--line) 70%, var(--surface)) var(--theme-token-progress, 50%) 100%
    );
}

.suite-ui-theme-token-control input[type="range"]::-webkit-slider-thumb {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
  margin-top: -6px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 3px 8px rgba(15, 23, 42, 0.16);
  appearance: none;
}

.suite-ui-theme-token-control input[type="range"]::-moz-range-track {
  height: var(--suite-shared-height-6px, 6px);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  background: color-mix(in srgb, var(--line) 70%, var(--surface));
}

.suite-ui-theme-token-control input[type="range"]::-moz-range-progress {
  height: var(--suite-shared-height-6px, 6px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
}

.suite-ui-theme-token-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent), 0 3px 8px rgba(15, 23, 42, 0.16);
}

.suite-ui-theme-token-number {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
}

.suite-ui-theme-token-number .suite-field-control {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-weight: 850;
  text-align: center;
}

.suite-ui-theme-token-number span,
.suite-ui-theme-token-menu .suite-ui-theme-dropdown-option small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.suite-ui-theme-spacing-control {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface);
}

.suite-ui-theme-spacing-cell {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 3px 0 4px;
  border-right: 1px solid var(--line);
}

.suite-ui-theme-spacing-cell.is-locked {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--line));
}

.suite-ui-theme-spacing-cell > span,
.suite-ui-theme-spacing-unit {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1;
  text-align: center;
}

.suite-ui-theme-spacing-side-label {
  display: grid;
  gap: 1px;
  place-items: center;
}

.suite-ui-theme-spacing-side-label small {
  color: color-mix(in srgb, var(--muted) 82%, var(--surface));
  font-size: calc(var(--suite-type-caption) * 0.86);
  font-weight: 800;
  line-height: 1;
}

.suite-ui-theme-spacing-cell .suite-field-control {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-weight: 850;
  text-align: center;
}

.suite-ui-theme-spacing-cell .suite-field-control:focus {
  background: var(--primary-soft);
  outline: 2px solid color-mix(in srgb, var(--primary) 44%, transparent);
  outline-offset: -2px;
}

.suite-ui-theme-spacing-unit {
  align-self: stretch;
  min-width: 28px;
  display: grid;
  place-items: center;
  padding: 0 7px;
}

.suite-ui-theme-token-menu .suite-ui-theme-dropdown-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.suite-ui-theme-token-menu .suite-ui-theme-dropdown-option span,
.suite-ui-theme-token-menu .suite-ui-theme-dropdown-option small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-motion-preview {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 12px);
  background: var(--surface-soft);
}

.suite-ui-theme-motion-preview span {
  width: var(--suite-shared-width-24px, 24px);
  height: var(--suite-shared-height-24px, 24px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 24%, transparent);
  animation: suite-ui-theme-motion-dot var(--suite-motion-duration, 180ms) var(--suite-motion-easing, ease) infinite alternate;
}

.suite-ui-theme-motion-preview span:nth-child(2) {
  opacity: 0.72;
  animation-delay: calc(var(--suite-motion-duration, 180ms) * -0.35);
}

.suite-ui-theme-motion-preview span:nth-child(3) {
  opacity: 0.48;
  animation-delay: calc(var(--suite-motion-duration, 180ms) * -0.7);
}

:root[data-suite-theme-motion-mode="off"] .suite-ui-theme-motion-preview span {
  animation: none;
  transform: none;
}

@keyframes suite-ui-theme-motion-dot {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--suite-motion-distance, 8px));
  }
}

.suite-ui-control-accordion-list {
  min-width: 0;
  display: grid;
  gap: 8px;
  border-top: 0;
}

.suite-ui-control-accordion {
  min-width: 0;
  overflow: hidden;
  border-width: var(--suite-disclosure-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-disclosure-border-color, var(--line));
  border-radius: var(--suite-disclosure-radius, var(--suite-radius-control, 10px));
  background: var(--suite-disclosure-surface-bg, var(--surface));
}

.suite-ui-control-accordion-summary.suite-button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: var(--suite-disclosure-align-items, center);
  justify-content: stretch;
  gap: 8px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: var(--suite-disclosure-header-bg, var(--suite-disclosure-soft-bg, var(--surface-soft)));
  box-shadow: none;
  text-align: var(--suite-disclosure-text-align, left);
}

.suite-ui-control-accordion-summary span {
  min-width: 0;
  min-height: 100%;
  display: flex;
  align-items: var(--suite-disclosure-align-items, center);
  justify-content: var(--suite-disclosure-justify-content, flex-start);
  overflow: hidden;
  line-height: 1.2;
  text-align: var(--suite-disclosure-text-align, left);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-control-accordion-summary b {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.suite-ui-control-accordion.expanded > .suite-ui-control-accordion-summary {
  color: var(--primary);
  background: var(--suite-disclosure-header-bg, var(--suite-disclosure-soft-bg, var(--surface-soft)));
}

.suite-ui-control-accordion-inner {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: var(--suite-shared-padding-10px, 10px);
  background: var(--suite-disclosure-surface-bg, var(--surface));
}

.suite-ui-theme-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.suite-ui-theme-option.suite-button {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-rows: 30px auto auto;
  gap: 5px;
  justify-items: center;
  padding: 9px 8px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.suite-ui-theme-option.active,
.suite-ui-theme-option:hover,
.suite-ui-theme-option:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  background: var(--primary-soft);
  outline: none;
}

.suite-ui-theme-option b {
  overflow: hidden;
  max-width: 100%;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-option small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.suite-ui-theme-option-glyph {
  position: relative;
  width: var(--suite-shared-width-34px, 34px);
  height: var(--suite-shared-height-26px, 26px);
  display: block;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-soft);
}

.suite-ui-theme-option-glyph.radius.sharp { border-radius: var(--suite-shared-radius-2px, 2px); }
.suite-ui-theme-option-glyph.radius.soft { border-radius: var(--suite-shared-radius-7px, 7px); }
.suite-ui-theme-option-glyph.radius.round { border-radius: var(--suite-shared-radius-12px, 12px); }
.suite-ui-theme-option-glyph.radius.pill { border-radius: var(--suite-radius-pill, 999px); }

.suite-ui-theme-option-glyph.panelShadow.none { box-shadow: none; }
.suite-ui-theme-option-glyph.panelShadow.soft { box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16); }
.suite-ui-theme-option-glyph.panelShadow.lifted { box-shadow: 0 9px 18px rgba(15, 23, 42, 0.24); }

.suite-ui-theme-option-glyph.cardBorder.none { border-color: transparent; }
.suite-ui-theme-option-glyph.cardBorder.thin { border-width: var(--suite-shared-width-1px, 1px); }
.suite-ui-theme-option-glyph.cardBorder.strong { border-width: var(--suite-shared-border-width-3px, 3px); border-color: var(--primary); }

.suite-ui-theme-option-glyph.cardOpacity.solid { opacity: 1; }
.suite-ui-theme-option-glyph.cardOpacity.frosted { opacity: 0.82; }
.suite-ui-theme-option-glyph.cardOpacity.glass { opacity: 0.64; }

.suite-ui-theme-option-glyph.readonly.quiet { border-style: solid; background: var(--suite-shared-bg-148-163-184-0-06, rgba(148, 163, 184, 0.06)); }
.suite-ui-theme-option-glyph.readonly.tinted { border-style: dashed; background: var(--suite-shared-bg-148-163-184-0-1, rgba(148, 163, 184, 0.1)); }
.suite-ui-theme-option-glyph.readonly.filled { border-style: dashed; background: var(--suite-shared-bg-148-163-184-0-18, rgba(148, 163, 184, 0.18)); }

.suite-ui-theme-option-glyph.controlDensity.compact { height: var(--suite-shared-height-20px, 20px); margin-top: 3px; }
.suite-ui-theme-option-glyph.controlDensity.comfortable { height: var(--suite-shared-height-24px, 24px); margin-top: 1px; }
.suite-ui-theme-option-glyph.controlDensity.roomy { height: var(--suite-shared-height-28px, 28px); }

.suite-ui-theme-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

.suite-ui-theme-tabs button,
.suite-ui-theme-tabs span {
  min-height: var(--suite-navigation-height, var(--suite-tab-switch-height, 32px));
  display: inline-flex;
  align-items: var(--suite-navigation-align-items, center);
  justify-content: var(--suite-navigation-justify-content, center);
  border: 0;
  border-radius: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-control, 10px)) - 3px));
  appearance: none;
  color: var(--text);
  background: transparent;
  font-family: inherit;
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: var(--suite-navigation-text-align, center);
  cursor: pointer;
}

.suite-ui-theme-tabs span {
  cursor: default;
}

.suite-ui-theme-tabs button:hover,
.suite-ui-theme-tabs button:focus-visible {
  color: var(--suite-navigation-primary-bg, var(--primary));
  background: color-mix(in srgb, var(--suite-navigation-primary-soft-bg, var(--primary-soft)) 72%, transparent);
  outline: none;
}

.suite-ui-theme-tabs button.active,
.suite-ui-theme-tabs span.active {
  color: var(--suite-navigation-primary-bg, var(--primary));
  background: var(--suite-navigation-primary-soft-bg, var(--primary-soft));
}

.suite-ui-theme-control-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.suite-ui-theme-preview-field .suite-field-control {
  width: 100%;
}

.suite-ui-theme-scope-list > div {
  display: grid;
  gap: 6px;
  padding: var(--suite-shared-padding-9px-0, 9px 0);
  border-top: 1px solid var(--line);
}

.suite-ui-theme-scope-list > div:first-child {
  border-top: 0;
}

.suite-ui-theme-scope-list .suite-control.status-pill {
  width: fit-content;
}

.ui-design-route-body .suite-ui-theme-canvas {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0 !important;
  overflow: hidden;
}

.ui-design-route-body .suite-ui-theme-canvas.suite-ui-theme-canvas--titleless {
  grid-template-rows: minmax(0, 1fr);
  padding: 0 !important;
}

.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode {
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}

.suite-ui-theme-canvas-tabs {
  position: static;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--suite-segmented-padding, var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)));
  border-width: var(--suite-navigation-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-border-color, var(--line));
  border-radius: var(--suite-navigation-radius, var(--suite-radius-control, 10px));
  background: var(--suite-navigation-soft-bg, color-mix(in srgb, var(--surface) 92%, transparent));
  box-shadow: var(--shadow-soft);
  transform: none;
}

.suite-ui-theme-canvas-tabs .suite-button {
  display: inline-flex;
  align-items: var(--suite-navigation-align-items, center);
  justify-content: var(--suite-navigation-justify-content, center);
  border: 0;
  border-radius: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-control, 10px)) - 3px));
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  box-shadow: none;
  cursor: pointer;
  text-align: var(--suite-navigation-text-align, center);
  white-space: nowrap;
}

.suite-ui-theme-canvas-tabs .suite-button.active,
.suite-ui-theme-canvas-tabs .suite-button:hover,
.suite-ui-theme-canvas-tabs .suite-button:focus-visible {
  color: var(--suite-navigation-primary-bg, var(--primary));
  background: var(--suite-navigation-primary-soft-bg, var(--primary-soft));
  outline: none;
}

.suite-ui-theme-preview-scroll {
  height: 100%;
  max-height: calc(100vh - 116px);
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: var(--suite-theme-card-gap, 18px);
  overflow: auto;
  padding: 54px 20px 30px;
}

.suite-ui-theme-preview-scroll.ui-mode {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-items: start;
  align-content: start;
  overflow: hidden;
  padding: 0;
}

.suite-ui-theme-preview-scroll.has-preview-background {
  background-color: #f6f8f9;
  background-position: center;
}

.suite-ui-theme-preview-scroll.preview-background-image {
  background-image: var(--suite-ui-preview-bg-url);
  background-repeat: no-repeat;
  background-size: cover;
}

.suite-ui-theme-preview-scroll.preview-background-image:not(.has-preview-background) {
  background-image: none;
}

.suite-ui-theme-preview-card {
  position: relative;
  width: min(520px, 100%);
  margin: var(--suite-theme-card-margin-top, 0px) auto var(--suite-theme-card-margin-bottom, 0px);
  border-width: var(--suite-theme-card-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-theme-card-border-color, color-mix(in srgb, var(--line) 72%, transparent));
  border-radius: var(--suite-theme-card-radius, var(--suite-radius-main-panel, 22px));
  background: var(--suite-theme-card-bg, color-mix(in srgb, var(--surface) 94%, transparent));
  box-shadow: var(--suite-theme-preview-shadow, 0 18px 54px rgba(15, 23, 42, 0.12));
  -webkit-backdrop-filter: var(--suite-theme-card-backdrop, none);
  backdrop-filter: var(--suite-theme-card-backdrop, none);
}

.suite-ui-theme-preview-card.hero {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--suite-theme-card-gap, 16px);
  align-items: center;
  padding: var(--suite-theme-card-padding, 22px);
}

.suite-ui-theme-preview-copy {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.suite-ui-theme-preview-copy small {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-preview-copy h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--suite-presentation-title-font-family, var(--suite-title-font-family, var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif)));
  font-size: var(--suite-presentation-title-size, var(--suite-title-presentation-size, 24px));
  font-weight: var(--suite-presentation-title-font-weight, var(--suite-title-font-weight, 900));
  letter-spacing: var(--suite-presentation-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-presentation-title-line-height, var(--suite-title-line-height, 1.18));
  overflow-wrap: break-word;
  word-break: normal;
}

.suite-ui-theme-preview-copy p {
  margin: 0;
  font-family: var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif);
  font-size: var(--suite-body-preview-size, var(--suite-type-body));
  font-weight: var(--suite-body-font-weight, 400);
  letter-spacing: var(--suite-body-letter-spacing, 0);
  line-height: var(--suite-body-line-height, 1.5);
  overflow-wrap: break-word;
  word-break: normal;
}

.suite-ui-theme-preview-callouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.suite-ui-theme-preview-callouts span {
  min-height: var(--suite-shared-min-height-48px, 48px);
  display: flex;
  align-items: center;
  padding: var(--suite-shared-padding-10px, 10px);
  border: 1px solid var(--suite-primary-border, var(--primary));
  border-radius: var(--suite-radius-main-panel, 12px);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
}

.suite-ui-theme-preview-callouts span + span {
  border-color: var(--suite-secondary-accent-1, color-mix(in srgb, var(--primary) 44%, #22c55e));
  color: var(--suite-secondary-accent-1, var(--muted));
}

.suite-ui-theme-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.suite-ui-theme-preview-art {
  min-height: 92px;
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-18px, 18px);
  background: var(--surface-soft);
}

.suite-ui-theme-preview-art span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-16px, 16px);
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-ui-theme-preview-art .ui-icon {
  width: 28px;
  height: var(--suite-shared-height-28px, 28px);
}

.suite-ui-theme-preview-card.module {
  display: grid;
  gap: var(--suite-theme-card-gap, 16px);
  padding: var(--suite-theme-card-padding, 22px);
}

.suite-ui-theme-preview-card.module.compact {
  gap: max(8px, calc(var(--suite-theme-card-gap, 16px) - 2px));
}

.suite-ui-theme-preview-cluster {
  min-width: 0;
  display: grid;
  gap: max(8px, calc(var(--suite-theme-card-gap, 16px) - 4px));
}

.suite-ui-theme-preview-cluster + .suite-ui-theme-preview-cluster {
  padding-top: max(8px, calc(var(--suite-theme-card-gap, 16px) - 2px));
  border-top: 1px solid var(--line);
}

.suite-ui-theme-shell-frame-preview {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--shell-workspace-bg);
}

.suite-ui-theme-shell-frame-body {
  --suite-ui-preview-sidebar-width-current: var(--sidebar-width, var(--suite-ui-preview-sidebar-collapsed-width, 64px));
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-width, var(--suite-ui-preview-sidebar-width-current)) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  background: var(--shell-workspace-bg);
}

.suite-ui-theme-shell-frame-body.sidebar-preview-expanded {
  --sidebar-width: clamp(196px, var(--suite-ui-preview-sidebar-width, 221px), 286px);
  --suite-ui-preview-sidebar-width-current: var(--sidebar-width);
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed {
  --sidebar-width: var(--suite-ui-preview-sidebar-collapsed-width, 64px);
  --suite-ui-preview-sidebar-width-current: var(--sidebar-width);
  overflow: hidden;
}

.suite-ui-theme-shell-frame-topbar,
.suite-ui-theme-shell-frame-sidebar {
  min-width: 0;
}

.suite-ui-theme-shell-frame-topbar.suite-content-option {
  position: sticky;
  top: 0;
  z-index: 120;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.suite-ui-theme-shell-frame-sidebar {
  display: flex;
  align-self: stretch;
}

.suite-ui-theme-shell-frame-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-managementbar {
  position: relative;
  top: auto;
  flex: 0 0 auto;
  z-index: 20;
  width: auto;
  margin: var(--shell-workspace-top-gap, 0px) var(--shell-content-padding-right) 0 var(--shell-workspace-left-gap, var(--shell-content-padding-left));
}

.suite-ui-theme-shell-frame-content-scroll {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  max-inline-size: none;
  display: block;
  box-sizing: border-box;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.suite-ui-theme-shell-frame-content-shell.content {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  max-inline-size: none;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px var(--shell-content-padding-right) 24px var(--shell-workspace-left-gap, var(--shell-content-padding-left));
  box-sizing: border-box;
}

.suite-ui-theme-shell-workbench-preview {
  min-height: 0;
  height: auto;
  width: 100%;
  inline-size: 100%;
  max-width: none;
  max-inline-size: none;
  align-self: stretch;
  justify-self: stretch;
  gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px)));
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

.suite-ui-theme-shell-frame-main .suite-ui-theme-preview-card.module,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card {
  display: block;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  max-width: none;
  max-inline-size: none;
  min-height: auto;
  align-self: stretch;
  justify-self: stretch;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
}

.suite-ui-theme-shell-frame-main .suite-ui-theme-component-gallery,
.suite-ui-theme-shell-workspace-preview > .suite-ui-theme-component-gallery {
  width: 100%;
  min-width: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
}

.suite-ui-theme-shell-workspace-preview .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.suite-ui-theme-shell-workspace-preview .suite-ui-theme-component-section {
  width: 100%;
  max-width: none;
}

.suite-ui-theme-component-gallery {
  min-width: 0;
  display: grid;
  gap: var(--suite-main-container-content-gap, var(--suite-theme-card-content-gap, 16px));
}

.suite-ui-theme-component-header {
  min-width: 0;
  flex: 0 0 auto;
}

.suite-panel-title.panel-head,
.suite-panel-title.panel-title,
.section-title,
.binding-section-head,
.suite-section-panel.field-map-group .field-map-group-head,
.suite-main-panel > .suite-panel-title:first-child,
.suite-main-panel > header:first-child,
.suite-section-panel > .suite-panel-title:first-child:not(.suite-sub-panel-header),
.suite-section-panel > header:first-child:not(.suite-sub-panel-header) {
  border-bottom: 1px solid var(--line);
}

.suite-ui-theme-component-section {
  min-width: 0;
  display: grid;
  gap: var(--suite-sub-panel-gap, 10px);
  padding: var(--suite-sub-panel-padding, 12px);
  border-top: 1px solid var(--line);
}

.suite-ui-theme-sub-panel-spacing-values {
  min-width: 0;
  display: grid;
  gap: var(--suite-sub-panel-gap, 10px);
}

.suite-ui-theme-sub-panel-spacing-values > span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-sub-panel-gap, 10px);
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-ui-theme-sub-panel-spacing-values b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.suite-ui-theme-component-section[data-shared-ui-preview] {
  opacity: 1;
}

[data-ui-preview-owner-component] {
  position: relative;
  cursor: pointer;
}

[data-ui-preview-owner-component]::after {
  position: absolute;
  z-index: 3;
  top: 6px;
  right: 6px;
  max-width: calc(100% - 12px);
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-soft);
  color: var(--primary);
  content: attr(data-ui-preview-owner-label);
  font-size: var(--suite-type-caption);
  line-height: 1.2;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}

[data-ui-preview-owner-component]:hover,
[data-ui-preview-owner-component]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 58%, transparent);
  outline-offset: 4px;
}

[data-ui-preview-owner-component]:hover::after,
[data-ui-preview-owner-component]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

[data-ui-preview-owner-component]:has([data-ui-preview-owner-component]:hover) {
  outline: 0;
}

[data-ui-preview-owner-component]:has([data-ui-preview-owner-component]:hover)::after {
  opacity: 0;
}

[data-ui-preview-owner-component].is-selected {
  outline: 2px solid color-mix(in srgb, var(--primary) 74%, transparent);
  outline-offset: 4px;
  box-shadow: var(--suite-ui-preview-selected-shadow);
}

.suite-ui-theme-shell-frame-body[data-ui-preview-owner-component].is-selected {
  outline-offset: -3px;
}

[data-ui-preview-owner-component]:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-soft) 70%, transparent);
}

.suite-ui-theme-component-section[data-ui-preview-owner-component] {
  border-radius: max(6px, calc(var(--suite-sub-panel-radius, 10px) - 2px));
}

.suite-ui-theme-shell-frame-topbar[data-ui-preview-owner-component],
.suite-ui-theme-shell-frame-sidebar[data-ui-preview-owner-component],
.suite-ui-theme-preview-shell-sidebar[data-ui-preview-owner-component] {
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 12px));
}

.suite-ui-theme-component-section[data-shared-ui-preview="shellTopbar"],
.suite-ui-theme-shell-frame-topbar[data-shared-ui-preview="shellTopbar"] {
  --suite-component-surface-bg: var(--suite-shell-topbar-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-shell-topbar-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-shell-topbar-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-shell-topbar-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-shell-topbar-radius, 0px);
  --suite-component-border: var(--suite-shell-topbar-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-shell-topbar-border-width, 1px);
  --suite-component-border-color: var(--suite-shell-topbar-border-color, var(--line));
  --suite-component-align-items: var(--suite-shell-topbar-align-items, center);
  --suite-component-vertical-align: var(--suite-shell-topbar-vertical-align, middle);
  --suite-component-text-align: var(--suite-shell-topbar-text-align, left);
  --suite-component-justify-content: var(--suite-shell-topbar-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="shellSidebar"],
.suite-ui-theme-shell-frame-sidebar[data-shared-ui-preview="shellSidebar"],
.suite-ui-theme-preview-shell-sidebar[data-shared-ui-preview="shellSidebar"] {
  --suite-component-height: var(--suite-shell-sidebar-height, 44px);
  --suite-component-surface-bg: var(--suite-shell-sidebar-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-shell-sidebar-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-shell-sidebar-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-shell-sidebar-primary-soft-bg, var(--primary-soft));
  --suite-component-backdrop: var(--suite-shell-sidebar-backdrop, none);
  --suite-component-radius: var(--suite-shell-sidebar-radius, 20px);
  --suite-component-border: var(--suite-shell-sidebar-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-shell-sidebar-border-width, 1px);
  --suite-component-border-color: var(--suite-shell-sidebar-border-color, var(--line));
  --suite-component-align-items: var(--suite-shell-sidebar-align-items, center);
  --suite-component-vertical-align: var(--suite-shell-sidebar-vertical-align, middle);
  --suite-component-text-align: var(--suite-shell-sidebar-text-align, left);
  --suite-component-justify-content: var(--suite-shell-sidebar-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="buttons"],
.suite-ui-theme-preview-selectable[data-shared-ui-preview="buttons"] {
  --suite-component-height: var(--suite-buttons-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-buttons-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-buttons-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-buttons-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-buttons-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-buttons-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-buttons-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-buttons-border-width, 1px);
  --suite-component-border-color: var(--suite-buttons-border-color, var(--line));
  --suite-component-align-items: var(--suite-buttons-align-items, center);
  --suite-component-vertical-align: var(--suite-buttons-vertical-align, middle);
  --suite-component-text-align: var(--suite-buttons-text-align, left);
  --suite-component-justify-content: var(--suite-buttons-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="status"],
.suite-ui-theme-preview-selectable[data-shared-ui-preview="status"] {
  --suite-component-height: var(--suite-status-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-status-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-status-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-status-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-status-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-status-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-status-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-status-border-width, 1px);
  --suite-component-border-color: var(--suite-status-border-color, var(--line));
  --suite-component-align-items: var(--suite-status-align-items, center);
  --suite-component-vertical-align: var(--suite-status-vertical-align, middle);
  --suite-component-text-align: var(--suite-status-text-align, left);
  --suite-component-justify-content: var(--suite-status-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="navigation"] {
  --suite-component-height: var(--suite-navigation-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-navigation-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-navigation-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-navigation-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-navigation-primary-soft-bg, var(--primary-soft));
  --suite-component-active-bg: var(--suite-navigation-active-bg, var(--primary-soft));
  --suite-component-active-color: var(--suite-navigation-active-color, var(--primary));
  --suite-component-radius: var(--suite-navigation-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-navigation-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-navigation-border-width, 1px);
  --suite-component-border-color: var(--suite-navigation-border-color, var(--line));
  --suite-component-align-items: var(--suite-navigation-align-items, center);
  --suite-component-vertical-align: var(--suite-navigation-vertical-align, middle);
  --suite-component-text-align: var(--suite-navigation-text-align, left);
  --suite-component-justify-content: var(--suite-navigation-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="forms"] {
  --suite-component-height: var(--suite-forms-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-forms-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-forms-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-forms-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-forms-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-forms-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-forms-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-forms-border-width, 1px);
  --suite-component-border-color: var(--suite-forms-border-color, var(--line));
  --suite-component-align-items: var(--suite-forms-align-items, center);
  --suite-component-vertical-align: var(--suite-forms-vertical-align, middle);
  --suite-component-text-align: var(--suite-forms-text-align, left);
  --suite-component-justify-content: var(--suite-forms-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="forms"] {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"],
.suite-ui-theme-preview-selectable[data-shared-ui-preview="dropdowns"] {
  --suite-component-height: var(--suite-dropdowns-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-dropdowns-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-dropdowns-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-dropdowns-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-dropdowns-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-dropdowns-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-dropdowns-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-dropdowns-border-width, 1px);
  --suite-component-border-color: var(--suite-dropdowns-border-color, var(--line));
  --suite-component-align-items: var(--suite-dropdowns-align-items, center);
  --suite-component-vertical-align: var(--suite-dropdowns-vertical-align, middle);
  --suite-component-text-align: var(--suite-dropdowns-text-align, left);
  --suite-component-justify-content: var(--suite-dropdowns-justify-content, flex-start);
  --suite-component-justify-items: var(--suite-dropdowns-justify-items, start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="slider"] {
  --suite-component-height: var(--suite-slider-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-slider-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-slider-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-slider-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-slider-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-slider-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-slider-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-slider-border-width, 1px);
  --suite-component-border-color: var(--suite-slider-border-color, var(--line));
  --suite-component-align-items: var(--suite-slider-align-items, center);
  --suite-component-vertical-align: var(--suite-slider-vertical-align, middle);
  --suite-component-text-align: var(--suite-slider-text-align, left);
  --suite-component-justify-content: var(--suite-slider-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] {
  --suite-component-height: var(--suite-tables-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-tables-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-tables-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-tables-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-tables-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-tables-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-tables-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-tables-border-width, 1px);
  --suite-component-border-color: var(--suite-tables-border-color, var(--line));
  --suite-component-align-items: var(--suite-tables-align-items, center);
  --suite-component-vertical-align: var(--suite-tables-vertical-align, middle);
  --suite-component-text-align: var(--suite-tables-text-align, left);
  --suite-component-justify-content: var(--suite-tables-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="dataRows"] {
  --suite-component-height: var(--suite-data-rows-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-data-rows-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-data-rows-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-data-rows-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-data-rows-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-data-rows-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-data-rows-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-data-rows-border-width, 1px);
  --suite-component-border-color: var(--suite-data-rows-border-color, var(--line));
  --suite-component-align-items: var(--suite-data-rows-align-items, center);
  --suite-component-vertical-align: var(--suite-data-rows-vertical-align, middle);
  --suite-component-text-align: var(--suite-data-rows-text-align, left);
  --suite-component-justify-content: var(--suite-data-rows-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="emphasisBlock"] {
  --suite-component-height: var(--suite-emphasis-block-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-emphasis-block-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-emphasis-block-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-emphasis-block-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-emphasis-block-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-emphasis-block-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-emphasis-block-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-emphasis-block-border-width, 1px);
  --suite-component-border-color: var(--suite-emphasis-block-border-color, var(--line));
  --suite-component-align-items: var(--suite-emphasis-block-align-items, center);
  --suite-component-vertical-align: var(--suite-emphasis-block-vertical-align, middle);
  --suite-component-text-align: var(--suite-emphasis-block-text-align, left);
  --suite-component-justify-content: var(--suite-emphasis-block-justify-content, flex-start);
}

.suite-ui-theme-component-section[data-shared-ui-preview="disclosure"] {
  --suite-component-height: var(--suite-disclosure-height, var(--suite-control-height, 30px));
  --suite-component-surface-bg: var(--suite-disclosure-surface-bg, var(--surface));
  --suite-component-soft-bg: var(--suite-disclosure-soft-bg, var(--surface-soft));
  --suite-component-primary-bg: var(--suite-disclosure-primary-bg, var(--primary));
  --suite-component-primary-soft-bg: var(--suite-disclosure-primary-soft-bg, var(--primary-soft));
  --suite-component-radius: var(--suite-disclosure-radius, var(--suite-radius-control, 10px));
  --suite-component-border: var(--suite-disclosure-border, 1px solid var(--line));
  --suite-component-border-width: var(--suite-disclosure-border-width, 1px);
  --suite-component-border-color: var(--suite-disclosure-border-color, var(--line));
  --suite-component-align-items: var(--suite-disclosure-align-items, center);
  --suite-component-vertical-align: var(--suite-disclosure-vertical-align, middle);
  --suite-component-text-align: var(--suite-disclosure-text-align, left);
  --suite-component-justify-content: var(--suite-disclosure-justify-content, flex-start);
}

.suite-ui-theme-component-section > strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-preview-type-stack {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.suite-ui-theme-preview-type-stack b {
  color: var(--text);
  font-family: var(--suite-ui-title-font-family, var(--suite-title-font-family, var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif)));
  font-size: var(--suite-ui-title-preview-size, var(--suite-title-preview-size, var(--suite-type-title)));
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, 900));
  letter-spacing: var(--suite-ui-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-ui-title-line-height, var(--suite-title-line-height, 1.2));
}

.suite-ui-theme-preview-type-stack span,
.suite-ui-theme-preview-type-stack small {
  color: var(--muted);
  font-family: var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif);
  font-size: var(--suite-body-preview-size, var(--suite-type-body));
  font-weight: var(--suite-body-font-weight, 400);
  letter-spacing: var(--suite-body-letter-spacing, 0);
  line-height: var(--suite-body-line-height, 1.5);
}

.suite-ui-theme-preview-type-stack small {
  font-size: var(--suite-type-caption);
}

.suite-ui-theme-preview-icon-button .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
}

.suite-ui-theme-preview-segmented {
  width: fit-content;
}

.suite-ui-theme-preview-menu-demo {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.suite-ui-theme-preview-select.suite-button {
  width: 100%;
}

.suite-ui-theme-preview-select span {
  min-width: 0;
  overflow: hidden;
  justify-self: var(--suite-component-justify-items, start);
  text-align: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-preview-select b,
.suite-ui-theme-preview-select .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
  color: var(--muted);
}

.suite-ui-theme-preview-menu-demo .suite-dropdown-menu,
.suite-ui-theme-preview-menu-demo .suite-menu-popover {
  position: relative;
  width: 100%;
}

.suite-ui-theme-preview-slider {
  grid-template-columns: minmax(0, 1fr) 54px;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  background: var(--surface-soft);
}

.suite-ui-theme-preview-slider em {
  min-height: var(--suite-shared-height-30px, 30px);
  display: inline-grid;
  place-items: center;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  color: var(--text);
  background: var(--surface);
  font-style: normal;
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-preview-table-wrap.suite-table-wrap {
  overflow: auto;
}

.suite-ui-theme-preview-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  color: var(--text);
  font-size: var(--suite-type-body);
}

.suite-ui-theme-preview-table th,
.suite-ui-theme-preview-table td {
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-10px, var(--suite-shared-padding-8px, 8px) 10px);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.suite-ui-theme-preview-table th {
  color: var(--muted);
  background: var(--surface-soft);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-preview-table td {
  font-weight: 750;
}

.suite-ui-theme-preview-table tr:last-child td {
  border-bottom: 0;
}

.suite-ui-theme-preview-data-grid {
  min-width: 0;
  display: grid;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-control, 10px);
  overflow: hidden;
}

.suite-ui-theme-preview-data-head,
.suite-ui-theme-preview-data-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-10px, var(--suite-shared-padding-8px, 8px) 10px);
}

.suite-ui-theme-preview-data-head {
  color: var(--muted);
  background: var(--surface-soft);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-ui-theme-preview-data-row {
  border-top: 1px solid var(--line);
  color: var(--text);
  background: var(--surface);
  font-size: var(--suite-type-body);
  font-weight: 750;
}

.suite-ui-theme-preview-data-row.muted {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.suite-ui-theme-preview-data-head span,
.suite-ui-theme-preview-data-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Connect UI Design component tokens to shared primitives outside the preview. */
:root {
  --suite-button-height: var(--suite-buttons-height, var(--suite-control-height));
  --suite-icon-button-size: var(--suite-icon-button-height, var(--suite-control-height));
  --suite-radius-button: var(--suite-buttons-radius, var(--suite-radius-control));
  --suite-radius-toolbar-button: var(--suite-buttons-radius, var(--suite-radius-button, var(--suite-radius-control)));
  --suite-form-height: var(--suite-forms-height, var(--suite-control-height));
  --suite-form-radius: var(--suite-forms-radius, var(--suite-radius-control));
  --suite-form-border: var(--suite-forms-border, 1px solid var(--line));
  --suite-form-row-gap: var(--suite-forms-gap, 8px);
  --suite-segmented-option-height: var(--suite-navigation-height, calc(var(--suite-control-height) - 4px));
  --suite-tab-switch-height: var(--suite-navigation-height, var(--suite-segmented-option-height, calc(var(--suite-control-height) - 4px)));
  --suite-pill-tab-height: var(--suite-tab-switch-height);
  --suite-mobile-preview-segmented-option-height: var(--suite-navigation-height, var(--suite-control-height));
  --suite-mobile-tabbar-option-height: var(--suite-navigation-height, var(--suite-control-height));
  --suite-mobile-tabbar-min-height: calc(var(--suite-mobile-tabbar-option-height) + var(--mobile-app-bottom-guard, 0px) + 4px);
  --suite-navigation-active-bg: var(--primary-soft);
  --suite-navigation-active-color: color-mix(in srgb, var(--primary) 45%, var(--text));
  --suite-radius-segmented: var(--suite-navigation-radius, var(--suite-radius-button, var(--suite-radius-control)));
  --suite-radius-segmented-option: max(0px, calc(var(--suite-navigation-radius, var(--suite-radius-control)) - 3px));
  --suite-navigation-option-radius: var(--suite-radius-segmented-option);
  --suite-segmented-bg: var(--suite-navigation-soft-bg, var(--surface-soft));
  --suite-segmented-border: var(--suite-navigation-border-color, var(--line));
  --suite-segmented-border-width: var(--suite-navigation-border-width, 1px);
  --suite-segmented-active-bg: var(--suite-navigation-active-bg, var(--primary-soft));
  --suite-segmented-active-color: var(--suite-navigation-active-color, var(--primary));
  --suite-native-table-cell-border: var(--suite-tables-border, 1px solid var(--line));
}

.suite-button {
  align-items: var(--suite-buttons-align-items, center);
  border-width: var(--suite-buttons-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-buttons-border-color, var(--line));
  border-radius: var(--suite-buttons-radius, var(--suite-radius-button, var(--suite-radius-control)));
  background: var(--suite-buttons-surface-bg, var(--surface-strong));
  color: var(--suite-buttons-on-surface, var(--text));
  box-shadow: var(--suite-buttons-shadow, none);
  -webkit-backdrop-filter: var(--suite-buttons-backdrop, none);
  backdrop-filter: var(--suite-buttons-backdrop, none);
}

.suite-button.primary,
.suite-button.suite-button-primary {
  border-color: var(--suite-buttons-primary-bg, var(--primary));
  background: var(--suite-buttons-primary-bg, var(--primary));
  color: var(--suite-buttons-on-primary, var(--suite-primary-action-text, #ffffff));
}

.suite-button:not(.suite-button-icon):not(.suite-icon-button):not(.suite-button-justify-between) {
  justify-content: var(--suite-buttons-justify-content, center);
  text-align: var(--suite-buttons-text-align, center);
}

.suite-button.suite-button-icon,
.suite-button.suite-icon-button,
.suite-icon-button {



  align-items: center;
  justify-content: center;
  border-width: var(--suite-icon-button-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-icon-button-border-color, var(--line));
  border-radius: var(--suite-icon-button-radius, var(--suite-radius-control));
  background: var(--suite-icon-button-surface-bg, var(--surface-strong));
  color: var(--suite-icon-button-on-surface, var(--text));
  box-shadow: var(--suite-icon-button-shadow, none);
  -webkit-backdrop-filter: var(--suite-icon-button-backdrop, none);
  backdrop-filter: var(--suite-icon-button-backdrop, none);
  text-align: center;
}

.suite-control.status-pill,
.suite-toolbar.shell-toolbar .toolbar-status {
  min-height: var(--suite-status-height, var(--suite-control-height));
  align-items: var(--suite-status-align-items, center);
  justify-content: var(--suite-status-justify-content, flex-start);
  border-width: var(--suite-status-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-status-border-color, var(--line));
  border-radius: var(--suite-status-radius, var(--suite-radius-control));
  background: var(--suite-status-surface-bg, var(--surface));
  color: var(--suite-status-on-surface, var(--text));
  box-shadow: var(--suite-status-shadow, none);
  -webkit-backdrop-filter: var(--suite-status-backdrop, none);
  backdrop-filter: var(--suite-status-backdrop, none);
  text-align: var(--suite-status-text-align, left);
}

.suite-segmented {
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border-width: var(--suite-navigation-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-border-color, var(--line));
  border-radius: var(--suite-navigation-radius, var(--suite-radius-segmented, var(--suite-radius-control)));
  background: var(--suite-navigation-soft-bg, var(--surface-soft));
}

.suite-management-tabs {
  --suite-segmented-active-bg: var(--suite-navigation-active-bg, var(--primary-soft));
  --suite-segmented-active-color: var(--suite-navigation-active-color, var(--primary));
  --suite-segmented-option-height: var(--suite-navigation-height, calc(var(--suite-control-height) - 2px));
  --suite-tab-switch-height: var(--suite-navigation-height, var(--suite-segmented-option-height, calc(var(--suite-control-height) - 2px)));
}

.suite-segmented > button,
.suite-segmented > [role='tab'],
.suite-segmented > .suite-button.suite-segmented-option,
.suite-segmented > .suite-button.suite-pill-tab,
.suite-management-tabs > .suite-button.suite-segmented-option,
.suite-management-tabs > .suite-button.suite-pill-tab,
.suite-management-tabs > .render-hub-draw-tool,
.bim-toolbar.suite-management-switchbar .suite-management-tabs .render-hub-button,
.bim-toolbar.suite-management-switchbar .suite-management-tabs .render-hub-toolbar-icon,
.suite-segmented-option,
.suite-pill-tab,
.suite-management-tab,
.suite-module-tab,
.suite-module-tab-bar [role='tab'],
.sheet-tabbar [role='tab'],
.budget-suite-tabbar [role='tab'],
.presentation-suite-toolbar [role='tab'],
.c-table-toolbar [role='tab'] {
  height: var(--suite-tab-switch-height, var(--suite-navigation-height, var(--suite-segmented-option-height, calc(var(--suite-control-height) - 4px))));
  min-height: var(--suite-tab-switch-height, var(--suite-navigation-height, var(--suite-segmented-option-height, calc(var(--suite-control-height) - 4px))));
  align-items: var(--suite-navigation-align-items, center);
  justify-content: var(--suite-navigation-justify-content, center);
  border-radius: var(--suite-navigation-option-radius);
  text-align: var(--suite-navigation-text-align, center);
}

.suite-segmented-option.active,
.suite-segmented-option[data-state='active'],
.suite-pill-tab.active,
.suite-pill-tab[data-state='active'],
.suite-module-tab.active {
  --suite-navigation-primary-soft-bg: var(--suite-navigation-active-bg, var(--primary-soft));
  --suite-navigation-primary-bg: var(--suite-navigation-active-color, var(--primary));
  color: var(--suite-navigation-active-color, var(--primary));
  background: var(--suite-navigation-active-bg, var(--primary-soft));
}

.suite-segmented-option[role='tab'],
.suite-pill-tab[role='tab'] {
  height: var(--suite-tab-item-height, var(--suite-navigation-height, var(--suite-control-height)));
  min-height: var(--suite-tab-item-height, var(--suite-navigation-height, var(--suite-control-height)));
  justify-content: var(--suite-tab-item-justify-content, center);
  border-width: var(--suite-tab-item-border-width, 0px);
  border-style: solid;
  border-color: var(--suite-tab-item-border-color, transparent);
  border-radius: var(--suite-tab-item-radius, var(--suite-navigation-option-radius));
  background: var(--suite-tab-item-surface-bg, transparent);
  color: var(--suite-tab-item-on-surface, var(--text));
  box-shadow: var(--suite-tab-item-shadow, none);
  -webkit-backdrop-filter: var(--suite-tab-item-backdrop, none);
  backdrop-filter: var(--suite-tab-item-backdrop, none);
  text-align: var(--suite-tab-item-text-align, center);
}

.suite-segmented-option[role='tab'].active,
.suite-segmented-option[role='tab'][aria-selected='true'],
.suite-pill-tab[role='tab'].active,
.suite-pill-tab[role='tab'][aria-selected='true'] {
  border-color: var(--suite-tab-item-primary-bg, var(--suite-primary-action-bg, #087476));
  background: var(--suite-tab-item-primary-bg, var(--suite-primary-action-bg, #087476));
  color: var(--suite-tab-item-on-primary, var(--suite-inverse-text, #ffffff));
}

:is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:not(.active):not([aria-selected='true']):hover {
  background: var(--suite-tab-item-hover-bg, var(--primary-soft));
  color: var(--suite-tab-item-hover-color, var(--primary));
}

:is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:not(.active):not([aria-selected='true']):focus-visible {
  background: var(--suite-tab-item-focus-bg, var(--surface));
  color: var(--suite-tab-item-focus-color, var(--text));
}

:is(.suite-segmented-option, .suite-pill-tab, .suite-management-tab)[role='tab']:not(.active):not([aria-selected='true']):is(:disabled, [aria-disabled='true']) {
  background: var(--suite-tab-item-disabled-bg, var(--surface));
  color: var(--suite-tab-item-disabled-color, var(--muted));
}

.suite-management-tabs.has-tab-background > .suite-management-tab.active,
.suite-management-tabs.has-tab-background > .suite-management-tab.suite-segmented-option[data-state='active'] {
  color: var(--suite-navigation-active-color, var(--primary));
  background: transparent;
  box-shadow: none;
  transition: color 160ms ease;
}

.suite-segmented-option:not(.active):not([data-state='active']):hover,
.suite-pill-tab:not(.active):not([data-state='active']):hover,
.suite-module-tab:not(.active):not([data-state='active']):hover {
  background-image: linear-gradient(var(--suite-state-hover-layer, transparent), var(--suite-state-hover-layer, transparent));
}

.suite-segmented-label {
  justify-content: var(--suite-navigation-justify-content, center);
  text-align: var(--suite-navigation-text-align, center);
}

.suite-field-control,
.suite-combobox-field,
.suite-form-control,
.suite-form-select,
.suite-form-textarea {
  border-width: var(--suite-forms-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-forms-border-color, var(--line));
  border-radius: var(--suite-forms-radius, var(--suite-radius-control));
  background: var(--suite-forms-surface-bg, var(--surface));
  color: var(--suite-forms-on-surface, var(--text));
  box-shadow: var(--suite-forms-shadow, none);
  -webkit-backdrop-filter: var(--suite-forms-backdrop, none);
  backdrop-filter: var(--suite-forms-backdrop, none);
  text-align: var(--suite-forms-text-align, left);
}

.suite-form-textarea {
  min-height: max(var(--suite-forms-height, var(--suite-control-height)), var(--suite-form-textarea-min-height, 6rem));
}

.suite-dropdown-trigger,
.suite-ui-theme-dropdown-trigger.suite-button {
  align-items: var(--suite-dropdowns-align-items, center);
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-control));
  background: var(--suite-dropdowns-surface-bg, var(--surface));
  color: var(--suite-dropdowns-on-surface, var(--text));
  box-shadow: var(--suite-dropdowns-shadow, none);
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-dropdown-menu,
.suite-menu {
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-panel, var(--suite-radius-control)));
  background-color: var(--suite-solid-surface-bg, #fff);
  background-image: linear-gradient(var(--suite-dropdowns-menu-surface-bg, transparent), var(--suite-dropdowns-menu-surface-bg, transparent));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  box-shadow: var(--suite-dropdowns-shadow, var(--shadow-soft));
}

.suite-dropdown-menu {
  box-sizing: border-box;
  width: var(--suite-dropdowns-menu-width, var(--suite-dropdown-trigger-width, max-content));
  min-width: var(--suite-dropdowns-menu-min-width, var(--suite-dropdown-trigger-width, max-content));
  max-width: var(--suite-dropdowns-menu-max-width, min(360px, calc(100vw - 24px)));
}

.suite-dropdown-option,
.suite-menu-option {
  min-height: var(--suite-dropdowns-height, var(--suite-control-height));
  align-items: var(--suite-dropdowns-align-items, center);
  justify-content: var(--suite-dropdowns-justify-content, flex-start);
  border-radius: max(0px, calc(var(--suite-dropdowns-radius, var(--suite-radius-control)) - 3px));
  padding: var(--suite-dropdown-option-padding, 5px 8px);
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-menu-popover-row {
  min-height: var(--suite-dropdowns-height, var(--suite-control-height));
  display: flex;
  align-items: var(--suite-dropdowns-align-items, center);
  justify-content: space-between;
  gap: 10px;
  padding: var(--suite-dropdown-option-padding, 5px 8px);
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-menu-popover-row + .suite-menu-popover-row,
.suite-menu-popover-section {
  border-top: 1px solid var(--suite-dropdowns-border-color, var(--line));
}

.suite-menu-popover-section {
  display: grid;
  gap: var(--suite-space-2, 8px);
  padding: var(--suite-dropdown-option-padding, 5px 8px);
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-menu-label {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.suite-menu-value {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.suite-range-input {
  width: 100%;
  height: var(--suite-slider-height, var(--suite-control-height));
  min-height: var(--suite-slider-height, var(--suite-control-height));
  margin: 0;
  padding: 0;
  appearance: none;
  color: var(--suite-slider-on-surface, var(--text));
  background: transparent;
  cursor: pointer;
}

.suite-range-input::-webkit-slider-runnable-track {
  height: 6px;
  border-width: var(--suite-slider-border-width, 0);
  border-style: solid;
  border-color: var(--suite-slider-border-color, transparent);
  border-radius: var(--suite-slider-radius, var(--suite-radius-control));
  background: var(--suite-slider-surface-bg, var(--suite-slider-soft-bg, rgba(15, 23, 42, 0.12)));
  box-shadow: var(--suite-slider-shadow, none);
  -webkit-backdrop-filter: var(--suite-slider-backdrop, none);
  backdrop-filter: var(--suite-slider-backdrop, none);
}

.suite-range-input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 2px solid var(--surface);
  border-radius: var(--suite-radius-pill, 999px);
  appearance: none;
  background: var(--suite-slider-primary-bg, var(--primary));
}

.suite-range-input::-moz-range-track {
  height: 6px;
  border-width: var(--suite-slider-border-width, 0);
  border-style: solid;
  border-color: var(--suite-slider-border-color, transparent);
  border-radius: var(--suite-slider-radius, var(--suite-radius-control));
  background: var(--suite-slider-surface-bg, var(--suite-slider-soft-bg, rgba(15, 23, 42, 0.12)));
  box-shadow: var(--suite-slider-shadow, none);
  backdrop-filter: var(--suite-slider-backdrop, none);
}

.suite-range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--surface);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--suite-slider-primary-bg, var(--primary));
}

.suite-table-wrap {
  border-width: var(--suite-tables-border-width, 0px);
  border-style: solid;
  border-color: var(--suite-tables-border-color, var(--line));
  border-radius: var(--suite-tables-radius, var(--suite-radius-control));
  background: var(--suite-tables-surface-bg, var(--surface));
}

.suite-native-table th {
  height: var(--suite-tables-height, var(--suite-control-height));
  background: var(--suite-tables-soft-bg, var(--surface-soft));
  text-align: var(--suite-tables-text-align, left);
  vertical-align: var(--suite-tables-vertical-align, middle);
}

.suite-native-table tbody tr,
.suite-native-table td {
  height: var(--suite-data-rows-height, var(--suite-tables-height, var(--suite-control-height)));
}

.suite-native-table td {
  background: var(--suite-data-rows-surface-bg, var(--surface));
  text-align: var(--suite-data-rows-text-align, var(--suite-tables-text-align, left));
  vertical-align: var(--suite-data-rows-vertical-align, var(--suite-tables-vertical-align, middle));
}

.suite-native-table tbody tr.is-selected > td,
.suite-native-table tbody tr[aria-selected='true'] > td {
  background: var(--suite-tables-selection-bg, transparent);
}

.suite-native-table tbody tr.is-selected > td:first-child,
.suite-native-table tbody tr[aria-selected='true'] > td:first-child {
  box-shadow: var(--suite-tables-selection-shadow, inset 3px 0 0 var(--primary));
}

.suite-table-outline {
  --suite-table-outline-cell-base-padding: var(--suite-table-cell-padding-inline, 10px);
  --suite-table-outline-node-space: 30px;
  --suite-table-outline-level1-bg: var(--suite-table-group-level-1-bg, var(--suite-table-group-bg, var(--suite-tables-soft-bg, var(--surface-soft))));
  --suite-table-outline-level2-bg: var(--suite-table-group-level-2-bg, var(--suite-table-subgroup-bg, color-mix(in srgb, var(--suite-tables-soft-bg, var(--surface-soft)) 76%, var(--suite-tables-surface-bg, var(--surface)))));
  --suite-table-outline-level3-bg: var(--suite-table-group-level-3-bg, var(--suite-table-segment-bg, color-mix(in srgb, var(--suite-tables-soft-bg, var(--surface-soft)) 54%, var(--suite-tables-surface-bg, var(--surface)))));
}

.suite-table-outline-row[data-suite-outline-level='1'] {
  --suite-table-outline-level-offset: 0px;
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='2'] {
  --suite-table-outline-level-offset: var(--suite-table-outline-indent, 24px);
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='3'] {
  --suite-table-outline-level-offset: calc(var(--suite-table-outline-indent, 24px) + var(--suite-table-outline-indent, 24px));
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='4'] {
  --suite-table-outline-level-offset: calc(var(--suite-table-outline-indent, 24px) + var(--suite-table-outline-indent, 24px) + var(--suite-table-outline-indent, 24px));
  --suite-table-outline-node-x: calc(var(--suite-table-outline-cell-base-padding) + var(--suite-table-outline-level-offset, 0px) + 9px);
}

.suite-table-outline-row[data-suite-outline-level='1'] > td,
.suite-table-outline-row[data-suite-outline-level='1'] > th,
.suite-table-outline-row[data-suite-outline-level='1'] > .suite-data-cell {
  background-color: var(--suite-table-outline-level1-bg);
  font-weight: 850;
}

.suite-table-outline-row[data-suite-outline-level='2'] > td,
.suite-table-outline-row[data-suite-outline-level='2'] > th,
.suite-table-outline-row[data-suite-outline-level='2'] > .suite-data-cell {
  background-color: var(--suite-table-outline-level2-bg);
  font-weight: 800;
}

.suite-table-outline-row[data-suite-outline-level='3'] > td,
.suite-table-outline-row[data-suite-outline-level='3'] > th,
.suite-table-outline-row[data-suite-outline-level='3'] > .suite-data-cell {
  background-color: var(--suite-table-outline-level3-bg);
  font-weight: 760;
}

.suite-table-outline .suite-table-outline-cell {
  position: relative;
  padding-left: calc(
    var(--suite-table-outline-cell-base-padding) +
    var(--suite-table-outline-level-offset, 0px) +
    var(--suite-table-outline-node-space, 30px)
  ) !important;
  background-image: none;
}

.suite-table-outline .suite-table-outline-row[data-suite-outline-role='branch'] > .suite-table-outline-cell::before {
  content: "";
  position: absolute;
  left: calc(var(--suite-table-outline-node-x) + 4px);
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  color: var(--muted);
  transform: translateY(-62%) rotate(45deg);
  pointer-events: none;
}

.suite-table-outline .suite-table-outline-row[data-suite-outline-expanded='false'] > .suite-table-outline-cell::before {
  transform: translateY(-50%) rotate(-45deg);
}

.smooth-disclosure {
  overflow: hidden;
  border-width: var(--suite-disclosure-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-disclosure-border-color, var(--line));
  border-radius: var(--suite-disclosure-radius, var(--suite-radius-control));
  background: var(--suite-disclosure-surface-bg, var(--surface));
}

.smooth-disclosure-summary {
  min-height: var(--suite-disclosure-height, var(--suite-control-height));
  align-items: var(--suite-disclosure-align-items, center);
  justify-content: var(--suite-disclosure-justify-content, flex-start);
  background: var(--suite-disclosure-header-bg, var(--suite-disclosure-soft-bg, var(--surface-soft)));
  text-align: var(--suite-disclosure-text-align, left);
}

.smooth-disclosure-body {
  border-top-width: var(--suite-disclosure-border-top-width, var(--suite-disclosure-border-width, 1px));
  border-top-style: solid;
  border-top-color: var(--suite-disclosure-border-color, var(--line));
}

.suite-disclosure-outline {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}

.suite-disclosure-row {
  min-width: 0;
  min-height: var(--suite-disclosure-height, var(--suite-control-height, 34px));
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto auto;
  align-items: var(--suite-disclosure-align-items, center);
  gap: 6px;
  padding: 4px 8px;
  border-width: var(--suite-disclosure-border-width, 1px);
  border-style: solid;
  border-color: transparent;
  border-radius: var(--suite-disclosure-radius, var(--suite-radius-control, 10px));
  background: transparent;
  color: var(--text);
  text-align: var(--suite-disclosure-text-align, left);
}

.suite-disclosure-row.active,
.suite-disclosure-row:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface));
}

.suite-disclosure-toggle {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
}

.suite-disclosure-toggle .ui-icon,
.suite-disclosure-toggle svg {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
}

.suite-disclosure-guide {
  width: 14px;
  height: 20px;
  border-left: 1px solid color-mix(in srgb, var(--primary) 42%, var(--line));
}

.suite-disclosure-row-level,
.suite-disclosure-row-label,
.suite-disclosure-row-meta {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.suite-disclosure-row-level {
  color: var(--muted);
  font-size: var(--suite-type-body);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.suite-disclosure-row-label {
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-disclosure-row-meta {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

.suite-disclosure-row-input {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font: inherit;
  font-weight: 850;
}

.suite-disclosure-row-input:focus {
  border-bottom-color: var(--primary);
  box-shadow: none;
}

.suite-disclosure-row-action {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font: inherit;
  font-size: var(--suite-type-body);
  line-height: 1;
  opacity: .58;
  cursor: pointer;
}

.suite-disclosure-row-action:hover,
.suite-disclosure-row-action:focus {
  color: var(--text);
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.suite-ui-theme-preview-disclosure {
  min-width: 0;
  padding: 4px;
  overflow: hidden;
  border-width: var(--suite-disclosure-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-disclosure-border-color, var(--line));
  border-radius: var(--suite-disclosure-radius, var(--suite-radius-control, 10px));
  background: var(--suite-disclosure-surface-bg, var(--surface));
}

.suite-emphasis-block {
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: max(6px, calc(var(--suite-emphasis-block-height, var(--suite-control-height, 30px)) * 0.18));
  padding: max(8px, calc(var(--suite-emphasis-block-height, var(--suite-control-height, 30px)) * 0.32));
  border-width: var(--suite-emphasis-block-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-emphasis-block-border-color, var(--line));
  border-radius: var(--suite-emphasis-block-radius, var(--suite-radius-control, 10px));
  background: var(--suite-emphasis-block-soft-bg, var(--surface-soft));
  box-shadow: var(--suite-emphasis-block-shadow, none);
  -webkit-backdrop-filter: var(--suite-emphasis-block-backdrop, none);
  backdrop-filter: var(--suite-emphasis-block-backdrop, none);
  overflow: hidden;
  color: var(--text);
  text-align: var(--suite-emphasis-block-text-align, left);
}

.suite-emphasis-block:not(.suite-feedback-state-block) {
  --suite-emphasis-block-height: var(--suite-control-height, 30px);
  --suite-emphasis-block-border-width: 1px;
  --suite-emphasis-block-border-color: var(--line);
  --suite-emphasis-block-radius: var(--suite-radius-sub-panel, var(--suite-radius-control, 10px));
  --suite-emphasis-block-soft-bg: var(--surface-soft);
  --suite-emphasis-block-shadow: none;
  --suite-emphasis-block-backdrop: none;
}

.suite-emphasis-block[data-emphasis-density="compact"] {
  padding: max(6px, calc(var(--suite-control-height, 30px) * 0.24));
}

.suite-emphasis-block > [data-component-part="accent"] {
  width: 4px;
  min-height: 100%;
  grid-row: 1 / -1;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--primary);
}

.suite-emphasis-block:has(> [data-component-part="accent"]) {
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center;
}

.suite-emphasis-block p {
  margin: 0;
}

.suite-emphasis-block[data-emphasis-tone="success"] > [data-component-part="accent"] { background: var(--success, #047857); }
.suite-emphasis-block[data-emphasis-tone="warning"] > [data-component-part="accent"] { background: var(--warning, #b45309); }
.suite-emphasis-block[data-emphasis-tone="error"] > [data-component-part="accent"] { background: var(--danger, #b42318); }

.suite-feedback-state-block {
  --suite-emphasis-block-soft-bg: transparent;
  --suite-emphasis-block-radius: 0;
  --suite-emphasis-block-border-width: 0;
  --suite-emphasis-block-border-color: transparent;
  --suite-emphasis-block-shadow: none;
  --suite-emphasis-block-backdrop: none;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.suite-feedback-state-block[data-feedback-density="compact"] {
  gap: 6px;
  padding-block: 6px;
}

.suite-feedback-state-block [data-component-part="message"] {
  margin: 0;
}

.suite-feedback-state-indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.suite-feedback-state-block[data-feedback-state="success"] > .suite-feedback-state-indicator { background: var(--success, #047857); }
.suite-feedback-state-block[data-feedback-state="warning"] > .suite-feedback-state-indicator { background: var(--warning, #b45309); }
.suite-feedback-state-block[data-feedback-state="error"] > .suite-feedback-state-indicator { background: var(--danger, #b42318); }
.suite-feedback-state-block[data-feedback-state="loading"] > .suite-feedback-state-indicator { background: var(--primary); }
.suite-feedback-state-block[data-feedback-state="empty"] > .suite-feedback-state-indicator { background: var(--muted); }

.suite-feedback-state-block[data-feedback-state="warning"] { color: var(--warning, #9a6700); }
.suite-feedback-state-block[data-feedback-state="error"] { color: var(--danger, #b42318); }
.suite-feedback-state-block[data-feedback-state="success"] { color: var(--success, #047857); }

.suite-feedback-state-block > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.suite-emphasis-block-head,
.suite-emphasis-block-row {
  min-width: 0;
  min-height: var(--suite-emphasis-block-height, var(--suite-control-height, 30px));
  align-items: var(--suite-emphasis-block-align-items, center);
}

.suite-emphasis-block-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.suite-emphasis-block-head span,
.suite-emphasis-block-head small,
.suite-emphasis-block-row span {
  min-width: 0;
  overflow: hidden;
  text-align: var(--suite-emphasis-block-text-align, left);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-emphasis-block-head span {
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.suite-emphasis-block-head small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.suite-emphasis-block-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(72px, auto);
  gap: 6px;
  padding: 0 2px;
}

.suite-emphasis-block-row span {
  align-self: center;
  color: var(--muted);
  font-size: var(--suite-type-body);
  font-weight: 750;
}

.suite-emphasis-block-row b {
  min-width: 0;
  min-height: max(24px, calc(var(--suite-emphasis-block-height, var(--suite-control-height, 30px)) - 8px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: max(4px, calc(var(--suite-emphasis-block-radius, var(--suite-radius-control, 10px)) - 4px));
  background: var(--suite-emphasis-block-surface-bg, var(--surface));
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.suite-emphasis-block-row b.active {
  background: var(--suite-emphasis-block-primary-soft-bg, var(--primary-soft));
  color: var(--suite-emphasis-block-primary-bg, var(--primary));
}

.suite-ui-theme-preview-disclosure-head {
  min-height: var(--suite-disclosure-height, var(--suite-control-height, 34px));
  display: grid;
  align-items: var(--suite-disclosure-align-items, center);
  gap: 8px;
  padding: 4px 8px;
  color: var(--text);
  background: var(--suite-disclosure-header-bg, var(--suite-disclosure-soft-bg, var(--surface-soft)));
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.suite-ui-theme-preview-disclosure-head span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: var(--suite-disclosure-text-align, left);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-preview-disclosure-head b,
.suite-ui-theme-preview-disclosure-head .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
  color: var(--muted);
}

.suite-ui-theme-preview-disclosure-body {
  min-width: 0;
  min-height: var(--suite-control-height, 34px);
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: var(--suite-disclosure-align-items, center);
  padding: 4px 8px 4px 28px;
  border-top: 0;
  background: transparent;
}

.suite-ui-theme-preview-disclosure-body span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-body);
  font-weight: 750;
  text-align: var(--suite-disclosure-text-align, left);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-theme-preview-card.presentation {
  width: min(560px, 100%);
  min-height: 420px;
  display: grid;
  align-content: space-between;
  gap: 22px;
  padding: 34px;
}

.suite-ui-theme-preview-card.presentation.suite-ui-presentation-preview {
  width: min(620px, 100%);
  min-height: 0;
  aspect-ratio: var(--suite-ui-presentation-aspect-ratio, 16 / 9);
  padding: clamp(18px, var(--suite-ui-presentation-padding, 24px), 34px);
  border-radius: var(--suite-ui-presentation-radius, var(--suite-radius-main-panel, 14px));
  position: relative;
  overflow: hidden;
}

.suite-ui-presentation-preview-header {
  min-width: 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.suite-ui-presentation-preview-header.align-center {
  justify-content: center;
  text-align: center;
}

.suite-ui-presentation-preview-header.align-right {
  justify-content: flex-end;
  text-align: right;
}

.suite-ui-presentation-preview-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: var(--suite-radius-control, 10px);
  color: var(--surface);
  background: var(--suite-ui-presentation-logo-color, var(--primary));
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.suite-ui-presentation-preview-logo.icon {
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-ui-presentation-watermark-preview {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: color-mix(in srgb, var(--muted) 76%, transparent);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  opacity: var(--suite-ui-presentation-watermark-opacity, 0.5);
}

.suite-ui-presentation-watermark-preview span:nth-child(2) {
  text-align: center;
}

.suite-ui-presentation-watermark-preview span:nth-child(3) {
  text-align: right;
}

.suite-ui-presentation-watermark-color {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 4px;
  background: var(--suite-ui-presentation-watermark-color, var(--primary));
  vertical-align: middle;
}

.suite-ui-theme-preview-scroll.presentation-mode {
  display: grid;
  align-content: start;
}

.suite-ui-theme-presentation-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.suite-ui-theme-presentation-strip span {
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: var(--suite-shared-padding-12px, 12px);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
  border-radius: var(--suite-radius-main-panel, 14px);
  color: var(--text);
  background: var(--primary-soft);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: center;
}

.suite-ui-theme-preview-card.module h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-family: var(--suite-ui-title-font-family, var(--suite-title-font-family, var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif)));
  font-size: var(--suite-ui-title-preview-size, var(--suite-title-preview-size, 18px));
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, 900));
  letter-spacing: var(--suite-ui-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-ui-title-line-height, var(--suite-title-line-height, 1.2));
}

.suite-ui-theme-preview-card.module p {
  font-family: var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif);
  font-size: var(--suite-body-preview-size, var(--suite-type-body));
  font-weight: var(--suite-body-font-weight, 400);
  letter-spacing: var(--suite-body-letter-spacing, 0);
  line-height: var(--suite-body-line-height, 1.5);
}

.suite-ui-theme-preview-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--suite-forms-gap, var(--suite-form-row-gap, 10px));
  align-items: stretch;
}

.suite-ui-theme-preview-textarea {
  min-height: 62px;
  resize: none;
}

.suite-ui-theme-ui-samples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--suite-space-2, 8px);
  align-items: center;
}

.suite-ui-theme-contrast-sample.suite-control.status-pill {
  color: var(--suite-secondary-accent-1, var(--text));
  background: color-mix(in srgb, var(--suite-secondary-accent-1, var(--primary)) 12%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--suite-secondary-accent-1, var(--primary)) 28%, transparent);
}

.suite-ui-theme-contrast-sample.suite-control.status-pill i {
  background: var(--suite-secondary-accent-1, var(--primary));
}

.suite-ui-theme-preview-fields .suite-control.status-pill {
  width: fit-content;
}

.suite-ui-theme-component-section[data-shared-ui-preview="buttons"] .suite-ui-theme-ui-samples,
.suite-ui-theme-component-section[data-shared-ui-preview="status"] .suite-ui-theme-ui-samples {
  align-items: var(--suite-component-align-items, center);
  justify-content: var(--suite-component-justify-content, flex-start);
}

.suite-ui-theme-status-strip-sample {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.suite-ui-theme-component-section[data-shared-ui-preview="buttons"] .suite-button,
.suite-ui-theme-component-section[data-shared-ui-preview="status"] .suite-control.status-pill,
.suite-ui-theme-component-section[data-shared-ui-preview="status"] .suite-status-pill,
.suite-ui-theme-component-section[data-shared-ui-preview="status"] .suite-status-overlay {
  min-height: var(--suite-component-height, var(--suite-control-height, 30px));
  align-items: var(--suite-component-align-items, center);
  justify-content: var(--suite-component-justify-content, flex-start);
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 10px));
  background: var(--suite-component-surface-bg, var(--surface));
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-component-section[data-shared-ui-preview="buttons"] .suite-button.command.primary {
  background: var(--suite-component-primary-bg, var(--primary));
  border-color: var(--suite-primary-border, var(--primary));
}

.suite-ui-theme-component-section[data-shared-ui-preview="buttons"] .suite-button.command.primary:hover,
.suite-ui-theme-component-section[data-shared-ui-preview="buttons"] .suite-button.command.primary:focus-visible {
  background: var(--suite-component-primary-bg, var(--primary));
  border-color: var(--suite-primary-border-strong, var(--suite-primary-border, var(--primary)));
}

.suite-ui-theme-component-section[data-shared-ui-preview="buttons"] .suite-button.suite-button-icon,
.suite-button.suite-button-icon {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.suite-ui-theme-component-section[data-shared-ui-preview="navigation"] .suite-segmented {
  --suite-navigation-primary-soft-bg: var(--suite-component-active-bg, var(--primary-soft));
  --suite-navigation-primary-soft-color: var(--suite-component-active-color, var(--suite-primary-ink, var(--primary)));
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 10px));
  background: var(--suite-component-soft-bg, var(--surface-soft));
}

.suite-ui-theme-component-section[data-shared-ui-preview="navigation"] .suite-segmented-option {
  min-height: var(--suite-component-height, var(--suite-control-height, 30px));
  align-items: var(--suite-component-align-items, center);
  justify-content: var(--suite-component-justify-content, flex-start);
  border-radius: max(0px, calc(var(--suite-component-radius, var(--suite-radius-control, 10px)) - 3px));
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-component-section[data-shared-ui-preview="navigation"] .suite-segmented-option.active,
.suite-ui-theme-component-section[data-shared-ui-preview="navigation"] .suite-segmented-option[data-state='active'],
.suite-ui-theme-component-section[data-shared-ui-preview="navigation"] .suite-pill-tab.active,
.suite-ui-theme-component-section[data-shared-ui-preview="navigation"] .suite-pill-tab[data-state='active'] {
  --suite-navigation-primary-bg: var(--suite-component-active-color, var(--primary));
  color: var(--suite-component-active-color, var(--primary));
  background: var(--suite-component-active-bg, var(--primary-soft));
}

.suite-ui-theme-component-section[data-shared-ui-preview="forms"] .suite-field span,
.suite-ui-theme-component-section[data-shared-ui-preview="forms"] .suite-field-control,
.suite-ui-theme-component-section[data-shared-ui-preview="forms"] .suite-form-textarea {
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-component-section[data-shared-ui-preview="forms"] .suite-ui-theme-preview-fields {
  width: min(100%, 320px);
}

.suite-ui-theme-component-section[data-shared-ui-preview="forms"] .suite-field-control,
.suite-ui-theme-component-section[data-shared-ui-preview="forms"] .suite-form-textarea {
  min-height: var(--suite-component-height, var(--suite-control-height, 30px));
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 10px));
  background: var(--suite-component-surface-bg, var(--surface));
}

.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-ui-theme-preview-select {
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 10px));
  background: var(--suite-component-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
}

.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-dropdown-menu,
.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-menu-popover {
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 10px));
  background: var(--suite-dropdowns-menu-surface-bg, var(--suite-component-surface-bg, var(--surface)));
}

.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-ui-theme-preview-select {
  min-height: var(--suite-component-height, var(--suite-control-height, 30px));
  align-items: var(--suite-component-align-items, center);
  justify-content: var(--suite-component-justify-content, flex-start);
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-ui-theme-preview-select span,
.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-dropdown-option,
.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-menu-popover-row,
.suite-ui-theme-component-section[data-shared-ui-preview="dropdowns"] .suite-menu-popover-section {
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-component-section[data-shared-ui-preview="slider"] .suite-ui-theme-preview-slider {
  min-height: var(--suite-component-height, var(--suite-control-height, 30px));
  align-items: var(--suite-component-align-items, center);
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 10px));
  background: var(--suite-component-soft-bg, var(--surface-soft));
}

.suite-ui-theme-component-section[data-shared-ui-preview="slider"] .suite-ui-theme-preview-slider span,
.suite-ui-theme-component-section[data-shared-ui-preview="slider"] .suite-ui-theme-preview-slider em {
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-table-wrap,
.suite-ui-theme-component-section[data-shared-ui-preview="dataRows"] .suite-ui-theme-preview-data-grid {
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-radius-control, 10px));
  background: var(--suite-component-surface-bg, var(--surface));
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-table th,
.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-table td {
  height: auto;
  min-height: var(--suite-table-preview-row-height, 28px);
  padding: var(--suite-table-preview-cell-padding, 5px 10px);
  font-size: var(--suite-type-caption, var(--suite-type-body));
  line-height: 1.25;
  text-align: var(--suite-component-text-align, left);
  vertical-align: var(--suite-component-vertical-align, middle);
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-table th {
  background: var(--suite-component-soft-bg, var(--surface-soft));
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-data-table {
  table-layout: fixed;
  border-collapse: collapse;
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-data-table td,
.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-data-table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-static-cell {
  color: var(--suite-component-color, var(--text));
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-focus-cell {
  background: var(--suite-tables-focus-bg, var(--suite-tables-selection-bg, transparent));
  box-shadow: var(--suite-tables-focus-shadow, var(--suite-shared-shadow-inset-2px-primary, inset 0 0 0 2px var(--primary)));
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-menu-cell {
  background: var(--suite-tables-menu-open-bg, var(--suite-tables-focus-bg, var(--suite-tables-selection-bg, transparent)));
  box-shadow: var(--suite-tables-focus-shadow, var(--suite-shared-shadow-inset-2px-primary, inset 0 0 0 2px var(--primary)));
}

.suite-ui-theme-component-section[data-shared-ui-preview="tables"] .suite-ui-theme-preview-editable-cell {
  cursor: text;
  box-shadow: var(--suite-tables-editable-cell-shadow, var(--suite-shared-shadow-inset-bottom-1px-line, inset 0 -1px 0 var(--line)));
}

.suite-ui-theme-component-section[data-shared-ui-preview="dataRows"] .suite-ui-theme-preview-data-head,
.suite-ui-theme-component-section[data-shared-ui-preview="dataRows"] .suite-ui-theme-preview-data-row {
  min-height: var(--suite-component-height, var(--suite-control-height, 30px));
  align-items: var(--suite-component-align-items, center);
  background: var(--suite-component-surface-bg, var(--surface));
}

.suite-ui-theme-component-section[data-shared-ui-preview="dataRows"] .suite-ui-theme-preview-data-head span,
.suite-ui-theme-component-section[data-shared-ui-preview="dataRows"] .suite-ui-theme-preview-data-row span {
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-component-section[data-shared-ui-preview="disclosure"] .suite-ui-theme-preview-disclosure-head,
.suite-ui-theme-component-section[data-shared-ui-preview="disclosure"] .suite-ui-theme-preview-disclosure-body {
  min-height: var(--suite-component-height, var(--suite-control-height, 30px));
}

.suite-ui-theme-preview-shell-toolbar.suite-toolbar.shell-toolbar {
  width: auto;
  inline-size: auto;
  align-self: stretch;
  grid-template-columns: minmax(230px, auto) minmax(220px, 1fr) auto;
  gap: var(--suite-shell-topbar-gap, 12px);
}

.suite-ui-theme-preview-shell-toolbar .toolbar-left > strong {
  max-width: var(--suite-shared-width-120px, 120px);
}

.suite-ui-theme-preview-shell-toolbar .suite-combobox-shell.toolbar-scope {
  min-width: 0;
}

.suite-ui-theme-preview-shell-sidebar.sidebar {
  width: 100%;
  min-height: calc(var(--suite-component-height, 44px) * 8 + 72px);
  margin: var(--shell-sidebar-container-margin);
  padding: var(--shell-sidebar-container-padding-block) 0;
  border-width: var(--suite-component-border-width, var(--suite-shell-sidebar-border-width, 1px));
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--suite-shell-sidebar-border-color, var(--line)));
  border-radius: var(--suite-component-radius, var(--shell-sidebar-container-radius));
  background: var(--shell-sidebar-bg);
  -webkit-backdrop-filter: var(--shell-sidebar-backdrop);
  backdrop-filter: var(--shell-sidebar-backdrop);
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
}

.suite-ui-theme-preview-shell-sidebar .nav-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--suite-shared-padding-6px, 6px);
}

.suite-ui-theme-preview-shell-sidebar .nav-item {
  display: grid;
  height: var(--suite-component-height, var(--suite-shell-sidebar-height, 44px));
  min-height: var(--suite-component-height, var(--suite-shell-sidebar-height, 44px));
  align-items: var(--suite-component-align-items, center);
  border-radius: var(--suite-component-radius, var(--suite-shell-sidebar-radius, 20px));
  text-align: var(--suite-component-text-align, left);
}

.suite-ui-theme-preview-shell-sidebar .nav-active-indicator {
  display: none;
}

.suite-ui-theme-preview-shell-sidebar .sidebar-footer {
  min-height: var(--suite-component-height, var(--suite-buttons-height, var(--suite-control-height)));
  border-width: var(--suite-component-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-component-border-color, var(--line));
  border-radius: var(--suite-component-radius, var(--suite-shell-sidebar-radius, 20px));
}

.suite-ui-theme-shell-frame-body > .suite-ui-theme-preview-shell-sidebar.sidebar {
  width: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 70;
  overflow: visible;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-items: center;
  gap: 6px;
  padding: var(--suite-shared-padding-8px, 8px) 0;
  overflow: visible;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-group {
  width: var(--suite-shell-sidebar-collapsed-target-size);
  padding: 0;
  border: 0;
  background: transparent;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-group-head {
  display: none;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-group-body,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-group.collapsed .nav-group-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-group-inner {
  justify-items: center;
  gap: 6px;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed .suite-ui-theme-shell-frame-sidebar .suite-ui-theme-preview-shell-sidebar .nav-item,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-item {
  width: var(--suite-shell-sidebar-collapsed-target-size);
  height: var(--suite-shell-sidebar-collapsed-target-size);
  min-height: var(--suite-shell-sidebar-collapsed-target-size);
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-content: center;
  justify-content: center;
  justify-items: center;
  place-items: center;
  justify-self: center;
  align-self: center;
  margin-inline: auto;
  gap: 0;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  text-align: center;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed .suite-ui-theme-shell-frame-sidebar .suite-ui-theme-preview-shell-sidebar .nav-icon,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-icon {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  justify-self: center;
  align-self: center;
  margin: 0;
  line-height: 0;
  text-align: center;
  transform: none;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed .suite-ui-theme-shell-frame-sidebar .suite-ui-theme-preview-shell-sidebar .nav-icon .ui-icon,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed .suite-ui-theme-shell-frame-sidebar .suite-ui-theme-preview-shell-sidebar .nav-icon svg,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-icon .ui-icon,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-icon svg {
  display: block;
  justify-self: center;
  align-self: center;
  margin: auto;
  transform: none;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed .suite-ui-theme-shell-frame-sidebar .suite-ui-theme-preview-shell-sidebar .nav-copy,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .nav-copy {
  grid-column: 1;
  grid-row: 1;
  display: none;
  max-width: 0;
  max-height: 0;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .sidebar-footer {
  width: var(--suite-shell-sidebar-collapsed-target-size);
  height: var(--suite-shell-sidebar-collapsed-target-size);
  min-height: var(--suite-shell-sidebar-collapsed-target-size);
  max-height: var(--suite-shell-sidebar-collapsed-target-size);
  margin: 0 auto 12px;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  justify-content: center;
  gap: 0;
  border-color: var(--line);
  opacity: 1;
  transform: none;
  pointer-events: auto;
  text-align: center;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .sidebar-account-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .sidebar-account-copy {
  display: none;
  max-width: 0;
  max-height: 0;
  opacity: 0;
  transform: translateX(-8px);
}

.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .sidebar-resizer {
  opacity: 0;
  pointer-events: none;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-expanded > .suite-ui-theme-preview-shell-sidebar .nav-list {
  align-items: stretch;
  gap: 8px;
  padding: var(--suite-shared-padding-8px, 8px) 12px;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-expanded > .suite-ui-theme-preview-shell-sidebar .nav-item {
  width: 100%;
  height: var(--suite-shell-sidebar-height, 44px);
  min-height: var(--suite-shell-sidebar-height, 44px);
  grid-template-columns: 34px minmax(0, 1fr);
  justify-items: normal;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
}

.suite-ui-theme-shell-frame-body.sidebar-preview-expanded > .suite-ui-theme-preview-shell-sidebar .nav-copy {
  display: grid;
}

.suite-ui-theme-shell-frame-body.sidebar-preview-expanded > .suite-ui-theme-preview-shell-sidebar .sidebar-footer {
  width: auto;
  min-height: var(--suite-buttons-height, var(--suite-control-height));
  margin-inline: 12px;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
}

.suite-ui-theme-shell-frame-body.sidebar-preview-expanded > .suite-ui-theme-preview-shell-sidebar .sidebar-account-copy {
  display: grid;
}

@media (max-width: 860px) {
  .suite-ui-theme-editor {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .suite-ui-theme-editor.is-components-mode.suite-ui-components--integrated {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "rail"
      "catalog"
      "stage"
      "inspector";
    height: auto;
    overflow: visible;
  }

  .suite-ui-theme-canvas {
    min-height: auto;
  }

  .suite-ui-theme-inspector,
  .suite-ui-theme-preview-scroll {
    height: auto;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .suite-ui-theme-rail {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .suite-ui-theme-rail-item.suite-button {
    flex: 0 0 auto;
    width: auto;
  }

  .suite-ui-theme-preview-card.hero,
  .suite-ui-theme-preview-fields,
  .suite-ui-theme-preview-callouts,
  .suite-ui-theme-preview-data-head,
  .suite-ui-theme-preview-data-row,
  .suite-ui-theme-presentation-strip,
  .suite-ui-theme-option-grid,
  .suite-ui-theme-token-list {
    grid-template-columns: 1fr;
  }

  .suite-ui-theme-preview-scroll {
    padding: 52px 14px 28px;
  }

  .suite-ui-theme-preview-card.hero,
  .suite-ui-theme-preview-card.module,
  .suite-ui-theme-preview-card.presentation {
    padding: var(--suite-theme-card-padding, 24px);
  }
}

.area-management-workbench > .feature-frame-workbench {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
}

.feature-module-frame {
  flex: 1;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: var(--shell-feature-frame-bg);
}

.feature-frame-workbench.has-host-mismatch .feature-module-frame {
  opacity: 0;
  pointer-events: none;
}

.feature-frame-blocker {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
  background: var(--surface-strong);
}

.feature-frame-blocker strong {
  color: var(--danger);
  font-size: var(--suite-type-title);
}

.feature-frame-blocker p {
  max-width: 620px;
  color: var(--muted);
  font-size: var(--suite-type-body);
  line-height: 1.55;
}

.feature-frame-blocker dl {
  width: min(680px, 100%);
  margin: 4px 0 0;
  display: grid;
  gap: 8px;
}

.feature-frame-blocker dl > div {
  display: grid;
  grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  background: var(--surface);
  text-align: left;
}

.feature-frame-blocker dt {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.feature-frame-blocker dd {
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 800;
}

.module-mount-surface {
  min-height: 0;
  flex: 1;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-18px, 18px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.module-mount-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  border-top: 1px solid var(--line);
}

.mount-cell {
  min-width: 0;
  min-height: 72px;
  padding: var(--suite-shared-padding-12px, 12px);
  border-right: 1px solid var(--line);
  background: var(--surface-strong);
}

.mount-cell:last-child {
  border-right: 0;
}

.mount-cell span {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.mount-cell strong {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-body);
}

.section-title {
  min-height: var(--suite-shared-min-height-46px, 46px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.section-title strong {
  font-size: var(--suite-type-body);
}

.suite-table-wrap.area-table-wrap {
  height: var(--suite-shared-height-min-420px-calc-100vh-430px, min(420px, calc(100vh - 430px)));
  min-height: var(--suite-shared-min-height-320px, 320px);
  overflow: auto;
}

.suite-native-table.area-table {
  width: 100%;
  min-width: var(--suite-shared-min-width-1320px, 1320px);
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--suite-type-caption);
}

.suite-native-table.area-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--suite-tables-height, var(--suite-control-height));
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  background: var(--surface-strong);
  font-weight: 900;
  white-space: nowrap;
}

.suite-native-table.area-table td {
  height: var(--suite-data-rows-height, var(--suite-tables-height, var(--suite-control-height)));
  padding: var(--suite-shared-padding-6px-8px, 6px 8px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  text-align: var(--suite-shell-topbar-text-align, right);
  white-space: nowrap;
}

.suite-native-table.area-table tr:hover td {
  background: var(--primary-soft);
}

.suite-native-table.area-table td:first-child,
.suite-native-table.area-table .purpose {
  text-align: left;
}

.suite-native-table.area-table td:first-child strong {
  display: block;
  font-size: var(--suite-type-caption);
}

.suite-native-table.area-table td:first-child small {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-native-table.area-table .purpose {
  max-width: var(--suite-shared-width-320px, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-diagnostics-panel {
  box-sizing: border-box;
  --suite-shell-diagnostics-panel-top: calc(var(--suite-control-height, 30px) + var(--suite-container-safety-inset, 4px) + var(--suite-container-safety-inset, 4px) + var(--suite-space-2, 8px) + 1px);
  --suite-shell-diagnostics-panel-inset: var(--suite-space-3, 12px);
  position: fixed;
  top: var(--suite-shell-diagnostics-panel-top);
  right: var(--suite-shell-diagnostics-panel-inset);
  z-index: var(--suite-shell-topbar-overlay-menu-z-index, 5001);
  width: min(390px, calc(100vw - 24px));
  max-width: min(390px, calc(100vw - 24px));
  max-height: var(
    --suite-shell-diagnostics-panel-max-height,
    min(340px, calc(100vh - var(--suite-shell-diagnostics-panel-top) - var(--suite-shell-diagnostics-panel-inset)))
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border-width: var(--suite-dropdowns-border-width, var(--suite-shared-border-width-1px, 1px));
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-main-panel, var(--suite-radius-control, 18px)));
  /* Popup surface: the dropdowns surface token styles triggers and may be transparent. */
  background: var(--suite-dropdowns-menu-surface-bg, var(--suite-dropdowns-strong-bg, var(--suite-panel-bg, var(--surface))));
  box-shadow: var(--suite-dropdowns-shadow, var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft))));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, var(--suite-panel-backdrop, blur(10px)));
  backdrop-filter: var(--suite-dropdowns-backdrop, var(--suite-panel-backdrop, blur(10px)));
}

.shell-diagnostics-panel > .sandbox-head {
  height: auto !important;
  min-height: var(--suite-shared-min-height-40px, 40px);
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 8px;
  padding: var(--suite-shared-padding-6px-10px, 6px 10px) 6px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.sandbox-title {
  min-width: 120px;
  display: grid;
  gap: 2px;
}

.sandbox-head span {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.sandbox-head strong {
  display: block;
  font-size: var(--suite-type-body);
}

.sandbox-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

.sandbox-copy,
.sandbox-close {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-10px, 10px);
  padding: 0 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  cursor: pointer;
}

.sandbox-copy {
  color: var(--primary);
}

.sandbox-copy:hover,
.sandbox-close:hover {
  border-color: var(--primary);
  color: var(--text);
  background: var(--primary-soft);
}

.diagnostics-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--suite-shared-padding-12px, 12px);
  overflow-y: auto;
}

.diagnostics-scroll-region {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.diagnostics-health-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.diagnostics-health-card {
  min-width: 0;
  min-height: var(--suite-shared-min-height-44px, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
  padding: var(--suite-shared-padding-8px-10px, 8px 10px);
  border: 1px solid var(--line);
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface-soft);
}

.diagnostics-health-card span {
  min-width: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.diagnostics-health-card strong {
  font-size: var(--suite-type-title-sm, 16px);
  font-variant-numeric: tabular-nums;
}

.diagnostics-health-card.danger strong {
  color: var(--danger);
}

.diagnostics-health-card.warning strong {
  color: var(--warning-text, var(--warning));
}

.diagnostics-details {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--suite-shared-radius-10px, 10px);
  background: var(--surface);
  overflow: clip;
}

.diagnostics-details > summary {
  min-height: var(--suite-shared-min-height-36px, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  color: var(--text);
  cursor: pointer;
}

.diagnostics-details > summary strong {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.diagnostics-detail-list {
  min-width: 0;
  display: grid;
  margin: 0;
  padding: 0 10px 10px;
}

.diagnostics-detail-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.diagnostics-detail-row dt,
.diagnostics-detail-row dd {
  min-width: 0;
  margin: 0;
}

.diagnostics-detail-row dt {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
}

.diagnostics-detail-row dd {
  display: grid;
  gap: 3px;
}

.diagnostics-detail-row :is(span, strong, small) {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.diagnostics-detail-row small {
  color: var(--muted);
  line-height: 1.45;
}

.shell-diagnostics-copy-fallback {
  display: grid;
  gap: 6px;
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-10px, var(--suite-shared-padding-8px, 8px) 10px) 10px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.shell-diagnostics-copy-fallback strong {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.shell-diagnostics-copy-text {
  min-height: 120px;
  max-height: 180px;
  resize: vertical;
  font-family: var(--suite-font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  font-size: var(--suite-type-caption);
}

.diagnostic-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(76px, 0.75fr) minmax(98px, 1fr);
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  padding: var(--suite-shared-padding-7px-8px, 7px 8px);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.diagnostic-row:last-child {
  border-bottom: 0;
}

.diagnostic-row i {
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.diagnostic-row.success i {
  background: var(--success);
}

.diagnostic-row.warning i {
  background: var(--warning);
}

.diagnostic-row.danger i {
  background: var(--danger);
}

.diagnostic-row span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.diagnostic-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-caption);
}

.diagnostic-row small {
  grid-column: 2 / 4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.operation-diagnostics {
  display: grid;
  gap: 8px;
  padding: var(--suite-shared-padding-8px, 8px);
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.operation-diagnostics-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
  align-items: center;
  gap: 8px;
}

.operation-diagnostics-head span,
.operation-diagnostic-row span,
.operation-diagnostic-row small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.operation-diagnostics-head span {
  font-weight: 900;
  text-transform: uppercase;
}

.operation-diagnostics-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: right;
}

.operation-diagnostics-list {
  display: grid;
  gap: 4px;
}

.operation-diagnostics-subhead {
  padding: var(--suite-shared-padding-4px, 4px) 2px 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.operation-diagnostic-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(92px, 0.9fr) minmax(94px, 1fr);
  align-items: center;
  gap: 4px 8px;
  padding: var(--suite-shared-padding-7px-8px, 7px 8px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.operation-diagnostic-row i {
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.operation-diagnostic-row.success i {
  background: var(--success);
}

.operation-diagnostic-row.warning i {
  background: var(--warning);
}

.operation-diagnostic-row.danger i {
  background: var(--danger);
}

.operation-diagnostic-row.muted {
  background: var(--surface-soft);
}

.operation-diagnostic-row.secondary {
  opacity: 0.82;
}

.operation-diagnostic-row span,
.operation-diagnostic-row strong,
.operation-diagnostic-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-diagnostic-row span {
  font-weight: 850;
}

.operation-diagnostic-row strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.operation-diagnostic-row small {
  grid-column: 2 / 4;
  line-height: 1.35;
}

.diagnostic {
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-14px, 14px);
  padding: var(--suite-shared-padding-10px, 10px);
  background: var(--surface-strong);
}

.diagnostic.warning {
  border-color: rgba(168, 98, 7, 0.45);
  background: var(--suite-shared-bg-168-98-7-0-1, rgba(168, 98, 7, 0.1));
}

.diagnostic.danger {
  border-color: rgba(180, 35, 24, 0.45);
  background: var(--danger-soft);
}

.diagnostic p {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.area-side-note {
  margin: 0 12px 12px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-14px, 14px);
  padding: var(--suite-shared-padding-10px, 10px);
  background: var(--surface-strong);
}

.area-side-note strong {
  display: block;
  margin-top: 5px;
  font-size: var(--suite-type-body);
}

.page-grid {
  display: grid;
  gap: var(--suite-main-panel-gap, 0px);
}

.project-settings-grid {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-settings-grid > .suite-main-panel.panel {
  border-width: var(--suite-panel-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-panel-border-color, var(--line));
  background: var(--suite-panel-bg, var(--surface));
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
  -webkit-backdrop-filter: var(--suite-panel-backdrop, blur(14px));
  backdrop-filter: var(--suite-panel-backdrop, blur(14px));
}

.page-grid.two-col {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
}

.page-grid.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-grid.lower {
  margin-top: 14px;
}

.suite-main-panel {
  min-width: 0;
  margin: var(--suite-main-panel-margin, 0px);
}

.suite-main-panel.panel {
  border-width: var(--suite-panel-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-panel-border-color, var(--line));
  border-radius: var(--suite-radius-main-panel, var(--suite-radius-control, 20px));
  background: var(--suite-panel-bg, var(--surface));
  box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-soft)));
  -webkit-backdrop-filter: var(--suite-panel-backdrop, blur(14px));
  backdrop-filter: var(--suite-panel-backdrop, blur(14px));
  overflow: hidden;
}

.suite-section-panel {
  margin: var(--suite-sub-panel-margin, 0px);
  border-width: var(--suite-sub-panel-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-sub-panel-border-color, var(--line));
  border-radius: var(--suite-radius-sub-panel, 8px);
  background: var(--suite-sub-panel-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-sub-panel-backdrop, none);
  backdrop-filter: var(--suite-sub-panel-backdrop, none);
}

.feature-inspection-overview-panel,
.feature-inspection-gates-panel,
.harness-status-panel {
  grid-column: 1 / -1;
}

/* Feature inspection: the topic sections share the one main container; sections are split by a separator, KPI cards stay. */
.feature-inspection-topic-content > .suite-section-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --suite-sub-panel-padding-top: 0px;
  --suite-sub-panel-padding-right: 0px;
  --suite-sub-panel-padding-bottom: 0px;
  --suite-sub-panel-padding-left: 0px;
}

.feature-inspection-topic-content > .suite-section-panel + .suite-section-panel {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--suite-main-container-content-gap, 16px);
}

.suite-summary-info-group,
.suite-quality-summary {
  border-width: var(--suite-quality-summary-border-width, 0px);
  border-style: solid;
  border-color: var(--suite-quality-summary-border-color, transparent);
  border-radius: var(--suite-quality-summary-radius, 0px);
  background: var(--suite-quality-summary-surface-bg, var(--surface));
  color: var(--suite-quality-summary-on-surface, var(--text));
  box-shadow: var(--suite-quality-summary-shadow, none);
  -webkit-backdrop-filter: var(--suite-quality-summary-backdrop, none);
  backdrop-filter: var(--suite-quality-summary-backdrop, none);
}

.feature-inspection-section-summary {
  min-width: 0;
  margin: 0;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.45;
}

.feature-inspection-overview-head .suite-control.status-pill,
.feature-inspection-gates-panel .suite-control.status-pill {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border-radius: var(--suite-radius-pill, 999px);
  padding: 0 10px;
}

.feature-inspection-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--suite-quality-summary-surface-bg, var(--surface));
}

.feature-inspection-kpi {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-right: 1px solid var(--line);
}

.feature-inspection-kpi:last-child {
  border-right: 0;
}

.feature-inspection-kpi span,
.feature-inspection-gate-row span,
.feature-inspection-latest-run span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.feature-inspection-kpi strong {
  color: var(--text);
  font-size: var(--suite-type-title);
  font-weight: 900;
}

.feature-inspection-kpi small,
.feature-inspection-gate-row small,
.feature-inspection-latest-run small {
  min-width: 0;
  overflow: visible;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.feature-inspection-gate-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: var(--suite-quality-summary-surface-bg, var(--surface));
}

.feature-inspection-gates-panel .feature-inspection-gate-strip {
  border-bottom: 0;
}

.feature-inspection-gate-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feature-inspection-gate-row:nth-child(4n) {
  border-right: 0;
}

.feature-inspection-gate-row:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.feature-inspection-gate-row i {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  margin-top: 5px;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.feature-inspection-gate-row.success i {
  background: var(--success);
}

.feature-inspection-gate-row.warning i {
  background: var(--warning);
}

.feature-inspection-gate-row.danger i {
  background: var(--danger);
}

.feature-inspection-gate-row > div,
.feature-inspection-latest-run > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.feature-inspection-gate-row strong,
.feature-inspection-latest-run strong {
  min-width: 0;
  overflow: visible;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.feature-inspection-latest-run {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  background: var(--surface);
}

.feature-inspection-latest-run > div {
  padding: var(--suite-sub-panel-padding, 12px);
  border-left: 1px solid var(--line);
}

.feature-inspection-latest-run > div:first-child {
  border-left: 0;
}

.feature-decision-panel {
  grid-column: 1 / -1;
}

.feature-decision-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.feature-decision-head small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-decision-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  padding: 0;
  background: var(--surface);
}

.feature-decision-primary,
.feature-decision-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: max(6px, calc(var(--suite-sub-panel-gap, 10px) - 3px));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset -1px -1px 0 var(--line);
}

.feature-decision-primary {
  padding: var(--suite-sub-panel-padding, 14px);
}

.feature-decision-primary.good,
.feature-decision-card.good {
  border-color: rgba(15, 139, 141, 0.28);
}

.feature-decision-primary.warn,
.feature-decision-card.warn {
  border-color: rgba(168, 98, 7, 0.34);
}

.feature-decision-primary.bad,
.feature-decision-card.bad {
  border-color: rgba(185, 28, 28, 0.34);
}

.feature-decision-primary span,
.feature-decision-card span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.feature-decision-primary strong {
  color: var(--text);
  font-size: var(--suite-type-title);
  font-weight: 900;
  line-height: 1.25;
}

.feature-decision-primary p,
.feature-decision-card small {
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.feature-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.feature-decision-card {
  padding: var(--suite-sub-panel-padding, 12px);
}

.feature-decision-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-inspection-panel {
  grid-column: 1 / -1;
}

.module-inspection-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.module-inspection-head small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-inspection-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  background: var(--surface-soft);
}

.module-inspection-list {
  min-width: 0;
  max-height: 520px;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.module-inspection-option {
  min-width: 0;
  min-height: var(--suite-data-rows-height, var(--suite-control-height));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  padding: var(--suite-data-rows-padding, var(--suite-shared-padding-4px-10px, 4px 10px));
  color: var(--text);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.module-inspection-option:hover,
.module-inspection-option:focus-visible,
.module-inspection-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.module-inspection-option.active {
  box-shadow: var(--suite-shared-shadow-inset-3px-0-0-primary, inset 3px 0 0 var(--primary));
}

.module-inspection-option span,
.module-inspection-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-inspection-option span {
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.module-inspection-option strong {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.module-inspection-option.success strong {
  color: var(--success);
}

.module-inspection-option.danger strong {
  color: var(--danger);
}

.module-inspection-detail {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.module-inspection-detail-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.module-inspection-detail-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.module-inspection-detail-head span:not(.status-pill),
.module-inspection-section > span,
.module-inspection-fact span,
.module-inspection-next-action span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.module-inspection-detail-head strong,
.module-inspection-fact strong,
.module-inspection-next-action strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-inspection-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.module-inspection-fact {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.module-inspection-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.module-inspection-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.module-inspection-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.module-inspection-chip.suite-control.status-pill {
  min-height: var(--suite-shared-min-height-26px, 26px);
  padding: 0 9px;
  font-weight: 900;
}

.module-inspection-evidence-list,
.module-inspection-runtime-list {
  display: grid;
  gap: 8px;
}

.module-inspection-evidence-row {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-9px, var(--suite-shared-padding-8px, 8px) 9px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-soft);
}

.module-inspection-evidence-row strong,
.module-inspection-runtime-row strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.module-inspection-evidence-row small,
.module-inspection-runtime-row small,
.module-inspection-package-line,
.module-inspection-empty-line {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.4;
  text-overflow: ellipsis;
}

.module-inspection-evidence-row code {
  min-width: 0;
  overflow: hidden;
  color: var(--primary);
  font-size: var(--suite-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-inspection-runtime-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-9px, var(--suite-shared-padding-8px, 8px) 9px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-soft);
}

.module-inspection-runtime-row i {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  margin-top: 5px;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.module-inspection-runtime-row.success i {
  background: var(--success);
}

.module-inspection-runtime-row.danger i {
  background: var(--danger);
}

.module-inspection-runtime-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.module-inspection-runtime-row span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.module-inspection-package-line {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.module-inspection-next-action {
  display: grid;
  gap: 5px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: 1px solid rgba(15, 139, 141, 0.28);
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--primary-soft);
}

.module-inspection-run-record {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.module-inspection-run-record-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.module-inspection-run-record-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.module-inspection-run-record-head span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.module-inspection-run-record-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-inspection-run-record-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.module-inspection-run-record-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.module-inspection-run-record-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.module-inspection-run-record-note.warn {
  color: var(--danger);
  font-weight: 800;
}

.module-inspection-run-record code {
  min-width: 0;
  overflow: auto;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  padding: var(--suite-shared-padding-10px, 10px);
  background: var(--surface-soft);
  color: var(--primary);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Feature Inspection uses one section surface with flat rows/cells beneath it. */
.feature-inspection-topic-content .module-inspection-layout {
  gap: 0;
  padding: 0;
  background: var(--surface);
}

.feature-inspection-topic-content .module-inspection-list {
  gap: 0;
  border-right: 1px solid var(--line);
}

.feature-inspection-topic-content .module-inspection-option {
  border-width: 0 0 1px;
  border-radius: 0;
}

.feature-inspection-topic-content .module-inspection-detail,
.feature-inspection-topic-content .module-inspection-facts,
.feature-inspection-topic-content .module-inspection-sections {
  gap: 0;
}

.feature-inspection-topic-content :is(
  .module-inspection-detail-head,
  .module-inspection-fact,
  .module-inspection-section,
  .module-inspection-next-action,
  .module-inspection-run-record
) {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feature-inspection-topic-content .module-inspection-next-action {
  background: var(--primary-soft);
}

.agent-governance-panel,
.agent-chat-lanes-panel,
.agent-registry-panel,
.agent-command-center-panel,
.agent-dispatch-panel,
.agent-evidence-panel,
.agent-run-log-panel {
  grid-column: 1 / -1;
}

.agent-governance-head .suite-control.status-pill {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border-radius: var(--suite-radius-pill, 999px);
  padding: 0 10px;
}

.agent-governance-intro strong,
.agent-handoff-contract strong {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.agent-governance-intro span,
.agent-handoff-contract span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-governance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  background: var(--surface-soft);
}

.agent-governance-card,
.agent-chat-lane-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.agent-governance-card.success {
  border-color: rgba(15, 139, 141, 0.28);
}

.agent-governance-card.danger {
  border-color: rgba(185, 28, 28, 0.32);
}

.agent-governance-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-governance-card-head span,
.agent-chat-lane-card span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-governance-card-head strong,
.agent-chat-lane-card strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.agent-governance-card p,
.agent-chat-lane-card p {
  min-height: var(--suite-shared-min-height-40px, 40px);
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.agent-governance-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-governance-card li {
  position: relative;
  min-width: 0;
  padding-left: 14px;
  overflow: hidden;
  color: var(--text-soft);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-governance-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--success);
}

.agent-chat-lane-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.agent-chat-lane-card strong {
  color: var(--text);
}

.agent-registry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.agent-registry-card,
.agent-evidence-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.agent-registry-card-head,
.agent-evidence-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-registry-card-head span,
.agent-evidence-card-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-registry-card-head strong,
.agent-evidence-card-head strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.agent-registry-card p,
.agent-evidence-card p {
  min-height: var(--suite-shared-min-height-40px, 40px);
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.agent-registry-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.agent-registry-card dl div {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.agent-registry-card dt,
.agent-registry-card dd {
  min-width: 0;
  margin: 0;
  font-size: var(--suite-type-caption);
  line-height: 1.35;
}

.agent-registry-card dt {
  color: var(--muted);
  font-weight: 850;
}

.agent-registry-card dd {
  overflow: hidden;
  color: var(--text-soft);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-module-matrix {
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  background: var(--surface);
}

.agent-module-matrix-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.agent-module-matrix-head span {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.agent-module-matrix-head strong {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.suite-table-wrap.agent-module-table-wrap {
  overflow: hidden;
  border-width: var(--suite-tables-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-tables-border-color, var(--line));
  border-radius: var(--suite-tables-radius, 8px);
  background: var(--surface);
}

.agent-module-table {
  width: 100%;
  overflow: hidden;
  border-radius: var(--suite-tables-radius, 8px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.agent-module-row {
  min-height: var(--suite-data-rows-height, 38px);
}

.agent-module-row:first-child {
  border-top: 0;
}

.agent-module-row.header {
  min-height: var(--suite-tables-height, 34px);
  background: var(--surface-soft);
}

.agent-module-row th,
.agent-module-row td {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-10px, var(--suite-shared-padding-8px, 8px) 10px);
  overflow: hidden;
  border-left: 1px solid var(--line);
  color: var(--text-soft);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-module-row th:first-child,
.agent-module-row td:first-child {
  border-left: 0;
  color: var(--text);
  font-weight: 850;
}

.agent-module-row.header th {
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-module-row.success td:last-child {
  color: var(--success);
}

.agent-module-row.danger td:last-child {
  color: var(--danger);
}

.agent-module-row.neutral td:last-child {
  color: var(--muted);
}

.agent-module-row td:last-child i {
  flex: 0 0 auto;
  width: var(--suite-shared-width-6px, 6px);
  height: var(--suite-shared-height-6px, 6px);
  border-radius: var(--suite-radius-pill, 999px);
  background: currentColor;
}

.agent-command-center-head .suite-control.status-pill {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border-radius: var(--suite-radius-pill, 999px);
  padding: 0 10px;
}

.agent-command-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--suite-quality-summary-surface-bg, var(--surface));
}

.agent-command-summary div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-right: 1px solid var(--line);
}

.agent-command-summary div:last-child {
  border-right: 0;
}

.agent-command-summary span,
.agent-command-rule span,
.agent-command-route-card dt,
.agent-command-latest span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-command-summary strong,
.agent-command-rule strong,
.agent-command-latest strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-command-rule,
.agent-command-latest {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px) 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.agent-command-rule {
  grid-template-columns: minmax(120px, 0.5fr) minmax(0, 2.5fr);
}

.agent-command-latest small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-command-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  background: var(--surface-soft);
}

.agent-command-route-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.agent-command-route-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-command-route-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-command-route-head strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-command-route-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.agent-command-route-card dl div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-command-route-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-domain-coverage-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.agent-domain-status {
  min-width: 0;
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 850;
}

.agent-domain-status > i {
  width: 7px;
  height: 7px;
  border-radius: var(--suite-radius-pill, 999px);
  background: currentColor;
}

.agent-domain-status.ready {
  color: var(--success);
}

.agent-domain-status.missing {
  color: var(--warning);
}

.agent-domain-status > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-domain-status strong {
  flex: 0 0 auto;
  color: inherit;
  font-size: var(--suite-type-caption);
}

.agent-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  background: var(--surface-soft);
}

.agent-evidence-card code {
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: var(--suite-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-evidence-chip.suite-control.status-pill {
  max-width: 100%;
  min-height: var(--suite-shared-min-height-26px, 26px);
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feature-inspection-topic-content :is(
  .agent-governance-grid,
  .agent-chat-lane-grid,
  .agent-registry-grid,
  .agent-command-route-grid,
  .agent-evidence-grid,
  .agent-run-log-list
) {
  gap: 0;
  padding: 0;
  background: var(--surface);
}

.feature-inspection-topic-content :is(
  .agent-governance-card,
  .agent-chat-lane-card,
  .agent-registry-card,
  .agent-command-route-card,
  .agent-evidence-card,
  .agent-run-record
) {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feature-inspection-topic-content .agent-governance-card li,
.feature-inspection-topic-content .agent-evidence-card code,
.feature-inspection-topic-content .agent-command-route-card dd {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.agent-run-log-head .suite-control.status-pill {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border-radius: var(--suite-radius-pill, 999px);
  padding: 0 10px;
}

.agent-run-log-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--suite-quality-summary-surface-bg, var(--surface));
}

.agent-run-log-summary div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-right: 1px solid var(--line);
}

.agent-run-log-summary div:last-child {
  border-right: 0;
}

.agent-run-log-summary span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-run-log-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-run-log-coverage-missing {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-10px, 10px) 14px;
  border-bottom: 1px solid rgba(185, 28, 28, 0.2);
  background: rgba(185, 28, 28, 0.07);
}

.agent-run-log-coverage-missing span {
  color: var(--danger);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-run-log-coverage-missing strong {
  min-width: 0;
  overflow: hidden;
  color: var(--danger);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-run-log-list {
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  background: var(--surface-soft);
}

.agent-run-record {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.agent-run-record.pass,
.agent-run-record.complete {
  border-color: rgba(15, 139, 141, 0.28);
}

.agent-run-record.blocked,
.agent-run-record.failed {
  border-color: rgba(185, 28, 28, 0.32);
}

.agent-run-record-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-run-record-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-run-record-head strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-run-record-meta {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr 1.2fr;
  gap: 8px;
}

.agent-run-record-meta span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-run-record p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.agent-run-record dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.agent-run-record dl div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-run-record dt,
.agent-run-record dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--suite-type-caption);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-run-record dt {
  color: var(--muted);
  font-weight: 850;
}

.agent-run-record dd {
  color: var(--text);
  font-weight: 750;
}

.agent-monitor-head .suite-control.status-pill {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border-radius: var(--suite-radius-pill, 999px);
  padding: 0 10px;
}

.agent-monitor-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--suite-quality-summary-surface-bg, var(--surface));
}

.agent-monitor-summary div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-right: 1px solid var(--line);
}

.agent-monitor-summary div:last-child {
  border-right: 0;
}

.agent-monitor-summary span,
.agent-monitor-latest span,
.agent-monitor-check dt {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-monitor-summary strong,
.agent-monitor-latest strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-monitor-latest {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px) 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.agent-monitor-latest small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-monitor-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  background: var(--surface-soft);
}

.agent-monitor-check {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.agent-monitor-check.pass {
  border-color: rgba(15, 139, 141, 0.28);
}

.agent-monitor-check.fail {
  border-color: rgba(185, 28, 28, 0.32);
}

.agent-monitor-check > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-monitor-check > div:first-child span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-monitor-check > div:first-child strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.agent-monitor-check.fail > div:first-child strong {
  color: var(--danger);
}

.agent-monitor-check dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.agent-monitor-check dl div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-monitor-check dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-monitor-failure-list {
  display: grid;
  gap: 8px;
  padding: var(--suite-shared-padding-12px, 12px) 14px 14px;
  border-top: 1px solid rgba(185, 28, 28, 0.2);
  background: rgba(185, 28, 28, 0.07);
}

.agent-monitor-failure-list code {
  overflow: hidden;
  color: var(--danger);
  font-size: var(--suite-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.harness-head .suite-control.status-pill {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border-radius: var(--suite-radius-pill, 999px);
  padding: 0 10px;
}

.harness-layer-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.harness-layer-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: var(--suite-shared-padding-10px, 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-soft);
}

.harness-layer-row i {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  margin-top: 5px;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.harness-layer-row.success i {
  background: var(--success);
}

.harness-layer-row.warning i {
  background: var(--warning);
}

.harness-layer-row.danger i {
  background: var(--danger);
}

.harness-layer-row > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.harness-layer-row span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.harness-layer-row strong,
.harness-layer-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.harness-layer-row strong {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.harness-layer-row small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.harness-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.harness-summary-cell {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-12px, 12px) 14px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.harness-summary-cell:last-child {
  border-right: 0;
}

.harness-summary-cell span,
.harness-iteration-item span,
.harness-gate-row span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.harness-summary-cell strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-body);
}

.harness-summary-cell small,
.harness-gate-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.harness-iteration-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: var(--suite-shared-padding-10px, 10px) 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.harness-iteration-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: var(--suite-shared-padding-9px-10px, 9px 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  background: var(--surface);
}

.harness-iteration-item.runtime {
  border-color: rgba(168, 98, 7, 0.32);
  background: var(--suite-shared-bg-168-98-7-0-08, rgba(168, 98, 7, 0.08));
}

.harness-iteration-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-caption);
}

.harness-gate-list {
  display: grid;
  padding: 0 14px 14px;
}

.harness-gate-row {
  display: grid;
  grid-template-columns: 10px minmax(180px, 0.75fr) minmax(0, 1.25fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: var(--suite-shared-padding-10px, 10px) 0;
  border-bottom: 1px solid var(--line);
}

.harness-gate-row:last-child {
  border-bottom: 0;
}

.harness-gate-row i {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--muted);
}

.harness-gate-row.success i {
  background: var(--success);
}

.harness-gate-row.warning i {
  background: var(--warning);
}

.harness-gate-row.danger i {
  background: var(--danger);
}

.harness-gate-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.harness-gate-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-caption);
}

.compact-head {
  border-top: 1px solid var(--line);
}

.form-panel {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px;
}

.field span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.field .suite-field-control,
.field .suite-form-textarea {
  --suite-form-focus-ring: 0 0 0 3px var(--primary-soft);
  --suite-form-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.field .suite-form-textarea {
  --suite-form-textarea-padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  --suite-form-textarea-min-height: var(--suite-shared-min-height-98px, 98px);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: var(--suite-type-caption);
}

.project-info-field-hint {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.45;
}

.project-info-field-hint.warn {
  color: #a86207;
}

.gateway-settings-panel {
  align-content: start;
}

.feature-inspection-route-region,
.database-admin-route-region {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The toolbar is the selector's sole allocated carrier, so the fit-content track still measures the header width. */
.suite-container-header-leading > .feature-inspection-view-toolbar {
  display: flex;
  flex: 1 1 0;
  min-inline-size: 0;
  align-items: center;
  min-width: 0;
  width: 100%;
  gap: var(--suite-control-gap, 8px);
}

.feature-inspection-view-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.feature-inspection-view-selector {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.feature-inspection-view-selector[data-suite-adaptive-choice="collapsed"] {
  flex: 0 0 auto;
}

.suite-management-topic-tabs:not([data-suite-primary-navigation]) {
  flex: 0 0 auto;
  width: fit-content;
  max-width: calc(100% - var(--suite-main-panel-padding-left, 12px) - var(--suite-main-panel-padding-right, 12px));
  margin: var(--suite-main-panel-padding-top, 12px) var(--suite-main-panel-padding-right, 12px) 0 var(--suite-main-panel-padding-left, 12px);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Inside a container header the header already owns the inset (DB 管理 had 22px extra above and left). */
.suite-container-header .suite-management-topic-tabs:not([data-suite-primary-navigation]) {
  max-width: 100%;
  margin: 0;
}

.suite-management-topic-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}

.suite-management-topic-content {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: var(--suite-main-container-content-gap, var(--suite-theme-card-content-gap, var(--suite-theme-card-gap, 12px)));
  padding: var(--suite-main-panel-padding-top, 12px) var(--suite-main-panel-padding-right, 12px) var(--suite-main-panel-padding-bottom, 12px) var(--suite-main-panel-padding-left, 12px);
  overflow: auto;
  overscroll-behavior: contain;
}

.suite-management-topic-content > .suite-section-panel {
  min-width: 0;
  display: grid;
  gap: var(--suite-main-container-content-gap, var(--suite-theme-card-content-gap, var(--suite-theme-card-gap, 12px)));
}

.feature-inspection-topic-content > .suite-section-panel,
.database-admin-topic-content > .suite-section-panel {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.feature-inspection-topic-content > .suite-section-panel {
  gap: var(--suite-sub-panel-gap, 10px);
}

.suite-section-panel > .suite-sub-panel-header:first-child,
.suite-sub-panel > .suite-sub-panel-header:first-child {
  border-bottom-width: 0 !important;
}

.feature-inspection-topic-content > .suite-section-panel > [data-suite-inner-surface-slot="header"],
.database-admin-topic-content > .suite-section-panel > [data-suite-inner-surface-slot="header"] {
  box-sizing: border-box;
  width: calc(100% - var(--suite-sub-panel-padding-left, 12px) - var(--suite-sub-panel-padding-right, 12px));
  min-width: 0;
  margin: var(--suite-sub-panel-padding-top, 12px) var(--suite-sub-panel-padding-right, 12px) 0 var(--suite-sub-panel-padding-left, 12px);
  padding-inline: 0;
}

.feature-inspection-topic-content > .suite-section-panel > [data-suite-inner-surface-slot="header"]::after,
.database-admin-topic-content > .suite-section-panel > [data-suite-inner-surface-slot="header"]::after {
  inset-inline: 0;
}

.feature-inspection-topic-content > .suite-section-panel > :not([data-suite-inner-surface-slot="header"]),
.database-admin-topic-content > .suite-section-panel > :not([data-suite-inner-surface-slot="header"]) {
  min-width: 0;
  margin-inline: var(--suite-sub-panel-padding-left, 12px) var(--suite-sub-panel-padding-right, 12px);
}

.feature-inspection-topic-content > .suite-section-panel > :last-child,
.database-admin-topic-content > .suite-section-panel > :last-child {
  margin-bottom: var(--suite-sub-panel-padding-bottom, 12px);
}

.database-admin-topic-content > .suite-section-panel > .field {
  padding-inline: 0;
}

.database-admin-topic-content > .suite-section-panel > [data-suite-inner-surface-slot="header"] {
  margin: var(--suite-sub-panel-padding-top, 12px) var(--suite-sub-panel-padding-right, 12px) 0 var(--suite-sub-panel-padding-left, 12px) !important;
}

.database-admin-topic-content > .suite-section-panel > :not([data-suite-inner-surface-slot="header"]) {
  margin-inline: var(--suite-sub-panel-padding-left, 12px) var(--suite-sub-panel-padding-right, 12px) !important;
}

.database-admin-topic-content > .suite-section-panel > :last-child {
  margin-bottom: var(--suite-sub-panel-padding-bottom, 12px) !important;
}

.database-admin-topic-content > .database-mapping-panel > .database-map-table {
  width: calc(100% - var(--suite-sub-panel-padding-left, 12px) - var(--suite-sub-panel-padding-right, 12px));
  max-width: calc(100% - var(--suite-sub-panel-padding-left, 12px) - var(--suite-sub-panel-padding-right, 12px));
}

.database-admin-topic-content {
  --database-admin-main-container-gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px)));
  --database-admin-main-container-content-gap: var(--suite-main-container-content-gap, var(--suite-theme-card-content-gap, var(--suite-theme-card-gap, 12px)));
  --database-admin-field-gap: var(--suite-forms-gap, var(--suite-form-row-gap, 8px));
  --database-admin-button-gap: max(6px, var(--suite-form-row-gap, 8px));
  gap: var(--database-admin-main-container-gap);
}

.database-admin-topic-content .gateway-settings-panel,
.database-admin-topic-content .database-mapping-panel {
  gap: var(--database-admin-main-container-content-gap);
}

/* DB admin: the settings / mapping form sits directly on the one main container, same as the phone layout. */
.database-admin-topic-content :is(.gateway-settings-panel, .database-mapping-panel) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --suite-sub-panel-padding-top: 0px;
  --suite-sub-panel-padding-right: 0px;
  --suite-sub-panel-padding-bottom: 0px;
  --suite-sub-panel-padding-left: 0px;
}

.database-admin-topic-content .managed-gateway-banner,
.database-admin-topic-content .gateway-health-result,
.database-admin-topic-content .suite-table-wrap.database-map-table {
  margin: 0;
}

.database-admin-topic-content .field,
.database-admin-topic-content .split-fields,
.database-admin-topic-content .managed-gateway-banner,
.database-admin-topic-content .gateway-health-result,
.database-admin-topic-content .admin-copy {
  gap: var(--database-admin-field-gap);
}

.database-admin-topic-content .button-row {
  gap: var(--database-admin-button-gap);
}

.mobile-preview-page {
  display: grid;
  gap: 14px;
}

.mobile-app-dev-page {
  gap: 10px;
}

.mobile-app-dev-shell-workbench {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--suite-module-toolbar-stack-gap, var(--suite-space-2, 8px));
  overflow: visible;
}

.mobile-app-dev-tabsbar {
  flex: 0 0 auto;
}

.mobile-app-dev-route-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.mobile-app-dev-route-body > .mobile-app-dev-phase2-layout {
  height: 100%;
}

.mobile-app-dev-phase2-layout .mobile-preview-controls {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-app-dev-content-region {
  padding: 0;
}

.mobile-app-dev-content-scroll {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: var(--suite-main-panel-padding, 12px);
  overflow: auto;
}

.mobile-app-dev-function-scroll {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: var(--suite-main-panel-padding, 12px);
}

.mobile-app-dev-phase2-layout .mobile-device-stage {
  min-height: 0;
  height: 100%;
}

.mobile-preview-control-panel {
  gap: 14px;
}

.mobile-app-dev-page .mobile-preview-control-panel {
  gap: 10px;
}

.mobile-app-dev-page .mobile-app-dev-mode-strip {
  display: none;
}

.mobile-app-dev-mode-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px;
}

.mobile-app-dev-mode-strip > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-soft);
}

.mobile-app-dev-mode-strip span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.mobile-app-dev-mode-strip strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-preview-head {
  align-items: start;
}

.mobile-preview-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 14px 14px;
}

.mobile-preview-control-group {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.mobile-preview-control-group > span,
.mobile-device-caption,
.mobile-app-top span,
.mobile-app-hero span,
.mobile-app-card-head span,
.mobile-app-card.metric span,
.mobile-preview-note p {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  line-height: 1.4;
}

.mobile-preview-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(260px, 360px);
  gap: 14px;
  align-items: start;
}

.mobile-app-dev-page .mobile-preview-layout {
  grid-template-columns: minmax(420px, 1fr) minmax(240px, 300px);
  gap: 10px;
}

.mobile-device-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-18px, 18px);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.mobile-app-dev-page .mobile-device-stage {
  min-height: min(780px, calc(100dvh - 150px));
  align-content: center;
  padding: var(--suite-shared-padding-12px, 12px);
}

.mobile-device-frame {
  width: min(var(--mobile-frame-width, var(--mobile-device-width)), 100%);
  height: var(--mobile-frame-height, auto);
  max-width: min(var(--mobile-frame-width, var(--mobile-device-width)), 64vw);
  aspect-ratio: var(--mobile-device-width) / var(--mobile-device-height);
  min-height: 0;
  border: var(--suite-shared-border-1px-solid-line-strong, 1px solid var(--line-strong));
  border-radius: 34px;
  padding: var(--suite-shared-padding-10px, 10px);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.mobile-device-frame.large {
  border-radius: 38px;
}

.suite-device-frame.mobile-device-frame.tablet {
  max-width: min(var(--mobile-frame-width, 620px), 100%);
  border-radius: var(--suite-shared-radius-30px, 30px);
  padding: var(--suite-shared-padding-12px, 12px);
}

.mobile-device-frame.landscape {
  max-width: min(var(--mobile-frame-width, 820px), 100%);
}

.mobile-device-bezel,
.mobile-device-safe-area,
.mobile-app-shell {
  height: 100%;
  min-height: 0;
}

.mobile-device-bezel {
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: 26px;
  background: var(--bg);
}

.suite-device-frame.mobile-device-frame.tablet .mobile-device-bezel {
  border-radius: var(--suite-shared-radius-22px, 22px);
}

.mobile-device-safe-area {
  padding: var(--suite-shared-padding-8px, 8px) 8px 10px;
}

.suite-device-frame.mobile-device-frame.tablet .mobile-device-safe-area {
  padding: var(--suite-shared-padding-12px, 12px);
}

.mobile-app-shell {
  --mobile-app-bottom-guard: 0px;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: 20px;
  background: var(--surface-strong);
  padding: 8px 12px;
}

.mobile-device-frame.phone .mobile-app-shell {
  --mobile-app-bottom-guard: 12px;
}

.mobile-app-standalone {
  --mobile-app-bottom-guard: max(12px, env(safe-area-inset-bottom, 0px), var(--mobile-browser-bottom-inset, 0px));
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--mobile-visual-viewport-height, 100dvh);
  min-height: 0;
  display: grid;
  overflow: hidden;
  background: var(--surface-strong);
}

@supports (height: 100dvh) {
  .mobile-app-standalone {
    min-height: 0;
  }
}

.mobile-app-standalone .mobile-app-shell {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mobile-app-standalone .mobile-app-top {
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
}

.mobile-app-standalone .mobile-app-content {
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  padding-bottom: calc(12px + var(--mobile-app-bottom-guard));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  scroll-padding-bottom: calc(74px + var(--mobile-app-bottom-guard));
}

.mobile-app-standalone .suite-toolbar.mobile-app-tabbar {
  min-height: var(--suite-mobile-tabbar-min-height);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: var(--mobile-app-bottom-guard);
  padding-left: env(safe-area-inset-left, 0px);
}

.mobile-app-top {
  min-height: 116px;
  display: grid;
  gap: 9px;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.mobile-app-top-bar {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
}

.mobile-app-top-main {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.mobile-app-top-title {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.mobile-app-top-label {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.mobile-app-top strong {
  display: block;
  font-size: var(--suite-type-title);
}

.mobile-app-top-title strong,
.mobile-app-top-title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-top-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.suite-button.mobile-app-menu-button {
  display: grid;
  place-items: center;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-9px, 9px);
  color: var(--primary);
  background: var(--surface-strong);
  cursor: pointer;
  width: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-button.mobile-app-menu-button.active,
.suite-button.mobile-app-menu-button:hover,
.suite-button.mobile-app-menu-button:focus {
  border-color: var(--primary);
  background: var(--primary-soft);
  outline: none;
}

.suite-button.mobile-app-menu-button .ui-icon {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
}

.mobile-app-drawer-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block;
}

.mobile-app-drawer-backdrop {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.22);
  box-shadow: none;
  cursor: pointer;
}

.mobile-app-drawer {
  position: relative;
  z-index: 1;
  width: min(312px, calc(100% - 42px));
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px);
  border-right: 1px solid var(--line);
  background: var(--surface-strong);
  box-shadow: 18px 0 44px rgba(15, 23, 42, 0.18);
  animation: mobile-drawer-enter 180ms cubic-bezier(0.2, 0, 0, 1);
}

.mobile-app-drawer-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.mobile-app-drawer-head div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.mobile-app-drawer-head span,
.mobile-app-drawer > p {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.35;
}

.mobile-app-drawer-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-drawer > p {
  margin: 0;
  padding: 0 2px;
}

.mobile-app-drawer-nav {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  padding-right: 2px;
}

.mobile-app-drawer-group {
  display: grid;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  overflow: hidden;
  background: var(--surface);
}

.mobile-app-drawer-group.active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}

.mobile-app-drawer-group-head {
  min-width: 0;
  min-height: var(--suite-shared-min-height-44px, 44px);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-9px, var(--suite-shared-padding-8px, 8px) 9px);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mobile-app-drawer-group-head:hover,
.mobile-app-drawer-group-head:focus {
  background: var(--surface-soft);
  outline: none;
}

.mobile-app-drawer-group-head > span {
  display: grid;
  place-items: center;
  color: var(--primary);
}

.mobile-app-drawer-group-head .ui-icon {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
}

.mobile-app-drawer-group-head strong,
.mobile-app-drawer-group-head small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-drawer-group-head strong {
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.mobile-app-drawer-group-head small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.mobile-app-drawer-group-head i {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-style: normal;
  transform: rotate(0deg);
  transition: transform 160ms ease;
}

.mobile-app-drawer-group.collapsed .mobile-app-drawer-group-head i {
  transform: rotate(-90deg);
}

.mobile-app-drawer-group-body {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  border-top: 1px solid var(--line);
  transition: grid-template-rows 180ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms ease;
}

.mobile-app-drawer-group.collapsed .mobile-app-drawer-group-body {
  grid-template-rows: 0fr;
  border-top-color: transparent;
  opacity: 0;
}

.mobile-app-drawer-group-inner {
  min-height: 0;
  display: grid;
  gap: 0;
}

.suite-menu-option.mobile-app-drawer-item {
  min-width: 0;
  min-height: var(--suite-shared-min-height-46px, 46px);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-10px, var(--suite-shared-padding-8px, 8px) 10px);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
}

.suite-menu-option.mobile-app-drawer-item + .suite-menu-option.mobile-app-drawer-item {
  border-top: 1px solid var(--line);
}

button.suite-menu-option.mobile-app-drawer-item {
  cursor: pointer;
}

button.suite-menu-option.mobile-app-drawer-item:hover,
button.suite-menu-option.mobile-app-drawer-item:focus,
.suite-menu-option.mobile-app-drawer-item.active {
  background: var(--primary-soft);
  outline: none;
}

.suite-menu-option.mobile-app-drawer-item.active {
  box-shadow: var(--suite-shared-shadow-inset-3px-0-0-primary, inset 3px 0 0 var(--primary));
}

.suite-menu-option.mobile-app-drawer-item > span {
  width: var(--suite-shared-width-30px, 30px);
  height: var(--suite-shared-height-30px, 30px);
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-menu-option.mobile-app-drawer-item.locked,
.suite-menu-option.mobile-app-drawer-item.desktop-only,
.suite-menu-option.mobile-app-drawer-item.planned {
  color: var(--muted);
}

.suite-menu-option.mobile-app-drawer-item .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
}

.suite-menu-option.mobile-app-drawer-item div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.suite-menu-option.mobile-app-drawer-item strong,
.suite-menu-option.mobile-app-drawer-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-menu-option.mobile-app-drawer-item strong {
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.suite-menu-option.mobile-app-drawer-item small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
}

.suite-menu-option.mobile-app-drawer-item em {
  color: var(--success);
  font-size: var(--suite-type-caption);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.suite-menu-option.mobile-app-drawer-item.locked em,
.suite-menu-option.mobile-app-drawer-item.planned em {
  color: var(--warning);
}

.suite-menu-option.mobile-app-drawer-item.desktop-only em {
  color: var(--muted);
}

@keyframes mobile-drawer-enter {
  from {
    opacity: 0.7;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.suite-field.mobile-app-group-select,
.suite-field.mobile-app-project-select {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.suite-field.mobile-app-group-select span,
.suite-field.mobile-app-project-select span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.suite-field.mobile-app-group-select .suite-form-control,
.suite-field.mobile-app-project-select .suite-form-control {
  width: 100%;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--text);
  background: var(--surface-strong);
  font: inherit;
  font-weight: 850;
}

.suite-combobox-shell.mobile-app-project-select-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 4px;
}

.suite-combobox-field.mobile-app-project-current {
  width: 100%;
  min-width: 0;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--text);
  background: var(--surface-strong);
  font: inherit;
  font-weight: 850;
  text-align: left;
  outline: none;
}

.suite-combobox-field.mobile-app-project-current.empty {
  color: var(--muted);
}

.suite-combobox-field.mobile-app-project-current.open,
.suite-combobox-field.mobile-app-project-current:focus {
  border-color: var(--primary);
  box-shadow: var(--suite-shared-shadow-0-0-0-2px-primary-18-transparent, 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent));
}

.suite-combobox-field.mobile-app-project-current::placeholder {
  color: var(--muted);
  opacity: 1;
}

.suite-combobox-field.mobile-app-project-current strong,
.suite-combobox-field.mobile-app-project-current small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-combobox-field.mobile-app-project-current strong {
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.suite-combobox-field.mobile-app-project-current small {
  color: var(--muted);
  font-size: var(--suite-shared-font-size-10px, 10px);
  font-weight: 750;
}

.suite-button.mobile-app-project-load {
  display: grid;
  place-items: center;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--primary);
  background: var(--surface-strong);
  cursor: pointer;
  width: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-button.mobile-app-project-load:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.62;
}

.suite-button.mobile-app-project-load .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
}

.suite-section-panel.mobile-app-project-picker-panel {
  margin-bottom: 10px;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
}

.mobile-app-project-picker-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.mobile-app-setup-card {
  gap: 10px;
}

.mobile-app-setup-card.compact {
  box-shadow: none;
}

.mobile-app-setup-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mobile-app-avatar {
  width: var(--suite-shared-width-34px, 34px);
  height: var(--suite-shared-height-34px, 34px);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--suite-radius-pill, 999px);
  color: #ffffff;
  background: var(--primary);
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.mobile-app-content {
  min-height: 0;
  overflow-y: auto;
  padding: var(--suite-shared-padding-12px, 12px);
  background: var(--surface-strong);
}

.mobile-app-section {
  display: grid;
  gap: 10px;
}

.mobile-app-hero,
.mobile-app-card,
.mobile-app-list,
.mobile-preview-note {
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-14px, 14px);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
}

.mobile-app-hero {
  display: grid;
  gap: 4px;
  padding:
    var(--suite-sub-panel-padding-top, 12px)
    var(--suite-sub-panel-padding-right, 12px)
    var(--suite-sub-panel-padding-bottom, 12px)
    var(--suite-sub-panel-padding-left, 12px);
}

.mobile-app-hero.good {
  border-color: rgba(8, 127, 91, 0.28);
}

.mobile-app-hero.warn {
  border-color: rgba(168, 98, 7, 0.34);
}

.mobile-app-hero strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.08rem;
}

.mobile-app-hero small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.mobile-app-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mobile-app-feature-list {
  display: grid;
  gap: 8px;
}

.mobile-app-feature-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding:
    var(--suite-sub-panel-padding-top, 12px)
    var(--suite-sub-panel-padding-right, 12px)
    var(--suite-sub-panel-padding-bottom, 12px)
    var(--suite-sub-panel-padding-left, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-14px, 14px);
  color: var(--text);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
}

.mobile-app-feature-card:hover {
  border-color: var(--primary);
  background: var(--surface);
}

.mobile-app-feature-card > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-10px, 10px);
  color: var(--primary);
  background: var(--primary-soft);
}

.mobile-app-feature-card .ui-icon {
  width: var(--suite-icon-size-18px, 18px);
  height: var(--suite-icon-size-18px, 18px);
}

.mobile-app-feature-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mobile-app-feature-card strong,
.mobile-app-feature-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-feature-card strong {
  font-size: var(--suite-type-body);
  font-weight: 850;
  white-space: nowrap;
}

.mobile-app-feature-card small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.35;
}

.mobile-app-feature-card em {
  color: var(--warning);
  font-size: var(--suite-type-caption);
  font-style: normal;
  font-weight: 900;
}

.mobile-app-feature-card.ready em {
  color: var(--success);
}

.mobile-app-group-list {
  display: grid;
  gap: 10px;
}

.mobile-app-group-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-padding-left: 2px;
  padding: var(--suite-shared-padding-suite-shared-padding-2px-2px-0-4px, var(--suite-shared-padding-2px, 2px) 0 4px);
}

.mobile-app-group-picker .suite-menu-option {
  flex: 0 0 auto;
  min-width: var(--suite-shared-min-width-124px, 124px);
  max-width: var(--suite-shared-width-168px, 168px);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon count";
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  padding: var(--suite-shared-padding-9px-10px, 9px 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  color: var(--muted);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.mobile-app-group-picker .suite-menu-option.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}

.mobile-app-group-picker span {
  grid-area: icon;
  display: grid;
  place-items: center;
}

.mobile-app-group-picker .ui-icon {
  width: var(--suite-icon-size-17px, 17px);
  height: var(--suite-icon-size-17px, 17px);
}

.mobile-app-group-picker strong,
.mobile-app-group-picker small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-group-picker strong {
  grid-area: title;
  color: inherit;
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.mobile-app-group-picker small {
  grid-area: count;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.mobile-app-group-card {
  gap: 10px;
}

.mobile-app-group-items {
  display: grid;
  gap: 0;
}

.suite-menu-option.mobile-app-group-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(64px, auto);
  align-items: center;
  gap: 9px;
  padding: var(--suite-shared-padding-9px-0, 9px 0);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
}

.suite-menu-option.mobile-app-group-item:last-child {
  border-bottom: 0;
}

button.suite-menu-option.mobile-app-group-item {
  cursor: pointer;
}

button.suite-menu-option.mobile-app-group-item:hover {
  color: var(--primary);
}

.suite-menu-option.mobile-app-group-item > span {
  width: var(--suite-shared-width-26px, 26px);
  height: var(--suite-shared-height-26px, 26px);
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--muted);
  background: var(--surface-soft);
}

.suite-menu-option.mobile-app-group-item.mobile-ready > span {
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-menu-option.mobile-app-group-item.locked,
.suite-menu-option.mobile-app-group-item.desktop-only,
.suite-menu-option.mobile-app-group-item.planned {
  color: var(--muted);
}

.suite-menu-option.mobile-app-group-item .ui-icon {
  width: var(--suite-icon-size-16px, 16px);
  height: var(--suite-icon-size-16px, 16px);
}

.suite-menu-option.mobile-app-group-item div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.suite-menu-option.mobile-app-group-item strong,
.suite-menu-option.mobile-app-group-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-menu-option.mobile-app-group-item strong {
  color: inherit;
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.suite-menu-option.mobile-app-group-item small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.mobile-app-group-item em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-style: normal;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-group-item.mobile-ready em {
  color: var(--success);
}

.mobile-app-group-item.locked em,
.mobile-app-group-item.planned em {
  color: var(--warning);
}

.mobile-device-frame.tablet .mobile-app-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-device-frame.landscape .mobile-app-section {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.mobile-device-frame.landscape .mobile-app-hero {
  grid-column: 1 / -1;
}

.mobile-app-card {
  display: grid;
  gap: 8px;
  padding: var(--suite-shared-padding-12px, 12px);
}

.mobile-app-card.metric {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-app-card.metric > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mobile-app-card.metric strong,
.mobile-app-card-head strong,
.mobile-app-list-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--suite-type-body);
}

.mobile-app-card-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mobile-app-card-head strong.good {
  color: var(--success);
}

.mobile-app-card-head strong.warn {
  color: var(--warning);
}

.mobile-app-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.45;
}

.mobile-app-card p.warn {
  color: var(--warning);
}

.mobile-app-inline-action {
  min-height: var(--suite-shared-min-height-28px, 28px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  padding: 0 10px;
  color: var(--primary);
  background: var(--surface);
  font: inherit;
  font-size: var(--suite-type-caption);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.mobile-app-inline-action:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.65;
}

.mobile-app-project-card {
  gap: 10px;
}

.mobile-app-project-list {
  display: grid;
  gap: 0;
  max-height: 236px;
  overflow: hidden auto;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-strong);
}

.mobile-app-project-option {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: var(--suite-shared-padding-suite-shared-padding-9px-10px-9px-10px-9px-12px, var(--suite-shared-padding-9px-10px, 9px 10px) 9px 12px);
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mobile-app-project-option + .mobile-app-project-option {
  border-top: 1px solid var(--line);
}

.mobile-app-project-option:hover,
.mobile-app-project-option:focus {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-strong));
  outline: none;
}

.mobile-app-project-option.active {
  background: var(--primary-soft);
  box-shadow: var(--suite-shared-shadow-inset-3px-0-0-primary, inset 3px 0 0 var(--primary));
}

.mobile-app-project-option strong,
.mobile-app-project-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-project-option strong {
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.mobile-app-project-option span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.mobile-app-data-group {
  gap: 10px;
}

.mobile-app-data-list {
  display: grid;
  gap: 0;
}

.mobile-app-data-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(88px, 0.82fr) minmax(0, 1.18fr);
  gap: 10px;
  align-items: center;
  padding: var(--suite-shared-padding-8px, 8px) 0;
  border-bottom: 1px solid var(--line);
}

.mobile-app-data-row:last-child {
  border-bottom: 0;
}

.mobile-app-data-row span,
.mobile-app-data-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-data-row span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.mobile-app-data-row strong {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 850;
}

.mobile-app-list {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.mobile-app-list-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border-bottom: 1px solid var(--line);
}

.mobile-app-list-item:last-child {
  border-bottom: 0;
}

.mobile-app-list-item i {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  margin-top: 7px;
  border-radius: var(--suite-radius-pill, 999px);
  background: var(--warning);
}

.mobile-app-list-item.ready i {
  background: var(--success);
}

.mobile-app-list-item span {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
}

.suite-toolbar.mobile-app-tabbar {
  height: auto;
  min-height: var(--suite-mobile-tabbar-min-height);
  display: grid;
  grid-template-columns: repeat(var(--mobile-app-tab-count, 3), minmax(0, 1fr));
  border-top: 1px solid var(--line);
  padding-bottom: var(--mobile-app-bottom-guard, 0px);
  background: var(--surface);
}

.suite-toolbar.mobile-app-tabbar .suite-button {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
}

.suite-toolbar.mobile-app-tabbar .suite-button.active {
  color: var(--primary);
}

.suite-toolbar.mobile-app-tabbar .ui-icon {
  width: var(--suite-icon-size-17px, 17px);
  height: var(--suite-icon-size-17px, 17px);
}

.mobile-app-tabbar span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-preview-guidance {
  align-content: start;
}

.suite-main-panel.mobile-app-dev-test-panel {
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
}

.mobile-preview-guidance-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.mobile-app-dev-test-list {
  display: grid;
  gap: 6px;
  padding: 0 10px 10px;
}

.mobile-app-dev-test {
  min-width: 0;
  min-height: var(--suite-shared-min-height-42px, 42px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: var(--suite-shared-padding-8px, 8px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-soft);
}

.mobile-app-dev-test span {
  min-height: var(--suite-shared-min-height-24px, 24px);
  display: inline-grid;
  place-items: center;
  border-radius: var(--suite-radius-pill, 999px);
  color: var(--muted);
  background: var(--surface-strong);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.mobile-app-dev-test.pass span {
  color: var(--success);
  background: rgba(8, 127, 91, 0.12);
}

.mobile-app-dev-test.warn span {
  color: var(--warning);
  background: var(--suite-shared-bg-168-98-7-0-12, rgba(168, 98, 7, 0.12));
}

.mobile-app-dev-test.next span {
  color: var(--primary);
  background: var(--primary-soft);
}

.mobile-app-dev-test div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.mobile-app-dev-test strong,
.mobile-app-dev-test small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-app-dev-test strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  white-space: nowrap;
}

.mobile-app-dev-test small {
  color: var(--muted);
  display: -webkit-box;
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mobile-app-dev-test-panel .mobile-preview-note {
  display: none;
}

.mobile-preview-check {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: var(--suite-shared-min-height-44px, 44px);
  padding: var(--suite-shared-padding-9px-10px, 9px 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  background: var(--surface-soft);
}

.mobile-preview-check span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.mobile-preview-check.done span {
  color: var(--success);
}

.mobile-preview-check strong {
  min-width: 0;
  font-size: var(--suite-type-caption);
  line-height: 1.35;
}

.mobile-preview-note {
  display: grid;
  gap: 6px;
  margin: 0 14px 14px;
  padding: var(--suite-shared-padding-12px, 12px);
}

.mobile-preview-note strong {
  font-size: var(--suite-type-body);
}

.mobile-preview-note p {
  margin: 0;
}

.database-mapping-panel {
  align-content: start;
}

.suite-emphasis-block.admin-copy strong {
  font-size: var(--suite-type-body);
}

.suite-feedback-state-block.admin-copy.good {
  color: var(--success, #047857);
}

.suite-section-panel.database-finish-sync-panel.good {
  border-color: rgba(8, 127, 91, 0.28);
  background: rgba(8, 127, 91, 0.08);
}

.suite-emphasis-block.admin-copy small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.5;
}

.suite-section-panel.database-mapping-panel > .suite-feedback-state-block.admin-copy.warning,
.suite-main-panel.database-mapping-panel > .suite-feedback-state-block.admin-copy.warning {
  align-items: center;
  gap: 8px 12px;
}

.suite-table-wrap.database-map-table {
  display: grid;
  margin: 0 14px 14px;
  overflow: hidden;
  border-width: var(--suite-tables-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-tables-border-color, var(--line));
  border-radius: var(--suite-tables-radius, var(--suite-radius-main-panel, var(--suite-radius-control, 20px)));
  background: var(--surface-strong);
}

.suite-section-panel.panel.database-mapping-panel.field-picker-open,
.suite-main-panel.panel.database-mapping-panel.field-picker-open,
.suite-table-wrap.database-map-table.field-picker-open {
  overflow: visible;
}

.suite-table-wrap.database-map-table .database-map-table-head,
.suite-table-wrap.database-map-table .database-map-row-head {
  display: grid;
  grid-template-columns: minmax(128px, 0.9fr) minmax(108px, 0.42fr) minmax(260px, 1.45fr) minmax(188px, 0.72fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.suite-table-wrap.database-map-table .database-map-table-head {
  min-height: var(--suite-tables-height, 34px);
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.database-map-rows {
  display: grid;
  gap: 0;
  padding: 0;
}

.database-map-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.suite-table-wrap.database-map-table .database-map-row-head {
  min-height: var(--suite-data-rows-height, var(--suite-tables-height, 34px));
  text-align: var(--suite-data-rows-text-align, left);
}

.database-map-row:last-child {
  border-bottom: 0;
}

.database-map-row-head {
  min-height: var(--suite-shared-min-height-46px, 46px);
  padding: var(--suite-shared-padding-6px-10px, 6px 10px);
}

.database-map-cell {
  min-width: 0;
}

.database-map-row-state,
.database-map-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

.database-map-row-state {
  justify-content: flex-start;
}

.database-map-actions {
  justify-content: flex-end;
}

.database-map-id {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.database-map-id input {
  flex: 1 1 auto;
  min-width: 0;
}

.database-map-name strong,
.database-map-row-state em,
.database-map-actions .suite-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-map-actions .suite-button {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.suite-button.command.compact.database-map-row-edit,
.suite-button.command.compact.database-map-row-toggle {
  width: var(--suite-shared-width-30px, 30px);
  min-width: var(--suite-shared-width-30px, 30px);
  max-width: var(--suite-shared-width-30px, 30px);
  gap: 0;
  justify-content: center;
}

.suite-button.command.database-map-row-edit::before,
.suite-button.command.database-map-row-toggle::before {
  content: none;
  display: none;
  min-width: 0;
}

.database-map-row-edit span,
.database-map-row-toggle span {
  position: absolute;
  width: var(--suite-shared-width-1px, 1px);
  height: var(--suite-shared-height-1px, 1px);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.database-map-row-edit,
.database-map-row-toggle {
  color: var(--muted);
  background: var(--surface);
}

.database-map-row-edit:hover,
.database-map-row-toggle:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.database-map-row.editing .database-map-row-edit {
  border-color: rgba(37, 99, 235, 0.36);
  color: var(--primary);
  background: var(--primary-soft);
}

.database-map-row-save-status,
.database-map-row-field-warning {
  flex: 0 0 auto;
  min-width: var(--suite-shared-min-width-24px, 24px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  padding: var(--suite-shared-padding-3px-8px, 3px 8px);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.database-map-row-field-warning.warn {
  border-color: rgba(168, 98, 7, 0.32);
  color: var(--warning);
  background: var(--suite-shared-bg-168-98-7-0-1, rgba(168, 98, 7, 0.1));
}

.database-map-row-save-status.good {
  border-color: rgba(8, 127, 91, 0.28);
  color: #087f5b;
  background: var(--suite-shared-bg-8-127-91-0-08, rgba(8, 127, 91, 0.08));
}

.database-map-row-save-status.warn {
  border-color: rgba(168, 98, 7, 0.28);
  color: var(--warning);
  background: var(--suite-shared-bg-168-98-7-0-08, rgba(168, 98, 7, 0.08));
}

.database-map-row-save-status.bad {
  border-color: rgba(190, 18, 60, 0.3);
  color: #be123c;
  background: var(--suite-shared-bg-190-18-60-0-08, rgba(190, 18, 60, 0.08));
}

.database-map-row.save-saving {
  box-shadow: 0 0 0 3px rgba(168, 98, 7, 0.08);
}

.database-map-row.save-saved {
  box-shadow: 0 0 0 3px rgba(8, 127, 91, 0.08);
}

.database-map-row.save-failed {
  border-color: rgba(190, 18, 60, 0.38);
  box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.08);
}

.database-map-row-toggle .ui-icon {
  width: var(--suite-icon-size-13px, 13px);
  height: var(--suite-icon-size-13px, 13px);
  transition: transform 160ms ease;
}

.database-map-row.expanded .database-map-row-toggle .ui-icon {
  transform: rotate(180deg);
}

.database-map-row strong {
  min-width: 0;
  font-size: var(--suite-type-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-field-control.database-map-id-input,
.suite-form-control.database-map-id-input {
  min-width: 0;
}

.database-map-row-detail {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    grid-template-rows 180ms ease,
    opacity 140ms ease,
    visibility 0s linear 180ms;
}

.database-map-row:not(.expanded) .database-map-row-detail {
  overflow: hidden;
}

.database-map-row.expanded .database-map-row-detail {
  grid-template-rows: 1fr;
  margin-top: 0;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.database-map-row.expanded.field-picker-open .database-map-row-detail {
  overflow: visible;
}

.database-map-row.field-picker-open {
  z-index: 160;
}

.database-map-row-detail-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 10px 10px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}

.database-map-row.expanded .database-map-row-detail-inner {
  opacity: 1;
  transform: translateY(0);
}

.database-map-row.expanded.field-picker-open .database-map-row-detail-inner {
  overflow: visible;
}

.database-map-row.expanded.field-picker-open .suite-section-panel.field-map-group,
.database-map-row.expanded.field-picker-open .field-map-grid,
.database-map-row.expanded.field-picker-open .suite-field.field-map-select-row,
.database-map-row.expanded.field-picker-open .field-map-picker {
  overflow: visible;
}

.database-map-row em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-style: normal;
  font-weight: 900;
  text-align: left;
}

.database-map-row.mapping-warning {
  background: var(--suite-shared-bg-168-98-7-0-035, rgba(168, 98, 7, 0.035));
}

@media (prefers-reduced-motion: reduce) {
  .database-map-row,
  .database-map-row-toggle .ui-icon,
  .database-map-row-detail,
  .database-map-row-detail-inner,
  .smooth-disclosure-summary .ui-icon,
  .smooth-disclosure-body {
    transition: none;
  }
}

.suite-section-panel.field-map-group .field-map-group-head,
.suite-field.field-map-select-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.suite-section-panel.field-map-group .field-map-group-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.field-map-group-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.field-map-save .ui-icon {
  width: var(--suite-icon-size-13px, 13px);
  height: var(--suite-icon-size-13px, 13px);
}

.suite-field.field-map-select-row {
  grid-template-columns: minmax(78px, 108px) minmax(0, 1fr);
  align-content: start;
  gap: var(--suite-sub-panel-gap, var(--suite-space-3, 0.75rem));
}

.suite-section-panel.field-map-group .field-map-group-head > span,
.suite-field.field-map-select-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.suite-section-panel.field-map-group .field-map-group-head strong {
  font-size: var(--suite-type-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-map-label-text {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-section-panel.field-map-group .field-map-group-head small,
.suite-field.field-map-select-row small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
}

.suite-section-panel.field-map-group .field-map-group-head small.bad {
  color: var(--danger);
}

.field-map-issue-summary {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(168, 98, 7, 0.28);
  border-radius: var(--suite-shared-radius-8px, 8px);
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-10px, var(--suite-shared-padding-8px, 8px) 10px);
  color: var(--warning);
  background: var(--suite-shared-bg-168-98-7-0-08, rgba(168, 98, 7, 0.08));
}

.field-map-issue-summary strong {
  font-size: var(--suite-type-caption);
}

.field-map-issue-summary small {
  color: inherit;
  font-size: var(--suite-type-caption);
  line-height: 1.35;
}

.field-map-provision {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(8, 127, 91, 0.22);
  border-radius: var(--suite-shared-radius-8px, 8px);
  padding: var(--suite-shared-padding-suite-shared-padding-8px-8px-10px, var(--suite-shared-padding-8px, 8px) 10px);
  background: rgba(8, 127, 91, 0.06);
}

.field-map-provision.done {
  border-color: rgba(8, 127, 91, 0.18);
  background: rgba(8, 127, 91, 0.04);
}

.field-map-provision-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.field-map-provision-head > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-map-provision-head strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
}

.field-map-provision-head small,
.field-map-provision-counts,
.field-map-provision-preview small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
}

.field-map-provision-error,
.field-map-provision-preview small.warn {
  color: var(--warning);
}

.field-map-provision-preview {
  display: grid;
  gap: 3px;
}

.field-map-load {
  align-self: center;
  white-space: nowrap;
}

.field-map-load.icon-only {
  width: var(--suite-shared-width-30px, 30px);
  min-width: var(--suite-shared-width-30px, 30px);
  max-width: var(--suite-shared-width-30px, 30px);
  padding: 0;
  justify-content: center;
}

.field-map-load.icon-only span {
  position: absolute;
  width: var(--suite-shared-width-1px, 1px);
  height: var(--suite-shared-height-1px, 1px);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.field-map-rows {
  display: grid;
  gap: 8px;
}

.suite-section-panel.field-map-group {
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  background: var(--surface-strong);
}

.suite-section-panel.field-map-group.good {
  border-color: rgba(8, 127, 91, 0.3);
}

.suite-section-panel.field-map-group.warn {
  border-color: rgba(168, 98, 7, 0.3);
}

.suite-section-panel.field-map-group.embedded {
  margin-top: 2px;
  padding: var(--suite-shared-padding-10px, 10px) 15px 0 0;
  border-width: var(--suite-shared-width-1px, 1px) 0 0;
  border-color: var(--line);
  border-radius: 0;
  background: transparent;
}

/* Field mapping uses the Shared settings grid's container and spacing contract. */

.suite-field.field-map-select-row {
  align-items: center;
  min-width: 0;
}

.field-map-picker {
  position: relative;
  min-width: 0;
  width: 100%;
}

.field-map-picker.project-picker {
  gap: 0;
  margin: 0;
}

.suite-control.field-map-picker-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--suite-dropdowns-height, var(--suite-control-height));
  align-items: var(--suite-dropdowns-align-items, center);
  width: 100%;
  min-width: 0;
  height: var(--suite-dropdowns-height, var(--suite-control-height));
  min-height: var(--suite-dropdowns-height, var(--suite-control-height));
  box-sizing: border-box;
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-control));
  padding: 0;
  appearance: none;
  color: var(--text);
  background: var(--suite-dropdowns-surface-bg, var(--surface));
  font: inherit;
  font-size: var(--suite-type-caption);
  font-weight: 650;
  text-align: var(--suite-dropdowns-text-align, left);
  cursor: pointer;
}

.suite-control.field-map-picker-button:focus-visible,
.field-map-picker.open .suite-control.field-map-picker-button {
  border-color: var(--primary);
  box-shadow: var(--suite-shared-shadow-0-0-0-3px-primary-soft, 0 0 0 3px var(--primary-soft));
  outline: none;
}

.suite-control.field-map-picker-button:disabled {
  color: var(--muted);
  background: var(--surface-soft);
  cursor: not-allowed;
}

.field-map-picker-value {
  align-self: center;
  min-width: 0;
  padding: 0 12px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-map-picker-button .combo-toggle {
  pointer-events: none;
}

.field-map-picker-options {
  max-height: var(--suite-shared-height-220px, 220px);
  z-index: 180;
}

.field-map-option strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: var(--suite-type-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-map-option span {
  flex: 0 0 auto;
}

.field-map-option.placeholder strong,
.field-map-option.warn strong,
.field-map-option.warn span,
.suite-field.field-map-select-row.missing .field-map-label-text,
.suite-field.field-map-select-row.incompatible .field-map-label-text,
.suite-control.field-map-picker-button.missing,
.suite-control.field-map-picker-button.incompatible {
  color: var(--warning);
}

.suite-control.field-map-picker-button.missing,
.suite-control.field-map-picker-button.incompatible {
  border-color: rgba(180, 83, 9, 0.55);
  background: var(--suite-shared-bg-180-83-9-0-06, rgba(180, 83, 9, 0.06));
}

@media (max-width: 860px) {
  .database-map-table-head {
    display: none;
  }

  .database-map-row-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
  }

  .database-map-id {
    grid-column: 1 / -1;
  }

  .database-map-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .suite-field.field-map-select-row {
    grid-template-columns: 1fr;
    gap: var(--suite-sub-panel-gap, var(--suite-space-3, 0.75rem));
  }
}

.suite-section-panel.mapping-unlock-panel {
  display: grid;
  gap: 10px;
  margin: 0 14px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: var(--suite-shared-radius-14px, 14px);
  background: var(--surface-strong);
}

.suite-section-panel.mapping-unlock-panel > strong {
  font-size: var(--suite-type-body);
}

.suite-section-panel.mapping-unlock-panel > small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.suite-section-panel.mapping-unlock-panel > small.warn {
  color: var(--warning);
}

.floating-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(3px);
}

:root[data-theme='dark'] .floating-dialog-backdrop {
  background: rgba(2, 6, 23, 0.62);
}

.floating-unlock-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 0;
  padding: 16px;
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.18);
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dialog-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.dialog-head strong {
  font-size: var(--suite-type-title);
}

.dialog-head small,
.dialog-account {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.sensitive-sso-control {
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  background: var(--surface-soft);
}

.sensitive-sso-control small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.sensitive-sso-button {
  justify-self: start;
}

.suite-control.sensitive-google-sso-button {
  min-height: var(--suite-shared-min-height-40px, 40px);
}

.dialog-close .ui-icon {
  width: var(--suite-icon-size-17px, 17px);
  height: var(--suite-icon-size-17px, 17px);
}

@media (max-width: 640px) {
  .floating-dialog-backdrop {
    align-items: end;
    padding: var(--suite-shared-padding-12px, 12px);
  }

  .floating-unlock-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
  }
}

.managed-gateway-banner span,
.managed-gateway-banner small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.managed-gateway-banner strong {
  color: var(--text);
  font-size: var(--suite-type-body);
}

.split-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.split-fields .field {
  padding-right: 0;
}

.split-fields .field:first-child {
  padding-left: 14px;
}

.split-fields .field:last-child {
  padding-right: 14px;
}

.suite-main-panel.form-panel .button-row {
  padding: 0 14px;
  justify-content: flex-start;
}

.gateway-health-result {
  gap: 6px;
  overflow-wrap: break-word;
  word-break: normal;
}

.gateway-health-result.good {
  color: var(--success, #047857);
}

.gateway-health-result.warn {
  color: var(--warning, #9a6700);
}

.gateway-health-result.bad {
  color: var(--danger, #b42318);
}

.gateway-health-result-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gateway-health-result-head .suite-control.status-pill {
  min-height: var(--suite-shared-min-height-28px, 28px);
  padding: 0 10px;
  box-shadow: none;
}

.gateway-health-result-head strong {
  min-width: 0;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  overflow-wrap: break-word;
  word-break: normal;
}

.gateway-health-result small,
.gateway-health-result time {
  min-width: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
}

.binding-section {
  display: grid;
  gap: var(--suite-sub-panel-gap, 10px);
  margin: var(--suite-sub-panel-margin, 0px);
  padding: var(--suite-sub-panel-padding, 12px);
}

.project-info-page {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.suite-main-panel.project-info-tabs {
  display: flex;
  align-items: end;
  gap: 22px;
  min-height: 52px;
  margin: 0;
  padding: 0 18px;
  border-radius: var(--suite-radius-main-panel, var(--suite-radius-control, 20px));
  box-shadow: var(--shadow-soft);
}

.project-info-tab {
  position: relative;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  background: transparent;
  cursor: pointer;
  min-height: var(--suite-navigation-height, var(--suite-control-height));
  padding: var(--suite-form-padding, 0 var(--suite-space-3));
  font-size: var(--suite-form-font-size, var(--suite-type-caption));
}

.project-info-tab::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.project-info-tab:hover:not(:disabled),
.project-info-tab.active {
  color: var(--text);
}

.project-info-tab.active::after {
  background: var(--primary);
}

.project-info-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.suite-main-panel.project-info-directory {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border-radius: var(--suite-radius-main-panel, var(--suite-radius-control, 20px));
  box-shadow: var(--shadow-soft);
}

.project-info-directory-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* 12 under the toolbar line before the table or message, as in the approved 驗屋 .iv-bar1 (本人 10/30); the panel's
   binding-section grid already gives 10 between rows. */
.project-info-directory > .project-info-directory-controls.suite-in-frame-list-toolbar {
  margin-block-end: calc(var(--suite-space-3, 12px) - 10px);
}

.project-info-directory-search {
  display: flex;
  flex: 1 1 340px;
  align-items: center;
  gap: 9px;
  max-width: 520px;
  min-height: var(--suite-control-height);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  color: var(--muted);
  background: var(--surface-soft);
}

.project-info-directory-search svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.project-info-directory-search input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  font: inherit;
  background: transparent;
}

.project-info-directory-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Least containers (owner choice A): the directory filter is a value switch — text only, soft fill when selected. */
.project-info-directory-filters button {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
  background: transparent;
  cursor: pointer;
  min-height: var(--suite-buttons-height, var(--suite-control-height));
  padding: var(--suite-form-padding, 0 var(--suite-space-3));
  font-size: var(--suite-form-font-size, var(--suite-type-caption));
}

.project-info-directory-filters button:hover,
.project-info-directory-filters button.active {
  border-color: transparent;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

@media (max-width: 900px) {
  .project-info-directory-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .project-info-directory-search {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}

.suite-table-wrap.project-info-directory-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border-width: var(--suite-tables-border-width, 1px);
}

.project-info-directory-table {
  width: 100%;
  min-width: 1680px;
  border-collapse: collapse;
}

.project-info-directory-table th,
.project-info-directory-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
  text-align: left;
}

.project-info-directory-table.editable th:nth-child(1) { min-width: 160px; }
.project-info-directory-table.editable th:nth-child(2) { min-width: 150px; }
.project-info-directory-table.editable th:nth-child(3) { min-width: 104px; }
.project-info-directory-table.editable th:nth-child(4) { min-width: 210px; }
.project-info-directory-table.editable th:nth-child(5) { min-width: 150px; }
.project-info-directory-table.editable th:nth-child(6) { min-width: 130px; }
.project-info-directory-table.editable th:nth-child(7),
.project-info-directory-table.editable th:nth-child(8),
.project-info-directory-table.editable th:nth-child(9) { min-width: 132px; }
.project-info-directory-table.editable th:nth-child(10) { min-width: 220px; }
.project-info-directory-table.editable th:nth-child(11) { min-width: 260px; }

.project-info-directory-cell-control {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: var(--suite-type-caption);
  background: transparent;
}

.project-info-directory-cell-control:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--surface-soft);
}

.project-info-directory-cell-control:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent);
}

.project-info-directory-cell-control:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.project-info-directory-row.is-organization > td {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.project-info-directory-delete {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.project-info-directory-delete:hover:not(:disabled) {
  color: var(--danger, #b42318);
  background: color-mix(in srgb, var(--danger, #b42318) 8%, var(--surface));
}

.project-info-directory-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.project-info-directory-delete svg {
  width: 16px;
  height: 16px;
}

.project-info-directory-table th {
  color: var(--muted);
  font-weight: 850;
  white-space: nowrap;
}

.project-info-directory-table th:last-child,
.project-info-directory-table td:last-child {
  width: 50px;
  text-align: center;
}

.project-info-directory-table tbody tr:last-child td {
  border-bottom: 0;
}

.project-info-directory-row:hover > td,
.project-info-directory-row.is-expanded > td {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.project-info-directory-row td > strong,
.project-info-directory-row td > small {
  display: block;
}

.project-info-directory-row td > small {
  margin-top: 3px;
  color: var(--muted);
}

.project-info-directory-role-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.project-info-directory-role-list span,
.project-info-directory-contact strong + span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--primary);
  font-size: calc(var(--suite-type-caption) - 1px);
  font-weight: 800;
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
}

.project-info-directory-expand {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.project-info-directory-expand:hover {
  color: var(--primary);
  background: var(--surface-soft);
}

.project-info-directory-expand svg {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

.project-info-directory-expand.active svg {
  transform: rotate(180deg);
}

.project-info-directory-detail-row > td {
  padding: 12px 14px 16px;
  background: var(--surface-soft);
}

.project-info-directory-contact-list {
  display: grid;
  gap: 8px;
}

.project-info-directory-contact {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(360px, 2fr);
  gap: 16px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.project-info-directory-contact > div {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.project-info-directory-contact dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.project-info-directory-contact dl div {
  min-width: 0;
}

.project-info-directory-contact dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: calc(var(--suite-type-caption) - 1px);
  font-weight: 750;
}

.project-info-directory-contact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.project-info-directory-message-row td,
.project-info-directory-no-contact {
  padding: 34px 14px;
  color: var(--muted);
  text-align: center;
}

.project-info-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .project-info-directory-contact {
    grid-template-columns: 1fr;
  }
}

.project-settings-form {
  align-items: stretch;
}

.suite-main-panel.project-settings-main-panel {
  margin: var(--suite-main-panel-margin, 0px);
  overflow: visible;
}

.project-settings-actions {
  padding: 0 4px 2px;
}

.zoning-section .binding-section-head span {
  color: var(--text);
}

.zoning-section .binding-section-head strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.zoning-detail-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.zoning-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.zoning-detail-head span,
.zoning-detail-head strong {
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.zoning-detail-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.suite-table-wrap.zoning-detail-table {
  display: grid;
  grid-template-columns: 34px minmax(130px, 1.35fr) repeat(8, minmax(96px, 1fr));
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-width: var(--suite-tables-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-tables-border-color, var(--line));
  border-radius: var(--suite-tables-radius, 12px);
  background: var(--surface);
}

.zoning-detail-row {
  display: contents;
}

.zoning-detail-cell {
  min-width: 0;
  min-height: var(--suite-data-rows-height, var(--suite-control-height));
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
  text-align: var(--suite-data-rows-text-align, left);
  overflow-wrap: break-word;
  word-break: normal;
}

.zoning-detail-row.header .zoning-detail-cell {
  min-height: var(--suite-tables-height, var(--suite-control-height));
  border-top: 0;
  color: var(--muted);
  font-weight: 850;
  background: var(--surface-soft);
}

.zoning-detail-row.total .zoning-detail-cell {
  color: var(--text);
  font-weight: 850;
  background: var(--surface-soft);
}

.zoning-detail-row.editing .zoning-detail-cell {
  background: var(--primary-soft);
}

.zoning-detail-cell.strong {
  font-weight: 850;
}

.zoning-detail-cell.edit-control {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--suite-shared-padding-8px, 8px) 6px;
}

.suite-button.zoning-detail-edit-button {
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--suite-radius-pill, 999px);
  color: var(--primary);
  background: transparent;
  cursor: pointer;
  width: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-button.zoning-detail-edit-button:hover,
.suite-button.zoning-detail-edit-button:focus-visible {
  color: var(--text);
  background: var(--primary-soft);
  outline: none;
}

.suite-button.zoning-detail-edit-button:focus-visible {
  box-shadow: var(--suite-focus-ring, 0 0 0 3px var(--primary-soft));
}

.suite-button.zoning-detail-edit-button .ui-icon {
  width: var(--suite-icon-size-15px, 15px);
  height: var(--suite-icon-size-15px, 15px);
}

.zoning-detail-state {
  min-height: var(--suite-shared-min-height-44px, 44px);
  display: flex;
  align-items: center;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  background: var(--surface);
}

.zoning-detail-state.bad {
  color: var(--danger);
  border-color: rgba(184, 64, 70, 0.34);
  background: var(--danger-soft);
}

.suite-section-panel.zoning-detail-add-panel {
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-12px, 12px);
  background: var(--surface);
}

.suite-section-panel.zoning-detail-add-panel > small,
.zoning-detail-hint {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.45;
}

.zoning-detail-hint.bad {
  color: var(--danger);
}

.binding-section .field {
  padding: 0;
}

.binding-section .split-fields .field:first-child,
.binding-section .split-fields .field:last-child {
  padding: 0;
}

.binding-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.binding-section-head > span {
  color: var(--text);
  font-family: var(--suite-ui-title-font-family, var(--suite-title-font-family, var(--suite-body-font-family, "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif)));
  font-size: var(--suite-ui-title-preview-size, var(--suite-title-preview-size, var(--suite-type-title)));
  font-weight: var(--suite-ui-title-font-weight, var(--suite-title-font-weight, var(--suite-container-title-weight, 650)));
  letter-spacing: var(--suite-ui-title-letter-spacing, var(--suite-title-letter-spacing, 0));
  line-height: var(--suite-ui-title-line-height, var(--suite-title-line-height, var(--suite-line-title, var(--suite-line-body, 1.5))));
}

.binding-section-status {
  display: inline-flex;
  align-items: center;
  min-height: var(--suite-shared-min-height-24px, 24px);
  padding: var(--suite-shared-padding-3px-9px, 3px 9px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-radius-pill, 999px);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  line-height: 1;
  background: var(--surface);
}

.binding-section-status.ready {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--surface-soft));
}

.binding-section-status.pending {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 36%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-soft));
}

.binding-section-hint {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.45;
}

.binding-section-hint.pending {
  color: var(--warning);
}

.binding-section-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.binding-section-message {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  line-height: 1.45;
}

.binding-section-message.good {
  color: var(--success);
}

.binding-section-message.warn {
  color: var(--warning);
}

.binding-section-message.bad {
  color: var(--danger);
}

.project-binding-panel {
  overflow: visible;
}

.suite-main-panel.project-binding-panel .panel-head {
  border-radius: var(--suite-radius-main-panel, var(--suite-radius-control, 20px)) var(--suite-radius-main-panel, var(--suite-radius-control, 20px)) 0 0;
}

.project-picker {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0 14px;
}

.project-binding-panel > .project-picker {
  margin-left: 0;
  margin-right: 0;
}

.project-picker.open {
  z-index: 90;
}

@supports selector(:has(.project-picker.open)) {
  .suite-main-panel.panel:has(.project-picker.open),
  .suite-section-panel:has(.project-picker.open),
  .suite-table-wrap:has(.project-picker.open) {
    overflow: visible;
  }
}

.project-picker.empty {
  align-items: stretch;
}

.project-combobox {
  position: relative;
  display: grid;
  gap: 6px;
}

.suite-field.project-combobox > span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.suite-combobox-shell.project-combobox-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  min-height: var(--suite-form-height, 30px);
}

.project-picker.open .suite-combobox-shell.project-combobox-control:not(.locked) {
  border-color: var(--primary);
  box-shadow: var(--suite-shared-shadow-0-0-0-3px-primary-soft, 0 0 0 3px var(--primary-soft));
}

.suite-combobox-shell.project-combobox-control .suite-combobox-field {
  min-width: 0;
}

.suite-combobox-shell .combo-toggle,
.suite-control.field-map-picker-button .combo-toggle {
  display: grid;
  place-items: center;
  width: var(--suite-shared-width-30px, 30px);
  height: var(--suite-shared-height-30px, 30px);
  margin-right: 4px;
  border: 0;
  border-radius: var(--suite-form-radius, var(--suite-radius-control));
  background: transparent;
  cursor: pointer;
}

.suite-control.field-map-picker-button .combo-toggle {
  justify-self: end;
  width: var(--suite-shared-width-calc-suite-dropdowns-height-suite-control-height-2px, calc(var(--suite-dropdowns-height, var(--suite-control-height)) - 2px));
  height: var(--suite-shared-height-calc-suite-dropdowns-height-suite-control-height-2px, calc(var(--suite-dropdowns-height, var(--suite-control-height)) - 2px));
  margin-right: 0;
}

.suite-button.combo-toggle:hover,
.suite-control.field-map-picker-button .combo-toggle:hover {
  background: var(--primary-soft);
}

.suite-button.combo-toggle:disabled {
  opacity: 0.45;
  cursor: default;
}

.suite-button.combo-toggle:disabled:hover {
  background: transparent;
}

.suite-combobox-shell .combo-toggle span,
.suite-control.field-map-picker-button .combo-toggle span {
  display: block;
  width: var(--suite-shared-width-7px, 7px);
  height: var(--suite-shared-height-7px, 7px);
  margin: 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 140ms ease;
}

.suite-button.combo-toggle.open span,
.suite-control.field-map-picker-button .combo-toggle.open span {
  transform: rotate(225deg);
}

.project-picker-hint {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.project-picker-hint.warn {
  color: var(--warning);
}

.owner-list-unlock-panel {
  margin: 6px 0 0;
}

.project-info-unlock-panel {
  margin: 0 14px;
}

.floating-unlock-dialog.project-info-unlock-panel {
  margin: 0;
}

.suite-section-panel.project-info-leave-guard-panel {
  border-color: rgba(180, 35, 24, 0.34);
}

.suite-section-panel.project-info-leave-guard-panel .button-row {
  justify-content: flex-start;
  padding: 0;
}

.project-picker-options,
.suite-menu.suite-dropdown-menu.project-picker-options {
  --suite-dropdowns-menu-width: 100%;
  --suite-dropdowns-menu-min-width: 100%;
  --suite-dropdowns-menu-max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 100;
  max-height: var(--suite-shared-height-258px, 258px);
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: var(--suite-shared-padding-6px, 6px);
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line-strong));
  border-radius: var(--suite-dropdowns-radius, var(--suite-shared-radius-12px, 12px));
  background: var(--suite-dropdowns-menu-surface-bg, var(--suite-dropdowns-strong-bg, var(--suite-dropdowns-surface-bg, var(--surface))));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  box-shadow: var(--suite-dropdowns-shadow, 0 18px 42px rgba(15, 23, 42, 0.16));
  overflow-y: auto;
}

.project-picker-options.open,
.suite-menu.suite-dropdown-menu.project-picker-options.open {
  display: flex;
}

.project-picker-options .project-option {
  border-color: transparent;
  border-radius: var(--suite-shell-project-option-inner-radius);
  background: transparent;
  box-shadow: none;
}

.project-picker-options .project-option:hover,
.project-picker-options .project-option.active {
  border-color: transparent;
  background: var(--primary-soft);
}

.empty-copy.compact {
  padding: var(--suite-shared-padding-7px-8px, 7px 8px);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 10px;
  padding: 14px;
}

.platform-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 14px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-22px, 22px);
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.platform-strip div {
  min-height: 94px;
  padding: 14px;
  background: var(--surface);
}

.platform-strip span {
  display: block;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  text-transform: uppercase;
}

.platform-strip strong {
  display: block;
  margin-top: 8px;
  font-size: var(--suite-type-title);
}

.platform-strip small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.module-tile,
.project-option,
.rule-item,
.activity-item,
.fact,
.endpoint-list div {
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-16px, 16px);
  background: var(--surface-strong);
}

.module-tile {
  min-height: 128px;
  padding: 13px;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.module-tile:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-1px);
}

.module-tile.locked {
  cursor: not-allowed;
  opacity: 0.72;
}

.module-tile.locked:hover {
  border-color: var(--line);
  background: var(--surface-strong);
  transform: none;
}

.module-tile strong,
.empty-state strong {
  display: block;
  margin-top: 9px;
  font-size: var(--suite-type-body);
}

.module-tile small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.summary-list,
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.summary-list.one-col {
  grid-template-columns: 1fr;
}

.facts-grid.compact {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.fact {
  padding: 11px 12px;
  min-width: 0;
}

.fact strong {
  display: block;
  margin-top: 6px;
  font-size: var(--suite-type-body);
  overflow-wrap: break-word;
  word-break: normal;
}

.account-center-section-heading h2,
.account-center-detail-section h3 {
  margin: 0;
  color: var(--text);
}

.account-center-section-heading p,
.account-center-detail-help {
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-body);
  line-height: 1.55;
}

.account-center-route-layout {
  --suite-route-function-inline-size: clamp(250px, 26%, 300px);
}

.account-center-navigation-panel,
.account-center-content-panel {
  min-height: 0;
}

.account-center-navigation-region {
  padding: 4px;
}

.account-center-nav {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}

.account-center-nav-primary {
  display: grid;
  gap: 6px;
}

.account-center-nav-item {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  border-radius: var(--suite-shared-radius-control, 12px);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.account-center-nav-item:hover {
  background: color-mix(in srgb, var(--primary-soft) 55%, transparent);
}

.account-center-nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.account-center-nav-item.active {
  background: var(--primary-soft);
  color: var(--primary);
}

.account-center-nav-item > span,
.account-center-feature-list > li > span,
.account-center-device-list > li > span,
.account-center-workspace-row > span,
.account-center-security-note > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.account-center-nav-item svg,
.account-center-feature-list svg,
.account-center-device-list svg,
.account-center-workspace-row svg,
.account-center-security-note svg {
  width: 20px;
  height: 20px;
}

.account-center-nav-item strong {
  min-width: 0;
  font-size: var(--suite-type-body);
  font-weight: 800;
}

.account-center-nav-troubleshooting {
  color: var(--primary);
}

.account-center-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 4px 6px;
  overflow: auto;
}

.account-center-section-heading {
  display: grid;
  gap: 6px;
}

.account-center-section-heading h2 {
  font-size: var(--suite-type-title);
  line-height: 1.25;
}

.account-center-profile-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 0 18px;
  border-bottom: 1px solid var(--line);
}

.account-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
  background: var(--primary-soft);
  font-weight: 900;
}

.account-center-profile-avatar {
  width: 64px;
  height: 64px;
  font-size: 1.15rem;
}

.account-center-profile-summary > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.account-center-profile-summary strong {
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-center-profile-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-center-detail-section {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.account-center-detail-section h3 {
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.account-center-info-list {
  min-width: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.account-center-info-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1.7fr) minmax(140px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 52px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
}

.account-center-info-row dt,
.account-center-info-row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.account-center-info-row dt {
  color: var(--muted);
  font-size: var(--suite-type-body);
  font-weight: 700;
}

.account-center-info-row dd {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 750;
}

.account-center-info-row > span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-style: normal;
  text-align: end;
}

.account-center-info-list.technical .account-center-info-row dd {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem;
}

.account-center-workspace-list.suite-ui-components-data-list,
.account-center-feature-list.suite-ui-components-data-list,
.account-center-device-list.suite-ui-components-data-list {
  width: 100%;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-center-workspace-row.suite-ui-components-data-row,
.account-center-feature-list > .suite-ui-components-data-row,
.account-center-device-list > .suite-ui-components-data-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
}

.account-center-workspace-row.active {
  color: var(--primary);
}

.account-center-workspace-row > div,
.account-center-feature-list > li > div,
.account-center-device-list > li > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.account-center-workspace-row strong,
.account-center-feature-list strong,
.account-center-device-list strong {
  color: var(--text);
  font-size: var(--suite-type-body);
}

.account-center-workspace-row small,
.account-center-feature-list small,
.account-center-device-list small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.account-center-workspace-row em,
.account-center-device-list em {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-style: normal;
}

.account-center-sso-method-list .account-center-sso-link-control {
  min-width: 180px;
}

.account-center-sso-method-list .account-center-sso-link-control > div,
.account-center-sso-method-list .account-center-sso-link-control iframe {
  max-width: 100%;
}

.account-center-identity-binding-control {
  min-width: 220px;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.account-center-identity-binding-control > small,
.account-center-identity-binding-message {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.account-center-identity-binding-message {
  margin: 10px 0 0;
}

.account-center-feature-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.account-center-feature-list > li {
  grid-template-columns: 26px minmax(0, 1fr);
}

.account-center-security-note {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: var(--primary);
}

.account-center-security-note.attention {
  color: var(--warning, #9a6700);
}

.account-center-security-note > div {
  display: grid;
  gap: 4px;
}

.account-center-security-note strong {
  color: var(--text);
}

.account-center-security-note small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.account-center-section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.account-center-section-actions > small {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.account-center-language-control {
  width: min(100%, 440px);
}

.account-center-language-control .suite-segmented-option {
  min-width: 0;
  flex: 1 1 0;
}

.account-center-empty {
  margin: 0;
  padding: 24px 8px;
  color: var(--muted);
  font-size: var(--suite-type-body);
  text-align: center;
}

@media (max-width: 900px) {
  .account-center-info-row {
    grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
    gap: 8px 14px;
  }

  .account-center-info-row > span {
    grid-column: 2;
    text-align: start;
  }
}

@media (max-width: 760px) {
  .account-center-route-layout {
    --suite-route-function-block-size: 110px;
    --suite-route-function-max-block-size: 110px;
  }

  .suite-route-layout.account-center-route-layout
    > [data-suite-route-region='function']
    > .account-center-navigation-region {
    padding: 4px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .account-center-nav {
    min-height: 0;
    width: max-content;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
  }

  .account-center-nav-primary {
    display: flex;
    gap: 6px;
  }

  .account-center-nav-item {
    width: auto;
    min-width: max-content;
  }

  .account-center-content {
    padding: 4px 6px;
  }
}

@media (max-width: 680px) {
  .account-center-feature-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-center-device-list > li,
  .account-center-workspace-row {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .account-center-device-list em,
  .account-center-workspace-row em {
    grid-column: 2;
  }
}

.account-registration-panel {
  display: grid;
  gap: 14px;
}

.suite-main-panel.account-registration-panel {
  padding: 18px 20px;
}

.account-registration-head {
  align-items: start;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

.account-registration-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.account-registration-head small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.5;
}

.account-registration-form {
  display: grid;
  gap: 14px;
}

.account-registration-summary {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.account-registration-summary p {
  margin: 0;
  max-width: 920px;
  color: var(--muted);
  font-size: var(--suite-type-body);
  line-height: 1.55;
}

.account-registration-sso {
  display: grid;
  gap: 8px;
}

.account-registration-sso .command {
  width: 100%;
  justify-content: center;
  min-height: var(--suite-control-height, 30px);
}

.account-registration-sso small,
.account-registration-later {
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.5;
}

.account-registration-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-registration-panel .account-registration-fields,
.account-registration-fields.quick {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.account-registration-field {
  min-width: 0;
  padding: 0;
}

.account-registration-field.invalid .suite-field-control,
.account-registration-field.invalid .suite-form-textarea {
  border-color: color-mix(in srgb, var(--danger, #c94747) 62%, var(--line));
  background: color-mix(in srgb, var(--danger, #c94747) 8%, var(--surface));
  box-shadow: var(--suite-form-invalid-ring);
}

.account-registration-field.full,
.account-registration-scopes {
  grid-column: 1 / -1;
}

.account-registration-scopes {
  display: grid;
  gap: 8px;
}

.account-registration-scope-head,
.account-registration-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-registration-scope-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.account-registration-actions {
  padding-top: 2px;
}

.account-registration-actions > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.account-registration-message {
  min-width: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.5;
}

.account-registration-message.invalid {
  color: var(--danger, #c94747);
  font-weight: 800;
}

@media (max-width: 860px) {
  .account-registration-fields,
  .account-registration-scope-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-registration-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .account-registration-actions > div {
    justify-content: flex-start;
  }
}

.permission-admin-page {
  --permission-admin-main-container-gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px)));
  --permission-admin-main-container-content-gap: var(--suite-main-container-content-gap, var(--suite-theme-card-content-gap, var(--suite-theme-card-gap, 12px)));
  --permission-admin-control-gap: var(--suite-forms-gap, var(--suite-form-row-gap, 8px));
  --permission-admin-compact-gap: var(--suite-form-row-gap, 4px);
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--permission-admin-main-container-gap);
}

.content.permission-admin-content {
  overflow: visible;
}

.permission-admin-route-workbench {
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.permission-admin-route-workbench > .permission-admin-route-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.permission-admin-route-body > .permission-admin-page {
  height: 100%;
}

.permission-admin-workbench {
  display: grid;
  gap: var(--permission-admin-main-container-gap);
  padding: 0;
  align-content: start;
}

.permission-admin-account-panel,
.permission-admin-scope-panel,
.permission-admin-members-panel {
  display: grid;
  gap: var(--permission-admin-main-container-content-gap);
  align-content: start;
}

.permission-admin-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--permission-admin-main-container-content-gap);
  align-items: start;
}

.permission-admin-account-panel > .permission-admin-toolbar {
  margin-block-end: max(var(--permission-admin-control-gap), 10px);
}

.permission-admin-context {
  min-width: 0;
  display: grid;
  gap: var(--permission-admin-compact-gap);
}

.permission-admin-context strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-title);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-primary-inline {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: max-content minmax(180px, 320px);
  gap: var(--permission-admin-control-gap);
  align-items: center;
}

.permission-admin-primary-inline > span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  white-space: nowrap;
}

.permission-admin-primary-inline .permission-admin-owner-value {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 7px 12px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-pill, 999px);
  background: var(--surface-muted);
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-context small,
.permission-updated-at,
.permission-code-toggle small,
.permission-admin-list-meta {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.permission-admin-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 142px 142px;
  gap: var(--permission-admin-control-gap);
}

.permission-admin-search,
.permission-admin-filter,
.permission-admin-member-picker {
  width: 100%;
}

.permission-admin-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--permission-admin-control-gap);
  flex-wrap: wrap;
}

.permission-admin-viewer-bar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--permission-admin-main-container-content-gap);
  align-items: center;
  padding: var(--suite-shared-padding-10px, 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-strong);
}

.permission-admin-viewer-copy {
  min-width: 0;
  display: grid;
  gap: var(--permission-admin-compact-gap);
}

.permission-admin-viewer-copy span,
.permission-admin-viewer-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-viewer-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-viewer-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--permission-admin-control-gap);
  flex-wrap: wrap;
}

.permission-admin-view-mode {
  width: fit-content;
}

.permission-admin-view-scope {
  width: min(260px, 40vw);
}

.permission-admin-view-pill {
  min-width: max-content;
}

.permission-admin-unified {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--permission-admin-main-container-gap);
  overflow: hidden;
}

.permission-admin-full-panel {
  min-height: 0;
  padding: var(--suite-main-panel-padding, 18px);
  overflow: auto;
}

.permission-admin-tabs {
  width: fit-content;
}

.permission-admin-pane {
  min-width: 0;
  display: grid;
  gap: var(--permission-admin-main-container-content-gap);
}

.permission-admin-assignment-grid {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 34%) minmax(0, 1fr);
  gap: var(--permission-admin-main-container-gap);
  align-items: stretch;
  overflow: visible;
}

.permission-admin-scope-panel,
.permission-admin-members-panel {
  min-width: 0;
  min-height: 0;
  height: var(--suite-workbench-panel-fill-height, 100%);
  overflow: hidden;
}

.permission-admin-scope-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.permission-admin-org-chart-panel {
  padding: 0;
}

.permission-admin-org-chart-heading {
  min-height: 62px;
  padding: 0 var(--suite-space-4, 16px);
  border-bottom: 1px solid var(--line);
}

.permission-admin-org-chart-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  cursor: grab;
  touch-action: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.permission-admin-org-chart-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.permission-admin-org-chart-viewport.is-panning {
  cursor: grabbing;
  user-select: none;
}

.permission-admin-members-panel {
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
}

.permission-admin-members-toolbar {
  min-height: 62px;
  padding: 0 var(--suite-space-4, 16px);
  border-bottom: 1px solid var(--line);
}

.permission-admin-feature-tabs {
  width: max-content;
}

.permission-admin-feature-tab {
  min-width: 64px;
}

.permission-admin-feature-member-view {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.permission-admin-feature-member-summary {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.permission-admin-feature-member-summary strong {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.permission-admin-feature-member-summary small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
}

.permission-admin-feature-member-list {
  min-width: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.permission-admin-feature-member-row {
  min-width: 0;
  min-height: var(--suite-shared-height-54px, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border-bottom: 1px solid var(--line);
}

.permission-admin-feature-member-status {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
  white-space: nowrap;
}

.permission-admin-feature-member-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.permission-admin-feature-admin-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 720px) {
  .permission-admin-feature-admin-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.permission-admin-unified-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--permission-admin-main-container-gap);
  align-items: start;
}

.permission-admin-scope-tree-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--permission-admin-main-container-content-gap);
  align-self: stretch;
}

.permission-admin-panel-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--permission-admin-main-container-content-gap);
  align-items: center;
}

.permission-admin-panel-title-stack {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.permission-admin-panel-title-stack > small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-panel-title-stack .suite-panel-title-text {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-title);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-panel-head .permission-admin-actions {
  justify-content: flex-end;
}

.permission-admin-scope-tree-list {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid transparent;
  border-radius: var(--suite-shared-radius-8px, 8px);
}

.permission-admin-scope-tree-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.permission-admin-scope-tree-list.root-drop-target {
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 34%, transparent);
}

.permission-admin-scope-tree-row {
  width: 100%;
  min-width: 0;
  min-height: var(--suite-shared-height-36px, 36px);
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 6px;
  padding: var(--suite-shared-padding-4px-8px, 4px 8px);
  padding-left: calc(8px + (var(--permission-scope-depth, 0) * 18px));
  border: 1px solid transparent;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.permission-admin-scope-tree-row.scope-node {
  grid-template-columns: 16px auto minmax(0, 1fr) auto 22px;
}

.permission-admin-scope-tree-row.scope-node .permission-admin-scope-tree-line {
  display: none;
}

.permission-admin-scope-tree-row[draggable="true"] {
  cursor: grab;
}

.permission-admin-scope-tree-row.dragging {
  opacity: .62;
}

.permission-admin-scope-tree-row.drop-target {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 68%, var(--surface));
}

.permission-admin-scope-tree-row:hover,
.permission-admin-scope-tree-row.active {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface));
}

.permission-admin-scope-tree-row.active {
  box-shadow: var(--permission-admin-scope-active-indicator);
}

.permission-admin-scope-tree-row.role-node {
  min-height: var(--suite-shared-height-32px, 32px);
  grid-template-columns: var(--permission-admin-scope-role-grid-template);
  color: var(--muted);
}

.permission-admin-scope-tree-row.role-node.active,
.permission-admin-scope-tree-row.role-node:hover {
  color: var(--text);
}

.permission-admin-scope-collapse-toggle {
  width: 16px;
  min-width: 16px;
  height: var(--suite-shared-height-22px, 22px);
  min-height: var(--suite-shared-height-22px, 22px);
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-color: transparent;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  line-height: 1;
}

.permission-admin-scope-collapse-toggle:hover,
.permission-admin-scope-collapse-toggle:active,
.permission-admin-scope-collapse-toggle:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.permission-admin-scope-collapse-toggle span::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transform: rotate(90deg);
  transition: transform .16s ease;
}

.permission-admin-scope-collapse-toggle.collapsed span::before {
  transform: rotate(0deg);
}

.permission-admin-scope-collapse-toggle:disabled {
  opacity: .4;
}

.permission-admin-scope-tree-remove {
  width: var(--suite-shared-width-18px, 18px);
  min-width: var(--suite-shared-width-18px, 18px);
  height: var(--suite-shared-height-18px, 18px);
  min-height: var(--suite-shared-height-18px, 18px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  opacity: .58;
}

.permission-admin-scope-tree-row:hover .permission-admin-scope-tree-remove,
.permission-admin-scope-tree-row.active .permission-admin-scope-tree-remove,
.permission-admin-scope-tree-remove:focus {
  opacity: 1;
}

.permission-admin-scope-tree-line {
  width: 14px;
  height: 20px;
  position: relative;
}

.permission-admin-scope-tree-line::before,
.permission-admin-scope-tree-line::after {
  content: '';
  position: absolute;
  background: color-mix(in srgb, var(--primary) 42%, var(--line));
}

.permission-admin-scope-tree-line::before {
  left: 6px;
  top: -8px;
  bottom: -8px;
  width: 1px;
}

.permission-admin-scope-tree-line::after {
  left: 6px;
  top: 10px;
  width: 9px;
  height: 1px;
}

.permission-admin-scope-tree-row[style*="--permission-scope-depth:0"] .permission-admin-scope-tree-line::before {
  display: none;
}

.permission-admin-scope-tree-row[style*="--permission-scope-depth:0"] .permission-admin-scope-tree-line::after {
  display: none;
}

.permission-admin-scope-tree-level {
  min-width: var(--suite-shared-width-16px, 16px);
  padding: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.permission-admin-scope-tree-level.role {
  border-color: var(--permission-admin-scope-role-border);
  background: var(--permission-admin-scope-role-background);
}

.permission-admin-scope-tree-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-tree-name.role-name {
  font-weight: 760;
}

.permission-admin-scope-tree-name-input {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 850;
}

.permission-admin-scope-tree-name-input:focus {
  border-bottom-color: var(--primary);
  box-shadow: none;
  outline: 0;
}

.permission-admin-scope-tree-meta,
.permission-admin-scope-table-count {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

.permission-admin-feature-workspace {
  min-width: 0;
  min-height: 0;
  padding: var(--suite-space-4, 16px);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--permission-admin-main-container-content-gap);
  overflow: auto;
}

.permission-admin-focus-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr .7fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-sub-panel);
  background: var(--line);
}

.permission-admin-focus-summary > div {
  min-width: 0;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  align-content: center;
  background: var(--surface);
}

.permission-admin-focus-summary span,
.permission-admin-focus-summary small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 650;
}

.permission-admin-focus-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-detail-panel {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-self: start;
}

.permission-admin-scope-detail-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: var(--suite-shared-padding-10px, 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-strong);
}

.permission-admin-scope-detail-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.permission-admin-scope-detail-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-heading);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-detail-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.permission-admin-scope-detail-columns {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.permission-admin-scope-member-sheet,
.permission-admin-scope-compact-sheet {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.permission-admin-member-table .suite-data-header-row {
  position: sticky;
  top: 0;
  z-index: 1;
}

.permission-admin-member-table-grid,
.permission-admin-scope-member-grid {
  min-width: max(100%, var(--permission-admin-member-grid-min-width));
}

.permission-admin-scope-child-grid,
.permission-admin-scope-role-grid {
  min-width: 520px;
}

.permission-admin-member-table-row,
.permission-admin-scope-member-head,
.permission-admin-scope-member-row {
  --suite-data-grid-template: var(--permission-admin-member-grid-template);
  min-height: var(--suite-shared-height-44px, 44px) !important;
  display: grid;
  grid-template-columns: var(--suite-data-grid-template);
  align-items: stretch;
}

.permission-admin-scope-child-head,
.permission-admin-scope-child-row {
  min-height: var(--suite-shared-height-40px, 40px) !important;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 90px 90px 110px;
  align-items: stretch;
}

.permission-admin-scope-role-head,
.permission-admin-scope-role-row {
  min-height: var(--suite-shared-height-40px, 40px) !important;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, .8fr) 90px;
  align-items: stretch;
}

.permission-admin-member-table-row > .suite-data-cell,
.permission-admin-scope-member-head > .suite-data-cell,
.permission-admin-scope-member-row > span,
.permission-admin-scope-child-head > span,
.permission-admin-scope-child-row > span,
.permission-admin-scope-child-row > button,
.permission-admin-scope-role-head > span,
.permission-admin-scope-role-row > span,
.permission-admin-scope-role-row > strong {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: var(--suite-shared-padding-6px-10px, 6px 10px);
  border-right: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-member-head > span:last-child,
.permission-admin-scope-member-row > span:last-child,
.permission-admin-scope-child-head > span:last-child,
.permission-admin-scope-child-row > span:last-child,
.permission-admin-scope-role-head > span:last-child,
.permission-admin-scope-role-row > span:last-child {
  border-right: 0;
}

.permission-admin-scope-member-row .permission-member-identity {
  width: 100%;
  padding: 0;
}

.permission-admin-owner-badge {
  min-height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  display: inline-flex;
  vertical-align: middle;
  font-size: var(--suite-type-caption);
  font-style: normal;
}

.permission-admin-member-table-row[draggable="true"] {
  cursor: grab;
}

.permission-admin-member-table-row.dragging {
  opacity: .62;
}

.permission-admin-member-table-row.is-selected {
  background: color-mix(in srgb, var(--primary-soft) 16%, var(--surface));
}

.permission-admin-member-select-cell {
  justify-content: center;
  padding-inline: 6px !important;
}

.permission-admin-member-select-control {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.permission-admin-member-select-control:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.permission-admin-add-member-dialog {
  width: min(460px, calc(100vw - 32px));
}

.permission-admin-add-member-form {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.permission-admin-add-member-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px 12px;
}

.permission-member-identity-editable {
  grid-template-columns: var(--suite-shared-width-34px, 34px) minmax(0, 1fr);
}

.permission-member-identity-editable .permission-member-identity-fields {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.permission-admin-member-inline-input {
  width: 100%;
  min-width: 0;
  height: var(--suite-shared-height-28px, 28px);
}

.permission-admin-member-table .permission-seat-toggle {
  width: 100%;
}

.permission-admin-member-role-label {
  width: 100%;
  min-width: 0;
  min-height: var(--suite-shared-height-32px, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.permission-admin-scope-child-select {
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-weight: 850;
}

.permission-admin-overview-strip {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--line);
}

.permission-admin-overview-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: var(--suite-shared-padding-9px-10px, 9px 10px);
  background: var(--surface-strong);
}

.permission-admin-overview-item span,
.permission-admin-overview-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-overview-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-hierarchy,
.permission-admin-scope-layout {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.permission-admin-scope-layout,
.permission-admin-layer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-admin-layer {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-10px, 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-strong);
}

.permission-admin-layer.root {
  background: color-mix(in srgb, var(--primary-soft) 48%, var(--surface));
}

.permission-admin-account-admin-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(260px, 1.35fr);
  gap: 1px;
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--line);
}

.permission-admin-account-admin-item {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: var(--suite-shared-padding-10px, 10px);
  background: var(--surface);
}

.permission-admin-account-admin-item span,
.permission-admin-account-admin-item small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-account-admin-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-account-admin-primary {
  cursor: default;
}

.permission-admin-layer-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.permission-admin-layer-head > span {
  min-width: var(--suite-shared-width-28px, 28px);
  height: var(--suite-shared-height-28px, 28px);
  display: inline-grid;
  place-items: center;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--primary);
  background: var(--surface);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.permission-admin-layer-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.permission-admin-layer-head strong {
  min-width: 0;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  overflow-wrap: break-word;
}

.permission-admin-layer-head small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.permission-admin-value-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--line);
}

.permission-admin-value-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-admin-value-row {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: var(--suite-shared-padding-9px-10px, 9px 10px);
  background: var(--surface);
}

.permission-admin-value-row span,
.permission-admin-value-row small {
  min-width: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.4;
}

.permission-admin-value-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-code-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-admin-code-stack .status-pill {
  gap: 6px;
  min-height: var(--suite-status-height, var(--suite-control-height));
  border-radius: var(--suite-shared-radius-8px, 8px);
}

.permission-admin-code-stack .status-pill small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.permission-admin-mini-grid {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.permission-admin-mini-grid .suite-data-row {
  min-width: max-content;
  display: grid;
  align-items: center;
  grid-template-columns: var(--suite-data-grid-template);
}

.permission-admin-mini-grid .suite-data-row > span {
  min-width: 0;
  overflow: hidden;
  padding: var(--suite-data-rows-padding, var(--suite-shared-padding-8px-10px, 8px 10px));
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-mini-grid .suite-data-header-row > span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  background: var(--surface-soft);
}

.permission-admin-mini-grid .suite-data-empty {
  padding: var(--suite-shared-padding-10px, 10px);
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.permission-admin-mini-grid .suite-data-body-row + .suite-data-body-row {
  border-top: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
}

.permission-admin-seat-head,
.permission-admin-seat-row {
  --suite-data-grid-template: minmax(160px, 1fr) 130px 140px;
  grid-template-columns: minmax(160px, 1fr) 130px 140px;
}

.permission-admin-scope-head,
.permission-admin-scope-row {
  --suite-data-grid-template: minmax(180px, 1fr) 120px 120px 120px minmax(160px, 1fr);
  grid-template-columns: minmax(180px, 1fr) 120px 120px 120px minmax(160px, 1fr);
}

.permission-admin-manager-head,
.permission-admin-scope-manager-row {
  --suite-data-grid-template: minmax(210px, 1fr) minmax(260px, 1.2fr) 120px minmax(220px, 1fr);
  grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.2fr) 120px minmax(220px, 1fr);
}

.permission-admin-manager-row {
  --suite-data-grid-template: minmax(220px, 1.1fr) 130px 150px minmax(180px, 0.9fr) 96px;
  grid-template-columns: minmax(220px, 1.1fr) 130px 150px minmax(180px, 0.9fr) 96px;
}

.permission-admin-grant-head,
.permission-admin-grant-row {
  --suite-data-grid-template: minmax(160px, 1fr) minmax(160px, 1fr) 120px 120px;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) 120px 120px;
}

.permission-admin-seat-row,
.permission-admin-scope-row,
.permission-admin-manager-row,
.permission-admin-scope-manager-row,
.permission-admin-grant-row {
  min-height: var(--suite-data-rows-height, var(--suite-control-height));
}

.permission-admin-self-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-strong);
}

.permission-admin-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.permission-admin-seatbar {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--line);
}

.permission-admin-seatbar span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--suite-shared-padding-9px-10px, 9px 10px);
  color: var(--muted);
  background: var(--surface-strong);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.permission-admin-seatbar strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-manager-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.permission-admin-manager-note {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-manager-sheet {
  min-width: 0;
  overflow: auto;
}

.permission-admin-layer-toolbar {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.permission-admin-scope-editor-sheet {
  --suite-data-grid-template: minmax(300px, 360px) minmax(150px, 190px) minmax(90px, 110px) minmax(110px, 130px) minmax(150px, 190px) minmax(170px, 240px) minmax(150px, 190px);
  min-width: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.permission-admin-scope-editor-head,
.permission-admin-scope-editor-row {
  width: max-content;
  min-width: var(--suite-shared-min-width-1120px, 1120px);
  min-height: var(--suite-shared-height-44px, 44px) !important;
  height: var(--suite-shared-height-44px, 44px) !important;
  display: grid;
  grid-template-columns: var(--suite-data-grid-template);
  align-items: stretch;
  gap: 0;
}

.permission-admin-scope-editor-row {
  min-height: var(--suite-shared-height-44px, 44px) !important;
  background: var(--surface);
}

.permission-admin-scope-editor-row[data-scope-has-children="true"] > span {
  background: var(--surface-soft);
}

.permission-admin-scope-editor-row[data-scope-depth="1"] > span:first-child,
.permission-admin-scope-editor-row[data-scope-depth="2"] > span:first-child,
.permission-admin-scope-editor-row[data-scope-depth="3"] > span:first-child,
.permission-admin-scope-editor-row[data-scope-depth="4"] > span:first-child {
  box-shadow: var(--permission-admin-scope-depth-indicator);
}

.permission-admin-scope-editor-head > span,
.permission-admin-scope-editor-row > span {
  min-width: 0;
  height: 100% !important;
  min-height: var(--suite-shared-height-44px, 44px) !important;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: var(--suite-shared-padding-4px-8px, 4px 8px);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.permission-admin-scope-editor-head > span:last-child,
.permission-admin-scope-editor-row > span:last-child {
  border-right: 0;
}

.permission-admin-scope-editor-head > span {
  min-height: var(--suite-tables-height, var(--suite-control-height)) !important;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  background: var(--surface-strong);
}

.permission-admin-scope-name-cell {
  gap: 7px;
  padding-left: calc(8px + (var(--permission-scope-depth, 0) * 22px)) !important;
}

.permission-admin-scope-tree-marker {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  height: 30px;
}

.permission-admin-scope-tree-marker::before,
.permission-admin-scope-tree-marker::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--primary) 50%, var(--line));
}

.permission-admin-scope-tree-marker::before {
  left: 7px;
  top: -8px;
  bottom: -8px;
  width: 1px;
}

.permission-admin-scope-tree-marker::after {
  left: 7px;
  top: 15px;
  width: 11px;
  height: 1px;
}

.permission-admin-scope-editor-row[data-scope-depth="0"] .permission-admin-scope-tree-marker::before {
  left: 4px;
  top: 12px;
  bottom: auto;
  width: var(--permission-admin-scope-root-marker-size);
  height: var(--permission-admin-scope-root-marker-size);
  border-radius: var(--permission-admin-scope-root-marker-radius);
}

.permission-admin-scope-editor-row[data-scope-depth="0"] .permission-admin-scope-tree-marker::after {
  display: none;
}

.permission-admin-scope-level-pill {
  flex: 0 0 auto;
  min-height: var(--suite-shared-height-22px, 22px);
  padding: var(--suite-shared-padding-2px-6px, 2px 6px);
  font-variant-numeric: tabular-nums;
}

.permission-admin-scope-name-cell .permission-admin-scope-name-input {
  flex: 1 1 auto;
  min-width: var(--permission-admin-scope-name-input-min-width);
}

.permission-admin-scope-controls-cell {
  min-width: 0;
}

.permission-admin-scope-controls-stack {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.permission-admin-scope-permission-stack {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.permission-admin-responsibility-permission-stack {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--suite-space-3, 12px);
}

.permission-admin-responsibility-policy-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.55;
}

.permission-admin-responsibility-l2-list,
.permission-admin-responsibility-l3-list {
  min-width: 0;
  display: grid;
  gap: var(--suite-space-2, 8px);
}

.permission-admin-responsibility-l2 {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-sub-panel);
  background: var(--surface);
}

.permission-admin-responsibility-l2-head.suite-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-2, 8px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.permission-admin-responsibility-l2-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--suite-space-2, 8px);
}

.permission-admin-responsibility-l2-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-responsibility-l2-indicator {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: var(--line-strong, var(--line));
}

.permission-admin-responsibility-l2.is-enabled .permission-admin-responsibility-l2-indicator {
  background: var(--primary);
}

.permission-admin-responsibility-l2.is-disabled .permission-admin-responsibility-l2-head {
  color: var(--muted);
}

.permission-admin-responsibility-l2-body {
  padding: 0 var(--suite-space-3, 12px) var(--suite-space-3, 12px);
}

.permission-admin-responsibility-l3-row {
  min-width: 0;
  min-height: var(--suite-shared-height-40px, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--suite-space-3, 12px);
  padding-top: var(--suite-space-2, 8px);
  border-top: 1px solid var(--line);
}

.permission-admin-responsibility-l3-row > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.permission-admin-responsibility-l3-row strong,
.permission-admin-responsibility-l3-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-responsibility-l3-row strong {
  color: var(--text);
  font-size: var(--suite-type-body);
}

.permission-admin-responsibility-l3-row small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.permission-admin-responsibility-l3-row.is-disabled strong {
  color: var(--muted);
}

.permission-admin-responsibility-level {
  width: 116px;
  flex: 0 0 116px;
}

.permission-admin-scope-permission-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.permission-admin-scope-permission-head strong,
.permission-admin-scope-permission-head span {
  min-width: 0;
  overflow: hidden;
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-permission-head span {
  color: var(--muted);
}

.permission-admin-permission-domain {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.permission-admin-permission-domain-head,
.permission-admin-permission-group-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.permission-admin-permission-domain-head strong {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.permission-admin-permission-domain-head span,
.permission-admin-permission-group-head span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-variant-numeric: tabular-nums;
}

.permission-admin-permission-domain-groups {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.permission-admin-permission-group {
  --suite-disclosure-border-width: 0px;
  --suite-disclosure-border-top-width: 0px;
  --suite-disclosure-radius: 0px;
  --suite-disclosure-surface-bg: transparent;
  --suite-disclosure-header-bg: transparent;
  --suite-disclosure-height: var(--suite-shared-height-24px, 24px);
  min-width: 0;
  background: transparent;
}

.permission-admin-permission-group-head.suite-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.permission-admin-permission-group-head strong {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.permission-admin-permission-group-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.permission-admin-permission-group-chevron {
  width: var(--suite-icon-size-14px, 14px);
  height: var(--suite-icon-size-14px, 14px);
  display: grid;
  place-items: center;
  color: var(--muted);
}

.permission-admin-permission-group-chevron .ui-icon,
.permission-admin-permission-group-chevron svg {
  width: var(--suite-icon-size-14px, 14px);
  height: var(--suite-icon-size-14px, 14px);
}

.permission-admin-permission-group-body {
  padding-top: 6px;
}

.permission-admin-permission-group-inner {
  min-width: 0;
}

.permission-scope-code-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.permission-admin-members-panel .permission-scope-code-grid {
  grid-template-columns: minmax(0, 1fr);
}

.permission-scope-code-toggle {
  min-height: var(--suite-shared-height-30px, 30px);
  padding: var(--suite-shared-padding-5px-8px, 5px 8px);
}

.permission-admin-scope-permission-summary {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.permission-admin-scope-permission-summary strong {
  min-width: 0;
  overflow: hidden;
  font-size: var(--suite-type-caption);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-permission-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.permission-admin-scope-permission-backdrop {
  z-index: 420;
}

.permission-admin-scope-permission-dialog {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}

.permission-admin-scope-permission-dialog-head {
  margin-bottom: 14px;
}

.permission-admin-scope-permission-dialog .permission-scope-code-grid {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.permission-admin-scope-name-input,
.permission-admin-scope-parent-picker,
.permission-admin-scope-seat-input,
.permission-admin-scope-manager-title-picker,
.permission-admin-scope-manager-candidate {
  width: 100%;
}

.permission-admin-scope-seat-limit-readonly {
  width: 100%;
  min-height: var(--suite-shared-height-30px, 30px);
  display: flex;
  align-items: center;
  padding: var(--suite-shared-padding-4px-8px, 4px 8px);
}

.permission-admin-scope-seat-limit-readonly strong,
.permission-admin-scope-seat-limit-readonly small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-seat-limit-readonly small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.permission-admin-scope-seat-cell {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.permission-admin-scope-seat-cell strong,
.permission-admin-scope-seat-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-seat-cell small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.permission-admin-scope-actions-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.permission-admin-scope-summary-list,
.permission-admin-manager-list {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.permission-admin-scope-summary-row,
.permission-admin-scope-manager-row {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface);
}

.permission-admin-scope-summary-row {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr);
  align-items: center;
}

.permission-admin-scope-summary-main,
.permission-admin-scope-summary-meta,
.permission-admin-scope-manager-main,
.permission-admin-scope-manager-controls,
.permission-admin-scope-manager-field {
  min-width: 0;
}

.permission-admin-scope-summary-main {
  display: grid;
  gap: 4px;
}

.permission-admin-scope-summary-main strong,
.permission-admin-scope-summary-main small,
.permission-admin-scope-summary-meta strong,
.permission-admin-scope-summary-meta small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-scope-summary-main strong,
.permission-admin-scope-summary-meta strong {
  color: var(--text);
  font-weight: 850;
}

.permission-admin-scope-summary-main small,
.permission-admin-scope-summary-meta small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.permission-admin-scope-summary-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.permission-admin-scope-summary-meta span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.permission-admin-scope-manager-row {
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr);
  align-items: center;
}

.permission-admin-scope-manager-main {
  display: grid;
  gap: 8px;
}

.permission-admin-scope-manager-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.permission-admin-scope-manager-field {
  display: grid;
  gap: 5px;
}

.permission-admin-scope-manager-field > span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.permission-admin-manager-grid {
  min-width: var(--suite-shared-min-width-860px, 860px);
}

.permission-admin-manager-head,
.permission-admin-manager-row,
.permission-admin-scope-manager-row {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-items: center;
  padding: var(--suite-shared-padding-9px-12px, 9px 12px);
}

.permission-admin-manager-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.permission-admin-manager-row {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.permission-admin-scope-manager-row {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.permission-admin-manager-row:last-child,
.permission-admin-scope-manager-row:last-child {
  border-bottom: 0;
}

.permission-manager-member {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.permission-manager-member strong,
.permission-manager-member small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-manager-member strong {
  color: var(--text);
  font-weight: 850;
}

.permission-manager-member small {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}

.permission-admin-primary-picker,
.permission-admin-manager-candidate,
.permission-admin-manager-picker,
.permission-admin-manager-scope-picker,
.permission-admin-scope-manager-candidate {
  width: 100%;
}

.permission-admin-manager-chips {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  overflow: hidden;
}

.permission-admin-manager-chip {
  max-width: 160px;
  display: inline-flex;
  gap: 6px;
  flex: 0 1 auto;
}

.permission-admin-manager-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-manager-chip-remove {
  min-width: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
}

.permission-admin-source {
  min-height: var(--suite-shared-height-30px, 30px);
  display: flex;
  align-items: center;
  padding: var(--suite-shared-padding-7px-10px, 7px 10px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)));
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 52%, var(--surface));
  font-size: var(--suite-type-caption);
  font-weight: 800;
  line-height: 1.4;
}

.permission-admin-source.warn {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 30%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}

.permission-admin-member-sheet {
  min-height: 0;
  flex: 0 0 auto;
  overflow: auto;
}

.permission-admin-member-grid {
  min-width: var(--suite-shared-min-width-1460px, 1460px);
}

.permission-admin-member-head,
.permission-admin-member-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) minmax(150px, 0.7fr) 132px 150px 140px minmax(360px, 1.5fr) 120px 160px;
  gap: 10px;
  align-items: center;
}

.permission-admin-member-head {
  min-height: var(--suite-tables-height, var(--suite-control-height));
  padding: var(--suite-shared-padding-9px-12px, 9px 12px);
  border-bottom: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-align: var(--suite-tables-text-align, left);
}

.permission-admin-member-row {
  min-height: var(--suite-data-rows-height, var(--suite-control-height));
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  text-align: var(--suite-data-rows-text-align, left);
}

.permission-admin-member-row:last-child {
  border-bottom: 0;
}

.permission-admin-member-row.current {
  background: color-mix(in srgb, var(--primary-soft) 58%, var(--surface));
}

.permission-member-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--suite-shared-width-34px, 34px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.permission-member-avatar {
  width: var(--suite-shared-width-34px, 34px);
  height: var(--suite-shared-height-34px, 34px);
  display: grid;
  place-items: center;
  border-radius: var(--suite-shared-radius-8px, 8px);
  color: var(--primary);
  background: var(--primary-soft);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.permission-member-identity span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.permission-member-identity strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-member-identity small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-member-scope {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-member-picker {
  min-width: 0;
  height: var(--suite-shared-height-34px, 34px);
}

.permission-seat-toggle {
  position: relative;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: var(--suite-shared-width-34px, 34px) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 850;
}

.permission-seat-toggle .permission-native-control {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.permission-seat-toggle .suite-toggle-pill {
  --suite-toggle-width: var(--suite-shared-width-34px, 34px);
  --suite-toggle-height: var(--suite-icon-size-18px, 18px);
  --suite-toggle-thumb-size: 10px;
}

.permission-seat-toggle.on {
  color: var(--primary);
}

.permission-seat-toggle.blocked {
  opacity: 0.62;
}

.permission-code-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.permission-member-code-cell,
.permission-member-code-grid,
.permission-member-code-summary {
  min-width: 0;
}

.permission-member-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.permission-member-code-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.permission-member-code-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-code-toggle,
.permission-member-code-toggle {
  min-width: 0;
  display: grid;
  grid-template-columns: var(--suite-shared-width-16px, 16px) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: var(--suite-shared-padding-7px-8px, 7px 8px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-strong);
}

.permission-code-toggle.checked,
.permission-member-code-toggle.checked {
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
  background: var(--suite-shared-bg-8-127-91-0-08, rgba(8, 127, 91, 0.08));
}

.permission-code-toggle.required {
  background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface));
}

.permission-code-toggle .suite-checkbox-input,
.permission-member-code-toggle .suite-checkbox-input {
  margin-top: 2px;
}

.permission-code-toggle span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.permission-member-code-toggle span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-code-toggle strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: var(--suite-type-caption);
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-code-toggle small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-devices-cell {
  display: grid;
  grid-template-columns: var(--suite-shared-width-28px, 28px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.permission-devices-cell strong {
  color: var(--text);
  font-weight: 900;
  text-align: center;
}

.permission-updated-at {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-admin-empty {
  padding: var(--suite-shared-padding-18px-12px, 18px 12px);
  color: var(--muted);
  font-size: var(--suite-type-body);
}

.permission-role-pane {
  gap: 12px;
}

.permission-role-intro {
  display: grid;
  gap: 4px;
  padding: var(--suite-shared-padding-12px, 12px);
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-8px, 8px);
  background: var(--surface-strong);
}

.permission-role-intro strong,
.permission-role-summary strong {
  color: var(--text);
  font-size: var(--suite-type-body);
  font-weight: 900;
}

.permission-role-intro small,
.permission-role-intro span,
.permission-role-summary small,
.permission-role-summary span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.45;
}

.permission-role-summary {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.body-copy {
  padding: 14px 14px 0;
}

.block-copy {
  padding-bottom: 14px;
}

.project-list,
.rules-list,
.activity-list {
  max-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
}

.project-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--suite-shared-min-height-44px, 44px);
  padding: var(--suite-shared-padding-10px-12px, 10px 12px);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.project-option strong {
  margin-top: 0;
  font-size: var(--suite-type-body);
  overflow-wrap: break-word;
  word-break: normal;
}

.project-option:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.project-option.active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.project-option.compact {
  min-height: var(--suite-form-height, 30px);
  padding: 0 10px;
}

.project-option span,
.rule-item small,
.activity-item small,
.activity-item time {
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: var(--suite-shared-padding-10px, 10px) 11px;
}

.activity-item strong {
  font-size: var(--suite-type-caption);
}

.activity-item small {
  grid-column: 1 / -1;
}

.activity-item.good {
  border-color: rgba(8, 127, 91, 0.42);
}

.activity-item.warn {
  border-color: rgba(168, 98, 7, 0.45);
}

.activity-item.bad {
  border-color: rgba(180, 35, 24, 0.5);
}

.command-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.endpoint-list {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.endpoint-list div {
  min-height: var(--suite-shared-min-height-40px, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
}

code {
  color: var(--primary);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: var(--suite-type-caption);
}

.rule-item {
  padding: var(--suite-shared-padding-10px, 10px);
}

.rule-item strong {
  display: block;
  font-size: var(--suite-type-caption);
}

.rule-item small {
  display: block;
  margin-top: 6px;
}

.empty-state {
  max-width: 720px;
  padding: 24px;
}

.module-page {
  display: block;
}

.module-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  padding: 18px;
}

.module-hero.denied {
  border-color: rgba(180, 35, 24, 0.3);
  background: var(--surface);
}

.module-hero h2 {
  margin: 8px 0 0;
  font-size: var(--suite-type-title);
  line-height: 1.15;
}

.module-hero p {
  max-width: 760px;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--suite-type-body);
  line-height: 1.6;
}

.module-route-card {
  display: grid;
  gap: 10px;
}

.source-list,
.check-list {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.source-list div,
.check-item {
  min-height: var(--suite-shared-min-height-42px, 42px);
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--suite-shared-border-1px-solid-line, 1px solid var(--line));
  border-radius: var(--suite-shared-radius-16px, 16px);
  padding: var(--suite-shared-padding-10px, 10px) 11px;
  background: var(--surface-strong);
}

.source-list span {
  width: var(--suite-status-dot-size-8px, 8px);
  height: var(--suite-status-dot-size-8px, 8px);
  flex: 0 0 auto;
  border-radius: 99px;
  background: var(--primary);
}

.source-list strong,
.check-item strong {
  font-size: var(--suite-type-caption);
}

.check-item span {
  min-width: 42px;
  border-radius: var(--suite-radius-pill, 999px);
  padding: 3px 7px;
  text-align: center;
  color: var(--success);
  background: rgba(8, 127, 91, 0.12);
  font-size: var(--suite-type-caption);
  font-weight: 900;
}

.check-item.pending span {
  color: var(--warning);
  background: rgba(168, 98, 7, 0.14);
}

.empty-state p {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--suite-type-body);
}

.empty-copy {
  padding: var(--suite-shared-padding-10px, 10px);
}

.busy-badge {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  padding: var(--suite-shared-padding-10px, 10px) 14px;
  border-radius: var(--suite-shared-radius-12px, 12px);
  color: #ffffff;
  background: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 900;
  box-shadow: var(--shadow);
}

.scrollbar-hide {
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1240px) {
  .suite-toolbar.shell-toolbar {
    grid-template-columns: minmax(210px, auto) minmax(190px, 1fr) auto;
  }

  .suite-toolbar.shell-toolbar .toolbar-status {
    max-width: var(--suite-shared-width-34px, 34px);
    padding: 0 11px;
    overflow: hidden;
  }

  .suite-control.toolbar-shared-ui-status {
    max-width: var(--suite-shared-width-34px, 34px);
    padding: 0 11px;
    overflow: hidden;
  }

  .suite-toolbar-button.toolbar-diagnostics strong {
    display: none;
  }

  .suite-toolbar.shell-toolbar .toolbar-status i {
    flex: 0 0 auto;
  }

  .suite-control.toolbar-shared-ui-status strong {
    display: none;
  }

  .shell-body {
    grid-template-columns: calc(min(286px, var(--sidebar-width, 286px)) + var(--suite-shell-sidebar-container-margin-right, 0px)) minmax(0, 1fr);
  }

  .page-grid.two-col {
    grid-template-columns: 1fr;
  }

  .permission-admin-toolbar {
    grid-template-columns: 1fr;
  }

  .permission-admin-assignment-grid {
    grid-template-columns: minmax(320px, 38%) minmax(0, 1fr);
  }

  .permission-admin-actions {
    justify-content: flex-start;
  }

  .permission-admin-layer-grid,
  .permission-admin-scope-layout,
  .permission-admin-unified-layout,
  .permission-admin-scope-detail-columns {
    grid-template-columns: 1fr;
  }

  .permission-admin-scope-detail-head {
    grid-template-columns: 1fr;
  }

  .permission-admin-scope-detail-actions {
    justify-content: flex-start;
  }

  .permission-admin-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-admin-overview-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-admin-scope-summary-row,
  .permission-admin-scope-manager-row,
  .permission-admin-scope-manager-controls {
    grid-template-columns: 1fr;
  }

  .permission-admin-scope-summary-meta {
    grid-template-columns: 1fr;
  }

  .module-grid {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }

  .suite-module-controlbar.module-toolbar,
  .suite-main-panel.area-binding-panel {
    align-items: flex-start;
    grid-template-columns: 1fr;
  }

  .suite-main-panel.area-context-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suite-main-panel.area-context-strip > div:nth-child(2) {
    border-right: 0;
  }

  .suite-main-panel.area-metrics {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .module-mount-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .area-work-area {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .suite-toolbar.shell-toolbar {
    grid-template-columns: minmax(190px, auto) minmax(160px, 1fr) auto;
    gap: 8px;
    padding: var(--suite-shared-padding-6px-8px, 6px 8px);
  }

  .suite-toolbar.shell-toolbar .toolbar-left > strong {
    max-width: var(--suite-shared-width-140px, 140px);
  }

  .suite-toolbar.shell-toolbar .toolbar-utility,
  .suite-toolbar.shell-toolbar .toolbar-status {
    display: none;
  }

  .suite-toolbar.shell-toolbar .toolbar-primary {
    min-width: 0;
    padding: 0 10px;
  }

  .shell-body {
    grid-template-columns: calc(var(--sidebar-width, 224px) + var(--suite-shell-sidebar-container-margin-right, 0px)) minmax(0, 1fr);
  }

  .nav-list {
    padding: 9px;
  }

  .nav-item {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  }

  .nav-icon {
    width: 28px;
    height: var(--suite-shared-height-28px, 28px);
    border-radius: var(--suite-shared-radius-10px, 10px);
    font-size: var(--suite-type-caption);
  }

  .settings-menu {
    left: 0;
    right: auto;
    width: var(--suite-shared-width-min-318px-calc-100vw-28px, min(318px, calc(100vw - 28px)));
  }

  .content {
    padding: var(--suite-shared-padding-12px, 12px) var(--shell-content-padding-right) 12px var(--shell-content-padding-left);
  }

  .module-hero,
  .page-grid.three-col,
  .platform-strip {
    grid-template-columns: 1fr;
  }

  .permission-admin-controls {
    grid-template-columns: 1fr;
  }

  .permission-admin-viewer-bar {
    grid-template-columns: 1fr;
  }

  .permission-admin-viewer-controls {
    justify-content: flex-start;
  }

  .permission-admin-view-scope {
    width: 100%;
  }

  .permission-admin-seatbar {
    grid-template-columns: 1fr;
  }

  .permission-admin-account-admin-grid {
    grid-template-columns: 1fr;
  }

  .permission-admin-manager-form {
    grid-template-columns: 1fr;
  }

  .permission-admin-member-grid {
    min-width: 1120px;
  }

  .permission-admin-manager-grid {
    min-width: 860px;
  }

  .permission-admin-value-grid,
  .permission-admin-value-grid.compact {
    grid-template-columns: 1fr;
  }

  .permission-admin-overview-strip {
    grid-template-columns: 1fr;
  }

  .permission-admin-seat-head,
  .permission-admin-seat-row,
  .permission-admin-scope-head,
  .permission-admin-scope-row,
  .permission-admin-manager-head,
  .permission-admin-manager-row,
  .permission-admin-grant-head,
  .permission-admin-grant-row {
    min-width: var(--suite-shared-min-width-620px, 620px);
  }

  .planned-module-banner {
    grid-template-columns: 1fr;
  }

  .feature-inspection-kpi-grid,
  .feature-inspection-gate-strip,
  .feature-inspection-latest-run,
  .mobile-app-dev-mode-strip,
  .mobile-preview-controls,
  .mobile-preview-layout,
  .feature-decision-layout,
  .feature-decision-grid,
  .module-inspection-layout,
  .module-inspection-facts,
  .module-inspection-sections,
  .module-inspection-run-record-meta,
  .harness-layer-strip,
  .agent-governance-grid,
  .agent-chat-lane-grid,
  .agent-registry-grid,
  .agent-evidence-grid,
  .agent-domain-coverage-strip,
  .agent-command-summary,
  .agent-command-rule,
  .agent-command-latest,
  .agent-command-route-grid,
  .agent-run-log-summary,
  .agent-monitor-summary,
  .agent-monitor-latest,
  .agent-monitor-checks,
  .harness-summary-grid,
  .harness-iteration-strip {
    grid-template-columns: 1fr;
  }

  .module-inspection-run-record-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .module-inspection-run-record-actions {
    justify-content: flex-start;
  }

  .agent-run-log-summary div,
  .agent-command-summary div,
  .agent-monitor-summary div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .agent-run-log-summary div:last-child,
  .agent-command-summary div:last-child,
  .agent-monitor-summary div:last-child {
    border-bottom: 0;
  }

  .feature-inspection-kpi {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .feature-inspection-kpi:last-child {
    border-bottom: 0;
  }

  .module-inspection-list {
    max-height: none;
  }

  .agent-run-record-meta,
  .agent-run-record dl,
  .agent-monitor-check dl {
    grid-template-columns: 1fr;
  }

  .agent-module-matrix-head {
    align-items: stretch;
    flex-direction: column;
  }

  .suite-table-wrap.agent-module-table-wrap {
    overflow-x: auto;
  }

  .agent-module-table {
    min-width: var(--suite-shared-min-width-860px, 860px);
  }

  .harness-summary-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .harness-summary-cell:last-child {
    border-bottom: 0;
  }

  .harness-gate-row {
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: start;
  }

  .harness-gate-row > div:last-child {
    grid-column: 2;
  }

  .area-metrics {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .validation-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .suite-section-panel.field-map-group .field-map-group-head,
  .suite-field.field-map-select-row {
    align-items: stretch;
    flex-direction: column;
  }

  .suite-section-panel.field-map-group .field-map-group-head {
    grid-template-columns: 1fr;
  }

  .field-map-group-actions {
    justify-content: flex-start;
  }

  .field-map-load {
    justify-self: start;
  }

  .field-map-picker {
    width: 100%;
  }

  .module-mount-grid {
    grid-template-columns: 1fr;
  }

  .suite-main-panel.account-identity-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-device-frame,
  .mobile-device-frame.tablet,
  .mobile-device-frame.landscape {
    max-width: min(var(--mobile-frame-width, var(--mobile-device-width)), 100%);
  }

  .mount-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .suite-table-wrap.area-table-wrap {
    height: var(--suite-shared-height-360px, 360px);
  }
}

@media (max-width: 760px) {
  .suite-workspace-brand-trigger.suite-button {
    max-width: 150px;
  }

  .suite-workspace-brand-name {
    display: none;
  }

  .suite-workspace-overview dl > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .suite-workspace-management-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .suite-workspace-management-actions .suite-button { width: auto; flex: 0 0 auto; }

  .suite-workspace-manager-picker {
    grid-template-columns: 1fr;
  }

  .suite-workspace-manager-picker > .suite-compound-input-group[data-suite-input-layout="submit"] {
    grid-column: 1 / -1;
  }

  .suite-workspace-manager-picker > .suite-button {
    width: auto;
    justify-self: end;
  }

  .suite-toolbar.shell-toolbar {
    grid-template-columns: minmax(150px, auto) minmax(120px, 1fr) auto;
  }

  .suite-management-left {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .suite-management-title div {
    display: none;
  }

  .suite-management-tab {
    padding-inline: var(--suite-segmented-option-padding-inline, var(--suite-space-3));
  }

  .suite-toolbar.shell-toolbar .toolbar-tab b,
  .suite-toolbar.shell-toolbar .toolbar-current {
    display: none;
  }

  .suite-combobox-shell.toolbar-project-combobox {
    min-width: var(--suite-shared-width-120px, 120px);
  }

  .suite-toolbar.shell-toolbar .toolbar-project-picker {
    min-width: var(--suite-shared-width-120px, 120px);
  }

  .mobile-preview-control-panel {
    gap: 10px;
  }

  .mobile-app-dev-mode-strip {
    padding: 0 10px;
  }

  .mobile-preview-controls {
    padding: 0 10px 10px;
  }

  .mobile-preview-segmented {
    grid-template-columns: 1fr;
  }

  .mobile-device-stage {
    padding: var(--suite-shared-padding-10px, 10px);
  }

  .mobile-device-frame {
    padding: var(--suite-shared-padding-8px, 8px);
    border-radius: 28px;
  }

  .mobile-device-frame.landscape .mobile-app-section {
    grid-template-columns: 1fr;
  }

  .mobile-device-frame.landscape .mobile-app-hero {
    grid-column: auto;
  }

  .mobile-app-hero strong {
    white-space: normal;
  }
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-item {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  gap: 0;
  text-align: center;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-copy {
  display: none;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:hover .nav-group-body .nav-item,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:focus-within .nav-group-body .nav-item {
  width: 100%;
  height: var(--suite-navigation-item-height, var(--suite-shared-height-40px, 40px));
  min-height: var(--suite-navigation-item-height, var(--suite-shared-height-40px, 40px));
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: stretch;
  gap: var(--suite-shared-gap-8px, 8px);
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  text-align: left;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:hover .nav-group-body .nav-icon,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:focus-within .nav-group-body .nav-icon {
  width: 34px;
  height: 100%;
  grid-column: 1;
  grid-row: 1;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:hover .nav-group-body .nav-copy,
.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .nav-group:focus-within .nav-group-body .nav-copy {
  min-width: 0;
  max-width: none;
  max-height: none;
  display: grid;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  align-content: center;
  justify-items: var(--suite-navigation-item-text-align, left);
  text-align: var(--suite-navigation-item-text-align, left);
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-footer.sidebar-account-card,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed .suite-ui-theme-shell-frame-sidebar .suite-ui-theme-preview-shell-sidebar .sidebar-footer.sidebar-account-card,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .sidebar-footer.sidebar-account-card {
  display: inline-grid;
  place-items: center;
}

.shell-frame.sidebar-collapsed > .shell-body > .shell-sidebar .sidebar-account-icon,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed .suite-ui-theme-shell-frame-sidebar .suite-ui-theme-preview-shell-sidebar .sidebar-account-icon,
.suite-ui-theme-shell-frame-body.sidebar-preview-collapsed > .suite-ui-theme-preview-shell-sidebar .sidebar-account-icon {
  width: 100%;
  height: 100%;
  flex-basis: 100%;
  display: grid;
  place-items: center;
  justify-self: center;
  align-self: center;
}

.shell-frame.sidebar-collapsed .suite-ui-theme-preview-shell-sidebar .nav-item,
.shell-frame.sidebar-collapsed > .shell-body > .suite-ui-theme-preview-shell-sidebar .nav-item {
  position: relative;
  overflow: hidden;
  place-items: center;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
}

.shell-frame.sidebar-collapsed .suite-ui-theme-preview-shell-sidebar .nav-icon,
.shell-frame.sidebar-collapsed > .shell-body > .suite-ui-theme-preview-shell-sidebar .nav-icon {
  position: static;
  inset: auto;
  width: 100%;
  height: 100%;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  justify-self: center;
  align-self: center;
  margin: 0;
  line-height: 0;
  transform: none;
}

.shell-frame.sidebar-collapsed .suite-ui-theme-preview-shell-sidebar .nav-icon .ui-icon,
.shell-frame.sidebar-collapsed .suite-ui-theme-preview-shell-sidebar .nav-icon svg,
.shell-frame.sidebar-collapsed > .shell-body > .suite-ui-theme-preview-shell-sidebar .nav-icon .ui-icon,
.shell-frame.sidebar-collapsed > .shell-body > .suite-ui-theme-preview-shell-sidebar .nav-icon svg {
  display: block;
  margin: auto;
  transform: none;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar {
  align-items: center;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-list {
  width: 100%;
  align-items: center;
  justify-items: center;
  padding: var(--suite-shared-padding-8px, 8px) 0;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-item {
  inline-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  min-block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  margin-inline: auto;
  place-items: center;
  text-align: center;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-icon {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
  margin: 0;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-icon
  .ui-icon,
.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-icon
  svg {
  margin: auto;
  transform: none;
}

/* UI design preview must mirror the real Shell layout instead of inventing a
   separate sizing model. Keep this block last so preview-only fixes win. */
.suite-ui-theme-preview-scroll.ui-mode,
.suite-ui-theme-shell-frame-preview,
.suite-ui-theme-shell-frame-preview > .suite-ui-theme-shell-frame-body,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-main,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-content-shell.content,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-content-scroll,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workbench-preview,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-gallery,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-section {
  min-inline-size: 0;
  min-block-size: 0;
  max-inline-size: none;
  box-sizing: border-box;
}

.suite-ui-theme-preview-scroll.ui-mode {
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview {
  --suite-ui-preview-sidebar-track-width: var(
    --sidebar-width,
    var(--suite-ui-preview-sidebar-collapsed-width, 64px)
  );
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview
  > .suite-ui-theme-shell-frame-topbar.suite-content-option {
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
}

.suite-ui-theme-shell-frame-preview
  > .suite-ui-theme-shell-frame-topbar
  .suite-toolbar.shell-toolbar {
  width: auto;
  inline-size: auto;
  max-inline-size: none;
  align-self: stretch;
  margin: 0;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed {
  --suite-ui-preview-sidebar-track-width: var(--suite-ui-preview-sidebar-collapsed-width, 64px);
}

.suite-ui-theme-shell-frame-preview > .suite-ui-theme-shell-frame-body {
  inline-size: 100%;
  block-size: auto;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: var(--suite-ui-preview-sidebar-track-width) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview
  > .suite-ui-theme-shell-frame-body
  > .suite-ui-theme-preview-shell-sidebar.sidebar {
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: none;
  margin: var(--shell-sidebar-container-margin-top, 15px)
    var(--shell-sidebar-container-margin-right, 0px)
    var(--shell-sidebar-container-margin-bottom, 15px)
    var(--shell-sidebar-container-margin-left, 15px);
  justify-self: stretch;
  align-self: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar {
  align-items: center;
  inline-size: auto;
  max-inline-size: none;
  justify-self: stretch;
  overflow: visible;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-list {
  inline-size: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: var(--suite-shared-padding-8px, 8px) 0;
  overflow: visible;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-item,
.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .sidebar-footer.sidebar-account-card {
  inline-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  min-block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  display: grid;
  grid-template: 1fr / 1fr;
  margin-inline: auto;
  padding: 0;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .sidebar-footer.sidebar-account-card {
  margin-block: 0 var(--suite-shared-padding-12px, 12px);
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-icon,
.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .sidebar-account-icon {
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  place-items: center;
  line-height: 0;
  transform: none;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-icon
  .ui-icon,
.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-icon
  svg {
  inline-size: var(--suite-icon-size, 18px);
  block-size: var(--suite-icon-size, 18px);
  display: block;
  margin: auto;
  transform: none;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .nav-copy,
.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.sidebar
  .sidebar-account-copy {
  display: none;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-main {
  inline-size: 100%;
  block-size: auto;
  min-block-size: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-managementbar {
  flex: 0 0 auto;
  position: relative;
  z-index: 60;
  margin: var(--shell-workspace-top-gap, 0px) var(--shell-content-padding-right, 0px) 0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px));
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-content-shell.content {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  block-size: auto;
  min-block-size: 0;
  flex: 1 1 0;
  display: block;
  padding: var(--shell-workspace-top-gap, 0px) var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px) var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workbench-preview,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-gallery,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-section {
  inline-size: 100%;
  width: 100%;
  max-inline-size: none;
  max-width: none;
  min-inline-size: 0;
  align-self: stretch;
  justify-self: stretch;
  overflow: visible;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workbench-preview {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: auto;
  block-size: auto;
  gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px)));
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  min-block-size: auto;
  block-size: auto;
  flex: 0 0 auto;
  margin: 0;
  overflow: visible;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* UI design preview parity fixes: mirror the live Shell scroll model. */
.suite-ui-theme-preview-scroll.ui-mode {
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview {
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview > .suite-ui-theme-shell-frame-body {
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-main {
  min-inline-size: 0;
  min-block-size: 0;
  overflow: hidden;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-content-shell.content,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-content-scroll {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workbench-preview,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-gallery,
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.suite-ui-theme-shell-frame-preview .suite-ui-theme-component-section {
  inline-size: 100%;
  width: 100%;
  max-inline-size: 100%;
  max-width: 100%;
  min-inline-size: 0;
  overflow-x: hidden;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workbench-preview {
  min-block-size: auto;
  block-size: auto;
}

.suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview {
  margin: 0;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  align-items: center;
  justify-items: center;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100%;
  align-items: center;
  justify-items: center;
  padding-inline: 0;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item {
  inline-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  min-block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  margin-inline: auto !important;
  gap: 0 !important;
  text-align: center;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  display: grid !important;
  place-items: center !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  margin: 0 !important;
  transform: none !important;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg {
  display: block !important;
  margin: auto !important;
  transform: none !important;
}

.suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-copy {
  display: none !important;
}

/* UI design preview shell parity: mirror the live Shell layout without changing the real Shell. */
.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode {
  overflow: hidden;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview
  > .suite-ui-theme-shell-frame-topbar.suite-content-option {
  flex: 0 0 auto;
  margin: 0;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview
  > .suite-ui-theme-shell-frame-body.shell-body {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width, var(--suite-ui-preview-sidebar-collapsed-width, 64px)) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.shell-body {
  grid-template-columns: var(--suite-ui-preview-sidebar-collapsed-width, 64px) minmax(0, 1fr);
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview
  > .suite-ui-theme-shell-frame-body
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  inline-size: auto;
  min-inline-size: 0;
  margin: var(--shell-sidebar-container-margin-top, 15px)
    var(--shell-sidebar-container-margin-right, 0px)
    var(--shell-sidebar-container-margin-bottom, 15px)
    var(--shell-sidebar-container-margin-left, 15px);
  align-self: stretch;
  justify-self: stretch;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-main.workspace {
  min-inline-size: 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-managementbar {
  flex: 0 0 auto;
  margin: var(--shell-workspace-top-gap, 0px) var(--shell-content-padding-right, 0px) 0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px));
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-frame-content-shell.content {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  display: block;
  padding: var(--shell-workspace-top-gap, 0px) var(--shell-content-padding-right, 0px) 24px
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workbench-preview {
  min-block-size: auto;
  block-size: auto;
  inline-size: 100%;
  max-inline-size: none;
  display: flex;
  flex-direction: column;
  gap: var(--suite-main-container-gap, var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px)));
  overflow: visible;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview.suite-content-option,
.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  min-block-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-component-gallery {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.ui-design-route-body .suite-ui-theme-shell-frame-preview .suite-ui-theme-component-section {
  inline-size: 100%;
  max-inline-size: none;
  min-inline-size: 0;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100%;
  align-items: center;
  justify-items: center;
  padding-inline: 0;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item {
  inline-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  min-block-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  place-items: center !important;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  margin-inline: auto !important;
  gap: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon {
  inline-size: 32px !important;
  block-size: 32px !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg {
  inline-size: var(--suite-icon-size, 18px) !important;
  block-size: var(--suite-icon-size, 18px) !important;
  display: block !important;
  margin: 0 !important;
  transform: none !important;
}

/* Final UI-design preview parity guard. The preview must follow the real Shell:
   fixed Shell chrome + page toolbar, then only the page content scrolls. */
.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame > .shell-body,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame .workspace,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame .content,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame .module-workbench,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame .suite-ui-theme-preview-card,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame .suite-ui-theme-component-gallery,
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame .suite-ui-theme-component-section {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  box-sizing: border-box !important;
}

.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode {
  overflow: hidden !important;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  inline-size: 100% !important;
  block-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-topbar.suite-content-option {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  inline-size: 100% !important;
  margin: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body {
  flex: 1 1 0 !important;
  min-block-size: 0 !important;
  display: grid !important;
  grid-template-columns: var(--sidebar-width, var(--suite-ui-preview-sidebar-collapsed-width, 64px)) minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.shell-body {
  grid-template-columns:
    calc(
      var(--suite-ui-preview-sidebar-collapsed-width, 64px)
      + var(--shell-sidebar-container-margin-left, 15px)
      + var(--shell-sidebar-container-margin-right, 0px)
    )
    minmax(0, 1fr) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  min-block-size: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  flex: 0 0 auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content {
  flex: 1 1 0 !important;
  inline-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: var(--shell-workspace-top-gap, 0px) var(--shell-content-padding-right, 0px) 24px
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-section {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card {
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  align-items: center !important;
  justify-self: stretch !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  align-items: center !important;
  justify-items: center !important;
  padding-inline: 0 !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item {
  inline-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  block-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  min-block-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  place-items: center !important;
  padding: 0 var(--suite-navigation-item-padding-inline, var(--suite-space-3));
  margin-inline: auto !important;
  gap: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon {
  inline-size: 32px !important;
  block-size: 32px !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: auto !important;
  line-height: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg {
  display: block !important;
  margin: auto !important;
  transform: none !important;
}

/* UI-design Shell preview structure correction.
   Mirrors the live Shell: toolbar and page switchbar stay fixed, while the
   page content layer scrolls as one surface. */
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  --suite-ui-preview-sidebar-frame-width: calc(
    var(--suite-ui-preview-sidebar-width-current, var(--sidebar-width, var(--suite-ui-preview-sidebar-collapsed-width, 64px))) +
      var(--shell-sidebar-container-margin-left, 15px) +
      var(--shell-sidebar-container-margin-right, 0px)
  );
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed {
  --sidebar-width: var(--suite-ui-preview-sidebar-collapsed-width, 64px);
  --suite-ui-preview-sidebar-width-current: var(--suite-ui-preview-sidebar-collapsed-width, 64px);
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body {
  grid-template-columns:
    var(--suite-ui-preview-sidebar-frame-width)
    minmax(0, 1fr) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-content-option,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-section {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  max-width: none !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card {
  block-size: auto !important;
  min-block-size: auto !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  width: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  max-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  margin: var(--shell-sidebar-container-margin) !important;
  padding-inline: 0 !important;
  justify-self: start !important;
  align-items: center !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-items: center !important;
  padding-inline: 0 !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  inline-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  block-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  min-block-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  display: grid !important;
  grid-template: 1fr / 1fr !important;
  place-items: center !important;
  padding: 0 !important;
  margin-inline: auto !important;
  gap: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  inline-size: 100% !important;
  block-size: 100% !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  svg {
  inline-size: var(--suite-icon-size, 18px) !important;
  block-size: var(--suite-icon-size, 18px) !important;
  display: block !important;
  margin: auto !important;
  transform: none !important;
}

/* UI design preview parity: final guard for live Shell spacing and centering. */
.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  --suite-ui-preview-sidebar-current-width: var(
    --suite-ui-preview-sidebar-width-current,
    var(--sidebar-width, var(--suite-ui-preview-sidebar-collapsed-width, 64px))
  );
  --suite-ui-preview-sidebar-frame-width: calc(
    var(--suite-ui-preview-sidebar-current-width) +
      var(--shell-sidebar-container-margin-left, 15px) +
      var(--shell-sidebar-container-margin-right, 0px)
  );
  block-size: 100% !important;
  inline-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed {
  --sidebar-width: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  --suite-ui-preview-sidebar-current-width: var(
    --suite-ui-preview-sidebar-collapsed-width,
    64px
  ) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body {
  flex: 1 1 0 !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  display: grid !important;
  grid-template-columns:
    var(--suite-ui-preview-sidebar-frame-width)
    minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  flex: 0 0 auto !important;
  margin:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content {
  flex: 1 1 0 !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    24px
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-section {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  min-inline-size: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery {
  display: flex !important;
  flex-direction: column !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-section {
  margin-inline: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  width: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  max-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  margin: var(--shell-sidebar-container-margin) !important;
  padding-inline: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-self: start !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-inline: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  block-size: var(--suite-shell-sidebar-height, 42px) !important;
  height: var(--suite-shell-sidebar-height, 42px) !important;
  inline-size: var(--suite-shell-sidebar-height, 42px) !important;
  width: var(--suite-shell-sidebar-height, 42px) !important;
  min-block-size: var(--suite-shell-sidebar-height, 42px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 0 !important;
  margin-inline: auto !important;
  gap: 0 !important;
  text-align: center !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  block-size: 100% !important;
  height: 100% !important;
  inline-size: 100% !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  svg {
  block-size: var(--suite-icon-size, 18px) !important;
  height: var(--suite-icon-size, 18px) !important;
  inline-size: var(--suite-icon-size, 18px) !important;
  width: var(--suite-icon-size, 18px) !important;
  display: block !important;
  margin: auto !important;
  transform: none !important;
}

/* UI design preview parity: mirror the real Shell route spacing without changing live Shell chrome. */
.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode {
  overflow: auto !important;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  --suite-ui-preview-route-gap: var(--shell-content-gap, 0px);
  display: flex !important;
  flex-direction: column !important;
  gap: var(--suite-ui-preview-route-gap) !important;
  min-inline-size: 0 !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body {
  display: grid !important;
  grid-template-columns:
    calc(
      var(--suite-ui-preview-sidebar-collapsed-width, 64px) +
        var(--shell-sidebar-container-margin-left, 15px)
    )
    minmax(0, 1fr) !important;
  gap: var(--suite-ui-preview-route-gap) !important;
  align-items: stretch !important;
  min-inline-size: 0 !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body
  > .suite-ui-theme-shell-frame-main.workspace {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  min-inline-size: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  width: auto !important;
  max-inline-size: none !important;
  margin:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content {
  flex: 1 1 auto !important;
  display: block !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  margin: 0 !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-content-option,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  max-width: none !important;
  min-inline-size: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card {
  block-size: auto !important;
  min-block-size: max-content !important;
  overflow: visible !important;
}

/* Collapsed sidebar preview: use the full sidebar column and center the icon box inside it. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  width: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  max-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  margin-block-start: var(--shell-sidebar-container-margin-top, 15px) !important;
  margin-block-end: var(--shell-sidebar-container-margin-bottom, 15px) !important;
  margin-inline-start: var(--shell-sidebar-container-margin-left, 15px) !important;
  margin-inline-end: 0 !important;
  padding-inline: 0 !important;
  align-items: center !important;
  justify-items: center !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-items: center !important;
  padding-inline: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-copy,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-active-indicator,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-copy {
  display: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  block-size: var(--suite-shell-sidebar-height, 42px) !important;
  height: var(--suite-shell-sidebar-height, 42px) !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  padding: 0 !important;
  margin-inline: 0 !important;
  gap: 0 !important;
  text-align: center !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  block-size: var(--suite-shell-sidebar-height, 42px) !important;
  height: var(--suite-shell-sidebar-height, 42px) !important;
  inline-size: var(--suite-shell-sidebar-height, 42px) !important;
  width: var(--suite-shell-sidebar-height, 42px) !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: static !important;
  inset: auto !important;
  line-height: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  svg {
  block-size: var(--suite-icon-size, 18px) !important;
  height: var(--suite-icon-size, 18px) !important;
  inline-size: var(--suite-icon-size, 18px) !important;
  width: var(--suite-icon-size, 18px) !important;
  display: block !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* UI design preview parity: keep the preview as a Shell layout model, not a nested scroller. */
.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode {
  overflow: hidden !important;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  block-size: 100% !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-topbar {
  flex: 0 0 auto !important;
  inline-size: 100% !important;
  margin: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body {
  flex: 1 1 auto !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  display: grid !important;
  grid-template-columns: var(--sidebar-width, 286px) minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.shell-body {
  grid-template-columns: var(--suite-ui-preview-sidebar-collapsed-width, 64px) minmax(0, 1fr) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  align-self: stretch !important;
  justify-self: stretch !important;
  margin: var(--shell-sidebar-container-margin) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  width: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  padding-inline: 0 !important;
  align-items: center !important;
  justify-self: start !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  width: 100% !important;
  align-items: center !important;
  justify-items: center !important;
  padding-inline: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  inline-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  width: var(--suite-shell-sidebar-collapsed-target-size) !important;
  block-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  height: var(--suite-shell-sidebar-collapsed-target-size) !important;
  min-block-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  justify-self: center !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  inline-size: 100% !important;
  width: 100% !important;
  block-size: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: transparent !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  margin:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content {
  flex: 1 1 auto !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  display: block !important;
  margin: 0 !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    24px
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  block-size: auto !important;
  min-block-size: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--suite-main-panel-gap, var(--suite-theme-container-gap, 0px)) !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-content-option,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  block-size: auto !important;
  min-block-size: auto !important;
  margin-inline: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* UI design preview parity: final geometry guard for Shell-like spacing. */
.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  block-size: 100% !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body {
  flex: 1 1 auto !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  display: grid !important;
  grid-template-columns:
    var(--sidebar-width, var(--suite-ui-preview-sidebar-width, 286px))
    minmax(0, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.shell-body {
  grid-template-columns:
    calc(
      var(--shell-sidebar-container-margin-left, 15px)
      + var(--suite-ui-preview-sidebar-collapsed-width, 64px)
      + var(--shell-sidebar-container-margin-right, 0px)
    )
    minmax(0, 1fr) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  width: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  max-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  justify-self: start !important;
  align-self: stretch !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding-inline: 0 !important;
  margin: var(--shell-sidebar-container-margin) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-items: center !important;
  padding: var(--suite-shared-padding-8px, 8px) 0 !important;
  gap: 6px !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  block-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  height: var(--suite-shell-sidebar-collapsed-target-size) !important;
  inline-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  width: var(--suite-shell-sidebar-collapsed-target-size) !important;
  min-block-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  min-inline-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  margin-inline: auto !important;
  padding: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  block-size: 100% !important;
  height: 100% !important;
  inline-size: 100% !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  svg {
  block-size: var(--suite-icon-size, 18px) !important;
  height: var(--suite-icon-size, 18px) !important;
  inline-size: var(--suite-icon-size, 18px) !important;
  width: var(--suite-icon-size, 18px) !important;
  display: block !important;
  margin: auto !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-copy,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-copy,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-active-indicator,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-resizer {
  display: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  block-size: 100% !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  max-inline-size: none !important;
  margin:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll {
  flex: 1 1 auto !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    24px
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-content-option,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-section,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-ui-samples,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-preview-row,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-table-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-data-list-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-scroll-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-accordion-preview {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  min-inline-size: 0 !important;
  box-sizing: border-box !important;
}

/* UI design preview parity: center collapsed rail icons and prevent horizontal slack. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  --suite-ui-preview-sidebar-cell-size: min(46px, var(--suite-shell-sidebar-height, 42px));
  inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  width: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  max-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-items: center !important;
  justify-self: start !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  align-items: center !important;
  justify-items: center !important;
  gap: var(--suite-shared-gap-6px, 6px) !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  inline-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  width: var(--suite-ui-preview-sidebar-cell-size) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  max-inline-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  block-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  height: var(--suite-ui-preview-sidebar-cell-size) !important;
  min-block-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  display: grid !important;
  place-content: center !important;
  place-items: center !important;
  justify-items: center !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  flex: 0 0 var(--suite-ui-preview-sidebar-cell-size) !important;
  block-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  height: var(--suite-ui-preview-sidebar-cell-size) !important;
  inline-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  width: var(--suite-ui-preview-sidebar-cell-size) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-cell-size) !important;
  position: static !important;
  inset: auto !important;
  display: grid !important;
  place-content: center !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  transform: none !important;
  translate: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  .ui-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  svg {
  inline-size: 18px !important;
  width: 18px !important;
  block-size: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: auto !important;
  justify-self: center !important;
  align-self: center !important;
  transform: none !important;
  translate: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll {
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: stretch !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-content-option,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card.module {
  flex: 0 0 auto !important;
  display: block !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview
  > .suite-ui-theme-component-gallery {
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  box-sizing: border-box !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery
  > * {
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* UI design preview parity: hard guard for collapsed sidebar icon centering. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  padding-inline: 0 !important;
  grid-template-columns: 100% !important;
  justify-content: center !important;
  justify-items: center !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  grid-template-columns: 100% !important;
  justify-content: center !important;
  justify-items: center !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  grid-template-areas: "icon" !important;
  grid-template-columns: 100% !important;
  grid-template-rows: 100% !important;
  justify-content: center !important;
  align-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item::before,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item::after,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card::before,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card::after {
  content: none !important;
  display: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  grid-area: icon !important;
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  justify-self: center !important;
  align-self: center !important;
  place-self: center !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* UI design preview parity: make the content preview fill its scroll plane. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-inline-size: 0 !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview
  > .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card.module,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview
  > .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card.module,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-preview-card.module {
  align-self: stretch !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: none !important;
  max-width: none !important;
}

/* UI design preview final guard: collapsed rail geometry and content width must mirror the visible Shell. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  --suite-shell-sidebar-justify-content: center !important;
  --suite-shell-sidebar-text-align: center !important;
  --suite-component-justify-content: center !important;
  --suite-component-text-align: center !important;
  inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  min-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  max-inline-size: var(--suite-ui-preview-sidebar-collapsed-width, 64px) !important;
  justify-items: center !important;
  align-items: center !important;
  padding-inline: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed {
  grid-template-columns: var(--suite-ui-preview-sidebar-collapsed-width, 64px) minmax(0, 1fr) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  inline-size: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-items: center !important;
  padding-inline: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  inline-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  width: var(--suite-shell-sidebar-collapsed-target-size) !important;
  block-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  height: var(--suite-shell-sidebar-collapsed-target-size) !important;
  min-block-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  display: grid !important;
  grid-template-areas: "icon" !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-content: center !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  text-align: center !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon {
  grid-area: icon !important;
  inline-size: 32px !important;
  width: 32px !important;
  block-size: 32px !important;
  height: 32px !important;
  min-inline-size: 32px !important;
  min-block-size: 32px !important;
  display: grid !important;
  place-content: center !important;
  place-items: center !important;
  justify-self: center !important;
  align-self: center !important;
  margin: auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  > *,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  > *,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-icon
  svg,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-account-icon
  svg {
  inline-size: var(--suite-icon-size, 18px) !important;
  width: var(--suite-icon-size, 18px) !important;
  block-size: var(--suite-icon-size, 18px) !important;
  height: var(--suite-icon-size, 18px) !important;
  display: block !important;
  justify-self: center !important;
  align-self: center !important;
  margin: auto !important;
  transform: none !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-content-option,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-header:not([data-suite-main-container-slot="header"]),
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-section,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-section
  > * {
  inline-size: 100% !important;
  width: 100% !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-component-gallery {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > *,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > * {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
}

/* Spacing token override: keep live Shell chrome and the UI Design preview on
   the same four-sided margin contract. */
.suite-toolbar.shell-toolbar {
  margin: var(--suite-shell-topbar-margin, 0px);
}

.sidebar.shell-sidebar,
.suite-ui-theme-preview-shell-sidebar.sidebar,
.suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  margin: var(--shell-sidebar-container-margin) !important;
}

.shell-frame > .shell-body > .workspace > .content:not(.feature-content) {
  overflow: visible !important;
  padding: 0 !important;
}

.shell-frame > .shell-body > .workspace > .content:not(.feature-content) > .suite-shell-page-scroll-region {
  overflow: auto !important;
}

.shell-frame > .shell-body > .workspace > .content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench {
  box-sizing: border-box !important;
  block-size: 100% !important;
  min-block-size: 0 !important;
  padding:
    max(var(--shell-workspace-top-gap, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-content-padding-right, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-workspace-bottom-gap, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)), var(--suite-container-safety-inset, 4px)) !important;
}

.shell-frame > .shell-body > .workspace > .content:not(.feature-content) > .suite-shell-page-scroll-region > .suite-route-layout {
  box-sizing: border-box !important;
  padding:
    max(var(--shell-workspace-top-gap, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-content-padding-right, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-workspace-bottom-gap, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)), var(--suite-container-safety-inset, 4px)) !important;
}

.shell-frame > .shell-body > .workspace > .content.feature-content > .area-management-shell-workbench.suite-management-workbench {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench,
.shell-frame > .shell-body > .workspace > .content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench {
  box-sizing: border-box !important;
  padding:
    max(var(--shell-workspace-top-gap, 0px), var(--suite-shell-workspace-min-inset, 8px))
    max(var(--shell-content-padding-right, 0px), var(--suite-shell-workspace-min-inset, 8px))
    max(var(--shell-workspace-bottom-gap, 0px), var(--suite-shell-workspace-min-inset, 8px))
    max(var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)), var(--suite-shell-workspace-min-inset, 8px)) !important;
}

.content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench > .ui-design-route-body > .suite-ui-theme-editor,
.shell-frame > .shell-body > .workspace > .content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench > .ui-design-route-body > .suite-ui-theme-editor {
  padding: 0 !important;
}

.content.feature-content,
.content.feature-content > .feature-frame-workbench,
.feature-frame-workbench,
.feature-frame-stack-workbench,
.feature-frame-stack-pane {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  block-size: 100% !important;
  height: 100% !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
}

.shell-frame > .shell-body > .workspace > .content.feature-content > .feature-frame-workbench {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.feature-frame-stack-pane {
  inset: 0 !important;
}

.feature-module-frame {
  margin: 0 !important;
  padding: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  block-size: 100% !important;
  height: 100% !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
}

.area-management-route-body[data-workspace-surface="iframe-tool-surface"] > .area-management-frame-stack {
  flex: 1 1 0 !important;
  align-self: stretch !important;
  block-size: auto !important;
  height: auto !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
}

.suite-module-controlbar.module-toolbar,
.suite-management-switchbar {
  margin: var(--suite-module-toolbar-margin, 0px);
}

.suite-section-panel,
.suite-sub-panel {
  margin: var(--suite-sub-panel-margin, 0px);
}

.ui-design-route-body .suite-ui-theme-shell-frame-preview.shell-frame {
  --suite-ui-preview-sidebar-current-width: var(
    --sidebar-width,
    var(--suite-ui-preview-sidebar-width, 286px)
  );
  --suite-ui-preview-sidebar-frame-width: calc(
    var(--suite-ui-preview-sidebar-current-width) +
      var(--shell-sidebar-container-margin-left, 15px) +
      var(--shell-sidebar-container-margin-right, 0px)
  );
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed {
  --suite-ui-preview-sidebar-current-width: var(
    --suite-ui-preview-sidebar-collapsed-width,
    64px
  );
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body {
  grid-template-columns:
    var(--suite-ui-preview-sidebar-frame-width)
    minmax(0, 1fr) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  margin: var(--shell-sidebar-container-margin) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  inline-size: auto !important;
  width: auto !important;
  max-inline-size: none !important;
  margin:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll {
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

/* Absolute final Shell Body ownership pass. Keep this at EOF so legacy
   preview spacing blocks cannot remap Shell Body padding onto toolbar margin
   or inner content workbench padding. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  row-gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  margin: var(--suite-module-toolbar-margin, 0px) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  padding: 0 !important;
}

/* Absolute final Shell Body ownership pass. This must stay after every legacy
   preview spacing block so the preview mirrors the actual workbench wrapper:
   workspace owns Shell Body padding, toolbar owns toolbar margin, and content
   wrappers stay transparent. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  row-gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  margin: var(--suite-module-toolbar-margin, 0px) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  padding: 0 !important;
}

/* Final Shell Body preview parity pass: the preview workspace is the wrapper
   equivalent to the actual route workbench. It owns Shell Body padding; the
   in-page toolbar keeps its own toolbar-margin control, and content stays
   transparent so panel shadows are not clipped by an outer offset. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  row-gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  margin: var(--suite-module-toolbar-margin, 0px) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card.module {
  place-self: flex-start stretch !important;
  align-self: flex-start !important;
  inline-size: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  width: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  max-inline-size: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  max-width: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  margin: var(--suite-main-panel-margin, 0px) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview
  > .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card.module,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview
  > .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card.module,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-preview-card.module {
  flex: 0 1 auto !important;
  place-self: flex-start stretch !important;
  align-self: flex-start !important;
  inline-size: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  width: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  max-inline-size: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  max-width: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  margin: var(--suite-main-panel-margin, 0px) !important;
}

/* UI design preview visual parity: the collapsed sidebar must occupy the same
   64px Shell column while the sidebar surface itself auto-fills after margins. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed {
  grid-template-columns:
    var(--suite-ui-preview-sidebar-collapsed-width, 64px)
    minmax(0, 1fr) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-items: normal !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-list {
  flex: 1 1 auto !important;
  min-block-size: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-items: normal !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: var(--suite-shared-padding-8px, 8px) 0 !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .nav-item {
  inline-size: var(--suite-shell-sidebar-collapsed-target-size) !important;
  width: var(--suite-shell-sidebar-collapsed-target-size) !important;
  max-inline-size: none !important;
  min-inline-size: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  margin: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame.sidebar-collapsed
  > .suite-ui-theme-shell-frame-body.sidebar-preview-collapsed
  > .suite-ui-theme-preview-shell-sidebar.shell-sidebar
  .sidebar-footer.sidebar-account-card {
  inline-size: min(46px, var(--suite-shell-sidebar-height, 42px)) !important;
  width: var(--suite-shell-sidebar-collapsed-target-size) !important;
  max-inline-size: 100% !important;
  min-inline-size: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  margin: 0 auto 12px !important;
}

/* Final spacing token pass: keep this after all preview geometry guards. */
.suite-toolbar.shell-toolbar {
  margin: var(--suite-shell-topbar-margin, 0px) !important;
}

.sidebar.shell-sidebar,
.suite-ui-theme-preview-shell-sidebar.sidebar,
.suite-ui-theme-preview-shell-sidebar.shell-sidebar {
  margin: var(--shell-sidebar-container-margin) !important;
}

.shell-frame > .shell-body > .workspace > .content:not(.feature-content) {
  padding: 0 !important;
}

.shell-frame > .shell-body > .workspace > .content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench {
  box-sizing: border-box !important;
  padding:
    max(var(--shell-workspace-top-gap, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-content-padding-right, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-workspace-bottom-gap, 0px), var(--suite-container-safety-inset, 4px))
    max(var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)), var(--suite-container-safety-inset, 4px)) !important;
}

.content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench,
.shell-frame > .shell-body > .workspace > .content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench {
  box-sizing: border-box !important;
  padding:
    max(var(--shell-workspace-top-gap, 0px), var(--suite-shell-workspace-min-inset, 8px))
    max(var(--shell-content-padding-right, 0px), var(--suite-shell-workspace-min-inset, 8px))
    max(var(--shell-workspace-bottom-gap, 0px), var(--suite-shell-workspace-min-inset, 8px))
    max(var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)), var(--suite-shell-workspace-min-inset, 8px)) !important;
}

.content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench > .ui-design-route-body > .suite-ui-theme-editor,
.shell-frame > .shell-body > .workspace > .content.ui-design-content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench.ui-design-workbench > .ui-design-route-body > .suite-ui-theme-editor {
  padding: 0 !important;
}

.shell-frame > .shell-body > .workspace > .content:not(.feature-content) > .suite-shell-page-scroll-region > .module-workbench,
.shell-frame > .shell-body > .workspace > .content:not(.feature-content) > .suite-shell-page-scroll-region > .suite-route-layout {
  --suite-shell-workspace-min-inset: 8px;
  padding:
    max(var(--shell-workspace-top-gap, 0px), var(--suite-shell-workspace-min-inset))
    max(var(--shell-content-padding-right, 0px), var(--suite-shell-workspace-min-inset))
    max(var(--shell-workspace-bottom-gap, 0px), var(--suite-shell-workspace-min-inset))
    max(var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)), var(--suite-shell-workspace-min-inset)) !important;
}

.suite-main-panel,
.budget-suite-module-panel,
.quantity-table-shell,
.budget-table-panel,
.budget-grid-main,
.budget-payout-main,
.budget-report-rail,
.budget-report-preview-shell,
.budget-data-table-panel,
.c-table-workspace,
.regulation-panel,
.form-regulation-panel,
.plan-selection-panel,
.presentation-suite-body {
  box-sizing: border-box !important;
  margin: var(--suite-main-panel-margin, var(--suite-theme-card-margin, 0px)) !important;
  inline-size: var(--suite-spacing-main-panel-inline-size) !important;
  width: var(--suite-spacing-main-panel-inline-size) !important;
  max-inline-size: var(--suite-spacing-main-panel-inline-size) !important;
  max-width: var(--suite-spacing-main-panel-inline-size) !important;
}

.suite-main-panel:not([data-suite-main-container-layout="fixed-header-scroll-body"]),
.budget-suite-module-panel,
.quantity-table-shell,
.budget-table-panel,
.budget-grid-main,
.budget-payout-main,
.budget-report-rail,
.budget-report-preview-shell,
.budget-data-table-panel,
.c-table-workspace,
.regulation-panel,
.form-regulation-panel,
.plan-selection-panel,
.presentation-suite-body {
  padding: var(--suite-main-panel-padding, var(--suite-theme-card-padding, 22px)) !important;
}

.ui-design-route-body .suite-ui-theme-rail,
.ui-design-route-body .suite-ui-theme-inspector,
.ui-design-route-body .suite-ui-theme-canvas {
  margin: 0 !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
}

.suite-main-panel:not([data-suite-main-container-layout="fixed-header-scroll-body"]) > .suite-panel-title:first-child:not(.suite-workspace-header),
.suite-main-panel:not([data-suite-main-container-layout="fixed-header-scroll-body"]) > header:first-child:not(.suite-workspace-header) {
  margin: 0 0 var(--suite-main-panel-title-margin-bottom, max(8px, calc(var(--suite-theme-card-gap, 16px) - 4px))) 0 !important;
  padding: 0 0 var(--suite-main-panel-title-padding-bottom, 12px) 0 !important;
}

.suite-main-panel.form-panel > .field,
.suite-main-panel.form-panel > .suite-field,
.suite-main-panel.form-panel > .button-row,
.suite-main-panel.form-panel > .binding-section-hint,
.suite-main-panel.form-panel > .binding-section-message {
  padding-inline: 0 !important;
}

.presentation-suite-body,
.budget-suite-module-panel {
  block-size: var(--suite-spacing-main-panel-block-size) !important;
  height: var(--suite-spacing-main-panel-block-size) !important;
}

.suite-module-controlbar.module-toolbar,
.suite-management-switchbar,
.suite-module-tab-bar,
.sheet-tabbar,
.budget-suite-tabbar,
.presentation-suite-toolbar,
.c-table-toolbar {
  box-sizing: border-box !important;
  margin: var(--suite-module-toolbar-margin, 0px) !important;
  inline-size: var(--suite-spacing-toolbar-inline-size) !important;
  width: var(--suite-spacing-toolbar-inline-size) !important;
  max-inline-size: var(--suite-spacing-toolbar-inline-size) !important;
  max-width: var(--suite-spacing-toolbar-inline-size) !important;
}

.suite-section-panel,
.suite-sub-panel,
.field-group,
.calc-group,
.excel-review-group,
.plan-control-card,
.plan-context-panel,
.plan-boundary-tool,
.plan-boundary-source-card,
.recognition-panel,
.recognition-selected-space,
.budget-split-panel,
.budget-inspector-panel,
.budget-inspector-section,
.budget-total-card,
.presentation-suite-slide-group,
.presentation-suite-settings-card,
.sheet-panel,
.sheet-detail-section,
.sheet-issue-card {
  box-sizing: border-box !important;
  margin: var(--suite-sub-panel-margin, 0px) !important;
  inline-size: var(--suite-spacing-sub-panel-inline-size) !important;
  width: var(--suite-spacing-sub-panel-inline-size) !important;
  max-inline-size: var(--suite-spacing-sub-panel-inline-size) !important;
  max-width: var(--suite-spacing-sub-panel-inline-size) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  inline-size: auto !important;
  width: auto !important;
  max-inline-size: none !important;
  margin:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll {
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-ui-theme-preview-card.module {
  place-self: flex-start stretch !important;
  align-self: flex-start !important;
  inline-size: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  width: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  max-inline-size: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  max-width: calc(100% - var(--suite-main-panel-margin-left, var(--suite-theme-card-margin-left, 0px)) - var(--suite-main-panel-margin-right, var(--suite-theme-card-margin-right, 0px))) !important;
  margin: var(--suite-main-panel-margin, 0px) !important;
}

/* Final UI Design preview adjacency pass: sidebar/body wrappers stay neutral.
   The workspace owns the module-toolbar-to-content distance; main-container
   siblings inside the workbench keep their own main-container gap. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  row-gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body
  > .suite-ui-theme-shell-frame-main.workspace {
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  row-gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
}

.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll {
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
}

.ui-design-route-body .suite-ui-theme-preview-scroll.ui-mode::-webkit-scrollbar,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content::-webkit-scrollbar,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  margin:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    0
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll {
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
}
/* EOF Shell Body ownership pass. Keep this after all preview spacing blocks. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  box-sizing: border-box !important;
  padding:
    var(--shell-workspace-top-gap, 0px)
    var(--shell-content-padding-right, 0px)
    var(--shell-workspace-bottom-gap, 0px)
    var(--shell-workspace-left-gap, var(--shell-content-padding-left, 0px)) !important;
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  row-gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-managementbar {
  margin: var(--suite-module-toolbar-margin, 0px) !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview,
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-scroll
  > .suite-ui-theme-shell-workbench-preview {
  padding: 0 !important;
}
/* Shell-owned component center: catalog beside a preview/settings stack of sibling main panels. */
.content:has(.ui-components-workbench) {
  overflow: hidden;
}

.ui-components-workbench,
.ui-components-route-body {
  min-height: 0;
}

.content.ui-components-content {
  overflow: hidden;
}

.ui-components-workbench {
  height: 100%;
}

.ui-components-route-body {
  flex: 1 1 auto;
  overflow: hidden;
}

.suite-ui-components {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(520px, 2.5fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas:
    "catalog stage"
    "catalog inspector";
  gap: var(--suite-main-container-gap, 16px);
  min-height: 0;
  height: 100%;
  padding: var(--suite-shell-workspace-margin, 0);
  align-items: stretch;
  overflow: hidden;
}

.suite-ui-components > .suite-main-panel {
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.suite-ui-components-catalog,
.suite-ui-components-stage,
.suite-ui-components-inspector {
  display: flex;
  flex-direction: column;
  gap: var(--suite-main-container-content-gap, 16px);
}

.suite-ui-components-catalog {
  grid-area: catalog;
  overflow: hidden;
}

.suite-ui-components-stage {
  grid-area: stage;
}

.suite-ui-components-inspector {
  grid-area: inspector;
  gap: 0;
  overflow: hidden;
}

.suite-ui-components-stage {
  overflow: auto;
}

.suite-ui-components-overlay-scroll-body {
  scrollbar-width: none !important;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
}

.suite-ui-components-overlay-scroll-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.suite-ui-components-catalog-scroll-host,
.suite-ui-components-inspector,
.suite-ui-components-scrollbar-sample-host {
  --suite-overlay-scrollbar-right: 4px;
  --suite-overlay-scrollbar-top: 4px;
  --suite-overlay-scrollbar-bottom: 4px;
  --suite-overlay-scrollbar-horizontal-left: 4px;
  --suite-overlay-scrollbar-horizontal-right: 4px;
  --suite-overlay-scrollbar-horizontal-bottom: 4px;
}

.suite-ui-components-catalog-scroll-host {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

.suite-ui-components-catalog > .suite-container-header,
.suite-ui-components-inspector > .suite-container-header {
  flex: 0 0 auto;
}

.suite-ui-components-inspector-scroll-region {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--suite-main-container-content-gap, 16px);
  overflow-x: auto;
  overflow-y: auto;
}

.suite-ui-components-list-item > span:last-child {
  display: flex;
}

.suite-ui-components-catalog header small,
.suite-ui-components-inspector header small,
.suite-ui-components-list-item small,
.suite-ui-components-mode-help {
  color: var(--muted);
  font-family: var(--suite-annotation-font-family, inherit);
  font-size: var(--suite-annotation-size-px, var(--suite-type-caption));
  font-weight: var(--suite-annotation-font-weight, 400);
  letter-spacing: var(--suite-annotation-letter-spacing, 0);
  line-height: var(--suite-annotation-line-height, var(--suite-line-caption, 1.45));
}

.suite-ui-components-list {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 6px;
  padding-inline: max(8px, var(--suite-navigation-item-shadow-space, 0px));
  overflow-x: hidden;
  overflow-y: auto;
}

.suite-ui-components-category {
  display: grid;
  gap: 4px;
}

.suite-ui-components-category + .suite-ui-components-category {
  margin-top: 7px;
}

.suite-ui-components-category h3 {
  margin: 0;
  padding: 3px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.suite-ui-components-list-item {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border-width: var(--suite-navigation-item-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-item-border-color, transparent);
  border-radius: var(--suite-navigation-item-radius, var(--suite-radius-control));
  color: var(--suite-navigation-item-on-surface, var(--text));
  font: inherit;
  text-align: left;
  background: var(--suite-navigation-item-surface-bg, transparent);
  box-shadow: var(--suite-navigation-item-shadow, none);
  -webkit-backdrop-filter: var(--suite-navigation-item-backdrop, none);
  backdrop-filter: var(--suite-navigation-item-backdrop, none);
  cursor: pointer;
  transition:
    color 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.suite-ui-components-list-item > span:first-child {
  flex: 0 0 20px;
}

.suite-ui-components-list-item > span:last-child {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.suite-ui-components-list-item.active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: var(--primary-soft);
  color: var(--primary);
}

.suite-ui-components-list-item:hover:not(.active) {
  background-image: linear-gradient(var(--suite-state-hover-layer, transparent), var(--suite-state-hover-layer, transparent));
}

.suite-ui-components-list-item:focus-visible {
  outline: var(--suite-state-focus-ring-width, 3px) solid
    var(--suite-state-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-state-focus-ring-offset, 2px);
}

.suite-ui-components-axis-controls {
  display: grid;
  gap: 10px;
}

.suite-ui-components-axis-controls:empty {
  display: none;
}

.suite-ui-components-axis {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.suite-ui-components-axis > strong {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
}

.suite-ui-components-axis > .suite-segmented {
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.suite-ui-components-manager-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.suite-ui-components-inspector-scroll-region > .suite-ui-components-manager-controls {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.suite-ui-components-manager-controls:empty {
  display: none;
}

.suite-ui-components-manager-control {
  min-width: min(100%, 220px);
  display: grid;
  grid-template-columns: max-content minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
}

.suite-ui-components-manager-control > span {
  color: var(--muted);
  font-size: var(--suite-type-caption);
  font-weight: 700;
}

.suite-ui-components-manager-control > .suite-field-control {
  width: 100%;
  min-width: 0;
}

.suite-ui-components-preview {
  position: relative;
  isolation: isolate;
  overflow: visible;
  min-height: 310px;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 48px);
  border: 1px dashed color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: var(--suite-ui-components-preview-radius, var(--suite-shared-radius-16px, 16px));
  background: var(--surface-soft);
}

/* Ghost is a visual variant, not an icon-button family discriminator. */
:where(.suite-button.suite-button-ghost:not(.primary):not(.danger)) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.suite-button.suite-button-ghost:is(.suite-button-icon, .suite-icon-button):not(.primary):not(.danger) {
  color: var(--suite-icon-button-on-surface, var(--text));
  opacity: var(--suite-icon-button-opacity, 1);
}

.suite-button.suite-button-ghost:not(.primary):not(.danger):not(:disabled):hover,
.suite-button.suite-button-ghost:not(.primary):not(.danger):focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--primary-soft) 78%, transparent);
}

.suite-button.suite-button-ghost:is(.suite-button-icon, .suite-icon-button):not(.primary):not(.danger):not(:disabled):hover,
.suite-button.suite-button-ghost:is(.suite-button-icon, .suite-icon-button):not(.primary):not(.danger):focus-visible {
  color: var(--suite-icon-button-hover-on-surface, var(--suite-icon-button-on-surface, var(--text)));
}

.suite-button.suite-button-ghost:focus-visible,
.suite-button.suite-button-icon:focus-visible,
.suite-button.suite-icon-button:focus-visible {
  outline: var(--suite-buttons-focus-ring-width, 3px) solid
    var(--suite-buttons-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-buttons-focus-ring-offset, 2px);
}

.suite-button.suite-button-ghost:not(.primary):not(.danger):disabled,
.suite-button.suite-button-icon:disabled,
.suite-button.suite-icon-button:disabled {
  cursor: not-allowed;
  filter: saturate(var(--suite-buttons-disabled-saturation, 32%));
  opacity: var(--suite-buttons-disabled-opacity, 0.56);
  transform: none;
  box-shadow: none;
}

.suite-ui-components-preview[data-component-preview="container-header"] [data-component-preview-probe] {
  width: min(100%, 680px);
}

.suite-ui-components-stage > .suite-ui-components-preview {
  flex: 1 1 auto;
  min-height: 0;
}

.suite-ui-components-stage > .suite-ui-components-preview[data-component-preview="shell-sidebar"] {
  --suite-ui-components-shell-sidebar-preview-inset: clamp(
    var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)),
    2vh,
    20px
  );
  min-height: calc(
    var(--suite-shell-sidebar-preview-block-size, 360px)
    + var(--suite-ui-components-shell-sidebar-preview-inset)
    + var(--suite-ui-components-shell-sidebar-preview-inset)
    + 2px
  );
}

.suite-ui-components-material-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, var(--primary-soft)), var(--surface-soft));
  background-size: 24px 24px, 24px 24px, auto;
}

.suite-ui-components-material-backdrop span {
  position: absolute;
  width: clamp(120px, 22vw, 230px);
  aspect-ratio: 1;
  border-radius: 42% 58% 64% 36% / 46% 38% 62% 54%;
  opacity: 0.84;
  transform: rotate(-12deg);
}

.suite-ui-components-material-backdrop span:nth-child(1) {
  top: 18%;
  left: 24%;
  background: color-mix(in srgb, var(--primary) 78%, #4ed8d0);
}

.suite-ui-components-material-backdrop span:nth-child(2) {
  right: 23%;
  bottom: 14%;
  background: color-mix(in srgb, var(--warning, #d97706) 68%, #ffd166);
  transform: rotate(18deg) scale(0.82);
}

.suite-ui-components-material-backdrop span:nth-child(3) {
  top: 22%;
  right: 34%;
  background: color-mix(in srgb, var(--primary-soft) 58%, #a78bfa);
  transform: rotate(36deg) scale(0.58);
}

.suite-ui-components-material-backdrop::after {
  content: 'MATERIAL 01 · Aa';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72%, 480px);
  padding: 18px 24px;
  border-block: 2px solid color-mix(in srgb, var(--text) 24%, transparent);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--text) 18%, transparent) 0 3px, transparent 3px 11px);
  color: color-mix(in srgb, var(--text) 58%, transparent);
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.suite-ui-components-preview-content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: calc(310px - clamp(40px, 8vw, 96px));
  display: grid;
  place-items: center;
}

/* Taller probes must remain inside the preview when the stage shrinks vertically. */
.suite-ui-components-preview:is(
  [data-component-preview="scrollbar"],
  [data-component-preview="navigation-group"],
  [data-component-preview="main-container"],
  [data-component-preview="inner-surface"],
  [data-component-preview="data-row"],
  [data-component-preview="shell-sidebar"]
) {
  padding-block: clamp(
    var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)),
    2vh,
    20px
  );
}

.suite-ui-components-preview:is(
  [data-component-preview="scrollbar"],
  [data-component-preview="navigation-group"],
  [data-component-preview="data-table"],
  [data-component-preview="main-container"],
  [data-component-preview="inner-surface"],
  [data-component-preview="data-row"],
  [data-component-preview="shell-sidebar"]
) .suite-ui-components-preview-content {
  min-height: 0;
}

.suite-ui-components-preview[data-component-preview="main-container"] {
  padding-block: var(
    --suite-container-safety-inset,
    var(--suite-compact-container-inset, 4px)
  );
}

.suite-ui-components-preview[data-component-preview="data-table"] {
  padding-block: var(
    --suite-container-safety-inset,
    var(--suite-compact-container-inset, 4px)
  );
}

.suite-ui-components-sample-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Component Center is a functional token probe, not a decorative mock. */
.suite-ui-components-preview[data-component-preview="button"] .suite-button:not(.suite-icon-button),
.suite-ui-components-preview[data-component-preview="button-group"] .suite-button:not(.suite-icon-button) {
  -webkit-backdrop-filter: var(--suite-buttons-backdrop, none);
  backdrop-filter: var(--suite-buttons-backdrop, none);
  text-align: var(--suite-buttons-text-align, center);
}

.suite-ui-components-preview[data-component-preview="icon-button"] .suite-icon-button,
.suite-ui-components-preview[data-component-preview="button-group"] .suite-icon-button {
  text-align: center;
  -webkit-backdrop-filter: var(--suite-icon-button-backdrop, none);
  backdrop-filter: var(--suite-icon-button-backdrop, none);
}

.suite-ui-components-preview[data-component-preview="icon-button"] [data-component-preview-probe] {
  --suite-buttons-radius: var(--suite-icon-button-radius);
  --suite-buttons-soft-bg: var(--suite-icon-button-soft-bg);
  --suite-buttons-primary-bg: var(--suite-icon-button-primary-bg);
  --suite-buttons-on-primary: var(--suite-icon-button-on-primary);
  --suite-buttons-backdrop: var(--suite-icon-button-backdrop);
  --suite-buttons-border-width: var(--suite-icon-button-border-width);
  --suite-buttons-border-color: var(--suite-icon-button-border-color);
}

.suite-ui-components-preview[data-component-preview="status"] .status-pill {
  -webkit-backdrop-filter: var(--suite-status-backdrop, none);
  backdrop-filter: var(--suite-status-backdrop, none);
}

.suite-ui-components-preview[data-component-preview="form-field"] .suite-ui-components-form-sample {
  align-items: var(--suite-forms-align-items, center);
  gap: var(--suite-forms-gap, 8px);
  text-align: var(--suite-forms-text-align, left);
}

.suite-ui-components-preview[data-component-preview="form-field"] .suite-field-control,
.suite-ui-components-preview[data-component-preview="search-filter-bar"] .suite-field-control,
.suite-ui-components-preview[data-component-preview="direction-setting-table"] .suite-field-control {
  -webkit-backdrop-filter: var(--suite-forms-backdrop, none);
  backdrop-filter: var(--suite-forms-backdrop, none);
}

.suite-ui-components-preview[data-component-preview="option-setting-row"] .suite-field-control {
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-ui-components-preview .is-hover .command.primary:first-child {
  color: var(--suite-buttons-on-primary, var(--suite-primary-action-text, #fff));
  background: color-mix(in srgb, var(--suite-buttons-primary-bg, var(--suite-primary-action-bg, #087476)) 88%, #000);
}

.suite-ui-components-preview .is-hover .command.danger:first-child {
  color: var(--suite-buttons-on-surface, var(--text));
  background: color-mix(in srgb, var(--primary) var(--suite-buttons-hover-layer-alpha, 10%), var(--suite-buttons-surface-bg, var(--surface)));
}

.suite-ui-components-preview[data-component-preview="icon-button"] .suite-icon-button:not(:disabled):focus-visible,
.suite-ui-components-preview .is-focus .command:first-child,
.suite-ui-components-preview .is-focus .suite-icon-button:first-child,
.suite-ui-components-preview .is-focus .suite-field-control {
  outline-style: solid;
  outline-width: var(--suite-buttons-focus-ring-width, 3px);
  outline-color: var(--suite-buttons-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-buttons-focus-ring-offset, 2px);
}

.suite-ui-components-preview[data-component-preview="status"] [data-component-preview-probe].is-xs .status-pill {
  min-height: 20px;
  padding: 2px 7px;
}

.suite-ui-components-preview[data-component-preview="status"] [data-component-preview-probe].is-sm .status-pill {
  min-height: 24px;
  padding: 3px 9px;
}

.suite-ui-components-spinner {
  width: var(--suite-buttons-loading-spinner-size, 13px);
  height: var(--suite-buttons-loading-spinner-size, 13px);
  border: var(--suite-buttons-loading-spinner-width, 2px) solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  display: inline-block;
  animation: suite-ui-components-spin 0.8s linear infinite;
  animation-play-state: var(--suite-motion-loop-play-state, running);
}

.suite-ui-components-preview [data-component-preview-probe].is-compact {
  padding: var(--suite-state-compact-inset, 8px);
}

.suite-ui-components-preview [data-component-preview-probe].is-spacious {
  padding: var(--suite-state-spacious-inset, 24px);
}

.suite-ui-components-preview [data-component-preview-probe].is-loading {
  gap: var(--suite-state-loading-gap, 8px);
}

.suite-ui-components-preview:not([data-component-preview="button"]):not([data-component-preview="icon-button"]):not([data-component-preview="button-group"]) [data-component-preview-probe].is-loading:not(:has(.suite-ui-components-spinner))::after {
  content: "";
  width: var(--suite-state-loading-size, 14px);
  height: var(--suite-state-loading-size, 14px);
  flex: 0 0 auto;
  animation: suite-ui-components-spin 0.8s linear infinite;
}

@keyframes suite-ui-components-spin {
  to { transform: rotate(360deg); }
}

.suite-ui-components-form-sample,
.suite-ui-components-combobox,
.suite-ui-components-toolbar-sample {
  width: min(100%, 440px);
}

.suite-ui-components-combobox {
  position: relative;
  display: grid;
  height: var(--suite-dropdowns-height, var(--suite-control-height));
  gap: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  overflow: visible;
}

.suite-ui-components-combobox .suite-dropdown-trigger {
  width: 100%;
}

/* The combobox shell is only a preview carrier. State appearance belongs to
   the trigger, so state changes never alter the carrier radius or geometry. */

.suite-ui-components-combobox .suite-dropdown-menu {
  position: absolute;
  z-index: 2;
  inset: 100% 0 auto;
  margin-top: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
}

.suite-dropdown-menu.open,
.suite-menu.suite-dropdown-menu.open {
  transform-origin: top center;
  animation: suite-dropdown-enter var(--suite-transition-duration, 180ms) var(--suite-transition-easing, ease) both;
}

@keyframes suite-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(calc(var(--suite-motion-distance, 8px) * -0.5));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes suite-dropdown-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(calc(var(--suite-motion-distance, 8px) * -0.5));
  }
}

.suite-ui-components-combobox.is-preview-expanded {
  min-height: var(--suite-dropdowns-height, var(--suite-control-height));
  overflow: visible;
}

.suite-ui-components-combobox.is-preview-expanded .suite-dropdown-menu {
  position: absolute;
  inset: 100% 0 auto;
}

/*
 * The Component Center must keep the complete open menu inside its preview
 * canvas.  Only the preview changes the popup to a second grid row; the
 * production combobox continues to use the overlay positioning above.
 */
.suite-ui-components-preview[data-component-preview="combobox"]
  .suite-ui-components-combobox.is-preview-expanded {
  height: auto;
  place-self: start center;
  grid-template-rows: auto auto;
  gap: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
}

.suite-ui-components-preview[data-component-preview="combobox"]
  .suite-ui-components-combobox.is-preview-expanded
  .suite-dropdown-menu {
  position: relative;
  inset: auto;
  margin-top: 0;
}

.suite-ui-components-combobox .suite-dropdown-menu [role='option'][aria-selected='true']::after {
  content: "✓";
  flex: 0 0 auto;
}

.suite-ui-components-combobox-width-probe {
  display: none;
  box-sizing: border-box;
  width: var(--suite-dropdowns-menu-width, 100%);
  min-width: var(--suite-dropdowns-menu-min-width, 0);
  max-width: var(--suite-dropdowns-menu-max-width, 100%);
  min-height: 12px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--primary) 34%, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-control));
  color: var(--muted);
  font-size: 0;
}

.suite-ui-components-combobox-width-probe span {
  display: inline-block;
  padding-inline: 8px;
  font-size: var(--suite-type-caption);
  opacity: 0;
}

.suite-ui-components-error {
  color: var(--danger);
}

.suite-ui-components-toolbar-sample {
  box-sizing: border-box;
  position: static;
  display: flex;
  align-items: var(--suite-module-toolbar-align-items, center);
  justify-content: space-between;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  gap: var(--suite-module-toolbar-gap, 14px);
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border-width: var(--suite-module-toolbar-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-module-toolbar-border-color, var(--line));
  border-radius: var(--suite-module-toolbar-radius, var(--suite-radius-control));
  background: var(--suite-module-toolbar-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-module-toolbar-backdrop, none);
  backdrop-filter: var(--suite-module-toolbar-backdrop, none);
}

.suite-ui-components-toolbar-sample > [data-component-part="title-slot"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-ui-components-toolbar-sample > [data-component-part="actions-slot"] {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
}

.suite-ui-components-navigation-sample {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--suite-navigation-gap, 4px);
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border-width: var(--suite-navigation-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-navigation-border-color, var(--line));
  border-radius: var(--suite-navigation-radius, var(--suite-radius-control));
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: var(--suite-navigation-backdrop, none);
  backdrop-filter: var(--suite-navigation-backdrop, none);
}

:is(
  .suite-ui-components-navigation-sample .suite-pill-tab,
  .suite-ui-components-preview[data-component-preview="tab-item"] [data-component-preview-probe]
) {
  flex: 0 0 auto;
  text-align: var(--suite-tab-item-text-align, center);
}

.suite-ui-components-navigation-preview-panel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

.suite-ui-components-navigation-sample .active {
  color: var(--suite-navigation-active-color, var(--primary));
  background: var(--suite-navigation-active-bg, var(--primary-soft));
}

.suite-ui-components-navigation-item-list {
  box-sizing: border-box;
  width: min(100%, 300px);
  display: grid;
  gap: 8px;
  padding: 0;
  background: transparent;
}

.suite-ui-components-navigation-item-list .suite-navigation-item {
  width: 100%;
}

.suite-ui-components-collapsible-group {
  width: min(100%, 320px);
  border-width: var(--suite-navigation-group-border-width, 1px) !important;
  border-style: solid !important;
  border-color: var(--suite-navigation-group-border-color, var(--line)) !important;
}

.suite-ui-components-collapsible-group-toggle {
  min-height: 34px;
  padding: 0 8px;
  border-radius: max(0px, calc(var(--suite-navigation-group-radius, 12px) - 4px));
}

.suite-ui-components-collapsible-group-toggle strong {
  min-width: 0;
  flex: 1 1 auto;
}

.suite-ui-components-collapsible-content-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-top: 1px solid var(--line);
}

.suite-ui-components-collapsible-group small {
  padding: 0 8px 8px;
  color: var(--muted);
}

.suite-ui-components-navigation-item-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--primary);
}

.suite-ui-components-navigation-item-icon .ui-icon,
.suite-ui-components-navigation-item-icon svg {
  width: var(--suite-navigation-icon-size, var(--suite-icon-size-18px, 18px));
  height: var(--suite-navigation-icon-size, var(--suite-icon-size-18px, 18px));
}

.suite-ui-components-navigation-sample.is-vertical {
  width: min(100%, 240px);
  flex-direction: column;
  align-items: stretch;
}

.suite-ui-components-navigation-tabs,
.suite-ui-components-state-switcher-tabs {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.suite-ui-components-navigation-tabs {
  width: fit-content;
  max-width: 100%;
}

.suite-ui-components-state-switcher-tabs {
  width: min(100%, 560px);
}

.suite-ui-components-navigation-panel,
.suite-ui-components-state-switcher-panel {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  display: grid;
  align-items: center;
  justify-items: var(--suite-navigation-justify-items, center);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  color: color-mix(in srgb, var(--muted) 72%, var(--text));
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  text-align: var(--suite-navigation-text-align, center);
}

.suite-ui-components-navigation-tabs.is-vertical,
.suite-ui-components-state-switcher-tabs.is-vertical,
.suite-ui-components-preview .is-vertical .suite-ui-components-navigation-tabs,
.suite-ui-components-preview .is-vertical .suite-ui-components-state-switcher-tabs {
  grid-template-columns: minmax(120px, auto) minmax(180px, 1fr);
  align-items: stretch;
  justify-items: stretch;
}

.suite-ui-components-navigation-tabs.is-vertical .suite-ui-components-navigation-sample,
.suite-ui-components-state-switcher-tabs.is-vertical .suite-ui-components-state-switcher-sample,
.suite-ui-components-preview .is-vertical .suite-ui-components-navigation-tabs .suite-ui-components-navigation-sample,
.suite-ui-components-preview .is-vertical .suite-ui-components-state-switcher-tabs .suite-ui-components-state-switcher-sample {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
}

.suite-ui-components-navigation-tabs.is-vertical :is(.suite-ui-components-navigation-panel, .suite-ui-components-state-switcher-panel),
.suite-ui-components-state-switcher-tabs.is-vertical :is(.suite-ui-components-navigation-panel, .suite-ui-components-state-switcher-panel),
.suite-ui-components-preview .is-vertical :is(.suite-ui-components-navigation-panel, .suite-ui-components-state-switcher-panel) {
  min-height: 100%;
}

.suite-ui-components-slider-sample {
  width: min(100%, 420px);
  height: var(--suite-slider-height, var(--suite-control-height));
  position: relative;
  display: block;
  align-items: var(--suite-slider-align-items, center);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.suite-ui-components-slider-sample.is-vertical {
  width: min(100%, 180px);
  min-height: 250px;
  height: 250px;
}

.suite-ui-components-slider-sample.is-vertical input {
  width: 100%;
  height: 100%;
  writing-mode: vertical-lr;
  direction: rtl;
}

.suite-ui-components-slider-sample.is-sm {
  gap: 8px;
}

.suite-ui-components-slider-sample.is-lg {
  gap: 16px;
}

.suite-ui-components-scrollbar-stage {
  width: min(100%, 440px);
  display: grid;
  place-items: center;
}

.suite-ui-components-scrollbar-sample {
  width: 100%;
  height: 100%;
  overflow: scroll;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
  outline: none;
}

.suite-ui-components-scrollbar-sample-host {
  width: min(100%, 360px);
  height: 168px;
  min-width: 0;
}

.suite-ui-components-scrollbar-content {
  width: 560px;
  min-height: 270px;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
  padding: 12px;
}

.suite-ui-components-scrollbar-content span {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  color: var(--text);
  background: var(--surface);
}

.suite-ui-components-preview [data-component-preview-probe].is-wrapped {
  flex-wrap: wrap;
}

.suite-ui-components-preview [data-component-preview-probe].is-vertical:not(.suite-ui-components-slider-sample):not(.suite-ui-components-navigation-sample) {
  flex-direction: column;
  align-items: stretch;
}

.suite-ui-components-composite-setting {
  width: min(100%, 600px);
}

.suite-ui-components-preview[data-component-preview="scalar-setting-row"] .suite-ui-components-composite-setting {
  min-height: var(--suite-slider-height, var(--suite-control-height));
  align-items: var(--suite-slider-align-items, center);
  padding: 10px 12px;
  border-width: var(--suite-slider-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-slider-border-color, var(--line));
  border-radius: var(--suite-slider-radius, var(--suite-radius-control));
  background: var(--suite-slider-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-slider-backdrop, none);
  backdrop-filter: var(--suite-slider-backdrop, none);
  text-align: var(--suite-slider-text-align, left);
}

.suite-ui-components-preview[data-component-preview="option-setting-row"] .suite-ui-components-composite-setting {
  min-height: var(--suite-dropdowns-height, var(--suite-control-height));
  align-items: var(--suite-dropdowns-align-items, center);
  padding: 10px 12px;
  border-width: var(--suite-dropdowns-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-dropdowns-border-color, var(--line));
  border-radius: var(--suite-dropdowns-radius, var(--suite-radius-control));
  background: var(--suite-dropdowns-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-dropdowns-backdrop, none);
  backdrop-filter: var(--suite-dropdowns-backdrop, none);
  text-align: var(--suite-dropdowns-text-align, left);
}

.suite-ui-components-composite-setting.is-disabled,
.suite-ui-components-composite-group.is-disabled,
.suite-ui-components-composite-direction.is-disabled {
  filter: saturate(0.55);
}

.suite-ui-components-composite-direction.suite-ui-components-border-group {
  width: min(100%, 620px);
  gap: var(--suite-forms-gap, 8px);
  padding: 14px;
  align-items: var(--suite-forms-align-items, center);
  border-width: var(--suite-forms-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-forms-border-color, var(--line));
  border-radius: var(--suite-forms-radius, var(--suite-radius-sub-panel));
  background: var(--suite-forms-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-forms-backdrop, none);
  backdrop-filter: var(--suite-forms-backdrop, none);
  text-align: var(--suite-forms-text-align, left);
}

.suite-ui-components-composite-group {
  width: min(100%, 520px);
  padding: var(--suite-setting-group-padding, 12px);
  border-width: var(--suite-setting-group-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-setting-group-border-color, var(--line));
  border-radius: var(--suite-setting-group-radius, var(--suite-radius-sub-panel));
  background: var(--suite-setting-group-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-setting-group-backdrop, none);
  backdrop-filter: var(--suite-setting-group-backdrop, none);
}

.suite-ui-components-composite-group .suite-ui-components-property-group-content {
  gap: var(--suite-setting-group-gap, 10px);
}

.suite-ui-components-composite-group-toggle {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--suite-type-caption);
  text-align: left;
  cursor: pointer;
}

.suite-ui-components-composite-group-toggle b {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  transition: transform var(--suite-setting-group-motion-duration, var(--suite-transition-duration, 180ms)) var(--suite-setting-group-motion-easing, var(--suite-transition-easing, ease));
}

.suite-ui-components-composite-group-toggle b svg {
  width: 14px;
  height: 14px;
}

.suite-ui-components-composite-group-toggle[aria-expanded="true"] b {
  transform: rotate(180deg);
}

.suite-ui-components-composite-group-toggle:focus-visible {
  outline: var(--suite-state-focus-ring-width, 3px) solid var(--suite-state-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-state-focus-ring-offset, 2px);
  border-radius: var(--suite-radius-control);
}

.suite-ui-components-composite-group-toggle:disabled {
  cursor: default;
}

.suite-ui-components-composite-group-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 5px;
  border-bottom: 1px solid var(--line);
}

.suite-ui-components-composite-group-row:last-child {
  border-bottom: 0;
}

.suite-ui-components-composite-group-row span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.suite-ui-components-table-wrap {
  --suite-scrollbar-track-inset-inline: min(var(--suite-tables-radius, var(--suite-radius-sub-panel)), 12px);
  width: min(100%, 560px);
  overflow: auto;
  border-width: var(--suite-tables-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-tables-border-color, var(--line));
  border-radius: var(--suite-tables-radius, var(--suite-radius-sub-panel));
  background: var(--suite-tables-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-tables-backdrop, none);
  backdrop-filter: var(--suite-tables-backdrop, none);
}

.suite-ui-components-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.suite-ui-components-table-wrap[data-component-scrollbar-preview='horizontal'] > table {
  min-width: 620px;
}

.suite-ui-components-table-wrap th,
.suite-ui-components-table-wrap td {
  height: var(--suite-tables-height, 30px);
  padding: var(--suite-table-cell-padding-block, 4px) var(--suite-table-cell-padding-inline, 8px);
  border-bottom: 1px solid var(--line);
  text-align: var(--suite-tables-text-align, left);
  vertical-align: var(--suite-tables-vertical-align, middle);
}

.suite-ui-components-table-wrap th {
  color: color-mix(in srgb, var(--muted) 72%, var(--text));
  background: var(--suite-tables-soft-bg, var(--surface-soft));
}

.suite-ui-components-table-wrap tr.selected td {
  background: var(--suite-tables-selection-bg, var(--primary-soft)) !important;
}

.suite-ui-components-table-group-row td {
  background: var(--suite-tables-group-level-1-bg, var(--suite-table-group-level-1-bg, var(--suite-tables-soft-bg, var(--surface-soft)))) !important;
  font-weight: 850;
}

.suite-ui-components-table-outline-probe {
  display: block;
  margin-left: var(--suite-table-outline-indent, 24px);
  padding-left: 8px;
  border-left: var(--suite-table-outline-guide-width, 1px) solid color-mix(in srgb, var(--primary) var(--suite-table-outline-guide-alpha, 0%), var(--line));
}

.suite-ui-components-table-message {
  padding: 28px !important;
  text-align: center !important;
}

.suite-ui-components-selection-label,
.suite-ui-components-selected-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);
  font-size: var(--suite-type-caption);
  font-weight: 800;
}


.suite-ui-components-outline-list {
  width: min(100%, 500px);
  display: grid;
  gap: 4px;
}

.suite-ui-components-outline-row {
  min-height: var(--suite-tables-height, 30px);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: var(--suite-tables-align-items, center);
  gap: 8px;
  padding: 7px 10px;
  border-width: var(--suite-tables-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-tables-border-color, var(--line));
  border-radius: var(--suite-tables-radius, var(--suite-radius-control));
  background: var(--suite-tables-surface-bg, var(--surface));
  color: var(--text);
  -webkit-backdrop-filter: var(--suite-tables-backdrop, none);
  backdrop-filter: var(--suite-tables-backdrop, none);
  text-align: var(--suite-tables-text-align, left);
}

.suite-ui-components-outline-row.selected {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
  background: var(--suite-tables-selection-bg, var(--primary-soft));
}

.suite-ui-components-outline-row small {
  color: var(--muted);
}

.suite-ui-components-outline-children {
  display: grid;
  margin-left: var(--suite-table-outline-indent, 24px);
  padding-left: 8px;
  border-left: var(--suite-table-outline-guide-width, 1px) solid color-mix(in srgb, var(--primary) var(--suite-table-outline-guide-alpha, 0%), var(--line));
}

.suite-ui-components-outline-guide-probe {
  min-height: 10px;
  margin-left: var(--suite-table-outline-indent, 24px);
  padding-left: 8px;
  border-left: var(--suite-table-outline-guide-width, 1px) solid color-mix(in srgb, var(--primary) var(--suite-table-outline-guide-alpha, 0%), var(--line));
}

.suite-ui-components-outline-guide-probe span {
  display: block;
  width: 28px;
  border-top: 1px dashed color-mix(in srgb, var(--primary) 32%, var(--line));
}

.suite-search-filter-bar,
.suite-ui-components-search-filter {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-wrap: wrap;
  align-items: var(--suite-forms-align-items, center);
  gap: var(--suite-shared-gap-8px, 8px);
}

.suite-search-filter-bar > [data-component-part="search-field"],
.suite-ui-components-search-filter > [data-component-part="search-field"] {
  flex: 1 1 220px;
  min-width: 0;
}

.suite-search-filter-bar > [data-component-part="filters"],
.suite-ui-components-search-filter > [data-component-part="filters"] {
  flex: 0 1 180px;
  min-width: 140px;
}

.suite-search-filter-bar > [data-component-part="filters"] > .suite-field-control,
.suite-ui-components-search-filter > [data-component-part="filters"] > .suite-field-control {
  width: 100%;
}

.suite-search-filter-bar > small,
.suite-ui-components-search-filter > small {
  flex: 1 0 100%;
  color: var(--muted);
}

.suite-search-filter-bar.is-wrapped,
.suite-ui-components-search-filter.is-wrapped,
.suite-ui-components-preview .is-wrapped .suite-ui-components-search-filter {
  width: min(100%, 360px);
  flex-direction: column;
  align-items: stretch;
}

.suite-search-filter-bar.is-wrapped > :is(input, label, div, select, button),
.suite-ui-components-search-filter.is-wrapped > :is(input, label, div, select, button),
.suite-ui-components-preview .is-wrapped .suite-ui-components-search-filter > :is(input, label, div, select, button) {
  width: 100%;
}

.suite-ui-components-search-filter.is-disabled {
  opacity: 0.56;
}

.suite-ui-components-emphasis {
  width: min(100%, 480px);
}

.suite-ui-components-emphasis p {
  margin: 0;
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
  line-height: 1.55;
}

.suite-ui-components-feedback-state {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: var(--suite-emphasis-block-align-items, center);
}

.suite-ui-components-quality-sample {
  width: min(100%, 620px);
  min-height: var(--suite-control-height);
  box-sizing: border-box;
  overflow: hidden;
  border-width: var(--suite-quality-summary-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-quality-summary-border-color, var(--line));
  border-radius: var(--suite-quality-summary-radius, var(--suite-radius-control));
  background: var(--suite-quality-summary-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-quality-summary-backdrop, none);
  backdrop-filter: var(--suite-quality-summary-backdrop, none);
  text-align: left;
}

.suite-ui-components-quality-sample.is-inline {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.suite-ui-components-quality-sample.is-inline .suite-ui-components-quality-metrics,
.suite-ui-components-quality-sample.is-inline .suite-ui-components-quality-metrics > div {
  background: transparent;
}

.suite-ui-components-quality-sample.is-warning {
  border-color: color-mix(in srgb, var(--warning, #b45309) 40%, var(--line));
}

.suite-ui-components-quality-sample.is-error {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
}

.suite-ui-components-button-group {
  position: relative;
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  gap: var(--suite-space-2, 8px);
}

.suite-ui-components-button-group.is-wrapped,
.suite-ui-components-button-group[data-button-group-layout='wrapped'] {
  width: min(100%, 220px);
  flex-wrap: wrap;
  align-content: flex-start;
}

.suite-ui-components-button-group[data-button-group-layout='vertical'] {
  width: min(100%, 220px);
}

.suite-ui-components-button-group.is-wrapped > .suite-button,
.suite-ui-components-button-group[data-button-group-layout='wrapped'] > .suite-button {
  flex: 1 1 96px;
}

.suite-ui-components-button-group-overflow {
  position: relative;
  display: inline-flex;
}

.suite-ui-components-button-group-overflow > [role='menu'] {
  position: absolute;
  z-index: 3;
  inset: calc(100% + 6px) 0 auto auto;
  min-width: 120px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: var(--surface);
  box-shadow: var(--suite-shadow-popover, 0 12px 28px rgba(15, 23, 42, 0.14));
}

.suite-ui-components-button-group-overflow [role='menuitem'] {
  min-height: 30px;
  padding: 5px 9px;
  border: 0;
  border-radius: calc(var(--suite-radius-control) - 2px);
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.suite-ui-components-button-group-overflow [role='menuitem']:hover,
.suite-ui-components-button-group-overflow [role='menuitem']:focus-visible {
  color: var(--primary);
  background: var(--primary-soft);
}

.suite-ui-components-state-switcher-sample {
  width: min(100%, 520px);
  justify-content: center;
}

@media (max-width: 620px) {
  .suite-search-filter-bar,
  .suite-ui-components-search-filter {
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }

  .suite-search-filter-bar > [data-component-part],
  .suite-ui-components-search-filter > [data-component-part] {
    width: 100%;
    flex-basis: auto;
  }

  .suite-ui-components-navigation-tabs.is-vertical,
  .suite-ui-components-state-switcher-tabs.is-vertical,
  .suite-ui-components-preview .is-vertical .suite-ui-components-navigation-tabs,
  .suite-ui-components-preview .is-vertical .suite-ui-components-state-switcher-tabs {
    grid-template-columns: 1fr;
  }
}

.suite-ui-components-disclosure {
  width: min(100%, 480px);
  min-height: var(--suite-disclosure-height, var(--suite-control-height));
  border-width: var(--suite-disclosure-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-disclosure-border-color, var(--line));
  border-radius: var(--suite-disclosure-radius, var(--suite-radius-control));
  background: var(--suite-disclosure-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-disclosure-backdrop, none);
  backdrop-filter: var(--suite-disclosure-backdrop, none);
  text-align: var(--suite-disclosure-text-align, left);
  overflow: hidden;
}

.suite-ui-components-disclosure summary,
.suite-ui-components-disclosure > div {
  align-items: var(--suite-disclosure-align-items, center);
  padding: 12px 14px;
  text-align: inherit;
}

.suite-ui-components-disclosure > div {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/*
 * Interactive-composition previews do not get an extra presentation card.
 * The visible coordination root itself is the secondary-container owner.
 * Keep this after component-specific root surfaces so the shared owner wins.
 */
.suite-ui-components-preview [data-secondary-container-owner="inner-surface"] {
  padding-top: var(--suite-sub-panel-padding-top, var(--suite-sub-panel-padding, 12px)) !important;
  padding-right: var(--suite-sub-panel-padding-right, var(--suite-sub-panel-padding, 12px)) !important;
  padding-bottom: var(--suite-sub-panel-padding-bottom, var(--suite-sub-panel-padding, 12px)) !important;
  padding-left: var(--suite-sub-panel-padding-left, var(--suite-sub-panel-padding, 12px)) !important;
  gap: var(--suite-sub-panel-gap, 10px) !important;
  color: var(--suite-sub-panel-text-color, var(--text)) !important;
  background: var(--suite-sub-panel-bg, var(--surface)) !important;
  border: var(--suite-sub-panel-border, 1px solid var(--line)) !important;
  border-radius: var(--suite-radius-sub-panel, var(--suite-radius-panel)) !important;
  box-shadow: var(--suite-sub-panel-shadow, none) !important;
  -webkit-backdrop-filter: var(--suite-sub-panel-backdrop, none) !important;
  backdrop-filter: var(--suite-sub-panel-backdrop, none) !important;
}

.suite-ui-components-main-container-sample,
.suite-ui-components-inner-surface {
  width: min(100%, 520px);
}

.suite-ui-components-main-container-sample {
  block-size: 180px;
}

.suite-ui-components-preview-content
  .suite-ui-components-container-workbench
  > .suite-ui-components-container-layout-row:not(:has(~ .suite-ui-components-container-layout-row)) {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.suite-route-layout-fixtures {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--suite-theme-container-gap, 16px);
}

.suite-route-layout-fixture {
  min-width: 0;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.suite-route-layout-fixture > figcaption {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.suite-route-layout-fixture > .suite-route-layout {
  block-size: 96px;
  height: 96px;
  min-height: 96px;
  max-block-size: 96px;
  --suite-route-layout-gap: 8px;
  --suite-route-function-inline-size: clamp(56px, 38%, 82px);
  --suite-route-function-block-size: 44px;
  --suite-route-function-max-block-size: 44px;
}

.suite-route-layout-fixture .suite-route-layout-region {
  padding: 5px;
}

.suite-route-layout-preview-label {
  display: grid;
  place-content: center;
  gap: 4px;
  text-align: center;
  overflow: auto;
}

.suite-route-layout-preview-label strong {
  font-size: 10px;
}

.suite-route-layout-preview-label small {
  color: var(--text-muted);
  font-size: 9px;
  overflow-wrap: anywhere;
}

.suite-route-layout-fixture .suite-route-layout-region > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.suite-route-layout-fixture .suite-route-layout-region > header small {
  color: var(--text-muted);
}

.suite-ui-components-container-sample {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--suite-main-container-content-gap, 16px);
  padding:
    var(--suite-main-panel-padding-top, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-right, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-bottom, var(--suite-main-panel-padding, 22px))
    var(--suite-main-panel-padding-left, var(--suite-main-panel-padding, 22px));
}

.suite-ui-components-container-sample > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.suite-ui-components-container-sample > header small {
  color: var(--muted);
}

.suite-ui-components-container-scroll-region {
  display: grid;
  align-content: start;
  gap: var(--suite-main-container-content-gap, 16px);
}

.suite-ui-components-container-scroll-region span {
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-sub-panel, 8px);
  background: var(--surface-soft);
  color: color-mix(in srgb, var(--muted) 72%, var(--text));
}

.suite-ui-components-inner-surface {
  block-size: 160px;
}

.suite-ui-components-inner-surface-body {
  display: grid;
  align-content: start;
  gap: var(--suite-sub-panel-gap, 10px);
  color: var(--suite-sub-panel-text-color, var(--text));
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample {
  position: static;
  align-self: center;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 1.4fr) minmax(0, 1fr);
  align-items: var(--suite-shell-topbar-align-items, center);
  gap: var(--suite-shell-topbar-gap, 12px);
  container-type: inline-size;
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample
  > :is(.toolbar-left, .toolbar-center, .toolbar-right) {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample > .toolbar-right {
  justify-self: stretch;
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample
  :is(.toolbar-left > strong, .status-pill) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .toolbar-project-picker,
.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-combobox-shell {
  width: 100%;
  min-width: 0;
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-workspace-brand-trigger {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-workspace-brand-control {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-topbar-preview-icon {
  flex: 0 0 auto;
}

@container (max-width: 420px) {

  .suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-topbar-preview-icon,
  .suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-workspace-brand-name {
    display: none;
  }
}

.suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample [aria-disabled='true'] {
  pointer-events: none;
}

.suite-ui-components-sidebar-sample.sidebar.shell-sidebar {
  position: static;
  width: min(100%, var(--sidebar-width, 280px));
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  gap: var(--suite-shell-sidebar-gap, 0px);
  height: min(360px, 100%);
  max-height: 100%;
  padding: var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px));
  border-width: var(--suite-shell-sidebar-border-width, 1px);
  border-style: solid;
  border-color: var(--suite-shell-sidebar-border-color, var(--line));
  border-radius: var(--suite-shell-sidebar-radius, 20px);
  background: var(--suite-shell-sidebar-surface-bg, var(--surface));
  -webkit-backdrop-filter: var(--suite-shell-sidebar-backdrop, none);
  backdrop-filter: var(--suite-shell-sidebar-backdrop, none);
  text-align: var(--suite-shell-sidebar-text-align, left);
  overflow: hidden;
}

.suite-ui-components-sidebar-sample .nav-list {
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.suite-ui-components-sidebar-sample [aria-disabled='true'] {
  pointer-events: none;
}

.suite-ui-components-sidebar-account-slot {
  min-width: 0;
}

.suite-ui-components-sidebar-sample.sidebar.shell-sidebar.is-collapsed {
  width: var(--suite-state-collapsed-width, 72px);
}

.suite-ui-components-quality {
  display: block;
}

.suite-ui-components-quality-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  margin: 0;
  background: var(--suite-quality-summary-border-color, var(--line));
}

.suite-ui-components-quality-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  min-width: 0;
  background: var(--suite-quality-summary-surface-bg, var(--surface));
  text-align: left;
}

.suite-ui-components-quality-metrics dt,
.suite-ui-components-quality-metrics dd {
  margin: 0;
}

.suite-ui-components-quality-metrics dt {
  order: 2;
}

.suite-ui-components-quality-metrics dd {
  order: 1;
  min-width: 0;
}

.suite-ui-components-quality-metrics small {
  color: var(--muted);
}

.suite-ui-components-mode {
  align-self: stretch;
}

.suite-ui-components-mode > * {
  flex: 1;
}

.suite-ui-components-state-empty {
  display: grid;
  gap: 5px;
  padding-block: 8px;
}

.suite-ui-components-state-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.suite-ui-components-settings {
  display: grid;
  gap: 18px;
}

.suite-ui-components-property-group {
  display: grid;
  gap: 0;
}

.suite-ui-components-property-group-toggle {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--suite-type-caption);
  text-align: left;
  cursor: pointer;
}

.suite-ui-components-property-group-toggle:focus-visible {
  outline: var(--suite-state-focus-ring-width, 3px) solid var(--suite-state-focus-ring-color, color-mix(in srgb, var(--primary) 32%, transparent));
  outline-offset: var(--suite-state-focus-ring-offset, 2px);
  border-radius: var(--suite-radius-control);
}

.suite-ui-components-property-group-toggle b {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  transition: transform var(--suite-setting-group-motion-duration, var(--suite-transition-duration, 180ms)) var(--suite-setting-group-motion-easing, var(--suite-transition-easing, ease));
}

.suite-ui-components-property-group[data-ui-component-setting-group-expanded="false"] .suite-ui-components-property-group-toggle b {
  transform: rotate(-90deg);
}

.suite-ui-components-property-group-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(calc(var(--suite-setting-group-motion-distance, 6px) * -1));
  visibility: hidden;
  pointer-events: none;
  transition:
    grid-template-rows var(--suite-setting-group-motion-duration, var(--suite-transition-duration, 180ms)) var(--suite-setting-group-motion-easing, var(--suite-transition-easing, ease)),
    opacity var(--suite-setting-group-motion-duration, var(--suite-transition-duration, 180ms)) var(--suite-setting-group-motion-easing, var(--suite-transition-easing, ease)),
    transform var(--suite-setting-group-motion-duration, var(--suite-transition-duration, 180ms)) var(--suite-setting-group-motion-easing, var(--suite-transition-easing, ease)),
    visibility 0s linear var(--suite-setting-group-motion-duration, var(--suite-transition-duration, 180ms));
}

.suite-ui-components-property-group[data-ui-component-setting-group-expanded="true"] > .suite-ui-components-property-group-body {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.suite-ui-components-property-group-content {
  min-height: 0;
  display: grid;
  gap: 12px;
  padding-top: 6px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .suite-ui-components-composite-group-toggle b,
  .suite-ui-components-property-group-toggle b,
  .suite-ui-components-property-group-body {
    transition-duration: 0ms;
  }
}

.suite-ui-components-setting {
  display: grid;
  gap: 10px;
  min-height: 42px;
  padding: 0;
}

.suite-ui-components-setting-menu,
.suite-ui-components-setting-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.suite-ui-components-setting-range > strong {
  min-width: 0;
  font-size: var(--suite-type-caption);
  font-weight: 600;
}

.suite-ui-components-setting-range {
  grid-template-columns: minmax(72px, auto) minmax(120px, 1fr) auto;
  align-items: center;
}

.suite-ui-components-setting-range .suite-range-input {
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

.suite-ui-components-number-shell {
  display: inline-grid;
  grid-template-columns: minmax(54px, 74px) auto;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: var(--suite-type-caption);
}

.suite-ui-components-number-input {
  width: 100%;
  min-width: 0;
  text-align: end;
  font-variant-numeric: tabular-nums;
  min-height: var(--suite-form-height, var(--suite-control-height));
  padding: var(--suite-form-padding, 0 var(--suite-space-3));
  font-size: var(--suite-form-font-size, var(--suite-type-caption));
}

.suite-ui-components-border-group {
  display: grid;
  gap: 8px;
}

.suite-ui-components-border-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.suite-ui-components-link-button {
  width: var(--suite-icon-button-size, var(--suite-control-height));
  min-width: var(--suite-icon-button-size, var(--suite-control-height));
  height: var(--suite-icon-button-size, var(--suite-control-height));
  padding: 0;
}

.suite-ui-components-link-button .ui-icon {
  width: 17px;
  height: 17px;
}

.suite-ui-components-direction-table-wrap {
  overflow-x: auto;
  border-width: var(--suite-tables-border-width, 1px);
}

.suite-ui-components-direction-table {
  width: 100%;
  min-width: var(--suite-direction-setting-table-min-width, 360px);
  table-layout: fixed;
  border-collapse: collapse;
}

.suite-ui-components-direction-table th,
.suite-ui-components-direction-table td {
  padding: 6px 8px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.suite-ui-components-direction-table th:last-child,
.suite-ui-components-direction-table td:last-child {
  border-right: 0;
}

.suite-ui-components-direction-table th {
  color: color-mix(in srgb, var(--muted) 58%, var(--text));
  font-size: var(--suite-type-caption);
  font-weight: 600;
}

.suite-ui-components-direction-table .suite-ui-components-number-shell {
  grid-template-columns: minmax(42px, 1fr) auto;
  width: 100%;
}

.suite-ui-components-setting-menu select {
  width: min(160px, 54%);
  min-width: 0;
}

.suite-ui-components-setting-menu-controls {
  width: min(330px, 64%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.suite-ui-components-setting-menu-controls select {
  width: min(160px, 100%);
  flex: 1 1 140px;
}

.suite-ui-components-setting-note {
  flex: 1 0 100%;
  color: var(--muted);
  font-size: var(--suite-type-caption);
  line-height: 1.4;
  text-align: right;
}

.suite-ui-components-custom-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  white-space: nowrap;
}

.suite-ui-components-color-input {
  width: 42px;
  min-width: 42px;
  height: 30px;
  padding: 2px;
  cursor: pointer;
}

@media (max-width: 520px) {
  .suite-ui-components-setting-range {
    grid-template-columns: minmax(62px, auto) minmax(80px, 1fr) auto;
    gap: 8px;
  }

  .suite-ui-components-setting-control .suite-ui-components-number-shell,
  .suite-ui-components-setting-range > .suite-ui-components-number-shell {
    grid-template-columns: minmax(54px, 74px) auto;
  }

  .suite-ui-components-setting-menu select {
    width: min(150px, 58%);
  }

  .suite-ui-components-setting-menu-controls {
    width: min(260px, 66%);
  }
}

.suite-ui-components-footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block-start: var(--suite-space-2, 8px);
  border-block-start: 1px solid var(--line);
}

.suite-ui-components-actions {
  margin-inline-start: auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.suite-ui-components-save-message {
  margin: 0;
  color: var(--success, #047857);
}

@media (max-width: 1180px) {
  .suite-ui-components {
    grid-template-columns: minmax(190px, 0.75fr) minmax(380px, 1.5fr);
  }
}

@media (max-width: 760px) {
  .ui-components-route-body {
    overflow: auto;
  }

  .suite-ui-components {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "catalog"
      "stage"
      "inspector";
    height: auto;
    overflow: visible;
  }

  .suite-ui-components-inspector {
    grid-area: inspector;
  }

  .suite-ui-components-list {
    max-height: 230px;
  }

  .suite-ui-components-catalog,
  .suite-ui-components-stage {
    overflow: visible;
  }

  .suite-ui-components-stage:has(
    > .suite-ui-components-preview[data-component-preview="shell-sidebar"]
  ) {
    min-height: calc(
      var(--suite-shell-sidebar-preview-block-size, 360px)
      + clamp(
        var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)),
        2vh,
        20px
      )
      + clamp(
        var(--suite-container-safety-inset, var(--suite-compact-container-inset, 4px)),
        2vh,
        20px
      )
      + 2px
      + var(--suite-main-panel-padding-top, var(--suite-main-panel-padding, 22px))
      + var(--suite-main-panel-padding-bottom, var(--suite-main-panel-padding, 22px))
      + var(--suite-panel-border-top-width, 1px)
      + var(--suite-panel-border-bottom-width, 1px)
    );
  }

  .suite-ui-components-preview {
    min-height: 240px;
    padding: 20px;
  }

  .suite-ui-components-axis {
    grid-template-columns: 1fr;
  }

  .suite-ui-components-manager-control {
    width: 100%;
  }

  .suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-topbar-preview-icon,
  .suite-toolbar.shell-toolbar.suite-ui-components-topbar-sample .suite-workspace-brand-name {
    display: none;
  }

  .suite-ui-components-quality-metrics {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .suite-dropdown-menu.open,
.suite-menu.suite-dropdown-menu.open {
    animation: none;
  }

  .suite-ui-components-spinner { animation-duration: 1.6s; }
}

.suite-story-frame {
  min-width: min(680px, calc(100vw - 48px));
  padding: 36px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-main-panel, 20px);
  box-shadow: var(--shadow-soft);
}

.suite-story-frame[data-theme="light"] {
  --muted: #475569;
}

.suite-story-frame[data-theme="dark"] {
  --muted: #475569;
}

.suite-story-surface {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 10px;
}

.suite-story-preview {
  width: 100%;
  min-height: 240px;
  padding: 28px;
}

.suite-story-surface .suite-ui-components-form-sample,
.suite-story-surface > .suite-field,
.suite-story-surface > .suite-combobox-shell,
.suite-story-surface > .suite-content-option {
  width: min(100%, 480px);
}

/* Formal component roots each consume their own base appearance contract. */

.suite-ui-components-preview[data-component-preview="status"] .status-pill {
  color: var(--suite-status-on-surface, var(--text));
}

.suite-ui-components-preview[data-component-preview="module-toolbar"] .module-toolbar {
  color: var(--suite-module-toolbar-on-surface, var(--text));
}

/* State previews are the final visual layer. Non-default scenarios inherit
   base appearance and expose only their formal delta tokens. */
.workspace-ai-settings-page {
  align-content: start;
  display: grid;
  gap: 12px;
  padding: 0;
}

.workspace-ai-settings-scroll {
  overflow-x: hidden;
}

.workspace-ai-settings-route-layout,
.permission-admin-phase2-layout,
.mobile-app-dev-phase2-layout {
  height: 100%;
  min-height: 0;
}

.workspace-ai-settings-region {
  padding:
    var(--suite-main-panel-padding-top, 12px)
    var(--suite-main-panel-padding-right, 12px)
    var(--suite-main-panel-padding-bottom, 12px)
    var(--suite-main-panel-padding-left, 12px) !important;
}

.workspace-ai-settings-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.workspace-ai-settings-heading h2 {
  margin: 3px 0 4px;
}

.workspace-ai-settings-heading p,
.workspace-ai-settings-note p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.workspace-ai-settings-heading-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

/* Count and status sit in the toolbar row, not a footer under the table (本人 book-718). */
.workspace-ai-settings-count {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.workspace-ai-provider-pool {
  --suite-scrollbar-track-inset-inline: min(var(--suite-tables-radius, var(--suite-radius-sub-panel)), 12px);
  background: transparent;
  border: 0;
  border-radius: 0;
  overscroll-behavior-inline: contain;
  overflow-x: auto;
  overflow-y: hidden;
}

.workspace-ai-provider-table {
  background: var(--suite-tables-surface-bg, var(--surface));
  border: var(--suite-tables-border-width, 1px) solid var(--suite-tables-border-color, var(--line));
  border-collapse: separate;
  border-radius: var(--suite-tables-radius, var(--suite-radius-sub-panel));
  border-spacing: 0;
  overflow: hidden;
  width: 100%;
}

/* The owning editable table keeps its readable width across late Shared imports. */
.workspace-ai-provider-pool > table.workspace-ai-provider-table[data-suite-component="component-table"] {
  min-width: 980px;
}

.workspace-ai-provider-table > caption.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.workspace-ai-provider-table-head th {
  background: color-mix(in srgb, var(--surface) 92%, var(--line) 8%);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  text-align: left;
}

.workspace-ai-provider-row td {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  vertical-align: middle;
}

.workspace-ai-provider-row:last-child td {
  border-bottom: 0;
}

.workspace-ai-provider-row.is-revoked td {
  background: color-mix(in srgb, var(--surface) 88%, var(--danger-soft) 12%);
}

.workspace-ai-settings-grid {
  display: grid;
  gap: 12px;
}

.workspace-ai-setting-field {
  display: grid;
  min-width: 0;
}

.workspace-ai-setting-field > span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.workspace-ai-setting-field input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  width: 100%;
  min-height: var(--suite-form-height, var(--suite-control-height));
  padding: var(--suite-form-padding, 0 var(--suite-space-3));
  font-size: var(--suite-form-font-size, var(--suite-type-caption));
}

.workspace-ai-setting-field input:disabled {
  background: color-mix(in srgb, var(--surface) 86%, var(--line) 14%);
  color: var(--muted);
}

.workspace-ai-setting-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
  outline: 0;
}

.workspace-ai-provider-status {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 2px;
  min-width: 0;
}

.workspace-ai-provider-status-main {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.workspace-ai-provider-status-main i {
  background: currentColor;
  border-radius: 50%;
  height: 6px;
  flex: 0 0 6px;
  width: 6px;
}

.workspace-ai-provider-status small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-ai-provider-status.is-active {
  color: var(--success);
}

.workspace-ai-provider-status.is-revoked {
  color: var(--danger);
}

.workspace-ai-provider-status.is-new {
  color: var(--primary);
}

.workspace-ai-settings-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
}

.workspace-ai-settings-message {
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 8px 12px;
}

.workspace-ai-settings-message.error {
  background: var(--danger-soft);
  color: var(--danger);
}

.workspace-ai-settings-message.good {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.workspace-ai-settings-note {
  color: var(--muted);
  font-size: 12px;
  margin: 0 2px;
}

.workspace-ai-provider-add-row {
  background: color-mix(in srgb, var(--surface) 95%, var(--primary) 5%);
  border-bottom: 0;
  border-top: 1px dashed color-mix(in srgb, var(--primary) 30%, var(--line));
}

.workspace-ai-provider-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 10px 12px;
}

@media (max-width: 900px) {
  .workspace-ai-settings-heading {
    flex-wrap: nowrap;
  }

  .workspace-ai-settings-heading-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .workspace-ai-provider-status {
    align-self: center;
  }

  .workspace-ai-settings-actions {
    justify-content: flex-end;
  }
}
.suite-ui-components-table-wrap.is-sticky-scroll {
  max-height: 220px;
  overflow: auto;
}

/* UI Design Shell preview follows the production hierarchy: the workspace owns
   the outer inset, the workbench owns toolbar-to-panel spacing, and the one
   main panel owns the only vertical scroll region. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-main.workspace {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-frame-content-shell.content {
  min-height: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  inline-size: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workbench-preview
  > .suite-ui-theme-shell-frame-managementbar.module-toolbar {
  flex: 0 0 auto !important;
  margin: var(--suite-module-toolbar-margin, 0px) !important;
  top: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview.suite-main-panel--scroll-shell {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  inline-size: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview > .suite-main-panel-scroll-region {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  .suite-ui-theme-shell-workspace-preview
  > .suite-ui-theme-component-header[data-suite-main-container-slot="header"] {
  flex: 0 0 auto;
}

/* Specific terminal contract: older preview compatibility rules must not turn
   the content wrapper or workbench back into the scroll owner. */
.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body
  > .suite-ui-theme-shell-frame-main.workspace
  > .suite-ui-theme-shell-frame-content-shell.content {
  display: flex !important;
  flex: 1 1 0 !important;
  min-block-size: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body
  > .suite-ui-theme-shell-frame-main.workspace
  > .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview.module-workbench.suite-management-workbench {
  block-size: auto !important;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  gap: var(--suite-module-toolbar-content-gap, var(--shell-content-gap, 0px)) !important;
  min-block-size: 0 !important;
  overflow: visible !important;
}

.ui-design-route-body
  .suite-ui-theme-shell-frame-preview.shell-frame
  > .suite-ui-theme-shell-frame-body.shell-body
  > .suite-ui-theme-shell-frame-main.workspace
  > .suite-ui-theme-shell-frame-content-shell.content
  > .suite-ui-theme-shell-workbench-preview.module-workbench.suite-management-workbench
  > .suite-ui-theme-shell-workspace-preview.suite-main-panel--scroll-shell {
  block-size: auto !important;
  display: flex !important;
  flex: 1 1 0 !important;
  flex-direction: column !important;
  min-block-size: 0 !important;
  overflow: hidden !important;
}

/* Global style designer: one workspace preview and a secondary component catalog. */
.suite-global-style.suite-route-layout{--suite-route-function-inline-size:min(340px,40%);grid-template-rows:minmax(0,1fr);min-width:0;min-height:0}

.suite-global-style *{box-sizing:border-box}.suite-global-style-nav{display:flex;gap:8px;flex-wrap:wrap}
.suite-global-style-editor{min-width:0;min-height:0}.suite-global-style-scroll-body:focus-visible{outline:2px solid var(--suite-primary-ink,var(--primary));outline-offset:-4px}.suite-global-style-footer{padding-block-start:var(--suite-space-2,8px);border-block-start:1px solid var(--line)}.suite-global-style-fields{display:grid;gap:var(--suite-space-4,16px)}.suite-global-style-field-group{display:grid;gap:var(--suite-space-2,8px)}.suite-global-style-fields h3{margin:0;font-size:1rem}.suite-global-style-options{flex-wrap:wrap}.suite-global-style-custom{align-self:center}.suite-global-style-range{display:grid;gap:var(--suite-space-2,8px)}.suite-global-style-range>span{display:flex;justify-content:space-between}.suite-global-style-range input{width:100%}.suite-global-style-select{display:grid;gap:var(--suite-space-2,8px)}.suite-global-style-select select{width:100%}.suite-global-style-color-pair{display:grid;gap:12px}.suite-global-style-color{display:flex;align-items:center;justify-content:space-between;gap:12px}
.suite-global-style-preview{min-width:0;min-height:0;color:var(--text);font-family:var(--suite-font-family,inherit)}.suite-global-style-preview-header{display:flex;align-items:center;justify-content:space-between;gap:var(--suite-main-container-gap,16px);flex-wrap:wrap}.suite-global-style-preview-header strong{min-width:0;overflow-wrap:anywhere}.suite-global-style-preview-scroll{min-width:0}.suite-global-style-workspace{container-type:inline-size;container-name:suite-global-style-workspace;display:flex;flex-direction:column;min-width:0;min-height:100%;overflow:hidden;border:1px solid var(--line);border-radius:var(--suite-radius-main-panel,20px);background:var(--surface-strong);color:var(--text);font-family:var(--suite-font-family,inherit)}.suite-global-style-workspace-header{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface);overflow-wrap:anywhere}.suite-global-style-workspace-header span{color:var(--muted)}.suite-global-style-workspace-body{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);flex:1;min-height:0}.suite-global-style-workspace-sidebar{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 10px;background:var(--surface-soft);border-right:1px solid var(--line)}.suite-global-style-workspace-sidebar .suite-navigation-item{width:100%;overflow-wrap:anywhere}.suite-global-style-sample-layout{min-width:0;padding:16px}.suite-global-style-sample-container{min-width:0;padding:20px}.suite-global-style-sample-container .suite-table-wrap{min-width:0}.suite-global-style-sample-container h3{margin:0;overflow-wrap:anywhere}.suite-global-style-sample-container p{opacity:.8}.suite-global-style-sample-actions{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.suite-global-style-sample-container label{display:grid;gap:6px;margin:12px 0}.suite-global-style-sample-menu{position:relative;width:100%;min-width:0;margin-top:16px}.suite-global-style-sample-options{position:relative;width:min(170px,100%);min-width:0;max-width:100%;margin-top:6px;padding:8px}
.suite-global-style-actions{display:flex;gap:var(--suite-space-2,8px);flex-wrap:wrap;margin-top:0}.suite-global-style-message{margin:12px 0 0}.suite-global-style-message[data-error="true"]{color:#b42318}.suite-global-style-hint,.suite-global-style-note{margin:0;color:var(--muted);font-size:.875rem}
.suite-global-style[data-ui-design-mode="components"]{min-height:0}.suite-global-style-components{height:100%;min-height:0;min-width:0;color:var(--text);font-family:var(--suite-font-family,inherit)}.suite-global-style-components-header{display:flex;align-items:center;gap:16px;margin-bottom:12px}.suite-global-style-components-header p{margin:0;color:var(--muted)}.suite-global-style-components .suite-ui-components{min-height:0;height:100%;display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"catalog stage" "catalog inspector";gap:12px;overflow:visible}.suite-global-style-components .suite-ui-components-stage{min-width:0;min-height:0}.suite-global-style-component-states{padding:16px;min-width:0}.suite-global-style-component-states .suite-ui-components-manager-controls{display:flex;flex-wrap:wrap;gap:12px}.suite-global-style-components .suite-ui-components-preview{background:var(--surface-soft);border-color:var(--line)}.suite-global-style-components .suite-ui-components-material-backdrop{display:none}
/* Legacy stacked layouts never size the shared workspace or its stable panes. */
@media(max-width:900px){.suite-global-style:where(:not(.suite-workspace)){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0}.suite-global-style:where(:not(.suite-workspace)):where(:not([data-ui-design-mode="components"])){block-size:auto}.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-editor{overflow:visible}.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-editor > .suite-global-style-scroll-body{flex:0 1 auto;overflow:visible;overscroll-behavior:auto}.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-preview,.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-workspace{overflow:visible}.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-preview{min-height:420px}.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"catalog" "stage" "inspector";min-height:0}.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components-catalog,.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components-stage,.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-global-style-component-states{min-height:0}.suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components-list{max-height:250px}}
@media(max-width:600px){.suite-global-style-components-header{align-items:flex-start;flex-direction:column;gap:8px}}

/* Keep the catalog scrollable without letting its 22 entries size the preview row. */
@media(min-width:901px){
  .suite-global-style-components .suite-ui-components{height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
  .suite-global-style-components .suite-ui-components-catalog{min-height:0;overflow:hidden}
  .suite-global-style-components .suite-ui-components-stage{min-height:0;overflow:auto}
}
.suite-global-style-components .suite-ui-components-list-item{min-padding:4px 10px}
.suite-global-style-components .suite-ui-components-list-item>span:last-child{display:block;min-width:0;overflow:hidden;white-space:nowrap}
.suite-global-style-components .suite-ui-components-list-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suite-global-style-stage-header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0;padding:4px 8px}
.suite-global-style-stage-header strong{color:var(--text);overflow-wrap:anywhere}.suite-global-style-stage-header small{color:var(--muted);overflow-wrap:anywhere}
@media(max-width:900px){
  .suite-global-style:where(:not(.suite-workspace)){height:auto;min-height:0;align-self:start;grid-template-rows:max-content max-content max-content;align-content:start}
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-editor{height:auto;min-height:0;overflow:visible;align-self:start}
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-preview{min-height:0;align-self:start}
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components{height:auto;grid-template-rows:max-content max-content max-content;overflow:visible}
}
.suite-global-style-components .suite-ui-components{background:transparent;padding:0;border:0;border-radius:0;box-shadow:none;gap:var(--suite-main-container-gap,16px)}
.suite-global-style-components .suite-ui-components-list-item.active{background:var(--surface-strong);color:var(--suite-primary-ink,var(--primary));border-color:var(--primary)}

.suite-global-style-presentation{display:grid;place-items:center;min-width:0;min-height:100%;padding:16px;background:var(--surface-strong);color:var(--text);font-family:var(--suite-font-family,inherit);border:1px solid var(--line);border-radius:var(--suite-radius-main-panel,20px)}
.suite-global-style-presentation .suite-ui-presentation-preview{margin:0;max-width:100%}
.suite-global-style-presentation .suite-ui-presentation-preview-header h2{margin:0;color:var(--text);font-family:var(--suite-presentation-title-font-family,var(--suite-title-font-family,var(--suite-body-font-family,inherit)));font-size:var(--suite-presentation-title-size,var(--suite-title-presentation-size,24px));line-height:var(--suite-presentation-title-line-height,var(--suite-title-line-height,1.18));overflow-wrap:anywhere}
.suite-global-style-presentation .suite-ui-presentation-preview-header p{margin:8px 0 0;color:var(--muted);overflow-wrap:anywhere}
.suite-global-style-palette{display:grid;gap:8px;min-width:0}
.suite-global-style-palette-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.suite-global-style-palette-row .suite-global-style-color{min-width:0}
.suite-global-style-palette-row .command{flex:0 0 auto;min-height:var(--suite-control-height,30px)}
.suite-global-style-block-examples{display:grid;gap:8px;min-width:0;margin:14px 0}
.suite-global-style-accent-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.suite-global-style-block-examples .suite-style-block{display:grid;gap:8px;min-width:0;line-height:1.45}
.suite-global-style-sample-container p{opacity:1}
@media(max-width:624px){.suite-global-style-palette-row .command{font-size:var(--suite-critical-label-min-size)}.suite-global-style-accent-group{grid-template-columns:1fr}}

/* Action and selection text uses the actual filled surface, including moving indicators. */
.suite-button.primary,.suite-button.suite-button-primary,.command.primary{background:var(--suite-primary-action-bg,var(--primary));border-color:var(--suite-primary-action-bg,var(--primary));color:var(--suite-primary-action-text,var(--suite-primary-on-color,#fff));opacity:1}
.suite-button.primary:not(:disabled):hover,.suite-button.suite-button-primary:not(:disabled):hover,.command.primary:not(:disabled):hover{background:var(--suite-primary-action-hover-bg,var(--suite-primary-action-bg,var(--primary)));border-color:var(--suite-primary-action-hover-bg,var(--suite-primary-action-bg,var(--primary)));color:var(--suite-primary-action-text,var(--suite-primary-on-color,#fff))}
.suite-button.primary:not(:disabled):active,.suite-button.suite-button-primary:not(:disabled):active,.command.primary:not(:disabled):active{background:var(--suite-primary-action-active-bg,var(--suite-primary-action-bg,var(--primary)));border-color:var(--suite-primary-action-active-bg,var(--suite-primary-action-bg,var(--primary)))}
.suite-navigation-item[aria-current='page'],.suite-navigation-item.is-selected,.suite-navigation-item.is-active{color:var(--suite-primary-selected-ink,var(--suite-primary-ink,var(--primary)))}
.suite-segmented .suite-segmented-indicator,.suite-segmented-indicator,.suite-management-tabs .suite-segmented-indicator{background:var(--suite-segmented-active-bg,var(--suite-navigation-active-bg,var(--primary-soft)))}
.suite-segmented .is-active,.suite-segmented [aria-selected='true'],.suite-management-tabs .active{color:var(--suite-primary-selected-ink,var(--suite-primary-ink,var(--primary)))}
.workspace-ai-setting-field input:focus{border-color:var(--suite-primary-ink,var(--primary));box-shadow:0 0 0 2px var(--suite-primary-ink,var(--primary))}
.suite-management-tabs .suite-management-tab,.suite-management-tabs .suite-management-tab .suite-segmented-label{font-size:max(var(--suite-critical-label-min-size),var(--suite-type-body));font-weight:700;line-height:1.4}

/* The management toolbar owns the tray surface around its segmented controls. */
.suite-management-switchbar .suite-management-tabs {
  border-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* UI Design adopts the formal bounded route plane; the Shell owns its outside inset. */
.module-workbench, .suite-route-layout { --suite-shell-workspace-min-inset: var(--suite-layout-screen-inset, 8px) !important; }
/* Native scrollbars spend the same outside budget as the page carrier. Wider
   system gutters retain their safe minimum; they never produce negative padding. */
:root .shell-frame > .shell-body > .workspace > .content:not(.feature-content) > .suite-shell-page-scroll-region.scrollbar-thin[data-suite-shell-page-scroll-region] > :is(.module-workbench, .suite-route-layout) {
  padding-right: max(0px, calc(max(var(--shell-content-padding-right, 0px), var(--suite-shell-workspace-min-inset, 8px)) - var(--suite-native-scrollbar-inline-gutter, 0px))) !important;
}
.suite-global-style.suite-route-layout > [data-suite-route-region] { min-width: 0; min-height: 0; }
.suite-global-style-components .suite-ui-components-catalog > [data-global-style-catalog-header] { flex-wrap: wrap; align-items: flex-start; gap: var(--suite-main-container-gap, 16px); }
.suite-global-style-components .suite-ui-components-list-item {  }
.suite-global-style-components .suite-ui-components-list-item > span:last-child,
.suite-global-style-components .suite-ui-components-list-item strong { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
/* Native designer fields use Shared intrinsic wrapping instead of percentage
   widths that leave the selected value only half of an already narrow row. */
.suite-global-style .suite-ui-components-manager-control.suite-responsive-field {
  min-width: 0;
}
.suite-global-style .suite-responsive-field > .suite-responsive-field__control,
.suite-global-style .suite-ui-components-setting-menu-controls.suite-responsive-field__control > select {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 900px) {
  .module-workbench.ui-design-workbench:where(:not(.suite-workspace-frame)) { height: auto; min-height: 100%; }
  .module-workbench.ui-design-workbench:where(:not(.suite-workspace-frame)) .suite-management-route-body.ui-design-route-body { flex: 0 1 auto; }
  .suite-global-style.suite-route-layout:where(:not(.suite-workspace)) { block-size: auto; contain: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: 'function' 'content'; align-self: start; }
  .suite-global-style.suite-route-layout:where(:not(.suite-workspace))[data-ui-design-mode='components'] { grid-template-areas: 'content'; grid-template-rows: auto; }
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-preview { height: auto; overflow: visible; }
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-preview > .suite-global-style-preview-scroll { flex: 0 1 auto; overflow: visible; overscroll-behavior: auto; }
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components { height: auto; }
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components-list { max-height: none; overflow: visible; }
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components-catalog-scroll-host,
  .suite-global-style:where(:not(.suite-workspace)) .suite-global-style-components .suite-ui-components-overlay-scroll-body { overflow: visible; }
}

/* Horizontal workspace v2: one outer frame; chrome is on the global plane. */
:root .shell-frame > .shell-body { grid-template-columns: var(--sidebar-width, 286px) minmax(0, 1fr); }
:root .shell-frame.sidebar-collapsed > .shell-body { grid-template-columns: var(--suite-layout-sidebar-collapsed-width, 56px) minmax(0, 1fr); }
:root .shell-frame > .shell-body > .sidebar.suite-workspace-global-plane { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
:root .shell-frame > .suite-workspace-global-plane { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
:root .shell-frame > .shell-body > .workspace > .content > [data-suite-workspace-page='v2'] {
  padding-block-start: calc(var(--suite-shell-page-shadow-bleed) + var(--suite-layout-screen-inset, 8px)) !important;
  padding-inline-start: calc(var(--suite-shell-page-shadow-bleed) + var(--suite-layout-screen-inset, 8px)) !important;
  padding-block-end: var(--suite-layout-screen-inset, 8px);
  padding-inline-end: max(0px, calc(var(--suite-layout-screen-inset, 8px) - var(--suite-native-scrollbar-inline-gutter, 0px)));
}
:root .shell-frame > .shell-body > .workspace > .content > [data-suite-workspace-page='v2'] > :is(.module-workbench, .suite-route-layout) {
  padding: 0 !important; margin: 0 !important; gap: 0 !important;
  block-size: 100% !important; min-block-size: 0 !important;
}
:root .suite-workspace-frame { gap: 0 !important; min-inline-size: 0; min-block-size: 0; }
:root .suite-workspace-frame > :is(.suite-management-route-body, .module-design-route-body) {
  gap: 0 !important; padding: 0 !important; margin: 0 !important; flex: 1 1 0 !important; min-block-size: 0 !important; overflow: hidden;
}
/* Native source carriers fill the frame remainder after its toolbar. Region
   rendering may add a body wrapper, which must continue the same flex chain. */
:root .suite-workspace-frame > [data-workspace-surface='shell-native-source-parity'] {
  flex: 1 1 0 !important; min-block-size: 0 !important; min-inline-size: 0;
}
:root .suite-workspace-body:has(> [data-workspace-surface='shell-native-source-parity']) {
  display: flex; flex-direction: column; flex: 1 1 0 !important;
  min-block-size: 0 !important; min-inline-size: 0; overflow: hidden;
}
:root .suite-workspace.suite-route-layout[data-suite-workspace-mode] {
  block-size: 100% !important; min-block-size: 0 !important; min-height: 0 !important;
  align-self: stretch; contain: none; gap: 0 !important;
}
:root .suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-body {
  flex: 1 1 0 !important; min-block-size: 0 !important; min-height: 0 !important;
  overflow: auto !important; overscroll-behavior: contain;
}
:root .suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane[data-suite-workspace-state='pane'] {
  overflow: hidden !important; min-block-size: 0 !important; min-height: 0 !important;
}
:root .suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-header {
  overflow: visible !important; max-height: none !important; height: auto !important; inline-size: auto !important;
}
:root .suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > [data-suite-main-container-slot='footer'] {
  margin: 0; padding: var(--suite-space-2, 8px) var(--suite-main-panel-padding-right, 22px) var(--suite-main-panel-padding-bottom, 22px) var(--suite-main-panel-padding-left, 22px);
}

:root .suite-workspace-header[hidden] { display: none !important; }
:root .suite-workspace-frame > .suite-workspace-toolbar[data-suite-toolbar-purpose='integrated'] {
  inline-size: auto !important; width: auto !important; margin: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}

:root .shell-frame > .shell-body > .workspace > .content.feature-content {
  padding: var(--suite-layout-screen-inset, 8px) !important;
}
/* A direct v2 page carrier owns the complete outside inset. */
:root .shell-frame > .shell-body > .workspace > .content.feature-content:has(> [data-suite-workspace-page='v2']) {
  padding: 0 !important;
}
:root .shell-frame > .shell-body > .workspace > .content.feature-content > .suite-workspace-frame {
  padding: 0 !important; margin: 0 !important; gap: 0 !important;
}

/* The v2 frame owns no content padding. The page carrier spends outside space;
   pane bodies own 22px, so the primary navigation begins at the frame border. */
:root .shell-frame > .shell-body > .workspace > .content:not(.feature-content)
  > .suite-shell-page-scroll-region.scrollbar-thin[data-suite-shell-page-scroll-region][data-suite-workspace-page='v2']
  > :is(.module-workbench.suite-workspace-frame, .suite-route-layout.suite-workspace-frame) {
  padding: 0 !important; margin: 0 !important; gap: 0 !important;
}
:root .suite-workspace-frame > .suite-workspace-toolbar.suite-container-header--attached-tabs {
  min-height: 0 !important; min-block-size: max(var(--suite-attached-tab-height), 1lh, var(--suite-buttons-height, var(--suite-control-height, 30px))) !important; height: auto !important;
  padding: 0 !important; margin: 0 !important; align-items: stretch !important;
  gap: 0 !important; flex-wrap: wrap; position: relative; top: auto;
}
:root .suite-workspace-frame > .suite-workspace-toolbar.suite-container-header--attached-tabs
  > .suite-container-header-leading,
:root .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'],[data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading {
  min-height: 0 !important; min-block-size: 0 !important; height: auto !important;
  padding: 0 !important; margin: 0 !important; align-items: stretch !important;
}
:root .suite-workspace-frame > .suite-workspace-toolbar.suite-container-header--attached-tabs
  > .suite-container-header-leading > .suite-management-tabs[role='tablist'] {
  min-height: 0 !important; min-block-size: 0 !important; height: auto !important;
  padding: 0 calc(var(--suite-attached-tab-radius) * 2) !important; margin: 0 !important; align-items: stretch !important;
  flex-wrap: wrap; border: 0 !important; border-radius: 0 !important;
}
:root .suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > .suite-management-tabs[role='tablist']::before {
  display: none !important; content: none !important;
}
.suite-ui-theme-preview-mode-buttons {
  display: flex; align-items: center; flex-wrap: nowrap; gap: var(--suite-space-2, 8px);
  inline-size: fit-content; min-inline-size: 0; max-inline-size: 100%;
}

/* The preview owns one allocated choice track and two natural action tracks. */
.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-header.suite-global-style-preview-header {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  min-inline-size: var(--suite-ui-preview-header-min-inline-size, 0px);
}
/* Hidden workspace controls must not leave an empty track and gap past the actions. */
.suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-header.suite-global-style-preview-header:not(:has(> .suite-workspace-controls:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr) auto !important;
}
.suite-global-style-preview-header > [data-suite-ui-preview-mode-carrier],
.suite-global-style-settings-header > [data-suite-ui-section-tabs-carrier] {
  justify-self: stretch; inline-size: 100%;
}
.suite-global-style-preview-header > .suite-container-header-actions > [data-global-style-components-action] {
  white-space: nowrap;
  min-block-size: max(var(--suite-control-height, 30px), var(--suite-ui-preview-action-min-block-size, 0px));
}
.suite-global-style-preview-header [data-global-style-components-icon] {
  display: flex; align-items: center; justify-content: center; line-height: 0;
}
.suite-global-style-preview-header [data-global-style-components-icon] > svg {
  inline-size: var(--suite-button-icon-size, var(--suite-icon-size-18px, 18px));
  block-size: var(--suite-button-icon-size, var(--suite-icon-size-18px, 18px));
}
.suite-global-style-preview-header [data-global-style-components-action] > [hidden] {
  display: none !important;
}
@container suite-global-style-workspace (max-width: 38em) {
  .suite-global-style-workspace-body { grid-template-columns: minmax(0, 1fr); }
  .suite-global-style-workspace-sidebar {
    flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .suite-global-style-workspace-sidebar .suite-navigation-item {
    flex: 0 1 auto; width: auto; max-inline-size: 100%;
  }
  .suite-global-style-sample-layout { padding: 10px; }
  .suite-global-style-sample-container { padding: 14px; }
}

/* Global chrome recedes into a single background plane. Controls retain their
   own outlines; the topbar/sidebar carriers have no card edge or elevation. */
:root .shell-frame {
  --suite-workspace-backdrop: color-mix(in srgb, var(--bg) 96%, var(--text) 4%);
  background: var(--suite-workspace-backdrop) !important;
}
:root .shell-frame > .shell-body,
:root .shell-frame > .shell-body > .workspace {
  background: transparent !important;
}
:root .shell-frame > .suite-workspace-global-plane,
:root .shell-frame > .shell-body > .sidebar.suite-workspace-global-plane {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
:root .shell-frame > .suite-workspace-global-plane::before,
:root .shell-frame > .suite-workspace-global-plane::after,
:root .shell-frame > .shell-body > .sidebar.suite-workspace-global-plane::before,
:root .shell-frame > .shell-body > .sidebar.suite-workspace-global-plane::after {
  box-shadow: none !important;
  border: 0 !important;
}

/* The frame is a stable layout carrier. Only the content below the primary
   strip paints the main container; tabs can flare outward over its top edge. */
:root .suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs),
:root .suite-workspace-frame.suite-dynamic-module-workbench {
  --suite-primary-tabs-surface: var(--suite-panel-bg, var(--surface));
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible !important;
  isolation: isolate;
}
:root .suite-workspace-frame.suite-dynamic-module-workbench > .suite-dynamic-module-route-body,
:root .suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs)
  > :is(.suite-management-route-body, .module-design-route-body, .suite-dynamic-module-route-body, .suite-route-layout, [data-workspace-surface='shell-native-source-parity'], .area-management-route-body) {
  position: relative;
  background: var(--suite-primary-tabs-surface, var(--suite-panel-bg, var(--surface))) !important;
  border: 1px solid var(--suite-panel-border-color, var(--line)) !important;
  border-top: 0 !important;
  border-radius: var(--suite-primary-tabs-radius, calc(var(--suite-tab-item-radius, 20px) * .5)) var(--suite-primary-tabs-radius, calc(var(--suite-tab-item-radius, 20px) * .5)) var(--suite-radius-main-panel, 16px) var(--suite-radius-main-panel, 16px) !important;
  box-shadow: var(--suite-panel-shadow) !important;
  backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
  -webkit-backdrop-filter: var(--suite-panel-backdrop, var(--suite-theme-card-backdrop, none));
  overflow: hidden;
  z-index: 0;
}
/* A mounted primary attached header owns its adjacent body through Shared.
   Shell keeps only the layout carriers neutral. Without that assembly (loading,
   error, fallback, or an ordinary tablist), the route body above keeps its surface. */
:root .suite-workspace-frame.suite-dynamic-module-workbench
  > .suite-dynamic-module-route-body:has(> [data-suite-dynamic-module-host]
    .suite-container-header--attached-tabs:not(.suite-workspace-pane:not([data-suite-workspace-pane='content']) *):not([data-suite-semantic-card] *)
    + :is([data-suite-primary-tabs-body], .suite-workspace-body, .suite-main-panel-scroll-region, .suite-route-layout, .suite-management-route-body)) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root .suite-workspace-frame > .suite-workspace-toolbar.suite-container-header--attached-tabs {
  z-index: 1;
  margin-block-end: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Empty restore slots reserve no space; visible controls stay in the primary row. */
:root [data-suite-workspace-page-tabs='shell'] > [data-suite-workspace-restore-slot] {
  min-inline-size: 0;
  flex: 0 0 auto;
  align-self: center;
}
:root [data-suite-workspace-page-tabs='shell'] > [data-suite-workspace-restore-slot]:not(:has(> :not([hidden]))) {
  display: none;
}

/* Only declared direct mounted primary strips transfer the outer paint.
   Descendant or function-pane tablists alone never admit a frame. */
:root .suite-workspace-frame.suite-dynamic-module-workbench:not(:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs)):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-dynamic-module-workbench)):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane ~ .suite-workspace-pane)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] ~ .suite-workspace)):not(:has(> .suite-dynamic-module-route-body ~ .suite-dynamic-module-route-body)):not(:has(> .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] ~ .suite-dynamic-module-host[data-suite-dynamic-module-host])), 
:root .suite-workspace-frame.suite-dynamic-module-workbench:not(:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs)):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-dynamic-module-workbench)):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane ~ .suite-workspace-pane)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] ~ .suite-workspace)):not(:has(> .suite-dynamic-module-route-body ~ .suite-dynamic-module-route-body)):not(:has(> .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] ~ .suite-dynamic-module-host[data-suite-dynamic-module-host])):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > [data-suite-route-workspace] ~ [data-suite-route-workspace])), 
:root .suite-workspace-frame.suite-dynamic-module-workbench:not(:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs)):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-dynamic-module-workbench)):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs > .suite-container-header-leading > :is([role='tablist'],[data-suite-primary-navigation])):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell']:is([data-suite-workspace-mode='panes'], [data-suite-workspace-mode='drawer']) > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs + .suite-workspace-body):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane ~ .suite-workspace-pane)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane > [data-suite-main-container-slot='footer'])):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-header.suite-container-header--attached-tabs ~ .suite-workspace-header.suite-container-header--attached-tabs)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] > .suite-workspace-pane[data-suite-workspace-pane='content'] > .suite-workspace-body ~ .suite-workspace-body)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body > .suite-workspace[data-suite-workspace-mode][data-suite-workspace-owner='shell'] ~ .suite-workspace)):not(:has(> .suite-dynamic-module-route-body ~ .suite-dynamic-module-route-body)):not(:has(> .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] ~ .suite-dynamic-module-host[data-suite-dynamic-module-host])):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench ~ .module-workbench)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .module-workbench > .suite-dynamic-module-route-body ~ .suite-dynamic-module-route-body)), 
:root .suite-workspace-frame.suite-dynamic-module-workbench:not(:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs)):not(:where(.suite-workspace-frame:has(> .suite-workspace-toolbar.suite-container-header--attached-tabs) .suite-dynamic-module-workbench)):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace-frame[data-suite-primary-tabs-frame] > [data-suite-primary-tabs-strip].suite-container-header--attached-tabs > :is([role='tablist'],[data-suite-primary-navigation])):has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace-frame[data-suite-primary-tabs-frame] > [data-suite-primary-tabs-strip].suite-container-header--attached-tabs + [data-suite-primary-tabs-body]):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace-frame[data-suite-primary-tabs-frame] > [data-suite-primary-tabs-strip].suite-container-header--attached-tabs ~ [data-suite-primary-tabs-strip].suite-container-header--attached-tabs)):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace-frame[data-suite-primary-tabs-frame] > [data-suite-primary-tabs-body] ~ [data-suite-primary-tabs-body])):not(:has( > .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-workspace-frame[data-suite-primary-tabs-frame] ~ .suite-workspace-frame[data-suite-primary-tabs-frame])):not(:has(> .suite-dynamic-module-route-body ~ .suite-dynamic-module-route-body)):not(:has(> .suite-dynamic-module-route-body > .suite-dynamic-module-host[data-suite-dynamic-module-host] ~ .suite-dynamic-module-host[data-suite-dynamic-module-host])) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible !important;
  isolation: isolate;
}

/* Legacy moving-pill text is inverse ink because it expects a painted pill.
   Attached primary navigation suppresses that pill and uses the Shared surface/ink. */
:root .suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) > .suite-container-header-leading > .suite-management-tabs.has-tab-background
  > .suite-management-tab.suite-segmented-option[role='tab'][aria-selected='true'] {
  color: var(--suite-primary-selected-ink, var(--suite-primary-ink, var(--primary))) !important;
  background: var(--suite-panel-bg, var(--surface)) !important;
  box-shadow: none !important;
}

/* Fixed action rows use the same content inset and separator as pane headers. */
:root .suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > [data-suite-main-container-slot='footer'] {
  position: relative; box-sizing: border-box; inline-size: auto !important; width: auto !important;
  align-self: stretch; border: 0 !important;
  padding-block: var(--suite-main-panel-padding-top, 22px) var(--suite-main-panel-padding-bottom, 22px) !important;
}
:root .suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > [data-suite-main-container-slot='footer']::before {
  content: ''; position: absolute; inset-block-start: 0;
  inset-inline-start: var(--suite-main-panel-padding-left, 22px);
  inset-inline-end: var(--suite-main-panel-padding-right, 22px);
  inline-size: auto; block-size: 1px; background: var(--line); pointer-events: none;
}
:root .suite-workspace-header > .suite-global-style-nav { padding: 0 !important; border: 0 !important; }


/* Compact Shell chrome shares the existing 760px workspace breakpoint.
   Navigation overlays the workspace; no collapsed rail consumes page width. */
.shell-sidebar-backdrop,
.shell-sidebar-drawer-heading,
.toolbar-project-compact-toggle,
.toolbar-project-context-current,
.toolbar-status-icon { display: none; }
.toolbar-project-context { display: contents; }
/* Project presentation follows its independent toolbar budget; sidebar keeps
   the existing 760px breakpoint. The field can shrink before choosing ICON. */
:root .shell-frame > .shell-toolbar { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; }
:root .shell-frame > .shell-toolbar .toolbar-project-picker {
  flex: 0 0 var(--suite-toolbar-project-width, 360px);
  inline-size: var(--suite-toolbar-project-width, 360px);
  width: var(--suite-toolbar-project-width, 360px); min-inline-size: 0 !important;
}
:root .shell-frame > .shell-toolbar .toolbar-project-combobox { min-inline-size: 0 !important; width: 100%; }
.toolbar-project-picker .toolbar-project-field-icon {
  display: inline-flex; position: absolute; inset-inline-start: 12px; inset-block-start: 50%;
  transform: translateY(-50%); pointer-events: none; color: var(--muted);
}
.toolbar-project-field-icon > .ui-icon { inline-size: 20px; block-size: 20px; }
.suite-combobox-shell.toolbar-project-combobox .suite-dropdown-trigger {
  padding-inline-start: calc(var(--suite-space-3, 12px) + var(--suite-icon-size-20px, 20px) + var(--suite-space-2, 8px));
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
:root .shell-frame > .shell-toolbar .toolbar-project-picker[data-project-presentation='field'] > .toolbar-project-compact-toggle { display: none !important; }
:root .shell-frame > .shell-toolbar .toolbar-project-picker[data-project-presentation='icon'] {
  flex: 0 0 var(--shell-compact-target, var(--suite-control-height, 32px));
  inline-size: var(--shell-compact-target, var(--suite-control-height, 32px)) !important;
  width: var(--shell-compact-target, var(--suite-control-height, 32px)) !important; max-inline-size: none !important;
}
:root .shell-frame > .shell-toolbar .toolbar-project-picker[data-project-presentation='icon'] > .toolbar-project-compact-toggle {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; block-size: var(--shell-compact-target, var(--suite-control-height, 32px));
}
:root .shell-frame > .shell-toolbar .toolbar-project-picker[data-project-presentation='icon'] > .toolbar-project-context { display: none; }
:root .shell-frame > .shell-toolbar .toolbar-project-picker[data-project-presentation='icon'].open > .toolbar-project-context {
  display: flex; flex-direction: column; gap: 8px;
  position: fixed; inset-inline: 8px; inset-block-start: var(--suite-shell-compact-popover-top, 64px);
  inline-size: auto; max-inline-size: none; padding: 12px; box-sizing: border-box;
  max-block-size: calc(100dvh - var(--suite-shell-compact-popover-top, 64px) - 8px);
  overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--suite-radius-panel, 12px); box-shadow: var(--shadow-panel);
  z-index: var(--suite-shell-topbar-overlay-menu-z-index, 5001);
}
:root .shell-frame .toolbar-project-picker[data-project-presentation='icon'] .toolbar-project-context-current { display: grid; gap: 4px; overflow-wrap: anywhere; }
:root .shell-frame .toolbar-project-picker[data-project-presentation='icon'] .toolbar-project-context .toolbar-project-combobox {
  inline-size: 100% !important; width: 100% !important; max-inline-size: none !important; min-inline-size: 0 !important;
}
:root .shell-frame .toolbar-project-picker[data-project-presentation='icon'] .toolbar-project-context .toolbar-project-menu {
  position: static; inline-size: 100% !important; width: 100% !important; min-inline-size: 0 !important;
  max-inline-size: 100% !important; max-block-size: none; box-shadow: none; flex: 0 0 auto;
}
@media (max-width: 760px) {
  :root .shell-frame > .shell-body,
  :root .shell-frame.sidebar-collapsed > .shell-body { grid-template-columns: minmax(0, 1fr); }
  :root .shell-frame > .shell-body > .workspace { grid-column: 1; min-inline-size: 0; }
  :root .shell-frame > .shell-body > .sidebar.suite-workspace-global-plane {
    position: fixed; inset-block: var(--suite-space-3, 12px); inset-inline-start: var(--suite-space-3, 12px);
    inline-size: min(320px, calc(100vw - 48px)) !important;
    width: min(320px, calc(100vw - 48px)) !important;
    min-inline-size: 0 !important; max-inline-size: none !important;
    block-size: calc(100dvh - 2 * var(--suite-space-3, 12px)) !important;
    max-block-size: calc(100dvh - 2 * var(--suite-space-3, 12px)) !important;
    box-sizing: border-box; overflow: visible;
    border: var(--suite-panel-border, 1px solid var(--suite-panel-border-color, var(--line))) !important;
    border-radius: var(--suite-radius-panel, 8px) !important;
    margin: 0 !important; z-index: 20001;
    visibility: hidden; pointer-events: none; transform: translateX(-100%);
    /* Visibility must change before the shared surface's opening microtask.
       A visibility transition can leave every initial focus target hidden. */
    transition: transform 180ms ease;
  }
  :root .shell-frame.is-sidebar-drawer-open > .shell-body { position: relative; z-index: 20000; }
  :root .shell-frame.is-sidebar-drawer-open > .shell-body > .sidebar.suite-workspace-global-plane {
    visibility: visible; pointer-events: auto; transform: translateX(0);
    background: var(--suite-solid-surface-bg, var(--suite-record-detail-opaque-bg, #ffffff)) !important;
    box-shadow: var(--suite-panel-shadow, var(--suite-panel-bottom-shadow, var(--shadow-panel, var(--shadow-soft)))) !important;
  }
  :root .shell-frame .shell-sidebar-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 20000;
    background: color-mix(in srgb, var(--text) 28%, transparent);
  }
  :root .shell-frame .shell-sidebar-drawer-heading {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between;
    gap: 8px; padding: 8px; min-inline-size: 0;
  }
  :root .shell-frame .shell-sidebar-drawer-heading > .toolbar-logo { flex: 0 0 auto; margin: 0; }
  :root .shell-frame .shell-sidebar-drawer-heading > strong {
    flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  :root .shell-frame .shell-sidebar-drawer-heading > .suite-icon-button { flex: 0 0 auto; }
  :root .shell-frame > .shell-body > .sidebar > .nav-list { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }
  :root .shell-frame > .shell-body > .sidebar > .sidebar-footer { flex: 0 0 auto; }
  :root .shell-frame > .shell-body > .sidebar .sidebar-resizer { display: none; }
  :root .shell-frame > .shell-toolbar {
    --shell-compact-target: var(--suite-icon-button-size, var(--suite-control-height));
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: space-between !important;
    gap: 4px !important; padding: 8px !important;
    min-inline-size: 0 !important; inline-size: 100% !important;
    min-block-size: 48px !important; block-size: auto !important; max-block-size: none !important;
    box-sizing: border-box; overflow: visible !important;
  }
  :root .shell-frame > .shell-toolbar > :is(.toolbar-left, .toolbar-center, .toolbar-right) {
    display: flex !important; flex: 0 0 auto !important; align-items: center;
    gap: 4px !important; min-inline-size: 0 !important; width: auto !important;
    max-inline-size: none !important; overflow: visible !important;
  }
  :root .shell-frame > .shell-toolbar .sidebar-toolbar-toggle { order: -1; }
  :root .shell-frame > .shell-toolbar .toolbar-settings { --shell-compact-target: var(--suite-buttons-height, var(--suite-control-height)); }
  :root .shell-frame > .shell-toolbar :is(.suite-workspace-brand-trigger, .sidebar-toolbar-toggle, .toolbar-settings, .toolbar-diagnostics) {
    display: inline-flex !important; flex: 0 0 var(--shell-compact-target) !important;
    align-items: center !important; justify-content: center !important;
    inline-size: var(--shell-compact-target) !important; width: var(--shell-compact-target) !important;
    min-inline-size: var(--shell-compact-target) !important; max-inline-size: var(--shell-compact-target) !important;
    block-size: var(--shell-compact-target) !important; height: var(--shell-compact-target) !important;
    min-block-size: var(--shell-compact-target) !important;
    padding: 0 !important; gap: 0 !important;
  }
  :root .shell-frame > .shell-toolbar .suite-workspace-brand-control { flex: 0 0 auto; min-inline-size: 0; }
  :root .shell-frame > .shell-toolbar .suite-workspace-brand-copy,
  :root .shell-frame > .shell-toolbar .toolbar-diagnostics > :is(strong, b) { display: none !important; }
  :root .shell-frame > .shell-toolbar .suite-workspace-brand-logo { margin: 0; flex: 0 0 auto; }
  :root .shell-frame > .shell-toolbar :is(.toolbar-sync-status, .toolbar-shared-ui-status) {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--suite-buttons-height, var(--suite-control-height)) !important; min-inline-size: var(--suite-buttons-height, var(--suite-control-height)) !important; max-inline-size: var(--suite-buttons-height, var(--suite-control-height)) !important;
    block-size: var(--suite-buttons-height, var(--suite-control-height)) !important; padding: 0 !important; gap: 0 !important; cursor: pointer;
  }
  :root .shell-frame > .shell-toolbar :is(.toolbar-sync-status, .toolbar-shared-ui-status) > strong { display: none; }
  :root .shell-frame > .shell-toolbar :is(.toolbar-sync-status, .toolbar-shared-ui-status) > i { position: absolute; inset-block-start: 2px; inset-inline-end: 1px; }
  :root .shell-frame > .shell-toolbar .toolbar-status-icon { display: inline-flex; }
  :root .shell-frame > .shell-toolbar .ui-icon { inline-size: var(--suite-icon-size); block-size: var(--suite-icon-size); }
  :root .shell-frame > .shell-toolbar > .toolbar-center { flex: 1 1 0 !important; width: 0 !important; }
  :root .shell-frame > .shell-toolbar :is(.suite-workspace-menu, .settings-menu) {
    position: fixed; inset-inline: 8px; inset-block-start: var(--suite-shell-compact-popover-top, 64px);
    inline-size: auto; width: auto; min-inline-size: 0; max-inline-size: none;
    max-block-size: calc(100dvh - var(--suite-shell-compact-popover-top, 64px) - 8px);
    overflow: auto; box-sizing: border-box;
  }
  :root .shell-frame .suite-workspace-menu-current > strong { white-space: normal; overflow-wrap: anywhere; }
}
/* Phone main frame: the owner-decided frame edges and inner inset on phones (book-779, book-851). Kept apart from the
   compact chrome section above, which never changes content padding. */
@media (max-width: 760px) {
  /* Phones: the main frame spans the screen side to side and down to the bottom edge, and only its own inner padding
     insets the content (本人 10/30 topic-d270facf: 「手機寬度就已經夠窄了…退縮一次內距又退縮一次…太浪費了」「底部就不用
     退縮與圓角」). Only a landscape notch (safe-area inset) keeps the frame off that edge; the frame keeps its rounded
     top corners, and its bottom corners (all frame variants take them from --suite-radius-main-panel) go square. */
  :root .shell-frame > .shell-body > .workspace > .content > [data-suite-workspace-page='v2'] {
    padding-inline-start: calc(var(--suite-shell-page-shadow-bleed) + env(safe-area-inset-left, 0px)) !important;
    padding-inline-end: env(safe-area-inset-right, 0px);
    padding-block-end: 0 !important;
  }
  :root .shell-frame [data-suite-workspace-page='v2'] :is(.suite-workspace-body, [data-suite-primary-tabs-body], .suite-management-route-body, .module-design-route-body, .suite-dynamic-module-route-body, .suite-route-layout, [data-workspace-surface='shell-native-source-parity'], .area-management-route-body) {
    --suite-radius-main-panel: 0px !important;
  }
  /* Phones: the main frame's own side padding drops from 22 to 12, and tables and charts run to the frame's side edges
     (本人 11/02 book-851「主容器內縮的問題」, chose A on shell-mobile-inset-preview-20261102). Toolbars, titles, text and
     card lists keep the 12 inset; a card-mode table is text, so it stays inset. A module marks any other edge-to-edge
     surface (a Gantt chart) with data-suite-main-panel-bleed. The theme card tokens move too: hosted modules such as
     area analysis re-derive the main panel inset from them on their own root. */
  :root, :root .shell-frame {
    --suite-theme-card-padding: 22px 12px 22px 12px !important;
    --suite-theme-card-padding-left: 12px !important;
    --suite-theme-card-padding-right: 12px !important;
    --suite-main-panel-padding: 22px 12px 22px 12px !important;
    --suite-main-panel-padding-left: 12px !important;
    --suite-main-panel-padding-right: 12px !important;
  }
  :root .shell-frame [data-suite-workspace-page='v2'] :is(
    [data-suite-main-panel-bleed],
    .suite-workspace-body > .suite-data-table:not([data-suite-mobile-presentation='cards']),
    .suite-workspace-body .suite-table-scroll:not(:has([data-suite-mobile-presentation='cards']))
  ) {
    margin-inline: calc(-1 * var(--suite-main-panel-padding-left)) calc(-1 * var(--suite-main-panel-padding-right)) !important;
    inline-size: calc(100% + var(--suite-main-panel-padding-left) + var(--suite-main-panel-padding-right)) !important;
    max-inline-size: none !important;
    border-inline-width: 0 !important; border-radius: 0 !important;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  :root .shell-frame > .shell-body > .sidebar.suite-workspace-global-plane { transition: none; }
}

/* UI Designer: independent draft settings and content-first presentation preview. */
.suite-global-style [data-global-color-key]{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}.suite-global-style [data-global-color-key][hidden]{display:none}.suite-global-style [data-global-color-key]>.suite-global-style-color-label{flex:1 1 auto;white-space:normal;overflow-wrap:normal;word-break:keep-all}.suite-global-style [data-global-color-key]>.suite-color-field{flex:0 1 auto;min-inline-size:max-content;max-inline-size:100%}.suite-global-style-palette-row>[data-global-color-key]{flex:1 1 15em}
.suite-global-style [data-global-color-key]>.suite-color-field{min-width:0}
.suite-global-style-color-label{overflow-wrap:anywhere}
.suite-global-style-tone-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.suite-global-style .suite-global-style-tone-choice{display:grid;gap:6px;justify-items:stretch;padding:8px;min-width:0}
.suite-global-style-tone-thumbnail{display:grid;grid-template-columns:1fr 2fr;gap:4px;min-height:46px;padding:7px;background:#eef2f5;border:1px solid #d5dde5;border-radius:4px}
.suite-global-style-tone-thumbnail[data-tone="warm"]{background:#f5f1e9;border-color:#ddd6c9}
.suite-global-style-tone-thumbnail[data-tone="cool"]{background:#eaf3f7;border-color:#ccdde5}
.suite-global-style-tone-thumbnail i{background:#fff;border-radius:2px}.suite-global-style-tone-thumbnail i:first-child{grid-row:span 2}
.suite-global-style-details{border-top:1px solid var(--line);padding-top:12px}
.suite-global-style-details>summary{cursor:pointer;font-weight:700;line-height:1.4;min-height:36px}
.suite-global-style-disclosure{display:grid;gap:16px;padding-block:12px}
.suite-global-style-image-actions{display:flex;flex-wrap:wrap;gap:8px}
.suite-global-style-image-thumbnail{width:100%;max-height:150px;object-fit:contain;border:1px solid var(--line);border-radius:var(--suite-radius-small,6px)}
.suite-global-style-presentation{display:block;min-height:0;align-content:start;place-items:normal;padding:16px}
.suite-designer-presentation-body{display:grid;gap:16px;min-width:0}
.suite-designer-presentation-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.suite-designer-presentation-tools .command{display:inline-flex;gap:6px;align-items:center}
.suite-designer-presentation-tools svg{width:18px;height:18px;flex:none}
.suite-designer-presentation-tools .active{border-color:var(--primary);color:var(--suite-primary-ink,var(--primary))}
.suite-designer-presentation-cards{display:grid;gap:24px;min-width:0;align-content:start}
.suite-designer-slide-frame{min-width:0;position:relative}
.suite-designer-slide{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:0;padding:var(--suite-designer-slide-padding);border:1px solid var(--line);border-radius:var(--suite-designer-slide-radius);color:var(--suite-presentation-text,var(--text));font-family:var(--suite-font-family,inherit);transform-origin:top left}
.suite-designer-slide-background,.suite-designer-slide-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none}
.suite-designer-slide-content{display:grid;align-content:start;gap:18px;min-width:0;padding:20px;background:var(--suite-presentation-surface,var(--surface-strong));color:var(--suite-presentation-text,var(--text));border-radius:var(--suite-designer-slide-radius)}
.suite-designer-slide-content>small{font-size:var(--suite-type-body);color:inherit;opacity:.8}
.suite-designer-slide h2{margin:0;font-size:var(--suite-presentation-title-size,32px);line-height:1.3;font-weight:700;overflow-wrap:anywhere;color:inherit}
.suite-designer-slide p{margin:0;font-size:var(--suite-type-body);line-height:1.7;color:inherit;overflow-wrap:anywhere}
.suite-designer-slide-lead{max-width:70ch}
.suite-designer-cover-facts{display:grid;gap:12px;margin-top:16px;line-height:1.5}
.suite-designer-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.suite-designer-metrics>.suite-style-block{display:grid;gap:8px;min-width:0;background:var(--suite-presentation-surface);color:var(--suite-presentation-text);border:1px solid currentColor;padding:16px}
.suite-designer-metrics strong{font-size:32px;line-height:1.3}.suite-designer-metrics span{overflow-wrap:anywhere}
.suite-designer-explanation{display:grid;gap:18px;margin:0;padding-inline-start:24px;line-height:1.5}
.suite-designer-explanation strong{font-size:var(--suite-type-body)}
.suite-designer-slide-logo{display:inline-flex;align-items:center}.suite-designer-slide-logo svg{width:32px;height:32px}
.suite-designer-slide .suite-ui-presentation-watermark-preview{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px;min-height:16px}
.suite-designer-slide .suite-ui-presentation-watermark-preview span{min-width:0;overflow-wrap:anywhere}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-slide{position:absolute;inset:0 auto auto 0;width:var(--suite-designer-slide-width);height:var(--suite-designer-slide-height);font-size:20px}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-slide-content{gap:24px;padding:24px}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-slide h2{font-size:46px}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-slide :is(p,small,span,.suite-designer-explanation strong){font-size:20px}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-metrics strong{font-size:48px}
.suite-designer-image-fallback{position:relative;padding:8px;background:var(--suite-presentation-surface,var(--surface-strong));color:var(--suite-presentation-text,var(--text))}
.suite-designer-dialog-backdrop{position:fixed;inset:0;z-index:var(--suite-z-modal,1200);padding:24px;background:rgb(0 0 0 / .45);display:grid;place-items:center}
.suite-designer-presentation-dialog{width:min(1400px,100%);height:min(92vh,1100px);display:flex;flex-direction:column;min-height:0;overflow:hidden;color:var(--text);background:var(--surface-strong)}
.suite-designer-presentation-dialog>.suite-container-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:16px;border-bottom:1px solid var(--line)}
.suite-designer-presentation-dialog>.suite-workspace-body{overflow:auto;min-height:0;padding:24px}
.suite-designer-presentation-dialog [data-action="enlarge-designer-presentation"]{display:none}
@media(max-width:600px){.suite-designer-metrics{grid-template-columns:1fr}.suite-designer-slide-content{padding:12px}.suite-designer-dialog-backdrop{padding:8px}.suite-designer-presentation-dialog>.suite-workspace-body{padding:12px}}

.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-slide-content{gap:16px}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-slide h2{font-size:36px}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-slide :is(p,small,span,.suite-designer-explanation strong){font-size:18px}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.suite-designer-presentation-cards[data-view="ratio"] .suite-designer-explanation{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style-position:inside;padding:0}
.suite-designer-presentation-cards[data-view="ratio"] .suite-ui-presentation-watermark-preview span{font-size:14px}

.suite-global-style-presentation,.suite-designer-presentation-dialog>.suite-workspace-body{container-type:inline-size;container-name:suite-designer-presentation}
@container suite-designer-presentation (max-width:540px){.suite-designer-presentation-cards[data-view="readable"] .suite-designer-metrics{grid-template-columns:1fr}.suite-designer-presentation-cards[data-view="readable"] .suite-designer-slide-content{padding:12px}}

/* Independent presentation branding: logo visibility and dimensions are not tied to header text. */
.suite-designer-slide-branding{display:flex;gap:16px;align-items:center;min-width:0;align-self:start}
.suite-designer-slide-branding.align-center{justify-content:center}.suite-designer-slide-branding.align-right{justify-content:flex-end}
.suite-designer-slide-logo{position:relative;display:inline-grid;place-items:center;flex:none;width:var(--suite-designer-logo-width,24px);height:var(--suite-designer-logo-height,24px);max-width:100%;color:var(--suite-designer-logo-color);border-radius:4px}
.suite-designer-slide-logo.is-color{background:var(--suite-designer-logo-color)}
.suite-designer-slide-logo svg,.suite-designer-slide-logo img,.suite-designer-logo-fallback{width:100%;height:100%;object-fit:contain}
.suite-designer-slide-logo [hidden]{display:none}
.suite-designer-slide-logo [data-designer-logo-error]{position:absolute;inset-block-start:calc(100% + 4px);inset-inline-start:0;min-width:160px;max-width:220px;color:var(--suite-presentation-text,var(--text));font-size:var(--suite-type-body);line-height:1.4}
.suite-designer-slide-logo:has([data-designer-logo-error]:not([hidden])){margin-block-end:42px}

/* Shell-owned compact action carriers: status/actions stay together at narrow widths. */
.workspace-ai-settings-heading-actions,
.suite-workspace-pending-actions,
.suite-workspace-management-actions,
.account-center-section-actions,
.suite-global-style-sample-actions {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end;
  gap: var(--suite-space-2, 8px); margin-inline-start: auto;
}
.suite-workspace-management-actions { min-width: 0; max-width: 100%; }
.suite-workspace-management-actions[data-suite-header-presentation]:not([data-suite-header-presentation="full"]) .suite-workspace-management-action-block > span { display: none; }
.suite-workspace-management-action-block { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--suite-space-2, 8px); }
.suite-workspace-management-action-block > span { white-space: nowrap; }
.account-center-workspace-row > .suite-list-item-content { min-width: 0; flex: 1 1 0; }
.account-center-workspace-row > .suite-list-item-trailing { margin-inline-start: auto; flex: 0 0 auto; }
.module-inspection-option { display: flex; flex-wrap: nowrap; }
.module-inspection-option > .suite-list-item-content { flex: 1 1 0; min-width: 0; }
.module-inspection-option > .suite-list-item-trailing { flex: 0 0 auto; margin-inline-start: auto; }

@media (max-width: 680px) {
  .account-center-workspace-row.suite-ui-components-data-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .account-center-workspace-row > .suite-list-item-trailing { grid-column: 3; grid-row: 1; }
}

/* C1: Shell chrome consumes the same command density and secondary surface. */
.shell-frame > .suite-toolbar.shell-toolbar :is(.suite-workspace-brand-trigger,.suite-toolbar-button,.toolbar-shared-ui-status,.toolbar-sync-status):not(.suite-tool-button) {
  box-sizing: border-box;
  height: var(--suite-buttons-height, var(--suite-control-height));
  min-height: var(--suite-buttons-height, var(--suite-control-height));
  padding-block: 0;
  border: 1px solid var(--line);
  border-radius: var(--suite-radius-control);
  background: var(--surface-strong);
  background-image: none;
  color: var(--text);
}
:root .shell-frame > .suite-toolbar.shell-toolbar :is(.suite-workspace-brand-trigger,.suite-toolbar-button,.toolbar-shared-ui-status,.toolbar-sync-status) svg {
  width: var(--suite-icon-size);
  height: var(--suite-icon-size);
  inline-size: var(--suite-icon-size);
  block-size: var(--suite-icon-size);
}
/* Compact Shell navigation allocates one icon slot; Shared owns presentation.
   Formal page tabs (bindSuiteWorkspacePageTabs, overflow 'scroll') stay text and keep their width. */
@media (max-width: 760px) {
  .suite-workspace-page-tabsbar:not([data-suite-workspace-page-tabs="shell"], .suite-workspace-toolbar.suite-container-header--attached-tabs) [data-suite-adaptive-choice][data-suite-choice-count="1"] {
    max-inline-size: calc(var(--suite-icon-button-size, var(--suite-control-height, 30px)) + var(--suite-space-5, 20px) * 2 + var(--suite-primary-tabs-radius, 10px) * 4 + 2px) !important;
  }
}

/* Sidebar-hosted chrome: on wide layouts with the sidebar open, the brand row and the
   project picker sit at the top of the sidebar column, so the workspace (and its primary
   tabs) starts at the top edge. The collapsed rail and the <=760px drawer keep the top bar.
   The DOM is unchanged: .shell-body becomes transparent to layout so the sidebar and the
   workspace join the frame grid beside the toolbar. Only the live frame (it carries the
   source fingerprint) is affected; UI designer previews reuse .shell-frame/.shell-body. */
@media (min-width: 761px) {
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) {
    display: grid;
    grid-template-columns: calc(var(--sidebar-width, 286px) + var(--suite-shell-sidebar-container-margin-right, 0px)) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "chrome workspace" "sidebar workspace";
  }
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .shell-body { display: contents; }
  /* The toolbar wraps: brand and buttons on the first line, the project picker on its own
     line. .toolbar-left/.toolbar-right are display:contents, so the picker width budget
     (AppShell syncToolbarProjectPickerLayout counts only rendered siblings) is the full
     column and the picker keeps its field presentation. */
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .suite-toolbar.shell-toolbar {
    grid-area: chrome;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--suite-space-2, 8px);
    margin: var(--shell-sidebar-container-margin-top) var(--shell-sidebar-container-margin-right) 0 var(--shell-sidebar-container-margin-left) !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .suite-toolbar.shell-toolbar > :is(.toolbar-left, .toolbar-right) { display: contents; }
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .suite-toolbar.shell-toolbar > .toolbar-left > :first-child { flex: 1 1 0; min-width: 0; }
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .suite-toolbar.shell-toolbar > .toolbar-center { order: 1; flex: 1 0 100%; min-width: 0; justify-content: stretch; }
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .suite-toolbar.shell-toolbar > .toolbar-center > * { flex: 1 1 auto; min-width: 0; }
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .shell-body > .shell-sidebar { grid-area: sidebar; min-height: 0; margin-top: var(--suite-space-2, 8px) !important; }
  :root .shell-frame[data-shell-source-fingerprint]:not(.sidebar-collapsed) > .shell-body > .workspace { grid-area: workspace; min-height: 0; min-width: 0; }
}
/* Text management actions keep their icon and label on one line. */
.suite-management-action:not(.suite-icon-button) { display: inline-flex; }
.suite-management-action.danger:not(.suite-icon-button) { color: var(--danger); }

.workspace-ai-settings-scroll.workspace-ai-settings-page { display: flex; flex-direction: column; overflow: hidden; }
.workspace-ai-settings-content { flex: 1 1 auto; gap: var(--suite-space-3); }
.workspace-ai-settings-content > .workspace-ai-provider-pool { overflow: auto; }

/* UI Design / Component Center: use Shared's measured <720px state, also in hosts without a named CSS container. */
.suite-global-style[data-ui-design-mode="components"] .suite-global-style-components [data-suite-component-mobile-switch][data-suite-pane-switch-mobile="true"] {
  display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden;
}
.suite-global-style-components [data-suite-pane-switch-mobile="true"] > [data-suite-mobile-pane] {
  flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; min-width: 0;
}
.suite-global-style-components [data-suite-pane-switch-mobile="true"] .suite-ui-components-list { max-height: none; }
.suite-global-style-components [data-suite-pane-switch-mobile="true"] .suite-ui-components-preview { min-height: 0; }

/* Mobile batch B: only the inspection, AI, DB and permission owners opt in. */
.feature-inspection-topic-content[data-feature-mobile] > [data-feature-mobile-source] { display: none !important; }
.feature-inspection-topic-content[data-feature-mobile] { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.feature-inspection-topic-content[data-feature-mobile] > :is(.feature-inspection-mobile-list,.feature-inspection-mobile-detail) {
  flex: 1 1 0; min-height: 0; overflow: auto; min-width: 0;
}
.feature-inspection-topic-content[data-feature-mobile] > [data-suite-mobile-pane][hidden] { display: none !important; }
.feature-inspection-mobile-list > button { width: 100%; text-align: start; justify-content: flex-start; white-space: normal; height: auto; min-height: 44px; margin-bottom: 8px; }
.feature-inspection-topic-content[data-feature-mobile] .feature-inspection-mobile-detail > .suite-mobile-back { display: inline-flex; margin-bottom: 8px; }
.feature-inspection-topic-content[data-feature-mobile] .feature-inspection-mobile-detail :is(.suite-section-panel,.suite-quality-summary,.module-inspection-detail) { padding: 0; border: 0; box-shadow: none; background: transparent; min-width: 0; }
.feature-inspection-topic-content[data-feature-mobile] .feature-inspection-mobile-detail :is(.module-inspection-meta,.module-inspection-grid,.agent-command-route-grid,.agent-run-log-summary,.agent-monitor-grid,.harness-grid) { display: flex; flex-direction: column; min-width: 0; }
.feature-inspection-topic-content[data-feature-mobile] :is(code,dd,p) { overflow-wrap: anywhere; min-width: 0; white-space: normal; }
.feature-inspection-topic-content[data-feature-mobile] .module-inspection-run-record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.permission-admin-assignment-grid[data-permission-mobile] .permission-admin-org-chart-panel > .suite-workspace-body > :is(.permission-admin-org-chart-heading,.permission-admin-org-chart-viewport) { display: none; }
.permission-admin-assignment-grid[data-permission-mobile] .permission-admin-mobile-navigation { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.permission-admin-assignment-grid[data-permission-mobile] .permission-admin-mobile-navigation > [hidden] { display: none !important; }
.permission-admin-assignment-grid[data-permission-mobile] .permission-admin-mobile-navigation > :is(.permission-admin-mobile-organizations,.permission-admin-mobile-permissions) { flex: 1 1 0; min-height: 0; overflow: auto; min-width: 0; }
.permission-admin-assignment-grid[data-permission-mobile] .permission-admin-mobile-organizations > button { width: 100%; min-height: 44px; text-align: start; justify-content: flex-start; margin-bottom: 8px; }
.permission-admin-assignment-grid[data-permission-mobile] .suite-mobile-back { display: inline-flex; margin-bottom: 8px; }
.permission-admin-assignment-grid[data-permission-mobile] > .suite-workspace-restore-rail { display: none; }
.permission-admin-assignment-grid[data-permission-mobile] :is(.permission-admin-permission-domain-groups,.permission-scope-code-grid,.permission-admin-permission-domain-groups,.permission-admin-responsibility-permission-stack) { grid-template-columns: minmax(0,1fr); }
@container suite-fill-body (width < 720px) {
  /* Keep a single scroll owner tall; do not size it from the first table row. */
  .workspace-ai-settings-content[data-suite-mobile-backoffice="ai"] { min-height: 0; height: 100%; overflow: hidden; gap: 8px; }
  /* 12 under the heading line as on desktop (本人 10/30, 驗屋 .iv-bar1); the phone column gap is 8. */
  .workspace-ai-settings-content[data-suite-mobile-backoffice="ai"] > .workspace-ai-settings-heading.suite-in-frame-list-toolbar { margin-block-end: calc(var(--suite-space-3, 12px) - 8px); }
  [data-suite-mobile-backoffice="ai"] > .workspace-ai-settings-heading { gap: 8px; flex-wrap: wrap; }
  [data-suite-mobile-backoffice="ai"] .workspace-ai-settings-heading > span { flex: 1 1 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [data-suite-mobile-backoffice="ai"] > .workspace-ai-provider-pool { flex: 1 1 0; min-height: 0; height: auto; max-height: none; overflow: auto; }
  [data-suite-mobile-backoffice="ai"] .workspace-ai-provider-table[data-suite-mobile-presentation="cards"] { border: 0; background: transparent; }
  [data-suite-mobile-backoffice="ai"] .workspace-ai-provider-row > td { grid-template-columns: minmax(0,1fr); }
  [data-suite-mobile-backoffice="ai"] .workspace-ai-setting-field { min-width: 0; width: 100%; }
  [data-suite-mobile-backoffice="ai"] .workspace-ai-settings-note { white-space: nowrap; }
  [data-suite-mobile-backoffice="database"] .gateway-settings-panel { grid-template-columns: minmax(0,1fr); display: flex; flex-direction: column; min-width: 0; }
  /* Flattened on phones: the main container's shared padding is the only inset, same as every other page. */
  [data-suite-mobile-backoffice="database"] :is(.gateway-settings-panel,.database-mapping-panel) { padding: 0; border: 0; box-shadow: none; background: transparent;
    --suite-sub-panel-padding-top: 0px; --suite-sub-panel-padding-right: 0px; --suite-sub-panel-padding-bottom: 0px; --suite-sub-panel-padding-left: 0px; }
  [data-suite-mobile-backoffice="database"] :is(.button-row,.database-map-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
  [data-suite-mobile-backoffice="database"] .database-map-table { min-width: 0; overflow: visible; }
  [data-suite-mobile-backoffice="database"] .database-map-table-head { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  [data-suite-mobile-backoffice="database"] .database-map-row { display: block; height: auto !important; min-width: 0; max-height: none; padding: 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--suite-radius-control); }
  [data-suite-mobile-backoffice="database"] .database-map-row-head { display: flex; flex-direction: column; align-items: stretch; height: auto; min-width: 0; gap: 8px; }
  [data-suite-mobile-backoffice="database"] .database-map-cell { width: auto; min-width: 0; height: auto; white-space: normal; overflow-wrap: anywhere; }
  [data-suite-mobile-backoffice="database"] .database-map-id-input { min-width: 0; width: 100%; }
  [data-suite-mobile-backoffice="database"] :is(.admin-copy,.managed-gateway-banner) { display: block; max-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0; border: 0; background: transparent; }
  .permission-admin-page :is(.permission-admin-value-grid,.permission-admin-code-stack,.permission-admin-account-admin-grid,.permission-scope-code-grid) { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; }
  .permission-admin-page :is(.permission-admin-self-card,.permission-admin-permission-domain,.permission-admin-permission-group,.permission-admin-feature-workspace) { padding: 0; border: 0; box-shadow: none; min-width: 0; }
  .permission-admin-page .permission-admin-code-stack > .status-pill { height: auto; min-height: 36px; white-space: normal; overflow-wrap: anywhere; }
  [data-permission-admin-feature-panel] [data-permission-admin-scope-table] > tbody > tr > [data-suite-card-title] { grid-template-columns: minmax(0,1fr); }
  [data-permission-admin-feature-panel] [data-permission-admin-scope-table] > tbody > tr > [data-suite-card-title]::before { content: none; }
  [data-permission-admin-feature-panel] [data-permission-admin-scope-table] :is(th,td)::before { white-space: nowrap; }
}

/* The content box, rather than the device width, owns batch B's breakpoint. */
.workspace-ai-settings-route-layout, .database-admin-route-layout, .feature-inspection-route-layout, .permission-admin-page { container: suite-fill-body / inline-size; }
@container suite-fill-body (width < 720px) {
  .workspace-ai-settings-scroll.workspace-ai-settings-page { height: 100%; min-height: 0; }
  /* Row height, line and 12 to the line come from the shared toolbar row (.suite-in-frame-list-toolbar, GLOBAL §3-F). */
  [data-suite-mobile-backoffice="ai"] > .workspace-ai-settings-heading { flex-direction: row; flex-wrap: nowrap; align-items: center; }
  [data-suite-mobile-backoffice="ai"] .workspace-ai-settings-heading > span { flex: 1 1 auto; min-width: 0; }
  [data-suite-mobile-backoffice="ai"] .workspace-ai-settings-heading-actions { flex: 0 0 auto; margin-inline-start: 0 !important; gap: 8px; }
  .feature-inspection-mobile-detail :is(.feature-inspection-section-summary,.agent-registry-card > p) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.feature-inspection-topic-content[data-feature-mobile] .feature-inspection-mobile-list > button { height: auto !important; min-height: 44px !important; white-space: normal !important; }
@container suite-fill-body (width < 720px) {
  [data-suite-mobile-backoffice="ai"] .workspace-ai-setting-field > span { display: block; position: static; clip: auto; clip-path: none; height: auto; width: auto; overflow: visible; white-space: nowrap; color: var(--muted); }
}

@container suite-fill-body (width < 720px) {
  [data-suite-mobile-backoffice="database"] .suite-table-wrap.database-map-table .database-map-row-head { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  [data-suite-mobile-backoffice="database"] .suite-table-wrap.database-map-table { display: block; width: 100% !important; max-width: 100% !important; margin: 0 !important; border: 0; box-shadow: none; background: transparent; }
  [data-suite-mobile-backoffice="database"] .database-map-row [data-suite-card-title] strong { white-space: normal; overflow-wrap: anywhere; }
}

/* Feature Inspection status lists (GLOBAL_UI_STYLING_GUIDELINES §3-D.1 2-(2), 2026-10-27):
   borderless rows split by one line, name + status collapsed, one row opens in place. */
.feature-inspection-list.suite-structured-list {
  display: block; min-width: 0; margin: 0; padding: 0; list-style: none;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.feature-inspection-list > .feature-inspection-list-row.suite-collapsible-group {
  display: grid; min-width: 0; margin: 0; padding: 0;
  border: 0; border-block-end: 1px solid var(--line); border-radius: 0;
  box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.feature-inspection-list-row > .feature-inspection-list-toggle {
  color: var(--text); border-radius: 0; padding-inline: var(--suite-space-2, 8px);
}
.feature-inspection-list-row > .feature-inspection-list-toggle:hover { background: var(--surface-soft); }
.feature-inspection-list-toggle > .suite-list-item-content {
  flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;
}
.feature-inspection-list-toggle > .suite-list-item-trailing {
  flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: var(--suite-type-caption); font-weight: 600;
}
.feature-inspection-list-tone {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: var(--suite-radius-pill, 999px); background: var(--muted);
}
.feature-inspection-list-row[data-row-tone="good"] .feature-inspection-list-tone { background: var(--success); }
.feature-inspection-list-row[data-row-tone="bad"] .feature-inspection-list-tone { background: var(--danger); }
.feature-inspection-list-row[data-row-tone="warn"] .feature-inspection-list-tone { background: var(--warning); }
.feature-inspection-list-chevron {
  flex: 0 0 auto; width: 14px; height: 14px; color: var(--muted);
  transition: transform var(--suite-motion-duration, 180ms) var(--suite-motion-easing, ease);
}
.feature-inspection-list-row.is-expanded .feature-inspection-list-chevron { transform: rotate(180deg); }
.feature-inspection-list-row.is-collapsed > .feature-inspection-list-detail { pointer-events: none; }
.feature-inspection-list-body {
  display: grid; gap: var(--suite-space-2, 8px); min-width: 0;
  padding: 0 var(--suite-space-2, 8px) var(--suite-space-3, 12px) calc(var(--suite-space-2, 8px) + 20px);
  color: var(--muted); font-size: var(--suite-type-caption); line-height: 1.45;
}
.feature-inspection-list-body p { margin: 0; overflow-wrap: anywhere; }
.feature-inspection-list-body ul { display: grid; gap: 4px; margin: 0; padding-inline-start: 1.1em; color: var(--text-soft, var(--text)); }
.feature-inspection-list-body dl { display: grid; gap: 6px; margin: 0; }
.feature-inspection-list-body dl > div { display: grid; grid-template-columns: minmax(6em, 28%) minmax(0, 1fr); gap: var(--suite-space-2, 8px); min-width: 0; }
.feature-inspection-list-body :is(dt, dd) { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.feature-inspection-list-body dd { color: var(--text); }
.feature-inspection-list-body code { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.feature-inspection-list-meta { display: flex; flex-wrap: wrap; gap: 4px var(--suite-space-3, 12px); }
@media (prefers-reduced-motion: reduce) {
  .feature-inspection-list-row > .feature-inspection-list-detail,
  .feature-inspection-list-chevron { transition: none; }
}

/* Component center: one main container; catalog, preview and settings share its surface and are split by separators. */
.ui-design-route-body .suite-ui-components { gap: 0; }
/* Each pane carries the 22px inset; the shared workspace-body padding (!important) would add a second one. */
.ui-design-route-body .suite-workspace[data-suite-workspace-mode] > .suite-workspace-pane > .suite-workspace-body.suite-ui-components { padding: 0 !important; }
.ui-design-route-body .suite-ui-components > .suite-main-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ui-design-route-body .suite-ui-components > .suite-ui-components-catalog { border-inline-end: 1px solid var(--line); }
.ui-design-route-body .suite-ui-components > .suite-ui-components-inspector { border-block-start: 1px solid var(--line); }
@media (max-width: 760px) {
  .ui-design-route-body .suite-ui-components > .suite-ui-components-catalog { border-inline-end: 0; }
  .ui-design-route-body .suite-ui-components > .suite-ui-components-inspector { border-block-start: 0; }
}

/* BEGIN SUITE_PRIMARY_BODY_HOST_COMPAT */
/* Shell mount carriers retain the Shared primary-body paint and static separators. */
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is([data-suite-dynamic-module-host], [data-sheet-check-native-source-host], [data-construction-budget-native-source-host], [data-portfolio-control-native-source-host], [data-presentation-native-source-host], [data-area-management-native-source-host]) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is([data-suite-dynamic-module-host], [data-sheet-check-native-source-host], [data-construction-budget-native-source-host], [data-portfolio-control-native-source-host], [data-presentation-native-source-host], [data-area-management-native-source-host]) > :is(.suite-route-layout, .suite-workspace) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-dynamic-module-host[data-suite-module-owned-root] > :is(.suite-route-layout, .suite-workspace) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is([data-suite-dynamic-module-host], [data-sheet-check-native-source-host], [data-construction-budget-native-source-host], [data-portfolio-control-native-source-host], [data-presentation-native-source-host], [data-area-management-native-source-host]) > :is(.suite-route-layout, .suite-workspace),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-dynamic-module-host[data-suite-module-owned-root] > :is(.suite-route-layout, .suite-workspace) {
  gap: 0 !important;
}
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is([data-suite-dynamic-module-host], [data-sheet-check-native-source-host], [data-construction-budget-native-source-host], [data-portfolio-control-native-source-host], [data-presentation-native-source-host], [data-area-management-native-source-host]) > :is(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):not([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-dynamic-module-host[data-suite-module-owned-root] > :is(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):not([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) {
  border-inline-start: 1px solid var(--line) !important;
}
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > :is([data-suite-dynamic-module-host], [data-sheet-check-native-source-host], [data-construction-budget-native-source-host], [data-portfolio-control-native-source-host], [data-presentation-native-source-host], [data-area-management-native-source-host]) > :is(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):where([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]),
.suite-container-header.suite-container-header--attached-tabs:where([data-suite-primary-tabs-qualified]) + :is(.suite-workspace-body, .suite-main-panel-scroll-region, .suite-primary-tabs-body, [data-suite-primary-tabs-body], .suite-route-layout) > .suite-dynamic-module-host[data-suite-dynamic-module-host] > .suite-dynamic-module-host[data-suite-module-owned-root] > :is(.suite-route-layout, .suite-workspace):not([data-suite-workspace-mode]):where([data-suite-route-layout-mode='bottom-panel']) > :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) + :is(.suite-main-panel, .suite-section-panel, .suite-dynamic-module-fallback):not([data-suite-semantic-card]):where([data-suite-route-region], [data-suite-workspace-pane]) {
  border-inline-start: 0 !important;
  border-block-start: 1px solid var(--line) !important;
}
/* END SUITE_PRIMARY_BODY_HOST_COMPAT */

/* Icon-only return (owner 11/01): the label stays in the DOM for title, aria-label and the text-only content contract. */
[data-global-style-catalog-header] .suite-button[data-action='return-global-style-section'] {
  inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  min-inline-size: var(--suite-icon-button-size, var(--suite-icon-button-height, var(--suite-control-height)));
  padding-inline: 0;
  justify-content: center;
  gap: 0;
  font-size: 0;
}
[data-global-style-catalog-header] .suite-button[data-action='return-global-style-section']::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 5-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}