* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #1a1a2e; color: #eee; overflow: hidden; }
#container { display: flex; height: 100vh; width: 100vw; }

#sidebar {
  width: 360px;
  min-width: 260px;
  max-width: 600px;
  resize: horizontal;
  overflow: auto;
  background: #16213e;
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}

#viewport { flex: 1; position: relative; background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%); overflow: hidden; }
canvas { display: block; }
#canvas3d { width: 100%; height: 100%; cursor: grab; }
#canvas3d:active { cursor: grabbing; }

h2 { color: #e94560; margin-bottom: 15px; font-size: 18px; border-bottom: 2px solid #e94560; padding-bottom: 8px; }
h3 { color: #53a8e2; margin: 20px 0 10px 0; font-size: 14px; }
.section { margin-bottom: 25px; }
.control-group { margin-bottom: 15px; min-width: 0; overflow: hidden; }
label { display: block; margin-bottom: 5px; font-size: 12px; color: #aaa; }

input[type="number"] {
  width: 100%;
  padding: 8px;
  background: #0f3460;
  border: 1px solid #53a8e2;
  color: #eee;
  border-radius: 3px;
  font-size: 14px;
}

select {
  width: 100%;
  padding: 8px;
  background: #0f3460;
  border: 1px solid #53a8e2;
  color: #eee;
  border-radius: 3px;
  font-size: 14px;
}

input[type="color"] { width: 100%; height: 35px; border: none; border-radius: 3px; cursor: pointer; }

button {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  background: #e94560;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}
button:hover { background: #ff6b81; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(233, 69, 96, 0.25); }
button:active { transform: translateY(0); }
button.secondary { background: #53a8e2; }
button.secondary:hover { background: #6bb9f0; }
button.danger { background: #d94848; }
button.danger:hover { background: #f06b6b; }

.spline-mode { display: flex; gap: 5px; margin-bottom: 10px; }
.spline-mode button { flex: 1; padding: 6px; font-size: 11px; }
.spline-mode button.active { opacity: 1; box-shadow: 0 0 0 2px white; }

#axisX { background: #ff6b6b !important; }
#axisX:hover { background: #ff8787 !important; }
#axisY { background: #51cf66 !important; }
#axisY:hover { background: #69db7c !important; }

#splineCanvas {
  width: 100%;
  height: 220px;
  background: #0f3460;
  border-radius: 5px;
  cursor: crosshair;
  margin-top: 10px;
  touch-action: none;
}

.point-type-buttons { display: flex; gap: 5px; margin-top: 10px; }
.point-type-buttons button { flex: 1; padding: 6px; font-size: 10px; }

.hint {
  font-size: 12px;
  color: #cfcfcf;
  padding: 8px 10px;
  background: rgba(0,0,0,0.15);
  border-left: 3px solid #53a8e2;
  border-radius: 4px;
}

.disabled-note {
  font-size: 12px;
  color: #ffd6d6;
  padding: 8px 10px;
  background: rgba(233,69,96,0.10);
  border-left: 3px solid #e94560;
  border-radius: 4px;
}

.row { display:flex; gap:8px; }
.row > * { flex: 1; }

input[disabled], select[disabled] { opacity: 0.6; cursor: not-allowed; }
label input[type="checkbox"][disabled] { opacity: 0.6; cursor: not-allowed; }

#presetDropZone {
  user-select: none;
  cursor: pointer;
  margin-top: 6px;
  border: 2px dashed rgba(83,168,226,0.7);
}
#presetDropZone.dragover {
  border-color: #e94560 !important;
  background: rgba(233, 69, 96, 0.10);
}