@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Reset & tokens ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #0d1117;
  --surface:      #161b22;
  --surface-2:    #1c2128;
  --border:       #30363d;
  --text:         #e6edf3;
  --text-muted:   #8b949e;
  --rotary:       #58a6ff;
  --prismatic:    #ffa657;
  --accent:       #3fb950;
  --endpoint:     #ff7b72;
  --violet:       #9f7aea;
  --radius:       10px;
  --radius-sm:    6px;
  --panel-w:      340px;
  --transition:   0.18s ease;
}

html, body { height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.app { display: flex; height: 100vh; overflow: hidden; }

.panel {
  width: var(--panel-w);
  min-width: var(--panel-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

.canvas-area { flex: 1; position: relative; overflow: hidden; }
#arm-canvas  { width: 100%; height: 100%; display: block; }

/* ── Panel header ────────────────────────────────────────────────────────── */
.panel-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.panel-title  { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.panel-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.panel-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  PHASE 1 — Configuration                                                  */
/* ══════════════════════════════════════════════════════════════════════════ */

.config-section { padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.config-label   { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }

.count-row { display: flex; align-items: center; gap: 10px; }
.count-row input[type=number] { width: 68px; padding: 7px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: inherit; text-align: center; transition: border-color var(--transition); }
.count-row input[type=number]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(63,185,80,0.15); }
.count-hint { font-size: 12px; color: var(--text-muted); }

#joint-rows { padding: 10px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }

.joint-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px; transition: border-color var(--transition); }
.joint-row:hover { border-color: #484f58; }

.joint-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.joint-index      { font-size: 12px; font-weight: 600; }

.joint-type-select { padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12px; font-family: inherit; cursor: pointer; }
.joint-type-select:focus { outline: none; border-color: var(--rotary); }

.joint-row-fields { display: flex; gap: 6px; }
.joint-row-fields label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); font-weight: 500; }

.input-unit-wrap { position: relative; display: flex; align-items: center; }
.input-unit-wrap input[type=number] { width: 100%; padding: 5px 26px 5px 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 11px; font-family: 'JetBrains Mono', monospace; transition: border-color var(--transition); }
.input-unit-wrap input[type=number]:focus { outline: none; border-color: var(--rotary); box-shadow: 0 0 0 2px rgba(88,166,255,0.15); }
.unit-badge { position: absolute; right: 5px; font-size: 9px; color: var(--text-muted); pointer-events: none; user-select: none; }

.config-footer { padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
.btn-primary { width: 100%; padding: 11px; background: linear-gradient(135deg,#238636,#2ea043); border: none; border-radius: var(--radius); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 0 16px rgba(63,185,80,0.25); transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition); }
.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 0 22px rgba(63,185,80,0.4); }
.btn-primary:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  PHASE 2 — Legend                                                         */
/* ══════════════════════════════════════════════════════════════════════════ */

.legend { padding: 10px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; flex-shrink: 0; }
.legend-item    { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.legend-dot     { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-diamond { width: 10px; height: 10px; transform: rotate(45deg); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  PHASE 2 — Sliders                                                        */
/* ══════════════════════════════════════════════════════════════════════════ */

#slider-panel { overflow-y: auto; padding: 10px 20px; display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; max-height: 38vh; }

.slider-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; transition: border-color var(--transition), opacity var(--transition); }
.slider-card:hover { border-color: #484f58; }
.slider-card.slider-disabled { opacity: 0.45; pointer-events: none; }

.slider-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.slider-label  { font-size: 13px; font-weight: 600; }

.joint-tag     { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 20px; }
.tag-rotary    { background: rgba(88,166,255,0.15);  color: var(--rotary);    border: 1px solid rgba(88,166,255,0.3); }
.tag-prismatic { background: rgba(255,166,87,0.15);  color: var(--prismatic); border: 1px solid rgba(255,166,87,0.3); }

.slider-row   { display: flex; align-items: center; gap: 8px; }
.slider-bound { font-size: 10px; color: var(--text-muted); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

.joint-slider { flex: 1; -webkit-appearance: none; height: 4px; border-radius: 2px; background: var(--border); outline: none; cursor: pointer; }
.joint-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--rotary); border: 2px solid var(--surface-2); box-shadow: 0 0 8px rgba(88,166,255,0.5); transition: transform var(--transition); cursor: grab; }
.joint-slider::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing; }
.slider-card:has(.tag-prismatic) .joint-slider::-webkit-slider-thumb { background: var(--prismatic); box-shadow: 0 0 8px rgba(255,166,87,0.5); }

.slider-readout { text-align: center; margin-top: 5px; }
.readout-value  { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 10px; display: inline-block; min-width: 72px; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  PHASE 2 — Trajectory Panel                                               */
/* ══════════════════════════════════════════════════════════════════════════ */

.traj-section { border-top: 1px solid var(--border); flex-shrink: 0; }

.traj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.traj-header:hover { background: var(--surface-2); }

.traj-title       { font-size: 13px; font-weight: 600; color: var(--text); }
.traj-toggle-hint { font-size: 11px; color: var(--text-muted); }

.traj-body { display: none; padding: 0 20px 14px; flex-direction: column; gap: 8px; }
.traj-body.traj-open { display: flex; }

.traj-editor-wrap { position: relative; }
.traj-code {
  width: 100%;
  height: 130px;
  resize: vertical;
  padding: 10px;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: #e6edf3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  outline: none;
  transition: border-color var(--transition);
}
.traj-code:focus { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(159,122,234,0.15); }

.traj-file-row { display: flex; gap: 8px; }

.btn-ghost {
  flex: 1;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.btn-ghost:hover { background: #21262d; border-color: #484f58; }

.traj-status-row { display: flex; align-items: center; }
.traj-status     { font-size: 11px; color: var(--text-muted); font-style: italic; }

.traj-scrubber-wrap { display: flex; align-items: center; gap: 8px; }
.traj-scrubber {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.traj-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--violet);
  border: 2px solid var(--surface-2);
  box-shadow: 0 0 8px rgba(159,122,234,0.5);
  cursor: grab;
}
.traj-time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; font-family: 'JetBrains Mono', monospace; }

.traj-controls { display: flex; gap: 8px; }

.btn-traj-play {
  flex: 2;
  padding: 9px;
  background: linear-gradient(135deg, #7c3aed, #9f7aea);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: 0 0 12px rgba(124,58,237,0.3);
}
.btn-traj-play:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.btn-traj-play:not(:disabled):hover { opacity: 0.9; transform: translateY(-1px); }
.btn-traj-play.btn-playing { background: linear-gradient(135deg,#c2410c,#ea580c); box-shadow: 0 0 12px rgba(234,88,12,0.3); }

.btn-traj-sm { flex: 1; font-size: 12px; padding: 7px; }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  PHASE 2 — Footer & Buttons                                               */
/* ══════════════════════════════════════════════════════════════════════════ */

.control-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }

.endpoint-display { font-size: 12px; color: var(--text-muted); text-align: center; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', monospace; }

.btn-row { display: flex; gap: 8px; }
.btn-secondary { flex: 1; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background var(--transition), border-color var(--transition); }
.btn-secondary:hover { background: #21262d; border-color: #484f58; }

/* ══════════════════════════════════════════════════════════════════════════ */
/*  Canvas overlays                                                           */
/* ══════════════════════════════════════════════════════════════════════════ */

.canvas-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: rgba(255,255,255,0.08); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; }

.btn-workspace {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 14px;
  background: rgba(22,27,34,0.82);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn-workspace:hover { border-color: var(--violet); color: var(--violet); }
.btn-workspace.ws-on { border-color: var(--violet); color: var(--violet); box-shadow: 0 0 12px rgba(159,122,234,0.3); }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }