/* Shared Design Studio chrome — 2D, 3D, and Studio.
   Makes the three tools feel like pages of sunscape.ai, not separate apps.
   Does not hide tools or buttons. */

:root {
  --ss-gold: #c9a24b;
  --ss-gold-bright: #e6c774;
  --ss-gold-text: #e6c774;
  --ss-navy: #13233b;
  --ss-bg: #121317;
  --ss-panel: #191b21;
  --ss-elev: #20232b;
  --ss-hover: #262a33;
  --ss-border: #2e323c;
  --ss-border-bright: #3d414d;
  --ss-text: #f2ede1;
  --ss-text-dim: #c9c3b4;
  --ss-text-mute: #9a9da8;
  --ss-radius: 8px;
  --ss-sans: Inter, "DM Sans", system-ui, sans-serif;
  --ss-mono: "JetBrains Mono", ui-monospace, monospace;
  --ss-display: "Bebas Neue", Inter, sans-serif;
}

/* ── Site nav (SUNSCAPE bar under the black utility strip) ── */
.ss-site-nav,
#studio-main-nav,
#three-d-main-nav,
#two-d-main-nav {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #0a0a0a !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  position: relative;
  z-index: 9000;
}
.ss-site-nav-inner,
#studio-main-nav > div,
#three-d-main-nav > div,
#two-d-main-nav > div {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(12px, 2vw, 28px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 52px !important;
  box-sizing: border-box;
}
.ss-site-brand,
#studio-main-nav a[href="/"],
#three-d-main-nav a[href="/"],
#two-d-main-nav a[href="/"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #e8e4dc !important;
  text-decoration: none !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
  font-size: 14px !important;
  font-family: Inter, system-ui, sans-serif !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.ss-site-mark,
#studio-main-nav a[href="/"] span:first-child,
#three-d-main-nav a[href="/"] span:first-child,
#two-d-main-nav a[href="/"] span:first-child {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(145deg, #173b58, #0c2540) !important;
  color: #f2cf6b !important;
  border: 1px solid #d2a43a !important;
  font-weight: 950 !important;
  font-size: 14px !important;
}
.ss-site-nav nav,
#studio-main-nav nav,
#three-d-main-nav nav,
#two-d-main-nav nav {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  margin-left: 8px !important;
  overflow-x: auto;
}
.ss-site-nav nav a,
#studio-main-nav nav a,
#three-d-main-nav nav a,
#two-d-main-nav nav a {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: Inter, system-ui, sans-serif !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  padding: 8px 14px !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.ss-site-nav nav a[href*="/studio/index"],
#studio-main-nav nav a[href*="/studio/index"],
#three-d-main-nav nav a[href*="/studio/index"],
#two-d-main-nav nav a[href*="/studio/index"] {
  display: none !important;
}
.ss-site-nav nav a:hover,
#studio-main-nav nav a:hover,
#three-d-main-nav nav a:hover,
#two-d-main-nav nav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.ss-site-nav nav a.active,
#studio-main-nav nav a.active,
#three-d-main-nav nav a.active,
#two-d-main-nav nav a.active,
#studio-main-nav nav a[aria-current="page"],
#three-d-main-nav nav a[aria-current="page"],
#two-d-main-nav nav a[aria-current="page"] {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html:fullscreen .ss-site-nav,
html:fullscreen #studio-main-nav,
html:fullscreen #three-d-main-nav,
html:fullscreen #two-d-main-nav,
html.studio-fs .ss-site-nav,
html.studio-fs #studio-main-nav,
html.studio-fs #three-d-main-nav,
html.studio-fs #two-d-main-nav,
html.ss-fs .ss-site-nav,
html.ss-fs #studio-main-nav,
html.ss-fs #three-d-main-nav,
html.ss-fs #two-d-main-nav {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.ss-app-compact #studio-main-nav,
html.ss-app-compact #three-d-main-nav,
html.ss-app-compact #two-d-main-nav,
html.ss-app-compact .ss-site-nav {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.theme-dark body.ss-app-compact-2d,
html.theme-dark body.ss-app-compact-3d,
html.dark body.ss-app-compact-2d,
html.dark body.ss-app-compact-3d {
  background: var(--ss-bg) !important;
  color: var(--ss-text) !important;
  font-family: var(--ss-sans) !important;
}

body.ss-app-compact-2d {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
body.ss-app-compact-2d #two-d-utility-bar,
body.ss-app-compact-2d #two-d-main-nav,
body.ss-app-compact-2d .ss-site-nav,
body.ss-app-compact-2d .topbar {
  flex: none;
}
body.ss-app-compact-2d .app {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}

html.theme-dark .topbar,
html.dark .topbar {
  background: var(--ss-bg) !important;
  border-bottom: 1px solid var(--ss-border) !important;
  height: 48px;
  color: var(--ss-text);
}
html.theme-dark .tb-title-main,
html.dark .tb-title-main {
  font-family: var(--ss-sans) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--ss-gold-bright) !important;
}
html.theme-dark .tb-title-sub,
html.dark .tb-title-sub {
  font-family: var(--ss-mono) !important;
  color: var(--ss-text-mute) !important;
}
html.theme-dark .tb-sep,
html.dark .tb-sep {
  background: var(--ss-border) !important;
}
html.theme-dark .tb-group,
html.dark .tb-group {
  background: transparent !important;
  border: 0 !important;
}
html.theme-dark .shape-picker,
html.dark .shape-picker {
  background: var(--ss-elev) !important;
  border: 1px solid var(--ss-border) !important;
  border-radius: 8px !important;
}
html.theme-dark .shape-btn,
html.dark .shape-btn {
  color: var(--ss-text-mute) !important;
  border-radius: 6px !important;
}
html.theme-dark .shape-btn:hover,
html.dark .shape-btn:hover {
  color: var(--ss-text) !important;
  background: var(--ss-hover) !important;
}
html.theme-dark .shape-btn.active,
html.dark .shape-btn.active {
  background: rgba(201, 162, 75, 0.16) !important;
  border-color: var(--ss-gold) !important;
  color: var(--ss-gold-bright) !important;
}
html.theme-dark .icon-btn,
html.dark .icon-btn,
html.theme-dark .sidebar-toggle,
html.dark .sidebar-toggle,
html.theme-dark .pricing-toggle,
html.dark .pricing-toggle {
  background: var(--ss-elev) !important;
  border: 1px solid var(--ss-border-bright) !important;
  color: var(--ss-text-dim) !important;
  border-radius: 8px !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .icon-btn:hover,
html.dark .icon-btn:hover,
html.theme-dark .sidebar-toggle:hover,
html.dark .sidebar-toggle:hover,
html.theme-dark .pricing-toggle:hover,
html.dark .pricing-toggle:hover {
  border-color: var(--ss-gold) !important;
  color: var(--ss-gold-bright) !important;
  background: rgba(201, 162, 75, 0.1) !important;
}
html.theme-dark .icon-btn-ai,
html.dark .icon-btn-ai {
  background: linear-gradient(180deg, var(--ss-gold-bright), var(--ss-gold)) !important;
  color: #14161b !important;
  border: 0 !important;
  font-weight: 800 !important;
}
html.theme-dark .icon-btn-ai:hover,
html.dark .icon-btn-ai:hover {
  filter: brightness(1.06);
  color: #14161b !important;
}
html.theme-dark .icon-btn-export,
html.dark .icon-btn-export {
  color: var(--ss-gold-bright) !important;
  border-color: rgba(201, 162, 75, 0.45) !important;
  background: rgba(201, 162, 75, 0.1) !important;
}
html.theme-dark .btn-gold,
html.dark .btn-gold {
  background: linear-gradient(180deg, var(--ss-gold-bright), var(--ss-gold)) !important;
  color: #14161b !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

html.theme-dark .app,
html.dark .app {
  background: var(--ss-bg) !important;
}
html.theme-dark .sidebar,
html.dark .sidebar,
html.theme-dark .pricing,
html.dark .pricing {
  background: var(--ss-panel) !important;
  border-color: var(--ss-border) !important;
  color: var(--ss-text) !important;
}
html.theme-dark .canvas,
html.dark .canvas {
  background: var(--ss-bg) !important;
  color: var(--ss-text) !important;
}
html.theme-dark .search,
html.dark .search {
  background: var(--ss-elev) !important;
  border: 1px solid var(--ss-border-bright) !important;
  border-radius: 8px !important;
}
html.theme-dark .search input,
html.dark .search input {
  color: var(--ss-text) !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .cat-tab,
html.dark .cat-tab {
  color: var(--ss-text-mute) !important;
  border-radius: 8px !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .cat-tab:hover,
html.dark .cat-tab:hover {
  background: var(--ss-hover) !important;
  color: var(--ss-text) !important;
}
html.theme-dark .cat-tab.active,
html.dark .cat-tab.active {
  background: rgba(201, 162, 75, 0.14) !important;
  border-color: var(--ss-gold) !important;
  color: var(--ss-gold-bright) !important;
}
html.theme-dark .cat-tab .count,
html.dark .cat-tab .count {
  background: var(--ss-bg) !important;
  border-color: var(--ss-border) !important;
  color: var(--ss-text-mute) !important;
}
html.theme-dark .cab-card,
html.dark .cab-card {
  background: var(--ss-elev) !important;
  border: 1px solid var(--ss-border) !important;
  border-radius: 10px !important;
}
html.theme-dark .cab-card:hover,
html.dark .cab-card:hover {
  border-color: var(--ss-gold) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
  transform: none;
}
html.theme-dark .cab-card .thumb,
html.dark .cab-card .thumb {
  background: #10141c !important;
  border-color: var(--ss-border) !important;
  border-radius: 8px !important;
}
html.theme-dark .cab-card .meta .nm,
html.dark .cab-card .meta .nm {
  color: var(--ss-text) !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .cab-card .meta .price,
html.dark .cab-card .meta .price {
  color: var(--ss-gold-bright) !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .canvas-head h2,
html.dark .canvas-head h2 {
  font-family: var(--ss-display) !important;
  color: var(--ss-text) !important;
  letter-spacing: 0.04em;
}
html.theme-dark .canvas-head .eyebrow,
html.dark .canvas-head .eyebrow,
html.theme-dark .pricing .eyebrow,
html.dark .pricing .eyebrow {
  color: var(--ss-gold) !important;
  font-family: var(--ss-mono) !important;
}
html.theme-dark .canvas-head p,
html.dark .canvas-head p {
  color: var(--ss-text-mute) !important;
}
html.theme-dark .schematic-wrap,
html.dark .schematic-wrap,
html.theme-dark .run,
html.dark .run,
html.theme-dark .project-title-card,
html.dark .project-title-card,
html.theme-dark .qrun,
html.dark .qrun,
html.theme-dark .qline,
html.dark .qline {
  background: var(--ss-panel) !important;
  border: 1px solid var(--ss-border) !important;
  border-radius: 12px !important;
  color: var(--ss-text) !important;
}
html.theme-dark .run.active,
html.dark .run.active {
  border-color: var(--ss-gold) !important;
  box-shadow: 0 0 0 1px var(--ss-gold) !important;
}
html.theme-dark .run-head,
html.dark .run-head {
  background: var(--ss-elev) !important;
  border-color: var(--ss-border) !important;
}
html.theme-dark .leg-item .val,
html.dark .leg-item .val {
  color: var(--ss-gold-bright) !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .dropzone,
html.dark .dropzone {
  background: #10141c !important;
  border: 1px dashed var(--ss-border-bright) !important;
  border-radius: 10px !important;
}
html.theme-dark .sidebar-col-header,
html.dark .sidebar-col-header,
html.theme-dark .pricing-col-header,
html.dark .pricing-col-header,
html.theme-dark .canvas-col-header,
html.dark .canvas-col-header {
  background: var(--ss-bg) !important;
  border-color: var(--ss-border) !important;
}

html.theme-dark .panel-left,
html.dark .panel-left,
html.theme-dark .panel-right,
html.dark .panel-right {
  background: var(--ss-panel) !important;
  border-color: var(--ss-border) !important;
  color: var(--ss-text) !important;
}
html.theme-dark .panel-header,
html.dark .panel-header,
html.theme-dark .panel-project-title,
html.dark .panel-project-title,
html.theme-dark .prop-section,
html.dark .prop-section {
  background: var(--ss-elev) !important;
  border-color: var(--ss-border) !important;
}
html.theme-dark .panel-eyebrow,
html.dark .panel-eyebrow {
  font-family: var(--ss-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--ss-gold) !important;
}
html.theme-dark .panel-title,
html.dark .panel-title {
  font-family: var(--ss-sans) !important;
  font-weight: 700 !important;
  color: var(--ss-text) !important;
}
html.theme-dark #workspace-toolbar,
html.dark #workspace-toolbar {
  background: var(--ss-bg) !important;
  border-bottom: 1px solid var(--ss-border) !important;
  box-shadow: none !important;
}
html.theme-dark .workspace-toolbar-label,
html.dark .workspace-toolbar-label {
  font-family: var(--ss-mono) !important;
  color: var(--ss-text-mute) !important;
  letter-spacing: 0.12em !important;
}
html.theme-dark .workspace-toolbar-btn,
html.dark .workspace-toolbar-btn,
html.theme-dark .sfb-btn,
html.dark .sfb-btn,
html.theme-dark .vp-btn,
html.dark .vp-btn,
html.theme-dark .tool-btn,
html.dark .tool-btn,
html.theme-dark .workspace-panel-toggle,
html.dark .workspace-panel-toggle {
  background: var(--ss-elev) !important;
  border: 1px solid var(--ss-border-bright) !important;
  color: var(--ss-text-dim) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html.theme-dark .workspace-toolbar-btn:hover,
html.dark .workspace-toolbar-btn:hover,
html.theme-dark .sfb-btn:hover,
html.dark .sfb-btn:hover,
html.theme-dark .vp-btn:hover,
html.dark .vp-btn:hover,
html.theme-dark .tool-btn:hover,
html.dark .tool-btn:hover,
html.theme-dark .workspace-panel-toggle:hover,
html.dark .workspace-panel-toggle:hover {
  background: var(--ss-hover) !important;
  border-color: var(--ss-gold) !important;
  color: var(--ss-gold-bright) !important;
}
html.theme-dark .workspace-toolbar-btn.active,
html.dark .workspace-toolbar-btn.active,
html.theme-dark .sfb-btn.active,
html.dark .sfb-btn.active,
html.theme-dark .vp-btn.active,
html.dark .vp-btn.active,
html.theme-dark .tool-btn.active,
html.dark .tool-btn.active {
  background: rgba(201, 162, 75, 0.16) !important;
  border-color: var(--ss-gold) !important;
  color: var(--ss-gold-bright) !important;
}
html.theme-dark .workspace-toolbar-btn svg,
html.dark .workspace-toolbar-btn svg,
html.theme-dark .sfb-btn svg,
html.dark .sfb-btn svg,
html.theme-dark .vp-btn svg,
html.dark .vp-btn svg,
html.theme-dark .workspace-panel-toggle svg,
html.dark .workspace-panel-toggle svg {
  color: currentColor !important;
  stroke: currentColor !important;
}
html.theme-dark .sidebar-tab,
html.dark .sidebar-tab {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ss-text-mute) !important;
  border-radius: 8px !important;
  font-family: var(--ss-sans) !important;
  font-weight: 600 !important;
}
html.theme-dark .sidebar-tab:hover,
html.dark .sidebar-tab:hover {
  background: var(--ss-hover) !important;
  color: var(--ss-text) !important;
}
html.theme-dark .sidebar-tab.active,
html.dark .sidebar-tab.active {
  background: rgba(201, 162, 75, 0.16) !important;
  border-color: var(--ss-gold) !important;
  color: var(--ss-gold-bright) !important;
}
html.theme-dark #sidebar-tabs,
html.dark #sidebar-tabs {
  background: var(--ss-panel) !important;
  border-bottom: 1px solid var(--ss-border) !important;
}
html.theme-dark .cat-l1-header,
html.dark .cat-l1-header {
  background: var(--ss-elev) !important;
  color: var(--ss-text) !important;
  border-color: var(--ss-border) !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .cat-l1-header:hover,
html.dark .cat-l1-header:hover,
html.theme-dark .cat-l1[open] > .cat-l1-header,
html.dark .cat-l1[open] > .cat-l1-header {
  background: var(--ss-hover) !important;
  color: var(--ss-gold-bright) !important;
}
html.theme-dark .catalog-card,
html.dark .catalog-card {
  background: var(--ss-elev) !important;
  border-color: var(--ss-border) !important;
}
html.theme-dark .catalog-card:hover,
html.dark .catalog-card:hover {
  background: var(--ss-hover) !important;
  border-left: 2px solid var(--ss-gold) !important;
}
html.theme-dark .catalog-name,
html.dark .catalog-name {
  color: var(--ss-text) !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .catalog-price,
html.dark .catalog-price {
  color: var(--ss-gold-bright) !important;
}
html.theme-dark .catalog-thumb,
html.dark .catalog-thumb {
  background: #10141c !important;
  border-color: var(--ss-border) !important;
}
html.theme-dark .statusbar,
html.dark .statusbar {
  background: var(--ss-panel) !important;
  border-top: 1px solid var(--ss-border) !important;
  color: var(--ss-text-mute) !important;
  font-family: var(--ss-mono) !important;
}
html.theme-dark #catalog-search,
html.dark #catalog-search,
html.theme-dark #project-name-input,
html.dark #project-name-input {
  background: var(--ss-bg) !important;
  border: 1px solid var(--ss-border-bright) !important;
  color: var(--ss-text) !important;
  border-radius: 8px !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .panel-quote-btn,
html.dark .panel-quote-btn,
html.theme-dark #btn-quote,
html.dark #btn-quote {
  background: linear-gradient(180deg, var(--ss-gold-bright), var(--ss-gold)) !important;
  color: #14161b !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-family: var(--ss-sans) !important;
}
html.theme-dark .canvas-wrap,
html.dark .canvas-wrap,
html.theme-dark #viewport,
html.dark #viewport {
  background: #0e1014 !important;
}
html.theme-dark .panel-quote-wrap,
html.dark .panel-quote-wrap {
  background: var(--ss-panel) !important;
  border-top: 1px solid var(--ss-border) !important;
}
html.theme-dark .inspector-control-slot,
html.dark .inspector-control-slot {
  background: var(--ss-elev) !important;
  border-color: var(--ss-border) !important;
  color: var(--ss-text-mute) !important;
}
html.theme-dark .workspace-toolbar-group + .workspace-toolbar-group,
html.dark .workspace-toolbar-group + .workspace-toolbar-group {
  border-left-color: var(--ss-border) !important;
}

html.theme-light .ss-site-nav,
html.theme-light #studio-main-nav,
html.theme-light #three-d-main-nav,
html.theme-light #two-d-main-nav {
  background: #0a0a0a !important;
  border-bottom: 1px solid #222 !important;
}

@media (max-width: 720px) {
  .ss-site-nav nav,
  #studio-main-nav nav,
  #three-d-main-nav nav,
  #two-d-main-nav nav {
    margin-left: 0 !important;
  }
  .ss-site-nav nav a,
  #studio-main-nav nav a,
  #three-d-main-nav nav a,
  #two-d-main-nav nav a {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}