*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-dark: #1a1a2e;
  --bg-panel: #16213e;
  --bg-hover: #1f3460;
  --border: #2a3f6b;
  --text: #e8e8e8;
  --text-muted: #8899aa;
  --accent: #4fc3f7;
  --accent-dim: #0288d1;
  --danger: #ef5350;
  --top-bar-h: 40px;
  --panel-left-w: 240px;
  --panel-right-w: 280px;
  --resizer-w: 4px;
  --panel-min-w: 160px;
  --panel-max-w: 520px;
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}

#app {
  display: grid;
  grid-template-columns: var(--panel-left-w) var(--resizer-w) 1fr var(--resizer-w) var(--panel-right-w);
  grid-template-rows: var(--top-bar-h) 1fr;
  grid-template-areas:
    'top top top top top'
    'left rl center rr right';
  width: 100vw;
  height: 100vh;
}

.top-bar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.panel-left {
  grid-area: left;
}

.panel-right {
  grid-area: right;
}

.panel-resizer {
  position: relative;
  z-index: 2;
  background: var(--border);
  touch-action: none;
  user-select: none;
  transition: background 0.15s;
}

.panel-resizer:hover,
.panel-resizer:active,
.panel-resizer.dragging {
  background: var(--accent-dim);
}

#resizer-left {
  grid-area: rl;
  cursor: col-resize;
}

#resizer-right {
  grid-area: rr;
  cursor: col-resize;
}

.viewport {
  grid-area: center;
  position: relative;
  overflow: hidden;
  background: #0d0d1a;
}

body.panel-resizing {
  cursor: col-resize !important;
  user-select: none;
}

body.panel-resizing * {
  cursor: col-resize !important;
}

#scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.camera-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}