body.studio-app {
  --sector-accent: #42b892;
  --sector-accent-soft: rgba(66, 184, 146, .14);
  --sector-surface: #0f3229;
  background: #e7eeea;
}

body[data-template="mining-haulage"] { --sector-accent: #e3914f; --sector-accent-soft: rgba(227,145,79,.16); --sector-surface: #3b2f24; }
body[data-template="manufacturing-line"] { --sector-accent: #4db2c7; --sector-accent-soft: rgba(77,178,199,.15); --sector-surface: #14373d; }
body[data-template="warehouse-prep"] { --sector-accent: #42b892; --sector-accent-soft: rgba(66,184,146,.14); --sector-surface: #0f3229; }
body[data-template="cold-chain-depot"] { --sector-accent: #58bad5; --sector-accent-soft: rgba(88,186,213,.14); --sector-surface: #123843; }
body[data-template="yard-terminal"] { --sector-accent: #e7a34c; --sector-accent-soft: rgba(231,163,76,.15); --sector-surface: #3c3322; }
body[data-template="wastewater-treatment"] { --sector-accent: #56b9ae; --sector-accent-soft: rgba(86,185,174,.15); --sector-surface: #113c39; }

.studio-ribbon {
  position: sticky;
  z-index: 120;
  top: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: #0a251e;
  color: #fff;
  font: 700 12px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
}
.studio-ribbon a { color: inherit; text-decoration: none; }
.studio-ribbon strong { color: #87d7bc; letter-spacing: .04em; }
.studio-ribbon nav { display: flex; align-items: center; gap: 10px; }
.studio-ribbon nav a { padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; color: rgba(255,255,255,.74); }
.studio-ribbon nav a:last-child { border-color: transparent; background: #e3914f; color: #17231d; }

.studio-app .app-shell { min-height: calc(100vh - 46px); }
.studio-app .topbar {
  border: 1px solid rgba(20, 65, 53, .08);
  background: linear-gradient(135deg, #fff, #f3f8f5);
  box-shadow: 0 12px 34px rgba(14, 54, 43, .06);
}
.studio-app .topbar h1 { letter-spacing: -.04em; }
.studio-app .run-status { border-color: var(--sector-accent); background: var(--sector-accent-soft); color: var(--sector-surface); }
.studio-app .workspace-tab.is-active { border-color: var(--sector-accent); background: var(--sector-accent-soft); color: var(--sector-surface); }
.studio-app .main-simulation-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: var(--sector-surface);
  box-shadow: 0 26px 64px rgba(7, 36, 29, .16);
}
.studio-app .main-simulation-card .canvas-header {
  background: linear-gradient(120deg, var(--sector-surface), #081f1a);
}
.studio-app .main-simulation-card .canvas-header h2,
.studio-app .main-simulation-card .canvas-header p { color: #fff; }
.studio-app .main-simulation-card .canvas-header p { opacity: .62; }
.studio-app .main-simulation-card .control-group .compact-button.is-active,
.studio-app .main-simulation-card .play-button { border-color: var(--sector-accent); background: var(--sector-accent); color: #0b211b; }
.studio-app .main-simulation-card .planning-view-shell { min-height: 640px; border-color: rgba(255,255,255,.12); border-radius: 16px; background: #102b24; }
.studio-app .three-planning-view,
.studio-app .three-planning-view canvas { min-height: 640px; }
.studio-app .scene-render-badge { border-color: var(--sector-accent); background: rgba(7,28,23,.78); }
.studio-app .scene-render-badge::before { background: var(--sector-accent); }
.studio-app .three-planning-legend { border-left-color: var(--sector-accent); }
.studio-app .kpi-grid article { border-top: 3px solid transparent; transition: transform .18s ease, border-color .18s ease; }
.studio-app .kpi-grid article:hover { transform: translateY(-2px); border-top-color: var(--sector-accent); }
.studio-app .mission-action-panel { border-color: rgba(20,65,53,.12); box-shadow: 0 12px 30px rgba(14,54,43,.06); }
.studio-app .mission-action-copy > span { color: var(--sector-accent); }
.studio-app .sidebar { background: linear-gradient(180deg, #f2f7f4, #e5eee9); }
.studio-app .sidebar .brand-mark { background: var(--sector-surface); }
.studio-app .sidebar .primary { background: var(--sector-surface); }
.studio-app .confidence-pill { border-color: var(--sector-accent); background: var(--sector-accent-soft); }

@media (max-width: 1000px) {
  .studio-ribbon nav a:not(:last-child) { display: none; }
  .studio-app .main-simulation-card .planning-view-shell,
  .studio-app .three-planning-view,
  .studio-app .three-planning-view canvas { min-height: 520px; }
}

@media (max-width: 640px) {
  .studio-ribbon { padding: 7px 12px; }
  .studio-ribbon span { display: none; }
  .studio-app .main-simulation-card .planning-view-shell,
  .studio-app .three-planning-view,
  .studio-app .three-planning-view canvas { min-height: 380px; }
}