:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f7f8fa;
  --border: #d9dee7;
  --border-strong: #c7ced9;
  --text: #18202f;
  --text-muted: #6d7584;
  --accent: #e8971a;
  /* Shared filled treatment used by AI and primary commerce actions. */
  --ai-gold-gradient: linear-gradient(135deg, #ffd56b 0%, #f4b942 48%, #d99a16 100%);
  --rail-icon: #334155;
  --rail-icon-active: #c97d0e;
  --rail-icon-on-dark: #f4f7fb;
  --rail-muted-icon-on-dark: #64748b;
  --rail-control-hover-bg: rgba(251, 241, 221, 0.78);
  --rail-control-active-bg: rgba(251, 241, 221, 0.9);
  --rail-control-border: #cbd5e1;
  --rail-divider: rgba(148, 163, 184, 0.48);
  --rail-side-line: #8fa0b5;
  --rail-side-line-active: #e8971a;
  --left-panel-width: 45px;
  --right-panel-width: 45px;
  --bottom-top-height: 30px;
  --bottom-lower-height: 40px;
  --bottom-height: calc(var(--bottom-top-height) + var(--bottom-lower-height));
  --trending-market-range-bottom-offset: 10px;
  --trending-market-range-panel-bottom: 122px;
  --trending-market-range-panel-width: 320px;
  --trending-market-range-panel-max-height: 560px;
  /* The front door's prompt bar (.front-door__prompt-field). The workspace
     command panel is the SAME bar at rest, so anything that has to match it
     reads this number instead of restating it: the Design route sizes its
     command panel to it (command-panel.css), and that route's dimensions
     readout caps itself to it so it never overhangs the panel it captions
     (design-view.css). Other views keep the narrower 590px bar. */
  --front-door-prompt-width: 640px;
  /* The front door's header bar (.front-door__bar), also its height once
     collapsed to a persistent header over Trending/Design/Globe — see the
     "docked" state in app-front-door.css. Those three views read this same
     number for their own top offset instead of restating it. */
  --front-door-bar-height: 56px;
  --ui-font-scale: 1;
  /* Shared chrome font stack referenced by var(--vscode-ui-font) across the
     view stylesheets; identical to the body font-family below. */
  --vscode-ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Overlay stack (highest wins). Add new overlays relative to these tokens
     instead of minting raw near-INT_MAX integers. */
  --z-context-menu: 2147483600;
  /* Print-status popover (bottom-right hexagon): above context menus so the
     live camera stays visible, below account/legal modals. */
  --z-print-status-popover: 2147483602;
  /* Account plan modal: above workspace menus, below checkout consent. */
  --z-account-plan-modal: 2147483605;
  /* Account settings modal: above transient marketplace toasts so notification
     cards cannot cover its close button or preference controls. */
  --z-account-settings-modal: 2147483630;
  /* Become-a-seller onboarding modal: peer of account settings (they are never
     shown together — opening one closes the other). */
  --z-become-seller-modal: 2147483631;
  /* Required checkout acknowledgement: above menus, below system toasts. */
  --z-print-legal-modal: 2147483610;
  --z-panel-group-layer: 2147483598;
  /* An OPENED command surface — community chat, alerts, the Prompt Agent, an
     expanded answer. At rest the command bar is workspace chrome at z-index 24
     and the drawers are meant to cover it, but a surface the user just opened
     and is reading has to clear them: in the Object in Focus workspace the
     Print Cart drawer is up by default, and the chat opened underneath it.
     Above the drawers and their drag ghosts, and deliberately BELOW context
     menus, modals and toasts — those must still land on top of the chat. */
  --z-command-panel-expanded: 2147483520;
  --z-drop-card-ghost: 2147483504;
  /* Print Cart drawer: above the right-rail dock/stack band, below drag ghosts. */
  --z-print-cart-drawer: 2147483503;
  /* Favorites drawer: same band as the Print Cart (they replace each other). */
  --z-favorites-drawer: 2147483503;
  /* Marketplace filter panel (bottom-left, opened by the bottom-toolbar funnel). */
  --z-product-filter-panel: 2147483503;
  --z-right-stack-pull-tab: 2147483502;
  --z-right-dropped-dock: 2147483501;
  --z-right-drop-overlay: 2147483500;
  --z-right-stack-panel: 2147483499;
  --z-grid-panel-toolbar: 2147483400;
  /* Dev View's corner switch: floats over the Design and World surfaces so the
     other half of the Dev View is always one click away. Above view content,
     deliberately below every drawer, menu and modal token above. */
  --z-dev-view-switch: 2147483402;
  /* Marketplace notification toast: above context menus so it is never
     hidden, matching a system notification. */
  --z-xbox-toast: 2147483620;
  --z-sticky-note: 2147481560;
  /* Scene hover tooltip: intentionally sits below the drawer/overlay tokens
     above so drawers, menus, toasts, and modals always cover it. */
  --z-hover-tooltip: 100000;
  /* First-paint gate, owned by the front door (src/styles/app-front-door.css):
     above every app surface — including --z-xbox-toast — until the user picks a
     door. Boot-scheduled toasts would otherwise render over the load screen. */
  --z-app-load-screen: 2147483647;
  /* Guided object illumination: local to a scene/media host and below its canvas. */
  --z-workspace-helper-object-glow: 0;
  /* Real-page captures that track individual Trending WebGL panel faces. */
  --z-trending-page-panel: 2;
  /* Shared brand mark above view content but below interactive workspace chrome. */
  --z-workspace-company-mark: 14;
  /* Focus annotation cards sit ABOVE the measurement rulers: the card is a
     solid, readable surface the seller edits in, and a ruler tick showing
     through it (or over it) reads as a rendering fault. */
  --z-product-focus-annotation: 16;
  /* Command-adjacent CAD controls: queue sits immediately behind status. */
  --z-agent-cad-queue: 22;
  --z-agent-status: 23;
  --z-agent-status-expanded: 28;
  /* Trending shortcut dock: above the command panel (24), below modal overlays. */
  --z-trending-market-range: 25;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  scrollbar-width: none;
}

/* The load screen lives in src/styles/app-front-door.css — it is the front
   door now, and the branded bottom-to-top hive fill runs on the mark in that
   surface's header. `html.app-ready` still dismisses it; it is just added on
   the user's choice of door rather than on a timer. */

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: transparent;
  overflow: hidden;
}


body.theme-dark {
  --bg: #000000;
  --surface: #0b0b0b;
  --surface-muted: #151515;
  --border: #2f2f2f;
  --border-strong: #575757;
  --text: #f3f3f3;
  --text-muted: #c8c8c8;
  --accent: #f4b942;
  --rail-icon: var(--rail-icon-on-dark);
  --rail-icon-active: #f4b942;
  --rail-control-hover-bg: rgba(244, 185, 66, 0.08);
  --rail-control-active-bg: rgba(244, 185, 66, 0.14);
  --rail-control-border: #2f2f2f;
  --rail-divider: rgba(74, 74, 74, 0.78);
  --rail-side-line: #373737;
  --rail-side-line-active: #f4b942;
  --rail-muted-icon-on-dark: #b6c0cc;
  background: #000000;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--left-panel-width) minmax(0, 1fr) var(--right-panel-width);
  grid-template-rows: minmax(0, 1fr) var(--bottom-height);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(236, 240, 244, 0.66) 0 8.5%, rgba(255, 255, 255, 0.9) 8.5% 9.5%, rgba(246, 248, 250, 0.76) 9.5% 23.875%, rgba(255, 255, 255, 0.9) 23.875% 24.875%, rgba(241, 245, 249, 0.72) 24.875% 40.875%, rgba(255, 255, 255, 0.92) 40.875% 41.875%, rgba(235, 240, 245, 0.72) 41.875% 54.25%, rgba(255, 255, 255, 0.94) 54.25% 55.25%, rgba(246, 248, 250, 0.78) 55.25% 72.25%, rgba(255, 255, 255, 0.88) 72.25% 73.25%, rgba(239, 243, 247, 0.68) 73.25% 93.125%, rgba(255, 255, 255, 0.9) 93.125% 94.125%, rgba(236, 240, 244, 0.66) 94.125% 100%),
    #ffffff;
  background-size: 250% 100%;
  background-position: -5.4167% center;
  background-repeat: repeat-x;
}

body.theme-dark .app-shell {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 1) 0 8.5%, rgba(26, 26, 26, 0.88) 8.5% 9.5%, rgba(5, 5, 5, 0.98) 9.5% 23.875%, rgba(24, 24, 24, 0.82) 23.875% 24.875%, rgba(0, 0, 0, 1) 24.875% 40.875%, rgba(24, 24, 24, 0.82) 40.875% 41.875%, rgba(5, 5, 5, 0.98) 41.875% 54.25%, rgba(24, 24, 24, 0.82) 54.25% 55.25%, rgba(0, 0, 0, 1) 55.25% 72.25%, rgba(24, 24, 24, 0.82) 72.25% 73.25%, rgba(5, 5, 5, 0.98) 73.25% 93.125%, rgba(26, 26, 26, 0.88) 93.125% 94.125%, rgba(0, 0, 0, 1) 94.125% 100%),
    #000000;
  background-size: 250% 100%;
  background-position: -5.4167% center;
}

.side-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: rgba(255, 255, 255, 0.82);
  overflow: hidden;
}

body.theme-dark .side-panel {
  background: rgba(0, 0, 0, 0.92);
}

body[data-ui-style-preset="batman"] .side-panel {
  background: linear-gradient(180deg, rgba(14, 13, 10, 0.95) 0%, rgba(5, 5, 4, 0.96) 100%);
}

.side-panel.left {
  grid-column: 1;
  grid-row: 1 / span 2;

  border-right: 1px solid var(--rail-side-line);

}

.side-panel.right {
  grid-column: 3;
  grid-row: 1 / span 2;

  border-left: 1px solid var(--rail-side-line);

}