:root {
  --bg: #1a1a1a;
  --bg2: #222222;
  --bg3: #2b2b2b;
  --bg4: #353535;
  --header: #3a3a3a;
  --header2: #404040;
  --border: #1f1f1f;
  --text: #e0e0e0;
  --text2: #b0b0b0;
  --text-dim: #808080;
  --accent: #5680c2;
  --accent2: #3b6ab0;
  --select: #ff8c00;
  --select2: #ffaa00;
  --active: #d9a066;
  --red: #ff4d4d;
  --green: #4dff4d;
  --blue: #4d4dff;
  --btn-hover: #4a4a4a;
  --input-bg: #1f1f1f;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;
  --font-size: 11.5px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--font-size); }

.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(2px);
}
.splash-card {
  width: 600px; max-width: 92vw;
  background: var(--bg3); border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  overflow: hidden; border: 1px solid var(--border);
}
.splash-art {
  height: 160px; background: linear-gradient(135deg, #2c3e50 0%, #e67e22 100%);
  position: relative;
}
.splash-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.splash-logo { display: flex; align-items: center; gap: 12px; }
.splash-logo h1 { margin: 0; font-size: 22px; font-weight: 600; }
.splash-version { color: var(--text-dim); margin: 2px 0 0; }
.splash-links { display: flex; gap: 16px; }
.quick-links, .recent-files { flex: 1; }
.quick-links h3, .recent-files h3 { margin: 0 0 8px; font-size: 12px; color: var(--text2); text-transform: uppercase; }
.splash-link, .splash-recent {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  background: var(--bg4); color: var(--text); border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; margin-bottom: 4px;
}
.splash-link:hover, .splash-recent:hover { background: var(--btn-hover); }
.splash-link.active { outline: 1px solid var(--accent); }
.splash-note { color: var(--text-dim); font-size: 10px; margin: 8px 0 0; }

.app { width: 100%; height: 100%; display: flex; flex-direction: column; }
.topbar {
  height: 30px; background: var(--header); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; padding: 0 8px; user-select: none;
}
.menu-bar { display: flex; gap: 2px; }
.menu {
  padding: 0 10px; height: 22px; line-height: 22px; border-radius: 3px; cursor: pointer;
  font-weight: 500;
}
.menu:hover { background: var(--btn-hover); }
.workspace-tabs {
  flex: 1; display: flex; align-items: center; gap: 2px; overflow-x: auto;
  font-size: 11px;
}
.ws-tab {
  padding: 3px 10px; border-radius: 3px; cursor: pointer; white-space: nowrap;
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
}
.ws-tab.active { background: var(--bg4); color: var(--text); border-color: var(--accent); }
.ws-tab.add { padding: 3px 6px; }

.areas { flex: 1; display: grid; grid-template-columns: 1fr 320px; grid-template-rows: 1fr 4px 180px; grid-template-areas: "vp right" "split split" "tl tl"; overflow: hidden; }
.area { background: var(--bg); display: flex; flex-direction: column; position: relative; outline: none; }
.area-header {
  height: 24px; background: var(--header); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 6px;
  user-select: none;
}
.viewport-area { grid-area: vp; }
.right-stack { grid-area: right; display: grid; grid-template-rows: 1fr 4px 1fr; overflow: hidden; }
.outliner-area { flex: 1; min-height: 0; }
.properties-area { flex: 1; min-height: 0; }
.timeline-area { grid-area: tl; background: var(--bg2); border-top: 1px solid var(--border); }

.splitter-col { grid-area: vp; width: 4px; cursor: col-resize; background: transparent; z-index: 5; justify-self: end; }
.splitter-row { height: 4px; cursor: row-resize; background: transparent; z-index: 5; flex-shrink: 0; }
.splitter-bottom { grid-area: split; height: 4px; cursor: row-resize; background: transparent; z-index: 5; }
.splitter-col:hover, .splitter-row:hover, .splitter-bottom:hover { background: var(--accent); }

.area-header .header-left, .area-header .header-right { display: flex; align-items: center; gap: 4px; }
.header-title { font-weight: 500; color: var(--text2); }
.icon-btn, .header-btn, .shading-btn {
  background: transparent; border: none; color: var(--text2); cursor: pointer;
  height: 18px; min-width: 22px; border-radius: 3px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; padding: 0 4px;
}
.icon-btn:hover, .header-btn:hover, .shading-btn:hover { background: var(--btn-hover); color: var(--text); }
.shading-btn.active { background: var(--bg4); color: var(--select2); }
.mode-select {
  background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 3px;
  height: 18px; font-size: 11px; padding: 0 4px;
}
.object-type-label { color: var(--text-dim); font-size: 10px; margin-left: 4px; }

.viewport-body { flex: 1; display: flex; overflow: hidden; position: relative; }
.tool-shelf {
  width: 42px; background: var(--bg3); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 4px 0; gap: 2px;
  overflow-y: auto;
}
.tool-shelf.hidden { display: none; }
.tool-btn {
  width: 30px; height: 30px; background: var(--bg4); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; padding: 0;
}
.tool-btn:hover { background: var(--btn-hover); color: var(--text); }
.tool-btn.active { background: var(--accent); color: #fff; }
.tool-sep { width: 24px; height: 1px; background: var(--border); margin: 4px 0; }

.viewport-canvas-wrap { flex: 1; position: relative; overflow: hidden; touch-action: none; }
.viewport-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.nav-gizmo {
  position: absolute; top: 8px; right: 8px; width: 80px; height: 80px;
  pointer-events: auto; user-select: none;
  background: rgba(30,30,30,0.4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.gizmo-dot {
  position: absolute; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; cursor: pointer; border: 1px solid #000;
}
.gizmo-dot.x { background: rgba(255,77,77,0.9); color: #300; right: 4px; top: 50%; transform: translateY(-50%); }
.gizmo-dot.y { background: rgba(77,255,77,0.9); color: #030; top: 4px; left: 50%; transform: translateX(-50%); }
.gizmo-dot.z { background: rgba(100,100,255,0.9); color: #003; bottom: 4px; left: 50%; transform: translateX(-50%); }
.gizmo-dot:hover { transform: scale(1.1); }

.n-sidebar {
  position: absolute; top: 28px; right: 0; width: 220px; bottom: 0;
  background: var(--bg3); border-left: 1px solid var(--border); transform: translateX(100%);
  transition: transform .15s; pointer-events: auto; overflow-y: auto;
}
.n-sidebar.open { transform: translateX(0); }
.n-tabbar { display: flex; background: var(--header); border-bottom: 1px solid var(--border); }
.n-tab { flex: 1; text-align: center; padding: 6px 0; cursor: pointer; color: var(--text2); }
.n-tab.active { background: var(--bg4); color: var(--text); }
.n-content { padding: 8px; }

.area-body { flex: 1; overflow: auto; position: relative; }
.outliner-body { padding: 4px 0; }
.outliner-tree { list-style: none; margin: 0; padding: 0; }
.outliner-tree li { padding: 3px 8px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.outliner-tree li:hover { background: var(--bg4); }
.outliner-tree li.selected { background: var(--accent); color: #fff; }
.outliner-tree li.active { outline: 1px solid var(--select2); }
.outliner-icon { width: 14px; text-align: center; }
.oo-name { flex: 1; }
.oo-toggle { width: 16px; text-align: center; cursor: pointer; color: var(--text-dim); }
.oo-toggle.on { color: var(--text); }

.properties-body { display: flex; }
.prop-tabs {
  width: 36px; background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 4px 0; gap: 4px;
}
.prop-tab {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer; color: var(--text-dim); background: transparent;
  border: 1px solid transparent;
}
.prop-tab:hover { background: var(--bg4); color: var(--text); }
.prop-tab.active { background: var(--bg4); border-color: var(--accent); color: var(--text); }
.prop-panels { flex: 1; overflow: auto; padding: 6px; }
.prop-panel { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.prop-panel-head {
  background: var(--header); padding: 5px 8px; cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.prop-panel-head::before {
  content: '▼'; font-size: 9px; color: var(--text-dim); transition: transform .1s;
}
.prop-panel.collapsed .prop-panel-head::before { content: '▶'; }
.prop-panel.collapsed .prop-panel-body { display: none; }
.prop-panel-body { padding: 8px; background: var(--bg3); }
.prop-row { display: flex; align-items: center; margin-bottom: 6px; gap: 6px; }
.prop-row:last-child { margin-bottom: 0; }
.prop-label { width: 60px; color: var(--text2); font-size: 10px; }
.prop-axis { width: 18px; text-align: center; font-size: 10px; color: var(--text-dim); }
.prop-value, .prop-input {
  flex: 1; background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  height: 20px; border-radius: 3px; padding: 0 4px; font-size: 11px;
}
.prop-value { display: flex; align-items: center; cursor: ns-resize; user-select: none; }
.prop-value input { border:none; background:transparent; color:inherit; width:100%; text-align:right; padding:0; font-family: var(--font-mono); }
.prop-row.red .prop-axis, .prop-row.red .prop-value input { color: #ff6b6b; }
.prop-row.green .prop-axis, .prop-row.green .prop-value input { color: #6bff6b; }
.prop-row.blue .prop-axis, .prop-row.blue .prop-value input { color: #6b6bff; }
.prop-actions { display: flex; gap: 4px; margin-top: 6px; }
.prop-btn {
  background: var(--bg4); border: 1px solid var(--border); color: var(--text); border-radius: 3px;
  padding: 3px 8px; cursor: pointer; font-size: 11px;
}
.prop-btn:hover { background: var(--btn-hover); }

.timeline-body { display: flex; flex-direction: column; }
.timeline-controls {
  height: 28px; background: var(--header); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 6px; gap: 4px;
}
.tc-btn { background: transparent; border: none; color: var(--text2); cursor: pointer; font-size: 12px; padding: 0 4px; }
.tc-btn:hover { color: var(--text); }
.frame-field { width: 44px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); text-align: center; height: 18px; border-radius: 3px; }
.range-label { color: var(--text-dim); font-size: 10px; margin-left: 8px; }
.range-field { width: 44px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); text-align: center; height: 18px; border-radius: 3px; }
.timeline-ruler { flex: 1; position: relative; background: var(--bg); cursor: crosshair; overflow: hidden; }
.timeline-cursor {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #4dff4d; z-index: 2;
}
.timeline-ruler::before {
  content: ''; position: absolute; top: 10px; left: 0; right: 0; height: 1px; background: var(--bg4);
}
.keyframes { position: absolute; top: 6px; left: 0; right: 0; height: 14px; }
.keyframe {
  position: absolute; width: 8px; height: 8px; background: var(--select2);
  transform: rotate(45deg) translateX(-50%); top: 2px; margin-left: 0;
}

.statusbar {
  height: 22px; background: var(--bg2); border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 8px; font-size: 10px; color: var(--text2); gap: 12px;
}
.status-left { flex: 1; }
.status-right { color: var(--text-dim); }
.status-msg { color: var(--text); }

.context-menu, .popover {
  position: fixed; z-index: 2000; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
  min-width: 180px; max-width: 280px; box-shadow: 0 6px 16px rgba(0,0,0,0.5); display: none;
  font-size: 11px; overflow: hidden;
}
.menu-list { list-style: none; margin: 0; padding: 4px 0; }
.menu-list li { padding: 4px 14px 4px 24px; cursor: pointer; position: relative; display: flex; justify-content: space-between; color: var(--text); }
.menu-list li:hover { background: var(--accent); color: #fff; }
.menu-list li.disabled { color: var(--text-dim); pointer-events: none; }
.menu-list li .shortcut { color: var(--text-dim); margin-left: 12px; font-size: 10px; }
.menu-list li:hover .shortcut { color: rgba(255,255,255,0.7); }
.menu-list .sep { height: 1px; background: var(--border); margin: 4px 0; pointer-events: none; }

.dialog {
  position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.dialog-box {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  padding: 16px; min-width: 280px; max-width: 90vw;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.btn { background: var(--bg4); border: 1px solid var(--border); color: var(--text); border-radius: 3px; padding: 4px 12px; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent2); }

/* Mobile */
@media (max-width: 768px) {
  .areas { grid-template: "vp" "tl" / 1fr; grid-template-rows: 1fr 120px; }
  .right-stack, .splitter-col, .splitter-bottom { display: none !important; }
  .tool-shelf { width: 36px; }
  .tool-btn { width: 26px; height: 26px; }
  .n-sidebar { width: 180px; }
  .topbar { font-size: 10px; }
  .workspace-tabs { display: none; }
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 5px; border: 2px solid var(--bg2); }
::-webkit-scrollbar-thumb:hover { background: var(--header); }