:root { --brand: #6366F1; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }

.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.04);
}

.hover-up { transition: transform .2s ease, box-shadow .2s ease; }
.hover-up:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(79, 70, 229, 0.14); }

@keyframes pop {
  0% { opacity: 0; transform: scale(.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop { animation: pop .22s ease-out; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.animate-fade { animation: fade .25s ease; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.5); }

.three-canvas {
  width: 100%;
  height: 360px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 25%, #273449, #0f172a);
  display: block;
}

#modal.show { display: flex !important; }
#toast.show { display: block !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .18s ease; border: none;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 16px rgba(79,70,229,.3); }
.btn-primary:hover { background: #4F46E5; box-shadow: 0 8px 22px rgba(79,70,229,.4); }
.btn-ghost { background: rgba(15,23,42,.04); color: #334155; }
.btn-ghost:hover { background: rgba(15,23,42,.08); }
.btn-danger { background: #EF4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }

/* 开关/模式的选中态（如「上下移动」等单轴锁定按钮）。
   必须写在 .btn-ghost 之后 —— 两者都是单类选择器，同权重时后定义的覆盖先定义的；
   之前用 btn-ghost + btn-primary 组合，被 ghost 的浅灰背景+深灰字盖掉，选中几乎看不出变化。
   使用时应替换掉 btn-ghost：实心品牌色背景 + 白字 + 外描边，一眼可辨。 */
.btn-on {
  background: var(--brand); color: #fff; font-weight: 600;
  box-shadow: 0 0 0 2px rgba(99,102,241,.3), 0 6px 16px rgba(79,70,229,.3);
}
.btn-on:hover { background: #4F46E5; color: #fff; }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { padding: 12px 14px; text-align: left; font-size: 13px; }
table.data thead th { color: #64748b; font-weight: 600; border-bottom: 1px solid #eef2f7; background: #fafbfc; }
table.data tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .15s; }
table.data tbody tr:hover { background: #f8faff; }

.input, select.input {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid #e2e8f0;
  background: #fff; outline: none; font-size: 14px; transition: border .15s;
}
.input:focus, select.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.badge-on { background: rgba(16,185,129,.12); color: #059669; }
.badge-off { background: rgba(239,68,68,.12); color: #dc2626; }
/* 图纸难度标签 */
.badge.diff-easy   { background: rgba(16,185,129,.12); color: #059669; }
.badge.diff-medium { background: rgba(245,158,11,.14); color: #b45309; }
.badge.diff-hard   { background: rgba(249,115,22,.14); color: #c2410c; }
.badge.diff-expert { background: rgba(220,38,38,.14);  color: #b91c1c; }

.pagination { display: flex; gap: 6px; align-items: center; }
.pagination a, .pagination span {
  padding: 6px 12px; border-radius: 8px; font-size: 13px; color: #475569; cursor: pointer;
  background: #fff; border: 1px solid #e2e8f0;
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* 图纸卡片网格（带封面） */
.manual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.manual-card {
  background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 16px; overflow: hidden;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.manual-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(79,70,229,.14); }
.manual-cover {
  width: 100%; aspect-ratio: 4 / 3; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.manual-cover img { width: 100%; height: 100%; object-fit: cover; }
.manual-meta { padding: 10px 12px; }
.manual-title { font-weight: 600; color: #1e293b; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manual-sub { margin-top: 5px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }

/* 编辑页：封面预览与图纸页缩略图 */
/* 「导入图纸」弹窗里的图纸列表 */
.im-list { max-height: 46vh; overflow-y: auto; }
.im-row { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background .15s; }
.im-row:last-child { border-bottom: 0; }
.im-row:hover { background: #f8faff; }

/* 编辑页「封面与图纸页」布局：封面区固定 200px，右侧宽度全部留给图纸页；窄屏自动堆叠 */
.manual-media { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
@media (max-width: 768px) { .manual-media { grid-template-columns: 1fr; } }
/* 封面上传：方形头像式方框，支持点击 + 拖拽 */
.cover-drop {
  position: relative; width: 180px; max-width: 100%; aspect-ratio: 1 / 1;
  border: 2px dashed #cbd5e1; border-radius: 16px; background: #f8fafc;
  cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.cover-drop:hover { border-color: var(--brand); background: #fff; }
.cover-drop.is-drag { border-color: var(--brand); background: rgba(99,102,241,.06); box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.cover-drop.is-disabled { opacity: .55; cursor: not-allowed; }
.cover-inner {
  width: 100%; height: 100%; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #fff;
}
.cover-inner img { width: 100%; height: 100%; object-fit: cover; }
.cover-overlay {
  position: absolute; inset: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.55); color: #fff; font-size: 13px;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.cover-drop:hover .cover-overlay, .cover-drop.is-drag .cover-overlay { opacity: 1; }

/* 图纸页上传方块：复用 .cover-drop 样式（与封面上传方块完全一致：180px 正方形、虚线、相同圆角/悬停/拖拽态），仅内部文字单独定义 */
.pages-add-inner { text-align: center; color: #64748b; font-size: 13px; line-height: 1.5; pointer-events: none; }
.pages-add-inner .add-plus { font-size: 30px; display: block; color: #94a3b8; }
.pages-grid { display: flex; flex-wrap: wrap; gap: 10px; max-height: 440px; overflow-y: auto; align-items: flex-start; }
.page-thumb {
  position: relative; width: 180px; aspect-ratio: 1 / 1; background: #f1f5f9;
  border-radius: 16px; overflow: hidden; border: 1px solid #e6ecf3; cursor: zoom-in;
}
.page-thumb img { width: 100%; height: 100%; object-fit: cover; }
.page-no { position: absolute; left: 4px; top: 4px; background: rgba(15,23,42,.7); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.page-ops { position: absolute; right: 4px; top: 4px; display: flex; gap: 4px; }
.page-op { width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(15,23,42,.65); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.page-op:hover { background: #4F46E5; }
.page-op-del:hover { background: #EF4444; }

/* 零件缩略图网格 */
.part-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.part-card {
  background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 16px; overflow: hidden;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease;
}
.part-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(79,70,229,.14); }
/* 编辑图纸：零件明细卡片略小（一屏能看更多） */
.part-grid.part-grid-sm { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.part-grid.part-grid-sm .part-meta { padding: 8px 10px; }
.part-grid.part-grid-sm .part-name { font-size: 13px; }
.part-grid.part-grid-sm .mc-dot { width: 20px; height: 20px; }
.part-grid.part-grid-sm .mc-count { width: 52px; padding: 3px 5px; font-size: 12px; }
.part-thumb {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 30%, #2b3a52, #0f172a);
  display: flex; align-items: center; justify-content: center;
}
.part-thumb img.snap { width: 100%; height: 100%; object-fit: contain; display: none; }
.part-thumb .snap-ph { color: rgba(255,255,255,.6); font-size: 13px; padding: 8px; text-align: center; }
/* 编辑图纸：零件明细缩略图底色与「点开零件设置」弹窗里的 3D 预览一致（同款 slate-900/40），
   深色渐变底会让零件看起来发黑、和弹窗里差很多 */
.part-thumb.thumb-flat { background: #f1f5f9; }
.part-thumb.thumb-flat .snap-ph { color: #64748b; }
.part-meta { padding: 10px 12px; }
.part-name { font-weight: 600; color: #1e293b; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-sub { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.part-id { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 零件明细卡片底部操作区 */
.mc-foot { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.mc-dot {
  width: 22px; height: 22px; border-radius: 6px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid rgba(15,23,42,.15);
}
.mc-count { width: 58px; flex: none; padding: 4px 6px; font-size: 13px; }

/* 链接点（connect）编辑列表 */
.conn-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.conn-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid rgba(15,23,42,.08); border-radius: 10px; background: #fff; cursor: pointer;
}
.conn-row:hover { border-color: rgba(99,102,241,.4); }
.conn-row.sel { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(99,102,241,.18); }
.conn-idx { width: 28px; flex: none; color: #94a3b8; font-size: 12px; text-align: center; }
.conn-sel { flex: none; padding: 3px 6px; font-size: 13px; }
.conn-sel.d-type { width: 84px; }
.conn-sel.d-gender { width: 70px; }
.conn-sel.d-dir { width: 90px; }
.conn-dir { flex: none; width: 112px; padding: 3px 6px; font-size: 13px; }
.conn-num { flex: none; width: 66px; padding: 3px 6px; font-size: 13px; }

/* 链接点：旋转限位（行内展开面板） */
.conn-item { border-radius: 10px; }
.conn-lim-btn { flex: none; }
.conn-lim-btn.on { color: #0284c7; border-color: rgba(2,132,199,.45); background: rgba(2,132,199,.08); }
.conn-limit {
  margin: 2px 0 8px 24px; padding: 7px 9px; border-radius: 10px;
  background: #f8fafc; border: 1px solid #e6ecf3;
}
.conn-item.sel .conn-limit { background: #f5f9ff; border-color: #dbe8fb; }
.lim-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: nowrap; }
.lim-row:last-child { margin-bottom: 0; }
.lim-lb { flex: none; font-size: 12px; color: #64748b; white-space: nowrap; }
.lim-del { flex: none; }
/* 注意：全局有 `.input, select.input { width:100% }`，其中 select.input 的权重是 (0,1,1)，
   单写 .lim-axis (0,1,0) 会被压掉，所以这里用 .conn-limit .lim-axis (0,2,0) 提高权重。
   控件用 flex:1 平均分配整行剩余宽度。 */
.conn-limit .lim-axis { flex: 1 1 0; width: auto; min-width: 56px; padding: 3px 2px 3px 6px; font-size: 12px; }
.conn-limit .lim-num { flex: 1 1 0; width: auto; min-width: 60px; padding: 3px 6px; font-size: 12px; }
.lim-tilde, .lim-deg { color: #94a3b8; font-size: 12px; flex: none; }
.conn-h { flex: none; }
.conn-h.d-type { width: 84px; }
.conn-h.d-gender { width: 70px; }
.conn-h.d-pos { width: 210px; }
.conn-h.d-dir { width: 112px; }

/* 乐高常用颜色色块选择 */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.color-sw { cursor: pointer; text-align: center; }
.color-sw .sw-box {
  width: 32px; height: 32px; margin: 0 auto; border-radius: 8px; border: 2px solid rgba(15,23,42,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.color-sw:hover .sw-box { transform: translateY(-2px); }
.color-sw.sel .sw-box { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.color-sw .sw-name { font-size: 11px; color: #64748b; margin-top: 4px; }

/* 大号弹窗（3D 预览）：尽量占满视口 */
#modal > div.modal-xl {
  width: fit-content !important;   /* 按内容宽度自适应（贴合正方形画布），不再写死 94vw */
  max-width: 94vw !important;      /* 窄屏时不超出视口 */
  max-height: 94vh;
  overflow-y: auto;
}
/* 大预览的 3D 画布保持正方形：宽高取同一值，并水平居中 */
#modal > div.modal-xl .three-canvas {
  width: min(70vh, 86vw);
  height: min(70vh, 86vw);
  margin: 0 auto;
  border-radius: 12px;
}