:root {
  --gc-rail-width: 228px;
  --gc-mobile-bar-height: 52px;
  --gc-shell-bg: #f8f9fc;
  --gc-shell-surface: #ffffff;
  --gc-shell-hover: #eef1f7;
  --gc-shell-border: #e2e7ef;
  --gc-shell-ink: #182230;
  --gc-shell-muted: #667085;
  --gc-shell-faint: #667085;
  --gc-shell-brand: #5652e8;
  --gc-shell-active: #ececff;
  --gc-shell-active-ink: #4338ca;
  --gc-page-bg: #f3f6fb;
}

html.gc-theme-ready[data-theme="dark"] {
  color-scheme: dark;
  --gc-shell-bg: #111822;
  --gc-shell-surface: #18212d;
  --gc-shell-hover: #222d3b;
  --gc-shell-border: #2d3949;
  --gc-shell-ink: #f2f4f7;
  --gc-shell-muted: #b1bbc8;
  --gc-shell-faint: #98a2b3;
  --gc-shell-active: #2a2855;
  --gc-shell-active-ink: #d4d2ff;
  --gc-page-bg: #0e141d;
  --bg: #0e141d;
  --canvas: #0e141d;
  --surface: #171f2b;
  --surface-2: #1d2734;
  --surface-3: #253140;
  --surface-soft: #1d2734;
  --panel: #171f2b;
  --panel2: #1d2734;
  --card: #171f2b;
  --card2: #1d2734;
  --ink: #f2f4f7;
  --ink2: #c1c9d4;
  --ink3: #98a2b3;
  --ink-2: #c1c9d4;
  --ink-3: #98a2b3;
  --ink-4: #7d8999;
  --ink-soft: #c1c9d4;
  --muted: #98a2b3;
  --line: #303b4d;
  --line2: #263241;
  --line-2: #263241;
  --line-strong: #3b485b;
  --brand: #928aff;
  --brand-2: #b0aaff;
  --brand-dark: #c9c7ff;
  --brand-soft: #29264b;
}

html.gc-theme-ready,
html.gc-theme-ready body {
  background-color: var(--gc-page-bg);
}

html[data-auth-state="checking"] .gc-workspace-rail,
html[data-auth-state="checking"] .gc-mobile-workspace-bar,
html[data-auth-state="checking"] .gc-workspace-backdrop,
html[data-auth-state="unauthenticated"] .gc-workspace-rail,
html[data-auth-state="unauthenticated"] .gc-mobile-workspace-bar,
html[data-auth-state="unauthenticated"] .gc-workspace-backdrop {
  display: none !important;
}

html[data-auth-state="checking"] body.gc-has-app-shell,
html[data-auth-state="unauthenticated"] body.gc-has-app-shell {
  padding-block-start: 0 !important;
  padding-inline-start: 0 !important;
}

.gc-workspace-rail,
.gc-workspace-rail *,
.gc-mobile-workspace-bar,
.gc-mobile-workspace-bar * {
  box-sizing: border-box;
}

body.gc-has-app-shell {
  min-width: 0;
  padding-inline-start: var(--gc-rail-width);
  background: var(--gc-page-bg);
  transition: padding-inline-start .18s ease;
}

body.gc-has-app-shell.gc-rail-collapsed {
  --gc-rail-width: 76px;
}

.gc-workspace-rail {
  position: fixed;
  z-index: 1400;
  inset: 0 auto 0 0;
  width: var(--gc-rail-width);
  border-inline-end: 1px solid var(--gc-shell-border);
  background: var(--gc-shell-bg);
  color: var(--gc-shell-ink);
  box-shadow: 8px 0 28px -30px rgba(16, 24, 40, .55);
  view-transition-name: gc-workspace-rail;
  transition: width .18s ease, transform .18s ease;
}

.gc-workspace-rail-inner {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: 12px 10px 10px;
}

.gc-workspace-brand-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 2px 8px;
}

.gc-workspace-brand {
  display: flex;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  color: var(--gc-shell-ink);
  text-decoration: none;
}

.gc-workspace-brand:hover {
  text-decoration: none;
}

.gc-workspace-brand img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--gc-shell-border) 82%, transparent);
  border-radius: 10px;
  background: #f8f8fa;
}

.gc-workspace-brand span {
  display: block;
  min-width: 0;
  line-height: 1.05;
}

.gc-workspace-brand b {
  font: 760 15px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: -.02em;
}

.gc-rail-collapse,
.gc-mobile-workspace-bar button {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--gc-shell-faint);
  cursor: pointer;
}

.gc-rail-collapse:hover,
.gc-mobile-workspace-bar button:hover {
  border-color: var(--gc-shell-border);
  background: var(--gc-shell-surface);
  color: var(--gc-shell-ink);
}

.gc-rail-collapse svg,
.gc-mobile-workspace-bar button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.gc-close-path {
  display: none;
}

.gc-workspace-nav {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 5px 0 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--gc-shell-border) transparent;
}

.gc-workspace-group + .gc-workspace-group {
  margin-top: 14px;
}

.gc-workspace-group h2 {
  margin: 0 9px 5px;
  color: var(--gc-shell-faint);
  font: 720 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.gc-workspace-group > div {
  display: grid;
  gap: 2px;
}

.gc-workspace-group.is-compact {
  padding-top: 12px;
  border-top: 1px solid var(--gc-shell-border);
}

.gc-workspace-link {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--gc-shell-muted);
  text-decoration: none;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}

.gc-workspace-link:hover {
  border-color: color-mix(in srgb, var(--gc-shell-border) 82%, transparent);
  background: var(--gc-shell-hover);
  color: var(--gc-shell-ink);
  text-decoration: none;
}

.gc-workspace-link.is-active {
  border-color: color-mix(in srgb, var(--gc-shell-brand) 22%, var(--gc-shell-border));
  background: var(--gc-shell-active);
  color: var(--gc-shell-active-ink);
}

.gc-workspace-link.is-active::before {
  position: absolute;
  inset: 9px auto 9px -4px;
  width: 3px;
  border-radius: 3px;
  background: var(--gc-shell-brand);
  content: "";
}

.gc-nav-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.gc-workspace-link-copy {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.2;
}

.gc-workspace-link-copy b {
  overflow: hidden;
  font: 700 13.5px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-workspace-footer {
  display: grid;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--gc-shell-border);
}

.gc-workspace-context {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--gc-shell-border);
  border-radius: 11px;
  background: var(--gc-shell-surface);
  color: var(--gc-shell-ink);
  text-decoration: none;
}

.gc-workspace-context:hover {
  border-color: color-mix(in srgb, var(--gc-shell-brand) 32%, var(--gc-shell-border));
  text-decoration: none;
}

.gc-context-value {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.gc-context-value b {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-context-value i {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 50%;
  background: var(--gc-shell-faint);
}

.gc-workspace-footer-row {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
}

.gc-theme-cycle {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--gc-shell-muted);
  font: 650 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  cursor: pointer;
}

.gc-theme-cycle:hover {
  background: var(--gc-shell-hover);
  color: var(--gc-shell-ink);
}

.gc-theme-symbol {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
}

.gc-theme-cycle[data-gc-theme="system"] .gc-theme-symbol::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.gc-theme-cycle[data-gc-theme="dark"] .gc-theme-symbol {
  border-color: transparent;
  box-shadow: inset -4px -2px 0 0 currentColor;
}

.gc-theme-cycle[data-gc-theme="light"] .gc-theme-symbol::before,
.gc-theme-cycle[data-gc-theme="light"] .gc-theme-symbol::after {
  position: absolute;
  inset: -4px 5px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
}

.gc-theme-cycle[data-gc-theme="light"] .gc-theme-symbol::after {
  transform: rotate(90deg);
}

.gc-workspace-version {
  color: var(--gc-shell-faint);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.gc-mobile-workspace-bar,
.gc-workspace-backdrop {
  display: none;
}

body.gc-rail-collapsed .gc-workspace-brand span,
body.gc-rail-collapsed .gc-workspace-group h2,
body.gc-rail-collapsed .gc-workspace-link-copy,
body.gc-rail-collapsed .gc-workspace-context,
body.gc-rail-collapsed .gc-theme-cycle span:not(.gc-theme-symbol),
body.gc-rail-collapsed .gc-workspace-version {
  display: none;
}

body.gc-rail-collapsed .gc-workspace-brand-row {
  justify-content: center;
}

body.gc-rail-collapsed .gc-workspace-brand {
  flex: 0 0 auto;
}

body.gc-rail-collapsed .gc-workspace-brand img {
  width: 38px;
  height: 38px;
}

body.gc-rail-collapsed .gc-rail-collapse {
  position: absolute;
  top: 55px;
  right: -22px;
  z-index: 2;
  border-color: var(--gc-shell-border);
  background: var(--gc-shell-surface);
  transform: none;
}

body.gc-rail-collapsed .gc-rail-collapse svg {
  transform: rotate(180deg);
}

body.gc-rail-collapsed .gc-workspace-group + .gc-workspace-group {
  margin-top: 8px;
}

body.gc-rail-collapsed .gc-workspace-group.is-compact {
  padding-top: 8px;
}

body.gc-rail-collapsed .gc-workspace-link {
  width: 46px;
  min-height: 44px;
  justify-content: center;
  margin-inline: auto;
  padding: 0;
}

body.gc-rail-collapsed .gc-workspace-footer-row {
  justify-content: center;
}

body.gc-rail-collapsed .gc-theme-cycle {
  flex: 0 0 38px;
  justify-content: center;
}

/* The product tools are one workflow, not two unrelated mounted pages. */
.gc-product-workspace {
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--line, var(--gc-shell-border));
  border-radius: 15px;
  background: var(--surface, var(--panel, var(--gc-shell-surface)));
  box-shadow: 0 10px 30px -28px rgba(16, 24, 40, .55);
}

.gc-product-workspace > header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line, var(--gc-shell-border));
  background: var(--surface-2, var(--panel2, var(--gc-shell-bg)));
}

.gc-product-workspace > header > div {
  display: grid;
  min-width: 0;
}

.gc-product-workspace > header span {
  color: var(--ink-3, var(--gc-shell-faint));
  font-size: 9.5px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gc-product-workspace > header b {
  margin-top: 3px;
  color: var(--ink, var(--gc-shell-ink));
  font-size: 12px;
}

.gc-product-workspace ol {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  color: var(--ink-3, var(--gc-shell-faint));
  list-style: none;
  font-size: 9.5px;
  font-weight: 650;
}

.gc-product-workspace ol li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.gc-product-workspace ol li:not(:last-child)::after {
  width: 16px;
  height: 1px;
  background: var(--line-strong, var(--gc-shell-border));
  content: "";
}

.gc-product-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
}

.gc-product-tools a {
  display: grid;
  min-width: 0;
  min-height: 50px;
  align-content: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink-2, var(--ink2, var(--gc-shell-muted)));
  text-decoration: none;
}

.gc-product-tools a:hover {
  border-color: var(--line-strong, var(--gc-shell-border));
  background: var(--surface-2, var(--panel2, var(--gc-shell-bg)));
  text-decoration: none;
}

.gc-product-tools a.is-active {
  border-color: color-mix(in srgb, var(--gc-shell-brand) 30%, var(--line, var(--gc-shell-border)));
  background: var(--brand-soft, var(--gc-shell-active));
  color: var(--brand-dark, var(--gc-shell-active-ink));
}

.gc-product-tools b {
  font-size: 12px;
}

.gc-product-tools span {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-3, var(--ink3, var(--gc-shell-muted)));
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gc-product-handoff {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #12b76a 38%, var(--line, var(--gc-shell-border)));
  border-radius: 13px;
  background: color-mix(in srgb, #12b76a 8%, var(--surface, var(--gc-shell-surface)));
}

.gc-product-handoff[hidden] {
  display: none;
}

.gc-product-handoff > div:first-child {
  display: grid;
  gap: 3px;
}

.gc-product-handoff strong {
  color: var(--ink, var(--gc-shell-ink));
  font-size: 13px;
}

.gc-product-handoff span {
  color: var(--ink-3, var(--gc-shell-muted));
  font-size: 11px;
  line-height: 1.45;
}

.gc-product-handoff nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.gc-product-handoff a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--line-strong, var(--gc-shell-border));
  border-radius: 9px;
  background: var(--surface, var(--gc-shell-surface));
  color: var(--ink, var(--gc-shell-ink));
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.gc-product-handoff a.primary {
  border-color: var(--gc-shell-brand);
  background: var(--gc-shell-brand);
  color: #fff;
}

.productCreateChoices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.productCreateChoices a {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--line, var(--gc-shell-border));
  border-radius: 13px;
  background: var(--surface-2, var(--gc-shell-surface));
  color: var(--ink, var(--gc-shell-ink));
  text-decoration: none;
}

.productCreateChoices a:hover {
  border-color: color-mix(in srgb, var(--gc-shell-brand) 40%, var(--line, var(--gc-shell-border)));
  background: var(--brand-soft, var(--gc-shell-active));
  text-decoration: none;
}

.productCreateChoices b {
  font-size: 14px;
}

.productCreateChoices span {
  color: var(--ink-3, var(--gc-shell-muted));
  font-size: 11px;
  line-height: 1.5;
}

.productCreateChoices strong {
  margin-top: 5px;
  color: var(--brand-dark, var(--gc-shell-active-ink));
  font-size: 11px;
}

/* Root application now uses the shared rail as its only global navigation. */
body.gc-has-app-shell #app > .app > .sidebar {
  display: none !important;
}

body.gc-has-app-shell #app > .app > .main {
  width: 100%;
  min-width: 0;
}

body.gc-has-app-shell #app > .app > .main > .topbar {
  top: 0;
}

body.gc-has-app-shell #app .mobileNavBtn,
body.gc-has-app-shell .topThemeBtn,
body.gc-has-app-shell .pageHead .themeControl,
body.gc-has-app-shell .pageHead > .brand,
body.gc-has-app-shell .pageHead a[href="/"] {
  display: none !important;
}

body.gc-has-app-shell .pageHead {
  position: static;
}

body.gc-has-app-shell .intakeGate {
  top: 8px;
}

/* Dark mode bridges until every module consumes the shared tokens natively. */
html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell {
  background: var(--gc-page-bg);
}

html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell .control-panel,
html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell .editor,
html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell .preview-panel,
html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell .step-card,
html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell .panel,
html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell .kpi,
html.gc-theme-ready[data-theme="dark"] body.gc-has-app-shell .curbar {
  background-color: var(--surface);
  color: var(--ink);
}

html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] body {
  background: var(--gc-page-bg);
  color: var(--ink);
}

html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .editor,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .control-panel {
  border-color: var(--line);
  background: var(--surface);
}

html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .preview,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .preview-panel {
  border-color: var(--line);
  background: #0b1017;
}

html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .grp,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .step-card,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .import-source-card,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .strategy-selected,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .file-summary,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .analysis-strip,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .price-summary,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .qa-card {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] input,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] textarea,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] select,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .seg,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .upbtn,
html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] .drop-zone {
  border-color: var(--line-strong);
  background-color: var(--surface-2);
  color: var(--ink);
}

html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="products"] code {
  background: #101722;
  color: #d5d9ff;
}

html.gc-theme-ready[data-theme="dark"][data-gc-shell-section="recon"] {
  --bg: #0e141d;
  --panel: #171f2b;
  --panel2: #1d2734;
  --ink: #f2f4f7;
  --muted: #98a2b3;
  --line: #303b4d;
}

html.gc-theme-ready[data-theme="light"][data-gc-shell-section="orders"] .erpNav {
  background: #eef1f7;
}

html.gc-theme-ready[data-theme="light"][data-gc-shell-section="orders"] .erpNav button:hover,
html.gc-theme-ready[data-theme="light"][data-gc-shell-section="orders"] .orderTable tbody tr:hover td,
html.gc-theme-ready[data-theme="light"][data-gc-shell-section="orders"] .recordsPanel .tableWrap tbody tr:hover td {
  background: #f5f7fb;
}

html.gc-theme-ready[data-theme="light"][data-gc-shell-section="orders"] .orderQueues .orderStat.tone-danger {
  border-color: #fecaca;
  background: #fff5f5;
}

html.gc-theme-ready[data-theme="light"][data-gc-shell-section="orders"] .orderQueues .orderStat.tone-warning,
html.gc-theme-ready[data-theme="light"][data-gc-shell-section="orders"] .orderQueues .orderStat.attention {
  border-color: #fed7aa;
  background: #fffaf0;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(gc-workspace-rail),
::view-transition-new(gc-workspace-rail) {
  animation-duration: 0s;
}

::view-transition-old(root) {
  animation: gc-content-out .11s ease both;
}

::view-transition-new(root) {
  animation: gc-content-in .17s ease both;
}

@keyframes gc-content-out {
  to { opacity: .35; transform: translateY(2px); }
}

@keyframes gc-content-in {
  from { opacity: .4; transform: translateY(3px); }
}

html.gc-shell-leaving body > :not(.gc-workspace-rail):not(.gc-mobile-workspace-bar):not(.gc-workspace-backdrop) {
  opacity: .72;
  transition: opacity .1s ease;
}

@media (min-width: 761px) and (max-width: 1180px) {
  :root {
    --gc-rail-width: 76px;
  }

  .gc-workspace-brand span,
  .gc-workspace-group h2,
  .gc-workspace-link-copy,
  .gc-workspace-context,
  .gc-theme-cycle span:not(.gc-theme-symbol),
  .gc-workspace-version,
  .gc-rail-collapse {
    display: none;
  }

  .gc-workspace-brand-row,
  .gc-workspace-footer-row {
    justify-content: center;
  }

  .gc-workspace-brand {
    flex: 0 0 auto;
  }

  .gc-workspace-link {
    width: 46px;
    min-height: 44px;
    justify-content: center;
    margin-inline: auto;
    padding: 0;
  }

  .gc-theme-cycle {
    flex: 0 0 38px;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  :root {
    --gc-rail-width: min(286px, calc(100vw - 54px));
  }

  body.gc-has-app-shell,
  body.gc-has-app-shell.gc-rail-collapsed {
    padding-block-start: var(--gc-mobile-bar-height);
    padding-inline-start: 0;
  }

  .gc-workspace-rail {
    transform: translateX(-102%);
    box-shadow: 18px 0 46px -30px rgba(0, 0, 0, .72);
  }

  body.gc-workspace-open .gc-workspace-rail {
    transform: translateX(0);
  }

  .gc-rail-collapse {
    display: none;
  }

  body.gc-rail-collapsed .gc-workspace-brand span,
  body.gc-rail-collapsed .gc-workspace-group h2,
  body.gc-rail-collapsed .gc-workspace-link-copy,
  body.gc-rail-collapsed .gc-workspace-context,
  body.gc-rail-collapsed .gc-theme-cycle span:not(.gc-theme-symbol),
  body.gc-rail-collapsed .gc-workspace-version {
    display: initial;
  }

  body.gc-rail-collapsed .gc-workspace-brand {
    flex: 1 1 auto;
  }

  body.gc-rail-collapsed .gc-workspace-link {
    width: auto;
    min-height: 43px;
    justify-content: flex-start;
    margin: 0;
    padding: 6px 9px;
  }

  body.gc-rail-collapsed .gc-theme-cycle {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .gc-mobile-workspace-bar {
    position: fixed;
    z-index: 1300;
    inset: 0 0 auto 0;
    display: flex;
    height: var(--gc-mobile-bar-height);
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--gc-shell-border);
    background: color-mix(in srgb, var(--gc-shell-bg) 95%, transparent);
    color: var(--gc-shell-ink);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    view-transition-name: gc-mobile-workspace-bar;
  }

  .gc-mobile-workspace-bar > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 7px;
    color: var(--gc-shell-ink);
    text-decoration: none;
  }

  .gc-mobile-workspace-bar img {
    width: 30px;
    height: 30px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--gc-shell-border) 82%, transparent);
    border-radius: 8px;
    background: #f8f8fa;
  }

  .gc-mobile-workspace-bar b {
    font-size: 13px;
  }

  .gc-mobile-workspace-bar > span {
    margin-inline-start: auto;
    overflow: hidden;
    color: var(--gc-shell-muted);
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gc-workspace-backdrop {
    position: fixed;
    z-index: 1350;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(7, 12, 20, .46);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }

  body.gc-workspace-open {
    overflow: hidden;
  }

  body.gc-workspace-open .gc-workspace-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.gc-has-app-shell #app > .app > .main > .topbar {
    top: var(--gc-mobile-bar-height);
  }

  body.gc-has-app-shell .intakeGate {
    top: calc(var(--gc-mobile-bar-height) + 8px);
  }

  .gc-product-workspace > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .gc-product-workspace ol {
    width: 100%;
    justify-content: space-between;
  }

  .gc-product-tools {
    grid-template-columns: 1fr;
  }

  .productCreateChoices {
    grid-template-columns: 1fr;
  }

  .gc-product-tools a {
    min-height: 48px;
  }

}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .gc-workspace-rail,
  body.gc-has-app-shell,
  .gc-workspace-backdrop,
  html.gc-shell-leaving body > :not(.gc-workspace-rail):not(.gc-mobile-workspace-bar):not(.gc-workspace-backdrop) {
    transition: none !important;
  }
}
