@import url("/brand/grb-theme.css");
@import url("/brand/grb-brand-lockup.css");

/*
  GRB Labs browser-tool system
  Shared chrome and spacing for standalone tools served from /apps.
  Tool-specific controls stay in each app; the family resemblance lives here.
*/

:root {
  --grb-tool-bg: var(--grb-color-background);
  --grb-tool-panel: var(--grb-color-surface);
  --grb-tool-panel-raised: var(--grb-color-surface-raised);
  --grb-tool-text: var(--grb-color-text);
  --grb-tool-muted: var(--grb-color-text-muted);
  --grb-tool-line: var(--grb-color-border-subtle);
  --grb-tool-line-strong: var(--grb-color-border-strong);
  --grb-tool-link-hover: var(--grb-accent);
  --accent: var(--grb-accent);
  --accent-2: var(--grb-accent);
  --accent-soft: var(--grb-accent-soft);
  --grb-tool-font-sans: var(--grb-font-interface);
  --grb-tool-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --grb-browser-nav-height: 52px;
  --grb-tool-stage-head-height: 64px;
  --grb-tool-sidebar-inline: 16px;
  --grb-tool-sidebar-block: 16px;
  --grb-tool-section-heading-gap: 9px;
  --grb-tool-footer-height: 48px;
  --grb-tool-footer-inline-padding: 16px;
  --grb-tool-footer-font-size: 9.6px;
  --resizer-width: 1px;

  /* Canonical browser-tool component tokens. */
  --grb-ui-radius-control: 5px;
  --grb-ui-radius-panel: 7px;
  --grb-ui-control-height: 40px;
  --grb-ui-field-font-size: 13px;
  --grb-ui-button-font-size: 13.333px;
  --grb-ui-button-text-nudge: .5px;
  --grb-ui-toolbar-icon-size: 18px;
  --grb-ui-usage-height: 28px;
  --grb-ui-usage-font-size: 12px;
  --grb-ui-color-swatch-size: var(--grb-ui-control-height);
  --grb-ui-color-swatch-border: var(--grb-color-border-emphasis);
  --grb-ui-control-bg: var(--grb-color-surface-raised);
  --grb-ui-control-hover: var(--grb-color-surface-interactive-hover);
  --grb-ui-select-highlight: color-mix(in srgb, var(--grb-accent) 14%, transparent);
  --grb-ui-control-border: var(--grb-color-border);
  --grb-ui-control-border-strong: var(--grb-color-border-strong);
  --grb-ui-choice-size: 16px;
  --grb-ui-choice-border-width: 1.4px;
  --grb-ui-switch-width: 41.36px;
  --grb-ui-switch-height: 23px;
  --grb-ui-switch-thumb-size: 16px;
  --grb-ui-switch-thumb-inset: 3.5px;
  --grb-ui-switch-thumb-travel: 18.36px;
  --grb-ui-spinner-size: 24px;
  --grb-ui-spinner-stroke: 4px;
  --grb-ui-switch-off: var(--grb-color-border);
  --grb-ui-value-bg: var(--grb-color-surface-raised);
  --grb-ui-value-border: var(--grb-color-border);
  --grb-ui-scrollbar-track: transparent;
  --grb-ui-scrollbar-thumb: var(--grb-color-border-strong);
  --grb-ui-scrollbar-thumb-hover: var(--grb-color-border-emphasis);
  --grb-ui-disabled-opacity: .35;
  --grb-ui-modal-copy-shift: -10px;
  --grb-ui-danger: var(--grb-color-danger);
  --grb-ui-success: var(--grb-color-success);
  --grb-ui-warning: var(--grb-color-warning);
  --grb-ui-info: var(--grb-accent);
  --grb-ui-shadow: 0 28px 90px rgba(0,0,0,.56);
}

/* A disabled setting is one 35%-alpha version of its complete active state.
   Child controls stay locally opaque to prevent accidental double dimming. */
.grb-ui-disabled-group[aria-disabled="true"],
.grb-ui-disabled-group.is-disabled,
.grb-ui-legacy-adapter .field.is-disabled,
.grb-ui-legacy-adapter .control-group.is-disabled {
  opacity: var(--grb-ui-disabled-opacity);
  filter: none;
}
.grb-ui-disabled-group[aria-disabled="true"] :disabled,
.grb-ui-disabled-group.is-disabled :disabled,
.grb-ui-legacy-adapter .field.is-disabled :disabled,
.grb-ui-legacy-adapter .control-group.is-disabled :disabled,
.grb-ui-disabled-group[aria-disabled="true"] .grb-ui-custom-select[data-disabled="true"],
.grb-ui-disabled-group.is-disabled .grb-ui-custom-select[data-disabled="true"],
.grb-ui-legacy-adapter .field.is-disabled .grb-ui-custom-select[data-disabled="true"],
.grb-ui-legacy-adapter .control-group.is-disabled .grb-ui-custom-select[data-disabled="true"] {
  opacity: 1;
}

html[data-ui-theme="light"] {
  --grb-tool-bg: #fff;
  --grb-tool-panel: #fff;
  --grb-tool-panel-raised: #f3f3f0;
  --grb-tool-text: #111;
  --grb-tool-muted: #666;
  --grb-tool-line: rgba(0,0,0,.12);
  --grb-tool-line-strong: rgba(0,0,0,.24);
  --grb-ui-control-bg: #fff;
  --grb-ui-control-hover: #efefec;
  --grb-ui-control-border: rgba(0,0,0,.18);
  --grb-ui-control-border-strong: rgba(0,0,0,.34);
  --grb-ui-color-swatch-border: rgba(0,0,0,.28);
  --grb-ui-switch-off: #c8cbd1;
  --grb-ui-value-bg: rgba(0,0,0,.055);
  --grb-ui-value-border: rgba(0,0,0,.10);
  --grb-ui-scrollbar-track: transparent;
  --grb-ui-scrollbar-thumb: #b6b9bf;
  --grb-ui-scrollbar-thumb-hover: #8c919a;
  --grb-ui-shadow: 0 28px 90px rgba(0,0,0,.20);
}

/* Required page shell for every standalone browser tool. */
body.grb-browser-tool { height: 100vh; margin: 0; overflow: hidden; }
body.grb-browser-tool button,
body.grb-browser-tool [role="button"] { font-family: var(--grb-button-font-family); }
body.grb-browser-tool--identity-nav { --grb-browser-nav-height: var(--grb-tool-header-height); }
.grb-tool-app {
  height: calc(100vh - var(--grb-browser-nav-height));
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, var(--sidebar-width, 360px)) var(--resizer-width) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: var(--grb-tool-bg);
  color: var(--grb-tool-text);
  font-family: var(--grb-tool-font-sans);
}
.grb-tool-sidebar,
.grb-tool-resizer,
.grb-tool-stage-panel { height: 100%; }
.grb-tool-sidebar {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--grb-tool-panel);
}
.grb-tool-stage-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--grb-tool-bg);
}
.grb-tool-stage-head {
  min-height: var(--grb-tool-stage-head-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grb-tool-line);
  background: var(--grb-tool-panel);
}

.grb-tool-sidebar .grb-brand {
  background: var(--grb-tool-panel);
  border-bottom: 1px solid var(--grb-tool-line);
}
.grb-tool-sidebar .grb-brand-mark { cursor: grab; }
.grb-tool-sidebar .grb-brand-cube line { stroke: var(--grb-tool-text); }
.grb-tool-sidebar .grb-brand-copy { min-width: 0; display: flex; flex-direction: column; }
.grb-tool-sidebar .grb-wordmark,
.grb-tool-sidebar .grb-product-name { color: var(--grb-tool-text); }
.grb-tool-sidebar .grb-product-code {
  color: var(--grb-tool-muted);
  font: 700 10px/1 var(--grb-tool-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.grb-ui-tabs,
.grb-tool-sidebar .tab-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--grb-tool-line);
  background: var(--grb-tool-panel);
}
.grb-ui-tab,
.grb-tool-sidebar .tab-button {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--grb-tool-muted);
  font: 760 12px/1 var(--grb-button-font-family);
  letter-spacing: .075em;
  text-transform: uppercase;
  cursor: pointer;
}
.grb-ui-tab--icon { flex: 0 0 42px; padding: 0; }
.grb-tool-sidebar .tab-button.grb-ui-tab--icon { flex: 0 0 42px; padding: 0; }
.grb-ui-tab:hover,
.grb-ui-tab.active,
.grb-tool-sidebar .tab-button:hover,
.grb-tool-sidebar .tab-button.active { color: var(--grb-tool-text); }
.grb-ui-tab::after,
.grb-tool-sidebar .tab-button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: transparent;
}
.grb-ui-tab.active::after,
.grb-tool-sidebar .tab-button.active::after { background: var(--grb-tool-text); }
.grb-ui-tab-panel,
.grb-tool-sidebar .tab-panel { display: none; }
.grb-ui-tab-panel.active,
.grb-tool-sidebar .tab-panel.active { display: block; }
.grb-ui-tab-count {
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--grb-ui-control-border-strong);
  color: var(--grb-tool-text);
  font: 750 10px/1 var(--grb-tool-font-mono);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.grb-ui-tab.active .grb-ui-tab-count { background: var(--grb-tool-text); color: var(--grb-tool-bg); }
.grb-tool-sidebar .section { border-bottom: 1px solid var(--grb-tool-line); }
.grb-tool-sidebar .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grb-tool-text);
  font: 750 12px/1.2 var(--grb-tool-font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.grb-tool-sidebar .section-title > span:first-child { color: var(--grb-tool-muted); }

/* Canonical controls for new tools. */
.grb-tool-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--grb-tool-line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--grb-tool-text);
  font: 700 var(--grb-ui-button-font-size)/1 var(--grb-button-font-family);
  text-transform: none;
  cursor: pointer;
}
.grb-tool-button:hover,
.grb-tool-button:focus-visible { border-color: var(--grb-tool-text); outline: none; }
.grb-tool-button--primary {
  color: var(--grb-tool-bg);
  background: var(--grb-tool-text);
  border-color: var(--grb-tool-text);
}
.grb-tool-button--icon { width: 36px; padding: 0; }
.grb-tool-button:disabled { opacity: .36; cursor: default; }

/* Canonical text-free close control, matched to the native GRB app family. */
.grb-tool-close-button {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--grb-tool-text);
  cursor: pointer;
}
.grb-tool-close-button svg {
  width: 22px;
  height: 22px;
  display: block;
  transform-origin: 50% 50%;
  transition: transform 180ms cubic-bezier(.22,.8,.3,1);
}
.grb-tool-close-button:hover svg { transform: rotate(90deg); }
.grb-tool-close-button:focus-visible {
  outline: 2px solid var(--grb-accent);
  outline-offset: 1px;
}
.grb-tool-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;
}

/* --------------------------------------------------------------------------
   Canonical browser-tool components. Product code composes these classes; it
   does not restyle their states locally.
   -------------------------------------------------------------------------- */
.grb-ui-stack { display: grid; gap: 12px; }
.grb-ui-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
@supports (-moz-appearance: none) {
  .grb-ui-scrollbar,
  .grb-tool-sidebar,
  .grb-ui-table-wrap,
  .grb-ui-select-menu { scrollbar-width: thin; scrollbar-color: var(--grb-ui-scrollbar-thumb) var(--grb-ui-scrollbar-track); }
}
.grb-ui-scrollbar::-webkit-scrollbar,
.grb-tool-sidebar::-webkit-scrollbar,
.grb-ui-table-wrap::-webkit-scrollbar,
.grb-ui-select-menu::-webkit-scrollbar { width: 20px; height: 20px; }
.grb-ui-scrollbar::-webkit-scrollbar-track,
.grb-tool-sidebar::-webkit-scrollbar-track,
.grb-ui-table-wrap::-webkit-scrollbar-track,
.grb-ui-select-menu::-webkit-scrollbar-track { background: var(--grb-ui-scrollbar-track); }
.grb-ui-scrollbar::-webkit-scrollbar-thumb,
.grb-tool-sidebar::-webkit-scrollbar-thumb,
.grb-ui-table-wrap::-webkit-scrollbar-thumb,
.grb-ui-select-menu::-webkit-scrollbar-thumb { min-width: 28px; min-height: 28px; border: 5px solid var(--grb-tool-bg); border-radius: 10px; background: var(--grb-ui-scrollbar-thumb); background-clip: padding-box; }
.grb-tool-sidebar::-webkit-scrollbar-thumb,
.grb-ui-table-wrap::-webkit-scrollbar-thumb,
.grb-ui-select-menu::-webkit-scrollbar-thumb { border-color: var(--grb-tool-panel); }
.grb-ui-scrollbar::-webkit-scrollbar-thumb:hover,
.grb-tool-sidebar::-webkit-scrollbar-thumb:hover,
.grb-ui-table-wrap::-webkit-scrollbar-thumb:hover,
.grb-ui-select-menu::-webkit-scrollbar-thumb:hover { background-color: var(--grb-ui-scrollbar-thumb-hover); }
.grb-ui-scrollbar::-webkit-scrollbar-button,
.grb-tool-sidebar::-webkit-scrollbar-button,
.grb-ui-table-wrap::-webkit-scrollbar-button,
.grb-ui-select-menu::-webkit-scrollbar-button { display: none; width: 0; height: 0; background: transparent; -webkit-appearance: none; }
.grb-ui-label {
  display: grid;
  gap: 7px;
  color: var(--grb-tool-text);
  font-size: 12px;
  font-weight: 700;
}
.grb-ui-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 7px;
  color: var(--grb-tool-muted);
  font-size: 14px;
  font-weight: 700;
}
.grb-ui-help { margin: 0; color: var(--grb-tool-muted); font-size: 11px; line-height: 1.5; }
.grb-ui-section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0 0 var(--grb-tool-section-heading-gap);
  color: var(--grb-tool-text);
  font: 750 12px/1.2 var(--grb-tool-font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.grb-ui-section-title[data-grb-section]::before {
  content: attr(data-grb-section) " /";
  flex: 0 0 auto;
  color: var(--grb-tool-muted);
}
.grb-ui-section-title::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  margin-left: 5px;
  background: var(--grb-tool-line);
}

.grb-ui-button {
  min-height: var(--grb-ui-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid var(--grb-ui-control-border-strong);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-ui-control-bg);
  color: var(--grb-tool-text);
  font: 700 var(--grb-ui-button-font-size)/1 var(--grb-button-font-family);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transform-origin: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .08s ease;
}
.grb-ui-button:not(.grb-ui-button--icon):not(.grb-ui-toolbar-icon-button) {
  box-sizing: border-box;
  padding-block: calc(var(--grb-ui-button-text-nudge) * 2) 0;
}
.grb-ui-button:hover { background: var(--grb-ui-control-hover); border-color: var(--grb-ui-control-border-strong); }
.grb-ui-button:active,
.grb-ui-legacy-adapter .btn:active,
.grb-ui-legacy-adapter .icon-btn:active,
.grb-ui-legacy-adapter .pan-mode-btn:active,
.grb-ui-legacy-adapter .zoom-stepper-value:active { transform: scale(.98); }
.grb-ui-button:focus-visible {
  outline: 2px solid var(--grb-accent);
  outline-offset: 2px;
}
.grb-ui-input:focus-visible,
.grb-ui-textarea:focus-visible,
.grb-ui-select:focus-visible,
.grb-ui-number:focus-visible {
  outline: none;
  border-color: var(--grb-accent);
}
.grb-ui-button--primary { border-color: var(--grb-color-action-primary); background: var(--grb-color-action-primary); color: var(--grb-color-action-primary-text); }
.grb-ui-button--primary:hover { border-color: var(--grb-color-action-primary-hover); background: var(--grb-color-action-primary-hover); }
.grb-ui-button--danger { border-color: var(--grb-ui-danger); background: var(--grb-ui-danger); color: #fff; }
.grb-ui-button--danger:hover { border-color: var(--grb-ui-danger); background: var(--grb-ui-danger); }
.grb-ui-button--quiet { border-color: transparent; background: transparent; color: var(--grb-tool-muted); }
.grb-ui-button--quiet:hover { border-color: transparent; background: transparent; color: var(--grb-tool-text); }
.grb-ui-button--icon { width: var(--grb-ui-control-height); min-width: var(--grb-ui-control-height); padding: 0; }
.grb-ui-toolbar-icon-button > svg { width: var(--grb-ui-toolbar-icon-size); height: var(--grb-ui-toolbar-icon-size); display: block; }
.grb-ui-button:disabled,
.grb-ui-button[aria-disabled="true"] { opacity: var(--grb-ui-disabled-opacity); cursor: default; pointer-events: none; transform: none; }
html[data-ui-theme="light"] .grb-ui-button--primary { border-color: #111; background: #111; color: #fff; }
html[data-ui-theme="light"] .grb-ui-button--primary:hover { border-color: #292929; background: #292929; }

.grb-ui-input,
.grb-ui-textarea,
.grb-ui-select,
.grb-ui-number {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--grb-ui-control-border);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-ui-control-bg);
  color: var(--grb-tool-text);
  font: 500 var(--grb-ui-field-font-size)/1.4 var(--grb-tool-font-sans);
}
.grb-ui-input,
.grb-ui-number,
.grb-ui-select { height: var(--grb-ui-control-height); padding: 0 12px; }
.grb-ui-number { appearance: textfield; padding-right: 38px; }
.grb-ui-number::-webkit-inner-spin-button,
.grb-ui-number::-webkit-outer-spin-button { margin: 0; appearance: none; }
.grb-ui-number-shell { position: relative; width: 100%; min-width: 0; }
.grb-ui-number-shell .grb-ui-number { display: block; }
.grb-ui-number-controls {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  display: grid;
  grid-template-rows: 14px 14px;
  transform: translateY(-50%);
}
.grb-ui-number-step {
  width: 20px;
  height: 14px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--grb-tool-muted);
  cursor: pointer;
}
.grb-ui-number-step:hover { color: var(--grb-tool-text); }
.grb-ui-number-step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grb-ui-number-shell[data-disabled="true"] .grb-ui-number-controls { opacity: var(--grb-ui-disabled-opacity); pointer-events: none; }
.grb-ui-textarea { min-height: 112px; resize: vertical; padding: 11px 12px; }
.grb-ui-input::placeholder,
.grb-ui-textarea::placeholder { color: var(--grb-tool-muted); opacity: .8; }
.grb-ui-select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%239ba0aa' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.grb-ui-color-field { display: grid; grid-template-columns: var(--grb-ui-color-swatch-size) minmax(0,1fr); align-items: center; gap: 8px; }
.grb-ui-color-swatch {
  width: var(--grb-ui-color-swatch-size);
  height: var(--grb-ui-color-swatch-size);
  padding: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  border: 1px solid var(--grb-ui-color-swatch-border);
  border-radius: var(--grb-ui-radius-control);
  background: transparent;
  cursor: pointer;
}
.grb-ui-color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: calc(var(--grb-ui-radius-control) - 1px); overflow: hidden; }
.grb-ui-color-swatch::-webkit-color-swatch { border: 0; border-radius: calc(var(--grb-ui-radius-control) - 1px); box-shadow: none; }
.grb-ui-color-swatch::-moz-color-swatch { border: 0; border-radius: calc(var(--grb-ui-radius-control) - 1px); box-shadow: none; }
.grb-ui-color-swatch:focus-visible { outline: 1px solid var(--grb-accent); outline-offset: 1px; }

.grb-ui-value-editor {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 42px;
  padding: 3px 8px;
  border: 1px solid var(--grb-ui-value-border);
  border-radius: 3px;
  background: var(--grb-ui-value-bg);
  color: var(--grb-tool-text);
  font: 700 13px/1.15 var(--grb-tool-font-mono);
  font-variant-numeric: tabular-nums;
  cursor: text;
}
.grb-ui-value-input {
  width: 3ch;
  min-width: 2ch;
  max-width: 8ch;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.15;
  text-align: right;
  appearance: textfield;
}
.grb-ui-value-input::-webkit-inner-spin-button,
.grb-ui-value-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.grb-ui-value-editor:has(.grb-ui-value-input:disabled),
.grb-ui-value-input:disabled { cursor: default; }
.grb-ui-value-editor:focus-within { border-color: var(--grb-accent); background: color-mix(in srgb,var(--grb-accent) 14%,transparent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--grb-accent) 16%,transparent); }
.grb-ui-value-unit { opacity: .84; pointer-events: none; }
.grb-ui-count-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 1px solid var(--grb-ui-control-border);
  border-radius: 3px;
  background: var(--grb-ui-value-bg);
  color: var(--grb-tool-muted);
  font: 700 10px/1 var(--grb-tool-font-mono);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grb-ui-count-badge--accent { border-color: var(--grb-accent); border-radius: 999px; background: var(--grb-accent); color: #fff; }
.grb-ui-step-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.grb-ui-step-card {
  display: grid;
  grid-template-columns: 31px minmax(0,1fr);
  align-items: start;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--grb-ui-control-border);
  border-radius: var(--grb-ui-radius-control);
  background: color-mix(in srgb,var(--grb-tool-panel-raised) 68%,transparent);
}
.grb-ui-step-number {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grb-accent);
  color: #fff;
  font: 800 11px/1 var(--grb-tool-font-mono);
  font-variant-numeric: tabular-nums;
}
.grb-ui-step-content { min-width: 0; }
.grb-ui-step-title {
  display: block;
  margin: 0 0 3px;
  color: var(--grb-tool-text);
  font: 700 13px/1.25 var(--grb-tool-font-sans);
}
.grb-ui-step-copy {
  display: block;
  margin: 0;
  color: var(--grb-tool-muted);
  font: 500 11px/1.45 var(--grb-tool-font-sans);
}
.grb-ui-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--grb-ui-control-border);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-ui-control-bg);
}
.grb-ui-segment {
  min-height: calc(var(--grb-ui-control-height) - 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: calc(var(--grb-ui-radius-control) - 2px);
  background: transparent;
  color: var(--grb-tool-muted);
  font: 700 var(--grb-ui-button-font-size)/1 var(--grb-button-font-family);
  cursor: pointer;
}
.grb-ui-segment:hover { background: var(--grb-ui-control-hover); color: var(--grb-tool-text); }
.grb-ui-segment.active,
.grb-ui-segment[aria-pressed="true"] { background: var(--grb-tool-text); color: var(--grb-tool-bg); }
.grb-ui-segment:focus-visible { outline: 1px solid var(--grb-accent); outline-offset: -1px; }
.grb-ui-custom-select { position: relative; width: 100%; min-width: 0; font-weight: 500; }
.grb-ui-custom-select .grb-ui-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.grb-ui-select-trigger {
  width: 100%;
  height: var(--grb-ui-control-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 11px 0 12px;
  border: 1px solid var(--grb-ui-control-border);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-ui-control-bg);
  color: var(--grb-tool-text);
  font: 500 var(--grb-ui-field-font-size)/1.4 var(--grb-tool-font-sans);
  text-align: left;
  cursor: pointer;
}
.grb-ui-select-trigger:hover { border-color: var(--grb-ui-control-border-strong); background: var(--grb-ui-control-hover); }
.grb-ui-select-trigger:focus-visible,
.grb-ui-custom-select[data-open="true"] .grb-ui-select-trigger { outline: none; border-color: var(--grb-accent); }
.grb-ui-custom-select[data-open="true"] .grb-ui-select-trigger {
  visibility: hidden;
  pointer-events: none;
}
.grb-ui-select-chevron { width: 18px; height: 18px; flex: 0 0 18px; color: var(--grb-tool-muted); transition: transform .16s ease; }
.grb-ui-select-chevron path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grb-ui-custom-select[data-open="true"] .grb-ui-select-chevron { transform: rotate(180deg); }
.grb-ui-select-menu {
  position: absolute;
  z-index: 1200;
  top: 0;
  right: 0;
  left: 0;
  max-height: 230px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--grb-accent);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-tool-panel);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
}
.grb-ui-select-menu[hidden] { display: none; }
.grb-ui-select-option {
  width: 100%;
  min-height: calc(var(--grb-ui-control-height) - 2px);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--grb-tool-text);
  font: 500 var(--grb-ui-field-font-size)/1.4 var(--grb-tool-font-sans);
  text-align: left;
  cursor: pointer;
}
.grb-ui-select-option[data-active="true"] { background: var(--grb-ui-control-hover); }
.grb-ui-select-option[aria-selected="true"] { background: var(--grb-accent); color: #fff; }
html[data-ui-theme="light"] .grb-ui-select-option[data-active="true"],
html[data-ui-theme="light"] .grb-ui-select-option[aria-selected="true"] { background: var(--grb-ui-select-highlight); color: var(--grb-tool-text); }
.grb-ui-select-option:disabled { opacity: var(--grb-ui-disabled-opacity); cursor: default; }
.grb-ui-custom-select[data-disabled="true"] { opacity: var(--grb-ui-disabled-opacity); }
.grb-ui-custom-select[data-disabled="true"] .grb-ui-select-trigger { cursor: default; pointer-events: none; }
html[data-ui-theme="light"] .grb-ui-select-menu { background: #fff; box-shadow: 0 18px 46px rgba(0,0,0,.18); }
.grb-ui-input:disabled,
.grb-ui-textarea:disabled,
.grb-ui-select:disabled,
.grb-ui-number:disabled { opacity: var(--grb-ui-disabled-opacity); cursor: default; }

.grb-ui-check,
.grb-ui-radio,
.grb-ui-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--grb-tool-text); font-size: 13px; cursor: pointer; }
.grb-ui-check input,
.grb-ui-radio input,
.grb-ui-switch input { position: absolute; opacity: 0; pointer-events: none; }
.grb-ui-check-mark,
.grb-ui-radio-mark {
  width: var(--grb-ui-choice-size);
  height: var(--grb-ui-choice-size);
  flex: 0 0 var(--grb-ui-choice-size);
  display: grid;
  place-items: center;
  border: var(--grb-ui-choice-border-width) solid var(--grb-tool-text);
  background: var(--grb-ui-control-bg);
}
.grb-ui-check-mark { border-radius: 3px; }
.grb-ui-radio-mark { border-radius: 50%; }
.grb-ui-check-mark::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: translateY(-1px) rotate(-45deg); }
.grb-ui-radio-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; }
.grb-ui-check input:checked + .grb-ui-check-mark,
.grb-ui-radio input:checked + .grb-ui-radio-mark { border-color: var(--grb-tool-text); background: var(--grb-accent); }
.grb-ui-check:hover .grb-ui-check-mark,
.grb-ui-radio:hover .grb-ui-radio-mark { border-color: var(--grb-accent-hover); }
.grb-ui-check input:checked + .grb-ui-check-mark::after,
.grb-ui-radio input:checked + .grb-ui-radio-mark::after { opacity: 1; }
.grb-ui-check input:focus-visible + .grb-ui-check-mark,
.grb-ui-radio input:focus-visible + .grb-ui-radio-mark,
.grb-ui-switch input:focus-visible + .grb-ui-switch-track { outline: 2px solid var(--grb-accent); outline-offset: 2px; }
.grb-ui-check:has(input:disabled),
.grb-ui-radio:has(input:disabled),
.grb-ui-switch:has(input:disabled) { opacity: var(--grb-ui-disabled-opacity); cursor: default; }
.grb-ui-switch-track { width: var(--grb-ui-switch-width); height: var(--grb-ui-switch-height); flex: 0 0 var(--grb-ui-switch-width); position: relative; border: 0; border-radius: 999px; background: var(--grb-ui-switch-off); transition: background .16s ease; }
.grb-ui-switch-track::after { content: ""; position: absolute; left: var(--grb-ui-switch-thumb-inset); top: var(--grb-ui-switch-thumb-inset); width: var(--grb-ui-switch-thumb-size); height: var(--grb-ui-switch-thumb-size); border-radius: 50%; background: #fff; transition: transform .16s cubic-bezier(.22,.8,.3,1); }
.grb-ui-switch input:checked + .grb-ui-switch-track { background: var(--grb-accent); }
.grb-ui-switch input:checked + .grb-ui-switch-track::after { transform: translateX(var(--grb-ui-switch-thumb-travel)); }

.grb-ui-range { width: 100%; height: 24px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.grb-ui-range::-webkit-slider-runnable-track { height: 8px; border: 0; border-radius: 4px; background: linear-gradient(to right,var(--grb-accent) 0,var(--grb-accent) var(--grb-range-value,50%),var(--grb-ui-control-bg) var(--grb-range-value,50%),var(--grb-ui-control-bg) 100%); box-shadow: inset 0 0 0 1px var(--grb-ui-control-border); }
.grb-ui-range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; appearance: none; border: 2px solid var(--grb-tool-text); border-radius: 50%; background: var(--grb-color-row-hover); }
.grb-ui-range::-moz-range-track { height: 8px; border: 1px solid var(--grb-ui-control-border); border-radius: 4px; background: var(--grb-ui-control-bg); }
.grb-ui-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--grb-accent); }
.grb-ui-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--grb-tool-text); border-radius: 50%; background: var(--grb-color-row-hover); }
html[data-ui-theme="light"] .grb-ui-range::-webkit-slider-thumb { border-color: var(--grb-accent); background: #fff; }
html[data-ui-theme="light"] .grb-ui-range::-moz-range-thumb { border-color: var(--grb-accent); background: #fff; }
.grb-ui-range:disabled { opacity: var(--grb-ui-disabled-opacity); cursor: default; }
.grb-ui-range:disabled[title]:not([title=""]) { cursor: not-allowed; }

.grb-ui-progress { width: 100%; height: 14px; display: block; overflow: hidden; appearance: none; border: 1px solid var(--grb-ui-control-border); border-radius: 7px; background: var(--grb-ui-control-bg); }
.grb-ui-progress::-webkit-progress-bar { background: var(--grb-ui-control-bg); }
.grb-ui-progress::-webkit-progress-value { border-radius: 0; background: var(--grb-accent); }
.grb-ui-progress::-moz-progress-bar { border-radius: 0; background: var(--grb-accent); }
.grb-ui-progress-shell { position: relative; width: 100%; height: 14px; overflow: hidden; box-sizing: border-box; border: 1px solid var(--grb-ui-control-border); border-radius: 7px; background: var(--grb-ui-control-bg); }
.grb-ui-progress-shell > .grb-ui-progress { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none; }
.grb-ui-progress-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: var(--grb-accent); will-change: transform; }
.grb-ui-spinner { width: var(--grb-ui-spinner-size); height: var(--grb-ui-spinner-size); display: inline-block; box-sizing: border-box; border: var(--grb-ui-spinner-stroke) solid var(--grb-ui-control-border); border-top-color: var(--grb-accent); border-radius: 50%; animation: grb-ui-spin .8s linear infinite; }
@keyframes grb-ui-spin { to { transform: rotate(360deg); } }

.grb-ui-badge { min-height: 26px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 13px; background: var(--grb-ui-control-bg); color: var(--grb-tool-muted); font: 750 10px/1 var(--grb-tool-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.grb-ui-badge--active { background: var(--grb-ui-success); color: #fff; }
.grb-ui-badge--warning { background: var(--grb-ui-warning); color: var(--grb-color-text-inverse); }
.grb-ui-badge--error { background: var(--grb-ui-danger); color: #fff; }
.grb-ui-usage-badge {
  min-height: var(--grb-ui-usage-height);
  height: var(--grb-ui-usage-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 11px;
  border: 1px solid var(--grb-ui-control-border);
  border-radius: 999px;
  background: transparent;
  color: var(--grb-tool-muted);
  font: 750 var(--grb-ui-usage-font-size)/1 var(--grb-tool-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.grb-ui-usage-badge:is(a,button) {
  appearance: none;
  margin: 0;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
.grb-ui-usage-badge:is(a,button):hover { border-color: var(--grb-accent); background: var(--grb-accent-soft); color: var(--grb-accent); }
.grb-ui-usage-badge:is(a,button):focus-visible { outline: 2px solid var(--grb-accent); outline-offset: 2px; }
.grb-ui-usage-badge[data-low="true"] { border-color: color-mix(in srgb,var(--grb-accent) 60%,transparent); color: var(--grb-accent); }
.grb-ui-usage-badge[data-exhausted="true"] { border-color: var(--grb-accent); background: var(--grb-accent); color: #fff; }
.grb-ui-usage-badge:is(a,button)[data-exhausted="true"]:hover { background: var(--grb-accent-hover); color: #fff; }
.grb-ui-usage-badge[hidden] { display: none !important; }
.grb-ui-callout { display: grid; grid-template-columns: 5px minmax(0,1fr); overflow: hidden; border: 1px solid var(--grb-ui-control-border); border-radius: 0; background: var(--grb-tool-panel-raised); }
.grb-ui-callout::before { content: ""; background: var(--grb-ui-info); }
.grb-ui-callout--success::before { background: var(--grb-ui-success); }
.grb-ui-callout--warning::before { background: var(--grb-ui-warning); }
.grb-ui-callout--error::before { background: var(--grb-ui-danger); }
.grb-ui-callout-body { padding: 13px 15px; }
.grb-ui-callout strong { display: block; margin-bottom: 4px; color: var(--grb-tool-text); font-size: 13px; }
.grb-ui-callout p { margin: 0; color: var(--grb-tool-muted); font-size: 11px; line-height: 1.5; }

.grb-ui-table-wrap { width: 100%; overflow: auto; border: 1px solid var(--grb-tool-line); border-radius: var(--grb-ui-radius-panel); }
.grb-ui-table { width: 100%; min-width: 620px; border-collapse: collapse; color: var(--grb-tool-text); font-size: 12px; }
.grb-ui-table th { height: 46px; padding: 0 14px; border-right: 1px solid var(--grb-tool-line); background: var(--grb-tool-panel-raised); color: var(--grb-tool-muted); font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.grb-ui-table td { height: 52px; padding: 0 14px; border-top: 1px solid var(--grb-tool-line); border-right: 1px solid var(--grb-tool-line); }
.grb-ui-table th:last-child,
.grb-ui-table td:last-child { border-right: 0; }
.grb-ui-table tbody tr:hover { background: var(--grb-ui-control-hover); }

.grb-ui-dropzone { min-height: 170px; display: grid; place-items: center; padding: 28px; border: 2px dotted var(--grb-ui-control-border-strong); border-radius: var(--grb-ui-radius-panel); background: var(--grb-color-surface); text-align: center; }
.grb-ui-dropzone:hover,
.grb-ui-dropzone[data-active="true"] { border-color: var(--grb-accent); background: var(--grb-accent-soft); }
.grb-ui-dropzone strong { display: block; margin-bottom: 7px; font-size: 16px; }
.grb-ui-dropzone p { margin: 0 0 15px; color: var(--grb-tool-muted); font-size: 12px; }
.grb-ui-empty { display: grid; justify-items: start; gap: 13px; padding: 24px; border: 1px solid var(--grb-tool-line); border-radius: var(--grb-ui-radius-panel); background: var(--grb-tool-panel); }
.grb-ui-empty strong { font-size: 15px; }
.grb-ui-empty p { margin: 0; color: var(--grb-tool-muted); font-size: 12px; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Compatibility adapter for tools created before the canonical grb-ui-* API.
   Opt-in keeps their behavior and layout while sourcing appearance from the
   same tokens as the Web Ecosystem Lab. New tools use grb-ui-* directly.
   -------------------------------------------------------------------------- */
.grb-ui-legacy-adapter .btn,
.grb-ui-legacy-adapter .icon-btn {
  min-height: var(--grb-ui-control-height);
  border: 1px solid var(--grb-ui-control-border-strong);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-ui-control-bg);
  color: var(--grb-tool-text);
  font: 700 var(--grb-ui-button-font-size)/1 var(--grb-button-font-family);
  text-transform: none;
  box-shadow: none;
}
.grb-ui-legacy-adapter .btn:not(.grb-ui-button):not(.icon-button):not(.grb-ui-toolbar-icon-button) {
  box-sizing: border-box;
  padding-block: calc(var(--grb-ui-button-text-nudge) * 2) 0;
}
.grb-ui-legacy-adapter .btn .btn-label { transform: none; }
.grb-ui-legacy-adapter .pan-mode-btn,
.grb-ui-legacy-adapter .zoom-stepper-value {
  text-transform: none;
}
.grb-ui-legacy-adapter .btn:hover,
.grb-ui-legacy-adapter .icon-btn:hover { border-color: var(--grb-ui-control-border-strong); background: var(--grb-ui-control-hover); color: var(--grb-tool-text); }
.grb-ui-legacy-adapter .btn:focus-visible,
.grb-ui-legacy-adapter .icon-btn:focus-visible { outline: 2px solid var(--grb-accent); outline-offset: 2px; }
.grb-ui-legacy-adapter .btn.primary { border-color: var(--grb-color-action-primary); background: var(--grb-color-action-primary); color: var(--grb-color-action-primary-text); }
.grb-ui-legacy-adapter .btn.primary:hover { border-color: var(--grb-color-action-primary-hover); background: var(--grb-color-action-primary-hover); color: var(--grb-color-action-primary-text); }
html[data-ui-theme="light"] .grb-ui-legacy-adapter .btn.primary { border-color: #111; background: #111; color: #fff; }
html[data-ui-theme="light"] .grb-ui-legacy-adapter .btn.primary:hover { border-color: #292929; background: #292929; color: #fff; }
.grb-ui-legacy-adapter .btn.danger { border-color: var(--grb-ui-danger); background: var(--grb-ui-danger); color: #fff; }
.grb-ui-legacy-adapter .btn.danger:hover { border-color: var(--grb-ui-danger); background: var(--grb-ui-danger); color: #fff; }
.grb-ui-legacy-adapter .btn:disabled,
.grb-ui-legacy-adapter .icon-btn:disabled { opacity: var(--grb-ui-disabled-opacity); pointer-events: none; }

.grb-ui-legacy-adapter textarea,
.grb-ui-legacy-adapter select,
.grb-ui-legacy-adapter input[type="text"],
.grb-ui-legacy-adapter input[type="number"] {
  border: 1px solid var(--grb-ui-control-border);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-ui-control-bg);
  color: var(--grb-tool-text);
  font: 500 var(--grb-ui-field-font-size)/1.4 var(--grb-tool-font-sans);
  box-shadow: none;
}
.grb-ui-legacy-adapter textarea:focus,
.grb-ui-legacy-adapter select:focus,
.grb-ui-legacy-adapter input[type="text"]:focus,
.grb-ui-legacy-adapter input[type="number"]:focus { outline: none; border-color: var(--grb-accent); box-shadow: none; }
.grb-ui-legacy-adapter select,
.grb-ui-legacy-adapter input[type="text"],
.grb-ui-legacy-adapter input[type="number"] { height: var(--grb-ui-control-height); min-height: var(--grb-ui-control-height); padding: 0 12px; }

.grb-ui-legacy-adapter .color-field { display: grid; grid-template-columns: var(--grb-ui-color-swatch-size) minmax(0,1fr); align-items: center; gap: 8px; }
.grb-ui-legacy-adapter .color-field input[type="color"] { width: var(--grb-ui-color-swatch-size); height: var(--grb-ui-color-swatch-size); padding: 0; overflow: hidden; appearance: none; -webkit-appearance: none; box-sizing: border-box; border: 1px solid var(--grb-ui-color-swatch-border); border-radius: var(--grb-ui-radius-control); background: transparent; cursor: pointer; }
.grb-ui-legacy-adapter .color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: calc(var(--grb-ui-radius-control) - 1px); overflow: hidden; }
.grb-ui-legacy-adapter .color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--grb-ui-radius-control) - 1px); box-shadow: none; }
.grb-ui-legacy-adapter .color-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: calc(var(--grb-ui-radius-control) - 1px); box-shadow: none; }

.grb-ui-legacy-adapter .value-editor { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 42px; padding: 3px 8px; border: 1px solid var(--grb-ui-value-border); border-radius: 3px; background: var(--grb-ui-value-bg); color: var(--grb-tool-text); font: 700 13px/1.15 var(--grb-tool-font-mono); font-variant-numeric: tabular-nums; cursor: text; }
.grb-ui-legacy-adapter .value-editor input[type="number"] { width: 3ch; min-width: 2ch; max-width: 8ch; min-height: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: inherit; font: inherit; line-height: 1.15; text-align: right; appearance: textfield; }
.grb-ui-legacy-adapter .value-editor:focus-within { border-color: var(--grb-accent); background: color-mix(in srgb,var(--grb-accent) 14%,transparent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--grb-accent) 16%,transparent); }
.grb-ui-legacy-adapter .value-unit { opacity: .84; pointer-events: none; }
.grb-ui-legacy-adapter .label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 7px;
  color: var(--grb-tool-muted);
  font-size: 14px;
  font-weight: 700;
}
.grb-ui-legacy-adapter .segmented { border-color: var(--grb-ui-control-border); background: var(--grb-ui-control-bg); }
.grb-ui-legacy-adapter .segmented button { color: var(--grb-tool-muted); background: transparent; }
.grb-ui-legacy-adapter .segmented button:hover { color: var(--grb-tool-text); background: var(--grb-ui-control-hover); }
.grb-ui-legacy-adapter .segmented button.active { color: var(--grb-tool-bg); background: var(--grb-tool-text); box-shadow: none; }
.grb-ui-legacy-adapter .onboarding-step { border-color: var(--grb-ui-control-border); background: color-mix(in srgb,var(--grb-tool-panel-raised) 68%,transparent); }
.grb-ui-legacy-adapter .onboarding-step-number { background: var(--grb-accent); color: #fff; font-family: var(--grb-tool-font-mono); }
.grb-ui-legacy-adapter .onboarding-step strong { color: var(--grb-tool-text); font-family: var(--grb-tool-font-sans); }
.grb-ui-legacy-adapter .onboarding-step span:last-child { color: var(--grb-tool-muted); font-family: var(--grb-tool-font-sans); }
.grb-ui-legacy-adapter .icon-button svg,
.grb-ui-legacy-adapter .icon-btn svg,
.grb-ui-legacy-adapter .btn > svg { width: var(--grb-ui-toolbar-icon-size); height: var(--grb-ui-toolbar-icon-size); }

.grb-ui-legacy-adapter .grb-tool-sidebar .tab-panel { counter-reset: grb-section; }
.grb-ui-legacy-adapter .grb-tool-sidebar .tab-panel > .section { counter-increment: grb-section; }
.grb-ui-legacy-adapter .grb-tool-sidebar .section-title::before { content: counter(grb-section,decimal-leading-zero) " /"; flex: 0 0 auto; color: var(--grb-tool-muted); }
.grb-ui-legacy-adapter .grb-tool-sidebar .section-title::after { content: ""; height: 1px; flex: 1 1 auto; margin-left: 5px; background: var(--grb-tool-line); }

.grb-ui-legacy-adapter .editor-toolbar .emoji-button,
.grb-ui-legacy-adapter .editor-toolbar .format-button { font-size: 15px; }
.grb-ui-legacy-adapter .editor-toolbar .emoji-button-glyph { font-size: 21.25px; transform: translateY(-1px); }

.grb-ui-legacy-adapter .switch { position: relative; width: var(--grb-ui-switch-width); height: var(--grb-ui-switch-height); flex: 0 0 var(--grb-ui-switch-width); }
.grb-ui-legacy-adapter .switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.grb-ui-legacy-adapter .switch .slider { position: absolute; inset: 0; border: 0; border-radius: 999px; background: var(--grb-ui-switch-off); transition: background .16s ease; }
.grb-ui-legacy-adapter .switch .slider::before { width: var(--grb-ui-switch-thumb-size); height: var(--grb-ui-switch-thumb-size); left: var(--grb-ui-switch-thumb-inset); top: var(--grb-ui-switch-thumb-inset); border: 0; border-radius: 50%; background: #fff; box-shadow: none; transition: transform .16s cubic-bezier(.22,.8,.3,1); }
.grb-ui-legacy-adapter .switch input:checked + .slider { background: var(--grb-accent); }
.grb-ui-legacy-adapter .switch input:checked + .slider::before { transform: translateX(var(--grb-ui-switch-thumb-travel)); }
.grb-ui-legacy-adapter .switch input:focus-visible + .slider { outline: 2px solid var(--grb-accent); outline-offset: 2px; }

.grb-ui-legacy-adapter input[type="range"] { width: 100%; height: 24px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.grb-ui-legacy-adapter input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(to right,var(--grb-accent) 0,var(--grb-accent) var(--range-progress,50%),var(--grb-ui-control-bg) var(--range-progress,50%),var(--grb-ui-control-bg) 100%);
  box-shadow: inset 0 0 0 1px var(--grb-ui-control-border);
}
.grb-ui-legacy-adapter input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; appearance: none; border: 2px solid var(--grb-tool-text); border-radius: 50%; background: var(--grb-color-row-hover); }
.grb-ui-legacy-adapter input[type="range"]::-moz-range-track { height: 8px; border: 1px solid var(--grb-ui-control-border); border-radius: 4px; background: var(--grb-ui-control-bg); }
.grb-ui-legacy-adapter input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--grb-accent); }
.grb-ui-legacy-adapter input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--grb-tool-text); border-radius: 50%; background: var(--grb-color-row-hover); }
html[data-ui-theme="light"] .grb-ui-legacy-adapter input[type="range"]::-webkit-slider-thumb { border-color: var(--grb-accent); background: #fff; }
html[data-ui-theme="light"] .grb-ui-legacy-adapter input[type="range"]::-moz-range-thumb { border-color: var(--grb-accent); background: #fff; }
.grb-ui-legacy-adapter input[type="range"]:disabled { opacity: var(--grb-ui-disabled-opacity); cursor: default; }
.grb-ui-legacy-adapter .field.is-disabled,
.grb-ui-legacy-adapter .field.is-disabled .label-row,
.grb-ui-legacy-adapter .field.is-disabled .range-wrap,
.grb-ui-legacy-adapter .field.is-disabled .grb-ui-value-editor,
.grb-ui-legacy-adapter .field.is-disabled .grb-ui-value-input:disabled,
.grb-ui-legacy-adapter .field.is-disabled input[type="range"]:disabled { cursor: default; }
.grb-ui-legacy-adapter .field.is-disabled[title]:not([title=""]),
.grb-ui-legacy-adapter .field.is-disabled[title]:not([title=""]) .label-row,
.grb-ui-legacy-adapter .field.is-disabled[title]:not([title=""]) .range-wrap,
.grb-ui-legacy-adapter .field.is-disabled[title]:not([title=""]) .grb-ui-value-editor,
.grb-ui-legacy-adapter .field.is-disabled[title]:not([title=""]) .grb-ui-value-input:disabled,
.grb-ui-legacy-adapter .field.is-disabled[title]:not([title=""]) input[type="range"]:disabled { cursor: not-allowed; }

.grb-ui-legacy-adapter .select-picker { position: relative; width: 100%; min-width: 0; font-weight: 500; }
.grb-ui-legacy-adapter .select-picker-button {
  width: 100%;
  height: var(--grb-ui-control-height);
  min-height: var(--grb-ui-control-height);
  padding: 0 11px 0 12px;
  border: 1px solid var(--grb-ui-control-border);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-ui-control-bg);
  color: var(--grb-tool-text);
  font: 500 var(--grb-ui-field-font-size)/1.4 var(--grb-tool-font-sans);
  box-shadow: none;
}
.grb-ui-legacy-adapter .select-picker-button:hover { border-color: var(--grb-ui-control-border-strong); background: var(--grb-ui-control-hover); }
.grb-ui-legacy-adapter .select-picker-button:focus-visible,
.grb-ui-legacy-adapter .select-picker.is-open .select-picker-button { outline: none; border-color: var(--grb-accent); box-shadow: none; }
.grb-ui-legacy-adapter .select-picker.is-open .select-picker-button { visibility: hidden; pointer-events: none; }
.grb-ui-legacy-adapter .select-picker-menu {
  top: 0;
  right: 0;
  left: 0;
  max-height: 230px;
  padding: 0;
  border: 1px solid var(--grb-accent);
  border-radius: var(--grb-ui-radius-control);
  background: var(--grb-tool-panel);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
}
.grb-ui-legacy-adapter .select-picker-option { min-height: calc(var(--grb-ui-control-height) - 2px); padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--grb-tool-text); font: 500 var(--grb-ui-field-font-size)/1.4 var(--grb-tool-font-sans); }
.grb-ui-legacy-adapter .select-picker-option:hover { background: var(--grb-ui-control-hover); }
.grb-ui-legacy-adapter .select-picker-option.is-selected { background: var(--grb-accent); color: #fff; }
html[data-ui-theme="light"] .grb-ui-legacy-adapter .select-picker-option:hover,
html[data-ui-theme="light"] .grb-ui-legacy-adapter .select-picker-option.is-selected { background: var(--grb-ui-select-highlight); color: var(--grb-tool-text); }
html[data-ui-theme="light"] .grb-ui-legacy-adapter .select-picker-button { border-color: var(--grb-ui-control-border); background: var(--grb-ui-control-bg); color: var(--grb-tool-text); }
html[data-ui-theme="light"] .grb-ui-legacy-adapter .select-picker-menu { border-color: var(--grb-accent); background: #fff; box-shadow: 0 18px 46px rgba(0,0,0,.18); }
@supports (-moz-appearance: none) {
  .grb-ui-legacy-adapter .select-picker-menu { scrollbar-width: thin; scrollbar-color: var(--grb-ui-scrollbar-thumb) var(--grb-ui-scrollbar-track); }
}
.grb-ui-legacy-adapter .select-picker-menu::-webkit-scrollbar { width: 20px; height: 20px; }
.grb-ui-legacy-adapter .select-picker-menu::-webkit-scrollbar-track { background: var(--grb-ui-scrollbar-track); }
.grb-ui-legacy-adapter .select-picker-menu::-webkit-scrollbar-thumb { min-width: 28px; min-height: 28px; border: 5px solid var(--grb-tool-panel); border-radius: 10px; background: var(--grb-ui-scrollbar-thumb); background-clip: padding-box; }
.grb-ui-legacy-adapter .select-picker-menu::-webkit-scrollbar-thumb:hover { background-color: var(--grb-ui-scrollbar-thumb-hover); }
.grb-ui-legacy-adapter .select-picker-menu::-webkit-scrollbar-button { display: none; width: 0; height: 0; background: transparent; -webkit-appearance: none; }

/* Legacy tools still emit a compact, single-line toast. Its placement and
   motion remain tool-specific; its visual treatment belongs to the system. */
.grb-ui-legacy-adapter .toast {
  border: 1px solid var(--grb-ui-control-border);
  border-left: 5px solid var(--grb-ui-info);
  border-radius: 0;
  background: var(--grb-tool-panel-raised);
  color: var(--grb-tool-text);
  box-shadow: 0 16px 42px rgba(0,0,0,.38);
  font: 700 11px/1.4 var(--grb-tool-font-sans);
}
.grb-ui-legacy-adapter .toast.error { border-left-color: var(--grb-ui-danger); }

.grb-ui-modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 22px; background: rgba(0,0,0,.76); backdrop-filter: none; }
body.grb-ui-modal-open { overflow: hidden !important; }
.grb-ui-modal-backdrop[hidden] { display: none !important; }
.grb-ui-modal { width: min(480px,100%); max-height: min(760px,calc(100svh - 44px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid var(--grb-ui-control-border); border-radius: var(--grb-ui-radius-panel); background: var(--grb-tool-panel); box-shadow: var(--grb-ui-shadow); }
.grb-ui-modal,
.grb-ui-modal *,
.grb-ui-modal *::before,
.grb-ui-modal *::after { box-sizing: border-box; }
.grb-ui-modal:focus,
.grb-ui-modal:focus-visible { outline: none; }
.grb-ui-modal--wide { width: min(650px,100%); }
.grb-ui-modal-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 97px; padding: 24px 56px 11px; text-align: center; backdrop-filter: none; }
.grb-ui-modal-title { color: var(--grb-tool-text); font-size: 18px; font-weight: 850; letter-spacing: -.02em; }
.grb-ui-modal-subtitle { margin-top: 3px; color: var(--grb-tool-muted); font-size: 11px; line-height: 1.35; }
.grb-ui-modal-head .grb-tool-close-button { position: absolute; right: 10px; top: 10px; }
.grb-ui-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 30px 24px; color: var(--grb-tool-muted); font-size: 13px; line-height: 1.6; text-align: center; scrollbar-width: thin; scrollbar-color: var(--grb-ui-scrollbar-thumb) var(--grb-ui-scrollbar-track); }
.grb-ui-modal-body::-webkit-scrollbar { width: 20px; height: 20px; }
.grb-ui-modal-body::-webkit-scrollbar-track { background: var(--grb-ui-scrollbar-track); }
.grb-ui-modal-body::-webkit-scrollbar-thumb { min-width: 28px; min-height: 28px; border: 5px solid var(--grb-tool-panel); border-radius: 10px; background: var(--grb-ui-scrollbar-thumb); background-clip: padding-box; }
.grb-ui-modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--grb-ui-scrollbar-thumb-hover); }
.grb-ui-modal-body p { margin: 0; }
.grb-ui-modal:not(.grb-ui-modal--information) .grb-ui-modal-head { border-bottom: 0; }
.grb-ui-modal:not(.grb-ui-modal--information) .grb-ui-modal-body { transform: translateY(var(--grb-ui-modal-copy-shift)); }
.grb-ui-modal-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 0 22px 22px; }
.grb-ui-modal:not(.grb-ui-modal--information) .grb-ui-modal-actions { padding-bottom: 44px; }
.grb-ui-modal--information .grb-ui-modal-head { justify-content: flex-start; padding: 20px 60px 13px 22px; border-bottom: 1px solid var(--grb-tool-line); text-align: left; }
.grb-ui-modal--information .grb-ui-modal-body { padding: 22px; text-align: left; }
.grb-ui-modal--information .grb-ui-modal-actions { justify-content: flex-end; }
.grb-ui-modal--carousel { height: auto; }
.grb-ui-modal--carousel .grb-ui-modal-head { border-bottom: 0; }
.grb-ui-modal--carousel .grb-ui-modal-body { overflow: hidden; padding: 0; }
.grb-ui-carousel { min-width: 0; min-height: 0; overflow: hidden; }
.grb-ui-carousel-viewport { min-width: 0; min-height: 0; overflow: hidden; }
.grb-ui-carousel-track { min-width: 0; display: flex; align-items: stretch; transform: translate3d(var(--grb-ui-carousel-offset,0%),0,0); transition: transform .36s cubic-bezier(.22,1,.36,1); }
.grb-ui-carousel-slide { box-sizing: border-box; min-width: 0; flex: 0 0 100%; display: grid; align-content: center; overflow: hidden; padding: 18px 22px; opacity: .42; transform: scale(.985); transition: opacity .2s ease, transform .36s cubic-bezier(.22,1,.36,1); }
.grb-ui-carousel-slide.is-active { opacity: 1; transform: scale(1); }
.grb-ui-carousel-heading { margin: 0 0 10px; color: var(--grb-tool-text); font: 700 10px/1.2 var(--grb-tool-font-mono); letter-spacing: .13em; text-transform: uppercase; }
.grb-ui-modal--carousel .shortcut-heading { margin-top: 0; }
.grb-ui-modal--carousel .grb-ui-carousel-actions { display: flex; align-items: center; justify-content: center; padding: 4px 18px 10px; border-top: 0; }
.grb-ui-carousel-nav { display: flex; align-items: center; gap: 8px; }
.grb-ui-carousel-nav[hidden] { display: none; }
.grb-ui-carousel-arrow { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--grb-tool-muted); cursor: pointer; transition: color .12s ease, transform .2s cubic-bezier(.22,1,.36,1); }
.grb-ui-carousel-arrow svg { width: 18px; height: 18px; display: block; }
.grb-ui-carousel-arrow:hover:not(:disabled),
.grb-ui-carousel-arrow:focus-visible { color: var(--grb-accent); }
.grb-ui-carousel-arrow:first-child:hover:not(:disabled) { transform: translateX(-2px); }
.grb-ui-carousel-arrow:last-child:hover:not(:disabled) { transform: translateX(2px); }
.grb-ui-carousel-arrow:focus-visible { outline: 1px solid var(--grb-accent); outline-offset: 1px; }
.grb-ui-carousel-arrow:disabled { opacity: .2; cursor: default; }
.grb-ui-carousel-dots { display: flex; align-items: center; gap: 5px; }
.grb-ui-carousel-dot { width: 20px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.grb-ui-carousel-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grb-tool-muted); opacity: .48; transition: background .16s ease, opacity .16s ease, transform .28s cubic-bezier(.22,1,.36,1); }
.grb-ui-carousel-dot:hover::before { opacity: .82; }
.grb-ui-carousel-dot[aria-current="step"]::before { background: var(--grb-accent); opacity: 1; transform: scale(1.28); }
@media (prefers-reduced-motion: reduce) {
  .grb-ui-carousel-track,
  .grb-ui-carousel-slide,
  .grb-ui-carousel-arrow,
  .grb-ui-carousel-dot::before { transition: none; }
}

.grb-ui-toast-region { position: fixed; z-index: 2100; right: 18px; bottom: 18px; width: min(360px,calc(100vw - 36px)); display: grid; gap: 8px; pointer-events: none; }
.grb-ui-toast { display: grid; grid-template-columns: 5px minmax(0,1fr) 38px; align-items: center; overflow: hidden; border: 1px solid var(--grb-ui-control-border); border-radius: 0; background: var(--grb-tool-panel-raised); box-shadow: 0 16px 42px rgba(0,0,0,.38); pointer-events: auto; animation: grb-ui-toast-in .2s ease both; }
.grb-ui-toast::before { content: ""; align-self: stretch; background: var(--grb-ui-info); }
.grb-ui-toast--success::before { background: var(--grb-ui-success); }
.grb-ui-toast--warning::before { background: var(--grb-ui-warning); }
.grb-ui-toast--error::before { background: var(--grb-ui-danger); }
.grb-ui-toast-copy { padding: 12px 13px; }
.grb-ui-toast-copy strong { display: block; margin-bottom: 3px; font-size: 12px; }
.grb-ui-toast-copy span { color: var(--grb-tool-muted); font-size: 11px; line-height: 1.4; }
@keyframes grb-ui-toast-in { from { opacity: 0; transform: translateY(8px); } }

.grb-ui-icon { width: 22px; height: 22px; display: inline-block; fill: none; stroke: currentColor; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; }

.grb-browser-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--grb-browser-nav-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--grb-color-border-subtle);
  background: color-mix(in srgb,var(--grb-color-background) 92%,transparent);
  color: var(--grb-color-text);
  font: 600 10px/1 var(--grb-tool-font-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
}
html[data-ui-theme="light"] .grb-browser-nav {
  border-bottom-color: rgba(0,0,0,.14);
  background: rgba(255,255,255,.96);
  color: #111;
}
html[data-ui-theme="light"] .grb-browser-nav-links a,
html[data-ui-theme="light"] .grb-browser-nav-product,
html[data-ui-theme="light"] .grb-browser-nav-product-code { color: #111; }
html[data-ui-theme="light"] .grb-browser-nav-links a:hover,
html[data-ui-theme="light"] .grb-browser-nav-links a:focus-visible { color: var(--grb-accent); }

.grb-browser-nav a { color: inherit; text-decoration: none; }
.grb-browser-nav-brand { justify-self: start; white-space: nowrap; }
.grb-browser-nav-product { justify-self: center; color: var(--grb-color-text-muted); font-weight: 500; }
.grb-browser-nav-links { justify-self: end; }
.grb-browser-nav-links a:hover,
.grb-browser-nav-links a:focus-visible { color: var(--grb-tool-link-hover); }

/* Product-aware universal header. Identity belongs here; app toolbars stay functional. */
.grb-browser-nav--identity {
  grid-template-columns: minmax(0, 1fr) auto;
}
.grb-browser-nav-identity {
  min-width: 0;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--grb-tool-header-identity-gap);
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.grb-browser-nav-mark {
  width: var(--grb-tool-header-cube-size);
  height: var(--grb-tool-header-cube-size);
  flex: 0 0 var(--grb-tool-header-cube-size);
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
}
.grb-browser-nav-mark .grb-brand-cube {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.grb-browser-nav-mark .grb-brand-cube line { stroke: currentColor; stroke-width: var(--grb-tool-header-cube-stroke); }
.grb-browser-nav-lockup {
  min-width: 0;
  display: block;
  position: relative;
  top: var(--grb-tool-header-copy-offset);
  color: inherit;
  line-height: 1;
}
.grb-browser-nav-wordmark {
  width: var(--grb-tool-header-wordmark-width);
  height: auto;
  display: block;
  overflow: visible;
  color: inherit;
  fill: currentColor;
}
.grb-browser-nav-product-code {
  display: block;
  margin-top: var(--grb-tool-header-product-gap);
  color: var(--grb-tool-header-product-color);
  font: 700 var(--grb-tool-header-product-size)/1 var(--grb-tool-font-mono);
  letter-spacing: var(--grb-tool-header-product-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Shared outer rhythm. */
.controls .grb-brand { padding: 18px 18px 16px; }
.controls .grb-brand-copy { gap: 0; }
.controls .grb-product-code { margin-top: 15px; padding-bottom: 0; }
.controls .grb-product-code + .grb-product-name { margin-top: 5px; }
.controls .tab-bar { padding: 8px 12px 0; gap: 10px; }
.controls .tab-button {
  min-height: 42px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .075em;
}

/* Canonical toolbar typography, matching Document Viewer. */
.preview-head .btn,
.preview-head .icon-btn,
.top-nav .btn,
.top-nav .icon-btn {
  font-size: 12px;
}

/* Canonical stage-toolbar identity: title plus live file/render metadata. */
.preview-title,
.top-nav-file-name {
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: normal;
  text-transform: uppercase;
}
.preview-meta,
.top-nav-file-meta {
  margin-top: 3px;
  color: var(--muted);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: normal;
  text-transform: none;
}
.controls .section {
  padding: var(--grb-tool-sidebar-block) var(--grb-tool-sidebar-inline);
}
.controls .section-title { margin-bottom: var(--grb-tool-section-heading-gap); }

/* Canonical informational callout used throughout every browser tool. */
.controls .settings-note {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
html[data-ui-theme="light"] .controls .settings-note {
  background: rgba(0,0,0,.025);
}
.controls .settings-note strong { color: var(--text); }
.controls .settings-note.is-warning {
  border-color: rgba(255,182,109,.34);
  background: rgba(255,182,109,.07);
  color: #ffc689;
}
.controls .about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 12px;
}
.controls .app-version-badge {
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
}
.controls .launch-status-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 13px;
}
.controls .launch-status-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
}
.controls .launch-status-icon svg { display: block; width: 28px; height: 28px; }
.controls .launch-status-copy { min-width: 0; padding-top: 4px; }
html[data-ui-theme="light"] .controls .launch-status-icon { color: #111; }

/* Shared sidebar-section preference and accordion behavior. */
.controls .section-layout-preference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.controls .grb-section-preference-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.controls .accordion-section > button.section-title {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.controls .accordion-section .section-title {
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: margin-bottom .16s cubic-bezier(.22,.8,.3,1);
}
.controls .accordion-section.is-open .section-title { margin-bottom: var(--grb-tool-section-heading-gap); }
.controls .accordion-section .section-title:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--grb-accent-focus);
}
.controls .accordion-section .section-title::after { display: none; }
.controls .section-accordion-chevron {
  order: 3;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-left: auto;
  color: currentColor;
  opacity: .72;
  transition: transform .16s ease, opacity .16s ease;
}
.controls .section-accordion-chevron svg { display: block; width: 100%; height: 100%; }
.controls .accordion-section.is-open .section-accordion-chevron { transform: rotate(180deg); opacity: 1; }
.controls .section-accordion-body {
  height: 0;
  overflow: hidden;
  opacity: 0;
  will-change: height, opacity;
  transition: height .18s cubic-bezier(.22,.8,.3,1), opacity .12s ease;
}
.controls .accordion-section.is-open .section-accordion-body { opacity: 1; }
.controls .section-accordion-body[hidden] { display: none !important; }
body.sections-always-open .controls .section-accordion-body {
  height: auto !important;
  overflow: visible;
  opacity: 1;
  transition: none;
}
body.sections-always-open .controls .accordion-section .section-title { cursor: default; }
body.sections-always-open .controls .section-accordion-chevron { opacity: .32; }

@media (prefers-reduced-motion: reduce) {
  .grb-ui-button,
  .grb-ui-switch-track,
  .grb-ui-switch-track::after,
  .grb-ui-toast { transition: none; animation: none; }
  .grb-ui-spinner { animation: none; }
  .grb-tool-close-button svg,
  .controls .accordion-section .section-title,
  .controls .section-accordion-chevron,
  .controls .section-accordion-body { transition: none; }
  .grb-ui-button:active,
  .grb-ui-legacy-adapter .btn:active,
  .grb-ui-legacy-adapter .icon-btn:active,
  .grb-ui-legacy-adapter .pan-mode-btn:active,
  .grb-ui-legacy-adapter .zoom-stepper-value:active { transform: none; }
}

/* Fill short sidebars so the studio credit rests at the bottom. When panel
   content is taller than the viewport, normal document flow pushes it down. */
.controls .controls-scale-shell {
  display: flex;
  flex-direction: column;
  min-height: calc((100vh - var(--grb-browser-nav-height)) / var(--ui-scale, 1));
}

@media (max-width: 860px) {
  body.grb-browser-tool {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .grb-tool-app {
    height: auto;
    min-height: calc(100svh - var(--grb-browser-nav-height));
    overflow: visible;
  }
  .grb-tool-stage-panel {
    height: 78svh;
    min-height: 78svh;
  }
  .controls .controls-scale-shell {
    min-height: 0;
  }
}

/*
  Canonical tool footers. Sidebar credits and stage status bars share the
  same box model and typography so every browser tool lands on one baseline.
*/
.controls .grb-product-signature,
.preview-panel > .preview-footer,
.preview-panel > .footer,
.grb-tool-sidebar-footer,
.grb-tool-stage-footer {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--grb-tool-footer-height);
  min-height: var(--grb-tool-footer-height);
  max-height: var(--grb-tool-footer-height);
  padding: 0 var(--grb-tool-footer-inline-padding);
  color: color-mix(in srgb,var(--grb-color-text-muted) 72%,transparent);
  background: var(--grb-color-surface);
  border-top: 1px solid var(--grb-color-border-subtle);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--grb-tool-footer-font-size);
  line-height: 1.25;
  letter-spacing: .02em;
}
.controls .grb-product-signature,
.grb-tool-app > .grb-product-signature {
  justify-content: flex-start;
  gap: 0;
  margin-top: auto;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.controls .grb-signature-left,
.grb-tool-app > .grb-product-signature .grb-signature-left { white-space: nowrap; }
.controls .grb-signature-heart,
.grb-tool-app > .grb-product-signature .grb-signature-heart { color: #fff; font-family: Arial, sans-serif; }
html[data-ui-theme="light"] .controls .grb-signature-heart,
html[data-ui-theme="light"] .grb-tool-app > .grb-product-signature .grb-signature-heart { color: #000; }
.controls .grb-product-version { display: none !important; }

@media (max-width: 860px) {
  .grb-tool-app > .grb-product-signature {
    width: 100%;
    grid-column: 1 / -1;
    order: 99;
  }
}

html[data-ui-theme="light"] .controls .grb-product-signature,
html[data-ui-theme="light"] .preview-panel > .preview-footer,
html[data-ui-theme="light"] .preview-panel > .footer,
html[data-ui-theme="light"] .grb-tool-sidebar-footer,
html[data-ui-theme="light"] .grb-tool-stage-footer {
  color: rgba(0,0,0,.52);
  background: #fff;
  border-top-color: rgba(0,0,0,.12);
}

/* Canonical GRB tool cube: substantial lines, clean round joins, no vertex dots. */
.grb-brand-cube line {
  stroke-width: 4.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.grb-brand-cube circle { display: none !important; }

/* Shared split-pane divider: invisible 11px drag target inside a slim gutter. */
.app { column-gap: 5px; }
.sidebar-resizer {
  width: 11px;
  margin: 0;
  left: auto;
  transform: translateX(-5px);
  z-index: 12;
  background: transparent;
}

.sidebar-resizer::before {
  width: 1px;
  background: transparent !important;
}

.sidebar-resizer:hover::before,
.sidebar-resizer:focus-visible::before,
body.is-resizing .sidebar-resizer::before {
  width: 1px;
  background: transparent !important;
}
.sidebar-resizer:focus-visible { outline: none; }

/* Social Text Builder's stage treatment is the canonical browser-tool frame. */
.preview-panel { grid-template-columns: minmax(0, 1fr); }
.document-stage {
  margin: 0;
  border: 10px solid var(--grb-color-background);
}
.document-stage::before {
  left: calc(var(--sidebar-width) + var(--resizer-width) + 32px);
}

html[data-ui-theme="light"] .document-stage { border-color: #fff; }


/* At compact desktop widths, frame the tool in the app background. */
@media (max-width: 1120px) {
  .app {
    grid-template-columns: minmax(240px, min(var(--sidebar-width), 42vw)) var(--resizer-width) minmax(0, 1fr);
    gap: 5px;
    padding: 12px;
  }

  /* Account for the shared outer frame and the equal gaps around the divider. */
  .document-stage::before {
    left: calc(min(var(--sidebar-width), 42vw) + var(--resizer-width) + 44px);
    top: calc(var(--grb-browser-nav-height) + 99px);
  }
  .document-stage::after { right: 34px; bottom: 82px; }
  html[data-nav-layout="top"] .document-stage::before {
    left: 34px;
    top: calc(var(--grb-browser-nav-height) + 99px);
  }
}

@media (max-width: 620px) {
  .grb-browser-nav { grid-template-columns: 1fr auto; padding-inline: 14px; }
  .grb-browser-nav-product { display: none; }
  .grb-browser-nav-links { gap: var(--grb-primary-nav-compact-gap); }
  body.grb-browser-tool--identity-nav { --grb-browser-nav-height: var(--grb-tool-header-compact-height); }
  .grb-browser-nav--identity { padding-inline: 12px; }
  .grb-browser-nav--identity .grb-browser-nav-links { gap: var(--grb-primary-nav-mobile-gap); }
  .grb-browser-nav-mark {
    width: var(--grb-tool-header-compact-cube-size);
    height: var(--grb-tool-header-compact-cube-size);
    flex-basis: var(--grb-tool-header-compact-cube-size);
  }
  .grb-browser-nav-wordmark { width: var(--grb-tool-header-compact-wordmark-width); }
  .grb-browser-nav-product-code {
    margin-top: var(--grb-tool-header-compact-product-gap);
    font-size: var(--grb-tool-header-compact-product-size);
    letter-spacing: var(--grb-tool-header-compact-product-tracking);
  }
  .app { gap: 0; padding: 0; }
  body.grb-browser-tool { height: auto; overflow-x: hidden; overflow-y: auto; }
  .grb-tool-app {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: calc(100svh - var(--grb-browser-nav-height));
    overflow: visible;
  }
  .grb-tool-sidebar {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .grb-tool-resizer { display: none; }
  .grb-tool-stage-panel {
    width: 100%;
    height: 78svh;
    min-height: 78svh;
  }

  .document-stage::before,
  .document-stage::after { position: absolute; }
  .document-stage::before { left: 12px; top: 12px; }
  .document-stage::after { right: 12px; bottom: 12px; }
  html[data-nav-layout="top"] .document-stage::before { left: 12px; top: 12px; }
}

@media (max-width: 390px) {
  .grb-browser-nav--identity .grb-browser-nav-product-code { display: none; }
  .grb-browser-nav--identity .grb-browser-nav-links { gap: var(--grb-primary-nav-narrow-gap); }
}

@media print {
  .grb-browser-nav { display: none !important; }
}