.robot-workbench { display: grid; gap: 16px; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); align-items: start; }
[data-wheel-control][hidden] { display: none !important; }
.step-form { padding: 16px; display: grid; gap: 14px; }
.step-grid { display: grid; grid-template-columns: minmax(220px, 0.85fr) minmax(0, 2fr); gap: 12px; align-items: stretch; }
.step-grid.compact { grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2.2fr); }
.step-upload {
  position: relative; min-height: 126px; border: 1px dashed #3b4c5d; border-radius: 8px;
  background: linear-gradient(135deg, rgba(45, 212, 191, .08), transparent 44%), #0a1117;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 18px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.step-upload:hover { border-color: #2dd4bf; background: rgba(20,184,166,.06); transform: translateY(-1px); }
.step-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* URDF folder drop-zone: the hidden inputs are not absolutely-positioned,
   so the whole zone acts as a click/drop target without needing z-index tricks. */
.urdf-drop-zone { user-select: none; outline: none; }
.urdf-drop-zone:focus { border-color: #2dd4bf; box-shadow: 0 0 0 2px rgba(45,212,191,.18); }
.urdf-drop-zone.drag-over {
  border-color: #2dd4bf; background: rgba(20,184,166,.12); transform: translateY(-1px);
}
.upload-title { font-size: 14px; font-weight: 800; color: #eef4f8; }
.upload-sub { font-size: 12px; color: #7f90a2; font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-fields { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.step-fields.compact { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto auto; align-items: end; }
.step-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.step-toolbar .primary, .step-result-actions .primary { width: auto; min-width: 118px; padding: 0 18px; text-decoration: none; }
.step-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #cbd5e1; margin-right: auto; }
.step-check.upload-check { min-height: 42px; margin-right: 0; white-space: nowrap; }
.step-check input, .mini-check input { width: 15px; height: 15px; accent-color: #14b8a6; }
.step-check:has(input:disabled) { opacity: .45; }

.assembly-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.assembly-step {
  height: 34px; border: 1px solid #1f2d3b; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #7f90a2; font-size: 12px; font-weight: 700; background: #08111a;
}
.assembly-step.done { color: #5eead4; border-color: rgba(45,212,191,.28); background: rgba(20,184,166,.06); }
.assembly-step.active { color: #eef4f8; border-color: rgba(94,234,212,.55); box-shadow: 0 0 0 1px rgba(94,234,212,.08) inset; }
.assembly-workbench { display: grid; grid-template-columns: minmax(620px, 1.75fr) minmax(340px, .75fr); gap: 12px; align-items: stretch; }
.assembly-viewer, .assembly-pane {
  border: 1px solid #1b252f; border-radius: 8px; background: #080e14; overflow: hidden;
}
.viewer-toolbar {
  height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 10px; border-bottom: 1px solid #17212c; color: #94a3b8; font-size: 12px;
}
.viewer-actions { display: flex; gap: 6px; }
.viewer-actions .btn { min-height: 28px; padding: 0 10px; font-size: 11px; }
.assembly-canvas { width: 100%; height: clamp(520px, 68vh, 760px); min-height: 520px; position: relative; overflow: hidden; background: #070d14; }
.assembly-canvas canvas { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.preview-status {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; pointer-events: none;
  min-height: 30px; display: flex; align-items: center; padding: 7px 10px;
  border: 1px solid rgba(148,163,184,.22); border-radius: 8px; background: rgba(3, 7, 12, .78);
  color: #cbd5e1; font-size: 11px; line-height: 1.35; backdrop-filter: blur(8px);
}
.preview-status[data-status="ok"] { color: #5eead4; border-color: rgba(94,234,212,.35); }
.preview-status[data-status="loading"] { color: #facc15; border-color: rgba(250,204,21,.32); }
.preview-status[data-status="error"] { color: #fecaca; border-color: rgba(248,113,113,.42); }
.assembly-side { display: grid; grid-template-rows: minmax(220px, .62fr) minmax(390px, 1.38fr); gap: 12px; min-height: 562px; }
.assembly-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.assembly-pane-title {
  padding: 10px 12px; border-bottom: 1px solid #17212c; color: #e2e8f0;
  font-size: 12px; font-weight: 800;
}
.assembly-setup { min-height: 0; overflow: auto; padding: 10px; display: grid; gap: 10px; align-content: start; }
.assembly-link-pick label, .transform-tools label { display: grid; gap: 6px; color: #94a3b8; font-size: 11px; font-weight: 700; }
.assembly-link-pick .field, .transform-tools .field { min-height: 34px; }
.assembly-selection {
  border: 1px solid #1d2a36; border-radius: 8px; background: #0b131b; color: #94a3b8;
  padding: 10px; min-height: 84px; font-size: 12px; line-height: 1.45;
}
.selection-title { color: #e2e8f0; font-weight: 800; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-grid { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 5px 8px; align-items: center; }
.selection-grid span { color: #64748b; font-size: 10px; }
.selection-grid b, .selection-grid code { color: #cbd5e1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selection-grid code { font-family: ui-monospace, monospace; color: #5eead4; }
.assembly-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.assembly-actions .btn { min-height: 32px; padding: 0 8px; font-size: 11px; }
.assembly-actions .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.transform-tools { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; align-items: end; }
.segmented {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border: 1px solid #1d2a36; border-radius: 8px; overflow: hidden; background: #08111a;
}
.seg-button {
  min-height: 34px; border: 0; border-right: 1px solid #1d2a36; background: transparent; color: #94a3b8;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.seg-button:last-child { border-right: 0; }
.seg-button:hover { color: #e2e8f0; background: rgba(148,163,184,.07); }
.seg-button.active { color: #071016; background: #5eead4; }
.part-list, .assignment-list { overflow: auto; padding: 10px; display: grid; gap: 8px; align-content: start; }
.assembly-setup .assignment-list { padding: 0; overflow: visible; }
.assignment-list.compact { gap: 7px; }
.part-row {
  width: 100%; border: 1px solid #1d2a36; border-radius: 8px; background: #0b131b; color: inherit;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px;
  text-align: left; cursor: pointer;
}
.part-row:hover, .part-row.active { border-color: rgba(94,234,212,.48); background: rgba(20,184,166,.07); }
.part-dot { width: 10px; height: 10px; border-radius: 999px; box-shadow: 0 0 0 3px rgba(255,255,255,.04); }
.part-main { min-width: 0; display: grid; gap: 3px; }
.part-main b, .assignment-name b { color: #e2e8f0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-main small, .assignment-name small { color: #64748b; font-size: 10px; font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-link { color: #5eead4; font-size: 10px; font-family: ui-monospace, monospace; }
.assignment-row {
  display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(120px, .8fr) minmax(88px, .65fr) minmax(88px, .65fr) auto auto;
  gap: 7px; align-items: center; border: 1px solid #1d2a36; border-radius: 8px; padding: 8px; background: #0b131b;
}
.assignment-name { min-width: 0; display: grid; gap: 3px; }
.assignment-row .field { min-height: 30px; padding: 4px 7px; font-size: 11px; }
.assignment-row .mono { font-family: ui-monospace, monospace; }
.mini-check { display: inline-flex; align-items: center; gap: 5px; color: #94a3b8; font-size: 10px; white-space: nowrap; }

.step-joint-table {
  display: grid; grid-template-columns: 1.05fr .78fr .95fr .95fr .82fr .82fr .72fr .8fr;
  gap: 7px; align-items: center; overflow-x: auto; min-width: 0;
  grid-auto-columns: minmax(0, 1fr);
}
.step-joint-table .field { min-height: 32px; padding: 4px 8px; font-size: 11px; }
.step-joint-table .sj-head { font-size: 10px; color: #7b8da0; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.step-joint-table .sj-mono { font-family: ui-monospace, monospace; }
.limit-mini { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.step-empty { padding: 12px; border: 1px solid #1b252f; border-radius: 8px; color: #7b8da0; font-size: 12px; background: #070d14; }
.step-result { display: grid; gap: 9px; }
.step-result:empty { display: none; }
.step-result-head { display: flex; align-items: baseline; gap: 10px; color: #e2e8f0; }
.step-result-head span { font-size: 11px; color: #64748b; font-family: ui-monospace, monospace; }
.step-result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.step-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #94a3b8; font-family: ui-monospace, monospace; }
.step-detected { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: #94a3b8; }
.step-detected b { color: #cbd5e1; margin-right: 2px; }
.step-detected span { border: 1px solid #1e2d3d; border-radius: 999px; padding: 3px 7px; background: #08111a; }
.step-warning { border: 1px solid rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: #fcd34d; border-radius: 8px; padding: 8px 10px; font-size: 12px; }

.robot-list { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.robot-list:empty::after { content: "暂无机器人"; display: block; padding: 18px 8px; text-align: center; font-size: 12px; color: #64748b; }
.robot-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 8px;
  border: 1px solid #1b252f; background: #0d151d; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.robot-item:hover { border-color: #354555; background: #101c25; transform: translateX(2px); }
/* 删除按钮：默认隐藏，hover 时显示 */
.r-delete-btn {
  margin-left: auto; flex-shrink: 0; opacity: 0; pointer-events: none;
  padding: 2px 7px; font-size: 11px; color: #f87171;
  border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08);
  transition: opacity .15s;
}
.robot-item:hover .r-delete-btn { opacity: 1; pointer-events: auto; }
.r-delete-btn:hover { background: rgba(248,113,113,.18); border-color: #f87171; }
/* 重复标记徽章 */
.r-dup-badge {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  padding: 1px 5px; border-radius: 999px; margin-left: 5px;
  background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.35);
}
.robot-item.active { border-color: rgba(45,212,191,.48); background: rgba(20,184,166,.09); }
.robot-item .r-mark {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
  background: rgba(45,212,191,.12); color: #5eead4;
}
.robot-item .r-body { min-width: 0; flex: 1; }
.robot-item .r-title { font-size: 13px; font-weight: 600; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.robot-item .r-sub { font-size: 11px; color: #64748b; font-family: ui-monospace, monospace; }

.joint-editor { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.leg-group { border: 1px solid #1b252f; border-radius: 8px; padding: 11px; background: #080e14; }
.leg-group h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #cbd5e1; text-transform: uppercase; letter-spacing: .05em; }
.joint-control { display: grid; grid-template-columns: 48px minmax(80px,1fr) 72px; align-items: center; gap: 8px; margin: 7px 0; font-size: 12px; color: #94a3b8; }
.joint-control input[type="range"] { width: 100%; accent-color: #2dd4bf; }
.joint-control input[type="number"] {
  width: 72px; border: 1px solid #26313d; border-radius: 6px; padding: 4px 6px;
  background: #090e13; color: #eef4f8; font: inherit; font-size: 12px;
}
.joint-control input[type="number"]:focus { outline: none; border-color: #2dd4bf; }

.joint-order-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 8px; }
.joint-order-head p { margin: 0; line-height: 1.45; }
.joint-order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.joint-order-actions .btn { min-height: 30px; padding: 0 10px; font-size: 11px; white-space: nowrap; }
.joint-order-table { display: grid; grid-template-columns: minmax(138px,1fr) minmax(180px,1.35fr); gap: 6px 12px; align-items: center; font-size: 11px; font-family: ui-monospace, monospace; }
.joint-order-table .jo-canonical { color: #5eead4; }
.joint-order-table .jo-select { min-height: 30px; padding: 4px 8px; font-family: ui-monospace, monospace; font-size: 11px; }
.joint-order-table .jo-select.invalid { border-color: #ef4444; box-shadow: 0 0 0 1px rgba(239,68,68,.2); }
.joint-order-table .jo-head { color: #475569; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.joint-order-status { min-height: 18px; font-size: 11px; }
.joint-order-status.ok { color: #5eead4; }
.joint-order-status.bad { color: #fca5a5; }

/* ── Stance Pose 3D Viewer ── */
.stance-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.stance-viewer {
  position: relative; border: 1px solid #1b252f; border-radius: 8px;
  background: #070d14; height: 260px; overflow: hidden;
}
.stance-viewer canvas { display: block; width: 100% !important; height: 100% !important; }
.stance-viewer-hint {
  position: absolute; bottom: 7px; left: 0; right: 0; text-align: center;
  pointer-events: none; font-size: 10px; color: #334155; z-index: 2;
}

/* ── 全屏 URDF 3D 预览模态层 ── */
.urdf-modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0, 8, 16, 0.88);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: urdf-modal-in 0.18s ease;
}
@keyframes urdf-modal-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.urdf-modal-inner {
  display: grid;
  grid-template-columns: 1fr 310px;
  width: 100%; max-width: 1480px; height: 100%;
  max-height: calc(100vh - 32px);
  background: #060d14;
  border: 1px solid #1b2535;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
/* 左侧大画布 */
.urdf-modal-canvas {
  position: relative; background: #070d14; overflow: hidden;
}
.urdf-modal-canvas canvas {
  display: block; width: 100% !important; height: 100% !important;
}
/* 右侧面板 */
.urdf-modal-panel {
  display: flex; flex-direction: column;
  border-left: 1px solid #162030;
  background: #08111a;
  overflow: hidden;
}
.urdf-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #162030;
  flex-shrink: 0;
}
.urdf-modal-robot-name {
  font-size: 15px; font-weight: 800; color: #eef4f8; display: block; line-height: 1.25;
}
.urdf-modal-body {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  scrollbar-width: thin; scrollbar-color: #1e3040 transparent;
}
.urdf-modal-footer {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px;
  border-top: 1px solid #162030; flex-shrink: 0;
}
.urdf-modal-footer .primary { width: 100%; }
/* 关节滑块区 */
.urdf-modal-joints { display: flex; flex-direction: column; gap: 10px; }
.urdf-modal-leg { }
.urdf-modal-leg-title {
  font-size: 11px; font-weight: 700; color: #5eead4; text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid #162030;
}
.urdf-modal-joint-row {
  display: grid; grid-template-columns: 46px 1fr 58px; gap: 6px; align-items: center;
  margin-bottom: 5px;
}
.urdf-modal-joint-row span {
  font-size: 11px; color: #7f90a2; font-family: ui-monospace, monospace;
}
.urdf-modal-joint-row input[type="range"] {
  width: 100%; accent-color: #14b8a6; cursor: pointer;
}
.urdf-modal-joint-row input[type="number"] {
  width: 100%; background: #0e1c2a; border: 1px solid #1e3040; border-radius: 4px;
  color: #cbd5e1; font-size: 11px; padding: 3px 5px; text-align: right;
  font-family: ui-monospace, monospace;
}
.urdf-modal-joint-row input[type="number"]:focus { outline: none; border-color: #2dd4bf; }

/* loading overlay inside modal canvas */
.urdf-modal-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: #070d14; color: #5eead4; font-size: 14px; z-index: 5;
}
.urdf-modal-loading-spinner {
  width: 36px; height: 36px; border: 3px solid #1e3040;
  border-top-color: #14b8a6; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) {
  .assembly-workbench { grid-template-columns: 1fr; }
  .assembly-side { grid-template-rows: none; grid-template-columns: 1fr; min-height: 0; }
}

@media (max-width: 920px) {
  .robot-workbench { grid-template-columns: 1fr; }
  .step-grid { grid-template-columns: 1fr; }
  .step-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .step-fields.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .step-joint-table { min-width: 900px; }
  .assignment-row { grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr); }
  .joint-order-head { grid-template-columns: 1fr; }
  .joint-order-actions { justify-content: flex-start; }
  .form-section { overflow-x: auto; }
}

@media (max-width: 640px) {
  .step-fields { grid-template-columns: 1fr; }
  .step-fields.compact { grid-template-columns: 1fr; }
  .assembly-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assembly-canvas { height: 360px; min-height: 360px; }
  .step-toolbar .primary, .step-result-actions .primary, .step-result-actions .btn { width: 100%; justify-content: center; }
  .step-check.upload-check { min-height: auto; }
  .joint-editor { grid-template-columns: 1fr; }
  .stance-layout { grid-template-columns: 1fr; }
}