:root {
  --bg-0: #070a18;
  --bg-1: #0d1024;
  --panel: rgba(20, 24, 46, 0.82);
  --panel-solid: #161a32;
  --line: rgba(140, 160, 255, 0.16);
  --line-strong: rgba(150, 175, 255, 0.35);
  --text: #eef1ff;
  --text-dim: #9aa3c7;
  --accent: #ff6f3c;
  --accent-2: #ffcf5c;
  --cyan: #4de1f0;
  --violet: #8b6cff;
  --good: #46e08a;
  --radius: 18px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1a1f45 0%, #0b0e1e 55%, #050711 100%);
  color: var(--text);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
}

#app { position: relative; width: 100%; height: 100%; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ---------- 顶部栏 ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 62px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; z-index: 30;
  background: linear-gradient(180deg, rgba(7,10,24,.92) 0%, rgba(7,10,24,.55) 65%, transparent 100%);
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }

.brand { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 11px; color: var(--accent-2);
  background: linear-gradient(145deg, rgba(255,111,60,.35), rgba(139,108,255,.35));
  border: 1px solid rgba(255,207,92,.35);
  display: grid; place-items: center;
  box-shadow: 0 0 22px rgba(255,111,60,.28);
}
.logo-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 16px; letter-spacing: .12em; display: flex; align-items: center; gap: 6px; }
/* 版本号徽章：商业发布后，用户反馈问题时能一眼报出版本 */
.ver {
  font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 5px; color: #ffd77a;
  background: rgba(255,207,92,.14); border: 1px solid rgba(255,207,92,.28);
}
.brand-text span { font-size: 10.5px; color: var(--text-dim); letter-spacing: .18em; }

.tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(14, 18, 38, .78); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tab {
  border: 0; background: transparent; color: var(--text-dim);
  font-family: inherit; font-size: 13px; padding: 7px 20px; border-radius: 999px;
  cursor: pointer; transition: all .22s ease; letter-spacing: .06em;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: #1b1206; font-weight: 700;
  background: linear-gradient(135deg, var(--accent-2), #ff9a3c);
  box-shadow: 0 4px 16px rgba(255,154,60,.35);
}

.top-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  background: rgba(20, 25, 48, .8); border: 1px solid var(--line); color: var(--text-dim);
  display: grid; place-items: center; transition: all .2s ease;
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: rgba(38, 45, 80, .9); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.96); }
.icon-btn.on { color: var(--accent-2); border-color: rgba(255,207,92,.45); }
.icon-btn.danger:hover { color: #ff7b7b; border-color: rgba(255,110,110,.5); }
.icon-btn:disabled { opacity: .32; cursor: default; transform: none; }
/* 浏览器不支持语音时：半透明 + 划一道斜线，一眼看出这个按钮用不了 */
.icon-btn.unsupported { opacity: .38; cursor: default; position: relative; }
.icon-btn.unsupported::after {
  content: ''; position: absolute; width: 26px; height: 1.5px; border-radius: 2px;
  background: var(--text-dim); transform: rotate(-45deg);
}
.icon-btn.unsupported:hover { transform: none; background: rgba(20, 25, 48, .8); border-color: var(--line); }

/* ---------- 侧栏 ---------- */
aside {
  position: absolute; top: 74px; width: var(--leftbar-w, 236px); z-index: 20;
  display: flex; flex-direction: column; gap: 10px;
  /* 用确定高度而不是 max-height：只有高度定了，内部 .panel 的 flex 分配
     才能生效，形状网格才能真正"自己滚"，缩略图不会被挤到面板外点不到。 */
  height: calc(100% - 74px - 118px);
  overflow-y: auto; padding-bottom: 6px;
  scrollbar-width: none;
}
aside::-webkit-scrollbar { display: none; }
#leftbar { left: 16px; }
#rightbar { right: 16px; width: 178px; }

/* 左面板右缘的拖拽调宽手柄：把"形状窗口"拉宽一点，装饰件/长名字就排得开 */
.aside-resizer {
  position: absolute; top: 74px; width: 12px; z-index: 22;
  height: calc(100% - 74px - 118px);
  cursor: col-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.aside-resizer::after {
  content: ''; width: 3px; height: 46px; border-radius: 3px;
  background: rgba(255,255,255,.14); transition: background .18s, height .18s;
}
.aside-resizer:hover::after, .aside-resizer.dragging::after {
  background: rgba(255,207,92,.75); height: 66px;
}

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
}
.panel h3 {
  font-size: 10.5px; font-weight: 600; letter-spacing: .22em; color: var(--text-dim);
  margin-bottom: 10px; text-transform: uppercase;
}

.shape-search { position: relative; margin-bottom: 8px; }
.shape-search input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 11.5px;
  padding: 6px 24px 6px 9px; border-radius: 9px; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  outline: none; transition: border-color .18s, background .18s;
}
.shape-search input::placeholder { color: rgba(233,238,248,.38); }
.shape-search input:focus { border-color: rgba(255,207,92,.5); background: rgba(255,255,255,.08); }
.shape-search input::-webkit-search-cancel-button { display: none; }
.ss-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; line-height: 1; padding: 0; cursor: pointer;
  border-radius: 50%; font-size: 10px; color: var(--text-dim);
  background: rgba(255,255,255,.09); border: none;
}
.ss-clear:hover { color: var(--text); background: rgba(255,255,255,.18); }
.shape-empty { margin: 6px 2px 2px; font-size: 11.5px; color: var(--text-dim); line-height: 1.6; }
.cat-row.hidden { display: none; }
/* 分类条：必须完整换行、全部可见可点（右侧分类被面板右边界裁掉 = 点不到「装饰」，
   这是装饰件放不进去的直接原因之一）。所以这里不设 max-height、不做横向滚动，
   分类区按内容自然换行；把「滚动」交给下方的形状网格，网格自己滚就不会被挤出视野。 */
.cat-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
  flex: 0 0 auto;
}
.cat-chip {
  flex: 0 1 auto; min-width: 0; white-space: nowrap;
  font-family: inherit; font-size: 10.5px; padding: 3px 7px;
  cursor: pointer; border-radius: 7px; color: var(--text-dim); letter-spacing: .04em;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  transition: all .18s;
}
.cat-chip:hover { color: var(--text); background: rgba(255,255,255,.09); }
.cat-chip.active { color: var(--accent-2); border-color: rgba(255,207,92,.45); background: rgba(255,207,92,.1); }

/* 列宽自适应：面板拖宽后一屏能放更多形状，窄了就自动减列，不挤成一团 */
.shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 7px; }

/* 形状面板改成「分类区固定在上 + 网格自己滚」：
   分类再怎么换行都完整可见，网格永远紧贴分类下方、不会被挤出可视区。
   这是 v1.30 的关键修正——此前分类一多就把缩略图顶到面板底部之外。 */
#leftbar > .panel:first-of-type {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
#leftbar > .panel:not(:first-of-type) { flex: 0 0 auto; }
#shapeGrid {
  flex: 1 1 auto; min-height: 92px;
  overflow-y: auto; overflow-x: hidden; align-content: start;
  padding-right: 2px; scrollbar-width: thin;
}
#shapeGrid::-webkit-scrollbar { width: 4px; }
#shapeGrid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 2px; }
.shape-btn {
  position: relative; aspect-ratio: 1; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center; transition: all .18s ease; padding: 3px;
}
.shape-btn canvas { width: 100%; height: 100%; display: block; }
.shape-btn:hover { background: rgba(255,255,255,.09) !important; transform: translateY(-2px); }
.shape-btn.active {
  border-color: var(--accent-2);
  background: linear-gradient(160deg, rgba(255,207,92,.22), rgba(255,111,60,.1)) !important;
  box-shadow: 0 0 0 1px rgba(255,207,92,.4), 0 6px 18px rgba(255,140,60,.22);
}
.shape-btn .lbl {
  position: absolute; bottom: 1px; left: 0; right: 0; text-align: center;
  font-size: 9.5px; font-weight: 600; color: #e9eef8; opacity: .82; transition: opacity .2s;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.5);
}
.shape-btn:hover .lbl { opacity: 1; }
/* 可调参数的零件角标：一眼看出这个零件能调齿数/节数 */
.shape-btn .pbadge {
  position: absolute; top: 2px; right: 3px; font-size: 10px; font-style: normal;
  line-height: 1; color: #ffd77a; text-shadow: 0 0 7px rgba(255,215,122,.9);
  pointer-events: none; opacity: .95;
}

.color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.color-btn {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  position: relative;
}
.color-btn:hover { transform: scale(1.14); }
.color-btn.active {
  border-color: #fff; transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 0 14px currentColor;
}

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool {
  cursor: pointer; border-radius: 12px; padding: 8px 4px 6px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  color: var(--text-dim); display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all .18s ease; font-family: inherit;
}
.tool svg { width: 19px; height: 19px; }
.tool span { font-size: 11px; letter-spacing: .08em; }
.tool:hover { background: rgba(255,255,255,.08); color: var(--text); }
.tool.active {
  color: #16100a; border-color: transparent; font-weight: 700;
  background: linear-gradient(140deg, var(--cyan), #4db8f0);
  box-shadow: 0 6px 18px rgba(77,225,240,.3);
}
.tool[data-tool="erase"].active { background: linear-gradient(140deg, #ff8b7b, #ff5470); color: #fff; box-shadow: 0 6px 18px rgba(255,84,112,.32); }
.tool[data-tool="paint"].active { background: linear-gradient(140deg, #ffd166, #ff9a3c); }
.tool[data-tool="rotate"].active { background: linear-gradient(140deg, #a78bfa, #7c5cff); color: #fff; }

.view-row { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  flex: 1 1 46%; font-family: inherit; font-size: 11px; padding: 6px 4px; cursor: pointer;
  border-radius: 9px; color: var(--text-dim); letter-spacing: .04em;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  transition: all .18s;
}
.chip:hover { color: var(--text); background: rgba(255,255,255,.09); }
.chip.active { color: var(--accent-2); border-color: rgba(255,207,92,.45); background: rgba(255,207,92,.1); }

.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12px; color: var(--text-dim); }
.switch { position: relative; width: 36px; height: 20px; cursor: pointer; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.12);
  transition: background .22s;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #cfd6f5; transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .22s;
}
.switch input:checked + i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.switch input:checked + i::after { transform: translateX(16px); background: #fff; }

.stat-panel { display: flex; gap: 8px; }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.stat b { font-size: 19px; font-weight: 800; letter-spacing: .02em; background: linear-gradient(120deg, #fff, #ffd77a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font-size: 10px; color: var(--text-dim); letter-spacing: .1em; }

/* ---------- 底部 dock ---------- */
#dock {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 25;
}
.dock-group {
  display: flex; gap: 4px; padding: 6px;
  border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.dock-btn {
  min-width: 62px; cursor: pointer; border: 0; border-radius: 13px; padding: 7px 10px;
  background: transparent; color: var(--text-dim); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all .16s ease;
}
.dock-btn svg { width: 20px; height: 20px; }
.dock-btn span { font-size: 10.5px; letter-spacing: .1em; }
.dock-btn:hover { background: rgba(255,255,255,.08); color: var(--text); }
.dock-btn:active { transform: scale(.94); }
.dock-btn.flash { background: rgba(255,207,92,.2); color: var(--accent-2); }

.dock-hint {
  font-size: 11.5px; color: var(--text-dim); letter-spacing: .06em;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(10,13,28,.6); border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px); white-space: nowrap;
}

/* ---------- 全屏面板 ---------- */
.full-panel {
  position: absolute; inset: 74px 16px 16px; z-index: 40;
  border-radius: 24px; padding: 26px 30px;
  background: linear-gradient(165deg, rgba(20,25,50,.96), rgba(10,13,28,.97));
  border: 1px solid var(--line); backdrop-filter: blur(26px);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  overflow-y: auto;
  animation: panelIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.99); } }
.full-panel.hidden { display: none; }
.fp-head h2 { font-size: 22px; letter-spacing: .04em; margin-bottom: 6px; }
.fp-head p { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.fp-foot { margin-top: 22px; display: flex; gap: 10px; }
.ghost-btn {
  cursor: pointer; font-family: inherit; font-size: 13px; padding: 10px 22px;
  border-radius: 12px; color: var(--text); letter-spacing: .06em;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-strong);
  transition: all .2s;
}
.ghost-btn:hover { background: rgba(255,255,255,.11); border-color: #fff3; transform: translateY(-1px); }

.bp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }

/* ---- 难度筛选条 ---- */
.bp-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bp-chip {
  cursor: pointer; font-family: inherit; font-size: 12.5px; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px; border-radius: 999px; color: var(--text-dim);
  background: rgba(255,255,255,.045); border: 1px solid var(--line-strong);
  transition: all .18s;
}
.bp-chip:hover { color: var(--text); background: rgba(255,255,255,.1); transform: translateY(-1px); }
.bp-chip i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: block; }
.bp-chip em {
  font-style: normal; font-size: 10.5px; opacity: .62;
  padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.28);
}
.bp-chip.active {
  color: #0b1022; background: var(--accent-2); border-color: var(--accent-2);
  box-shadow: 0 6px 18px rgba(255,207,92,.22);
}
.bp-chip.active i { box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; }
.bp-chip.active em { background: rgba(0,0,0,.16); opacity: .8; }

.bp-card {
  cursor: pointer; border-radius: 18px; overflow: hidden; position: relative;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  transition: all .25s cubic-bezier(.2,.9,.3,1);
}
.bp-card.hide { display: none; }
.bp-card:hover { transform: translateY(-5px); border-color: rgba(255,207,92,.45); box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,207,92,.2); }
.bp-card img, .bp-card canvas { width: 100%; aspect-ratio: 4/3; display: block; object-fit: cover; background: linear-gradient(160deg,#1b2145,#10132a); }
/* 缩略图未画完时的占位骨架，带一条缓慢扫过的微光 */
.bp-ph { width: 100%; aspect-ratio: 4/3; background: linear-gradient(160deg,#1b2145,#10132a); position: relative; overflow: hidden; }
.bp-ph::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%);
  animation: bpSweep 1.4s linear infinite;
}
@keyframes bpSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.bp-meta { padding: 11px 14px 13px; }
.bp-meta b { font-size: 14.5px; display: block; margin-bottom: 3px; }
.bp-meta span { font-size: 11px; color: var(--text-dim); }
.bp-tag {
  position: absolute; top: 10px; left: 10px; font-size: 10px; padding: 3px 9px;
  border-radius: 999px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); letter-spacing: .08em; color: #fff;
}
.bp-lv {
  position: absolute; top: 10px; right: 10px; font-size: 10px; padding: 3px 9px;
  border-radius: 999px; background: rgba(6,9,20,.62); border: 1px solid currentColor;
  backdrop-filter: blur(6px); letter-spacing: .1em; font-weight: 600;
}
/* 自检未通过的图纸：明确告诉用户「这张暂时打不开」，而不是点了没反应 */
.bp-card.bp-bad { cursor: not-allowed; opacity: .62; filter: grayscale(.55); }
.bp-card.bp-bad:hover { transform: none; border-color: rgba(255,84,112,.45); box-shadow: none; }
.bp-warn {
  position: absolute; left: 10px; bottom: 62px; font-size: 10px; padding: 3px 9px;
  border-radius: 999px; background: rgba(255,84,112,.16); color: #ff9aad;
  border: 1px solid rgba(255,84,112,.42); letter-spacing: .06em;
}

.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.help-card {
  padding: 18px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}
.help-card b { display: block; font-size: 14px; margin-bottom: 8px; color: var(--accent-2); letter-spacing: .04em; }
.help-card p { font-size: 12.5px; line-height: 1.75; color: var(--text-dim); }

/* ---------- toast / loading ---------- */
.toast {
  position: absolute; left: 50%; top: 84px; transform: translate(-50%, -12px);
  padding: 9px 20px; border-radius: 999px; font-size: 12.5px; letter-spacing: .05em;
  background: rgba(16,20,40,.94); border: 1px solid rgba(255,207,92,.4); color: var(--accent-2);
  opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.2,.9,.3,1); z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

#loading {
  position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: #070a18; color: var(--text-dim); font-size: 12.5px; letter-spacing: .16em;
  transition: opacity .5s;
}
#loading.done { opacity: 0; pointer-events: none; }
.spinner {
  width: 38px; height: 38px; border-radius: 12px;
  border: 2px solid rgba(255,207,92,.18); border-top-color: var(--accent-2);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  aside { width: var(--leftbar-w, 200px); }
  #rightbar { width: 152px; }
  .shape-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
}
@media (max-width: 820px) {
  #topbar { height: 54px; padding: 0 10px; }
  .brand-text span { display: none; }
  .tabs { position: absolute; left: 50%; transform: translateX(-50%); }
  .tab { padding: 6px 12px; font-size: 12px; }
  aside { top: 60px; width: var(--leftbar-w, 172px); height: calc(100% - 60px - 150px); }
  #leftbar { left: 8px; }
  #rightbar { right: 8px; width: 126px; }
  .panel { padding: 9px; border-radius: 14px; }
  .shape-grid { gap: 4px; }
  .color-grid { grid-template-columns: repeat(5, 1fr); }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .view-row .chip { flex: 1 1 100%; }
  #dock { bottom: 12px; }
  .full-panel { inset: 60px 8px 8px; padding: 18px; }
}

/* 补充：底栏高亮文字 */
#dockHint .k { color: #ffd77a; font-weight: 700; }

/* ---------- 触屏 / 平板优化 ---------- */
/* 手指点击热区不小于 40px，避免误触 */
@media (pointer: coarse) {
  .shape-btn { min-height: 40px; }
  .color-swatch { min-width: 30px; min-height: 30px; }
  .tool-btn { min-height: 42px; }
  .chip { min-height: 32px; }
  .btn-round { width: 42px; height: 42px; }
  /* 触屏上隐藏键盘提示，换成手势提示 */
  .kbd-tip { display: none; }
  .touch-tip { display: inline; }
}
.touch-tip { display: none; }

@media (max-width: 820px), (max-height: 560px) {
  body { --ui-scale: .92; }
  #dock { gap: 6px; padding: 6px 10px; }
  #dock .btn-round { width: 34px; height: 34px; }
  #dockHint { font-size: 11px; max-width: 42vw; }
  /* 小屏时侧栏收窄，把中间留给作品区 */
  aside { width: var(--leftbar-w, 148px); }
  #rightbar { width: 104px; }
  .panel-title { font-size: 11px; }
  .shape-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 3px; }
  .color-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-row { font-size: 10px; }
  #versusCard .vs-team { font-size: 10px; }
}

/* 极窄竖屏：左右栏叠到底部抽屉，保证主视口干净 */
@media (max-width: 520px) {
  aside { width: var(--leftbar-w, 124px); height: 46vh; }
  #rightbar { width: 96px; max-height: 46vh; }
  .shape-grid { grid-template-columns: repeat(2, 1fr); }
  .tab { padding: 5px 8px; font-size: 11px; letter-spacing: 0; }
  .brand-text { display: none; }
  .full-panel { inset: 56px 6px 6px; padding: 12px; }
  .bp-grid { grid-template-columns: repeat(2, 1fr); }
}
#dockHint .r {
  display: inline-block; min-width: 15px; text-align: center;
  padding: 0 4px; border-radius: 4px; font-size: 10px; line-height: 15px;
  color: #0b0e1e; background: #8ff6ff; font-weight: 700; vertical-align: 1px;
}
.dock-hint { max-width: 68vw; overflow: hidden; text-overflow: ellipsis; }

/* 顶部按钮禁用态 */
.icon-btn:disabled { opacity: .28; cursor: default; }
.icon-btn:disabled:hover { background: rgba(20, 25, 48, .8); border-color: var(--line); transform: none; }


/* ---------- 作品面板 ---------- */
.ws-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.ws-btn {
  cursor: pointer; text-align: left; padding: 14px 16px; border-radius: 16px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text);
  display: flex; flex-direction: column; gap: 4px; transition: all .2s; font-family: inherit;
}
.ws-btn b { font-size: 14.5px; letter-spacing: .04em; }
.ws-btn span { font-size: 11.5px; color: var(--text-dim); }
.ws-btn:hover { background: rgba(255,255,255,.09); border-color: var(--line-strong); transform: translateY(-2px); }
.ws-btn.primary {
  background: linear-gradient(140deg, rgba(255,207,92,.18), rgba(255,111,60,.1));
  border-color: rgba(255,207,92,.45);
}
.ws-btn.primary b { color: var(--accent-2); }
.ws-btn.danger { border-color: rgba(255,120,120,.35); }
.ws-btn.danger:hover { background: rgba(255,90,90,.14); border-color: rgba(255,120,120,.6); }
/* hidden 属性要压得住 .ws-btn 的 display:flex */
.full-panel [hidden] { display: none !important; }
.ws-sub { font-size: 12px; letter-spacing: .18em; color: var(--text-dim); margin: 4px 0 12px; text-transform: uppercase; }
.ws-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; min-height: 60px; }
.ws-item {
  padding: 14px 16px; border-radius: 16px; position: relative;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.ws-item b { font-size: 14px; }
.ws-item span { font-size: 11px; color: var(--text-dim); }
.ws-item .ws-ops { display: flex; gap: 6px; margin-top: 10px; }
.ws-item button {
  cursor: pointer; font-family: inherit; font-size: 11.5px; padding: 5px 12px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text);
  transition: all .18s;
}
.ws-item button:hover { background: rgba(255,255,255,.14); border-color: var(--line-strong); }
.ws-item button.del:hover { color: #ff8585; border-color: rgba(255,110,110,.5); background: rgba(255,84,112,.12); }
/* 数据损坏的作品：打开按钮直接禁用并标红，别让孩子点了没反应还以为卡了 */
.ws-item button.broken { opacity: .45; cursor: default; color: #ff9b9b; border-color: rgba(255,110,110,.35); }
.ws-item button.broken:hover { background: rgba(255,255,255,.07); border-color: rgba(255,110,110,.35); }

/* 删除待确认状态：点第一下变成醒目的红色，孩子能看出"这次是真的" */
.ws-item button.del.armed {
  color: #fff; background: rgba(255,84,112,.55); border-color: rgba(255,120,120,.8);
  animation: delPulse .9s ease-in-out infinite;
}
@keyframes delPulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } }
.ws-empty { grid-column: 1/-1; text-align: center; color: var(--text-dim); font-size: 12.5px; padding: 28px 0; letter-spacing: .08em; }

/* ---------- 关卡挑战卡 ---------- */
#challengeCard { border-color: rgba(255,207,92,.3); }
.ch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ch-head b { font-size: 13.5px; color: var(--accent-2); }
.ch-head span { font-size: 10.5px; color: var(--text-dim); }
.ch-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 9px; }
.ch-bar i { display: block; height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--accent-2)); transition: width .35s ease; }
.ch-score { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--text-dim); }
.ch-score b { font-size: 20px; color: #fff; font-weight: 800; }
.ch-stars { display: flex; gap: 5px; justify-content: center; margin: 8px 0 10px; }
.ch-stars i {
  width: 18px; height: 18px; background: rgba(255,255,255,.13);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transition: all .3s;
}
.ch-stars i.on { background: linear-gradient(160deg,#ffe08a,#ff9a3c); filter: drop-shadow(0 0 6px rgba(255,190,80,.7)); }
.ch-btn {
  width: 100%; cursor: pointer; font-family: inherit; font-size: 12px; padding: 9px; border-radius: 11px;
  border: 0; font-weight: 700; color: #1a1206; letter-spacing: .05em;
  background: linear-gradient(135deg, var(--accent-2), #ff9a3c);
}
.ch-btn:hover { filter: brightness(1.08); }
.ch-quit {
  width: 100%; margin-top: 6px; cursor: pointer; font-family: inherit; font-size: 11px; padding: 6px;
  border-radius: 9px; background: transparent; border: 1px solid var(--line); color: var(--text-dim);
}
.ch-quit:hover { color: #ff9b9b; border-color: rgba(255,110,110,.4); }

/* ---------- 关卡列表 ---------- */
.lv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lv-card {
  cursor: pointer; border-radius: 18px; padding: 18px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  transition: all .24s cubic-bezier(.2,.9,.3,1); position: relative; overflow: hidden;
}
.lv-card:hover { transform: translateY(-4px); border-color: rgba(255,207,92,.45); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.lv-idx { font-size: 34px; font-weight: 800; line-height: 1; opacity: .18; position: absolute; right: 16px; top: 12px; }
.lv-card b { font-size: 15px; display: block; margin-bottom: 5px; }
.lv-card p { font-size: 11.5px; color: var(--text-dim); line-height: 1.6; margin-bottom: 10px; min-height: 36px; }
.lv-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-meta span { font-size: 10px; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--text-dim); }
.lv-meta span.best { color: var(--accent-2); background: rgba(255,207,92,.14); }

/* ---------- 结算弹窗 ---------- */
.modal {
  position: absolute; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(6,8,20,.72); backdrop-filter: blur(8px);
  animation: fadeIn .25s ease;
}
.modal.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0 } }
.modal-card {
  width: min(420px, 88vw); padding: 26px 26px 22px; border-radius: 24px; text-align: center;
  background: linear-gradient(165deg, #1c2246, #10142c);
  border: 1px solid rgba(255,207,92,.28);
  box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  animation: popIn .38s cubic-bezier(.2,1.3,.4,1);
}
@keyframes popIn { from { transform: scale(.9) translateY(16px); opacity: 0 } }
.rs-stars { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.rs-stars i {
  width: 40px; height: 40px; background: rgba(255,255,255,.12);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.rs-stars i.on {
  background: linear-gradient(160deg,#fff0b8,#ffb43c);
  filter: drop-shadow(0 0 12px rgba(255,190,80,.75));
  animation: starPop .45s backwards cubic-bezier(.2,1.6,.4,1);
}
.rs-stars i.on:nth-child(2) { animation-delay: .14s; }
.rs-stars i.on:nth-child(3) { animation-delay: .28s; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg) } }
.modal-card h2 { font-size: 21px; margin-bottom: 6px; letter-spacing: .03em; }
.modal-card > p { font-size: 12.5px; color: var(--text-dim); margin-bottom: 18px; }
.rs-bars { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.rs-bar { display: grid; grid-template-columns: 62px 1fr 42px; align-items: center; gap: 9px; font-size: 11px; color: var(--text-dim); }
.rs-bar > div { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.rs-bar > div > i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .8s cubic-bezier(.2,.9,.3,1); }
#rsCover { background: linear-gradient(90deg,#4de1f0,#5aa8ff); }
#rsColor { background: linear-gradient(90deg,#ffd166,#ff8a3d); }
#rsClean { background: linear-gradient(90deg,#7dffb3,#2fd47f); }
.rs-bar b { font-size: 11px; color: var(--text); text-align: right; }
.rs-actions { display: flex; gap: 8px; }
.rs-btn {
  flex: 1; cursor: pointer; font-family: inherit; font-size: 12.5px; padding: 11px 6px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); transition: all .2s;
}
.rs-btn:hover { background: rgba(255,255,255,.12); }
.rs-btn.primary { border: 0; font-weight: 700; color: #1a1206; background: linear-gradient(135deg, var(--accent-2), #ff9a3c); }
.rs-btn.primary:hover { filter: brightness(1.08); }

/* ---------- 新手引导 ---------- */
.tutorial {
  position: absolute; inset: 0; z-index: 65; display: grid; place-items: center;
  background: rgba(6,8,20,.78); backdrop-filter: blur(6px);
}
.tutorial.hidden { display: none; }
.tut-card {
  width: min(360px, 86vw); padding: 26px; border-radius: 24px; text-align: center;
  background: linear-gradient(165deg, #1f2650, #12162e);
  border: 1px solid rgba(143,246,255,.3);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.tut-step { font-size: 10px; letter-spacing: .2em; color: var(--cyan); margin-bottom: 10px; }
.tut-icon { font-size: 40px; margin-bottom: 10px; }
.tut-card h3 { font-size: 18px; margin-bottom: 8px; }
.tut-card p { font-size: 12.5px; line-height: 1.8; color: var(--text-dim); min-height: 66px; }
.tut-dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0 18px; }
.tut-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); transition: all .3s; }
.tut-dots i.on { width: 18px; border-radius: 99px; background: var(--cyan); }
.tut-actions { display: flex; gap: 8px; }
.tut-btn {
  flex: 1; cursor: pointer; font-family: inherit; font-size: 12.5px; padding: 10px; border-radius: 12px;
  border: 1px solid var(--line); background: transparent; color: var(--text-dim);
}
.tut-btn.primary { border: 0; font-weight: 700; color: #08161a; background: linear-gradient(135deg, #8ff6ff, #4dc7f0); }
.tut-btn:hover { filter: brightness(1.1); }

/* ---------- WebGL 降级提示 ---------- */
.nowebgl { position: absolute; inset: 0; z-index: 95; display: grid; place-items: center; background: #070a18; padding: 20px; }
.nowebgl.hidden { display: none; }
.nowebgl-card {
  max-width: 460px; padding: 30px; border-radius: 22px; text-align: center;
  background: linear-gradient(165deg, #1a2046, #0e1228); border: 1px solid var(--line);
}
.nowebgl-card h2 { font-size: 18px; margin: 12px 0 10px; }
.nowebgl-card p { font-size: 12.5px; color: var(--text-dim); line-height: 1.8; }
.nowebgl-card ul { text-align: left; margin: 14px auto 0; padding-left: 20px; font-size: 12px; color: var(--text-dim); line-height: 2; }

/* ---------- 双人 ---------- */
.ghost-btn.accent { border-color: rgba(255,207,92,.5); color: var(--accent-2); background: rgba(255,207,92,.1); }
.dock-hint .turn { font-weight: 700; }
.dock-hint .turn.a { color: #ff8a8a; }
.dock-hint .turn.b { color: #7fc4ff; }


/* ---------- 双人比拼卡 ---------- */
.vs-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-bottom: 8px; }
.vs-side { border-radius: 12px; padding: 8px 4px; text-align: center; border: 1px solid var(--line); transition: all .25s; }
.vs-side b { display: block; font-size: 11px; margin-bottom: 2px; }
.vs-side span { font-size: 20px; font-weight: 800; }
.vs-side.a b { color: #ff8a8a; }
.vs-side.b b { color: #7fc4ff; }
.vs-side.a span { color: #ffb0b0; }
.vs-side.b span { color: #a8d4ff; }
.vs-side.active { transform: scale(1.06); box-shadow: 0 0 0 1px currentColor; }
.vs-side.a.active { border-color: rgba(255,138,138,.7); box-shadow: 0 0 14px rgba(255,100,100,.25); }
.vs-side.b.active { border-color: rgba(127,196,255,.7); box-shadow: 0 0 14px rgba(90,160,255,.25); }
.vs-mid { font-size: 10px; color: var(--text-dim); text-align: center; max-width: 52px; line-height: 1.5; }
.vs-tip { font-size: 10.5px; color: var(--text-dim); line-height: 1.6; margin: 6px 0 10px; }

/* ---------- 成就面板 ---------- */
.ach-title { margin: 18px 4px 10px; font-size: 15px; color: #ffd77a; letter-spacing: 1px; }
.ach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; margin-top: 4px;
}
.ach-card {
  position: relative; padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  opacity: .55; filter: grayscale(.7);
  transition: opacity .3s, filter .3s, transform .2s;
}
.ach-card.got {
  opacity: 1; filter: none;
  background: linear-gradient(145deg, rgba(255,207,92,.13), rgba(255,111,60,.08));
  border-color: rgba(255,207,92,.4);
}
.ach-card:hover { transform: translateY(-2px); }
.ach-card .ach-icon { font-size: 26px; display: block; margin-bottom: 6px; }
.ach-card b { font-size: 13px; color: #ffe9c4; }
.ach-card p { margin: 4px 0 6px; font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.5; }
.ach-card i {
  font-style: normal; font-size: 10px; padding: 2px 8px; border-radius: 20px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.5);
}
.ach-card.got i { background: rgba(255,207,92,.2); color: #ffd77a; }
@media (max-width: 520px) {
  .ach-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ach-card { padding: 8px 10px; }
  .ach-card .ach-icon { font-size: 20px; }
}

/* ---------- 作品缩略图 ---------- */
.ws-item { position: relative; padding-right: 8px; }
.ws-thumb {
  width: 100%; height: 76px; object-fit: cover; border-radius: 8px;
  margin-bottom: 6px; display: block;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25);
}
.ch-btn#btnChRef { background: rgba(157,214,255,.14); border-color: rgba(157,214,255,.3); color: #cfe8ff; }

/* 连排按钮占满一行，文字更长 */
.tool-grid .tool-wide { grid-column: 1 / -1; }
.tool-wide span { font-size: 11px; }

/* ================= 关于面板 ================= */
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.about-grid .wide { grid-column: 1 / -1; }
.about-card {
  padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,.035);
}
.about-card h4 { font-size: 13.5px; margin-bottom: 10px; letter-spacing: .06em; color: #ffd77a; }
.about-card p { font-size: 12.5px; line-height: 1.75; color: var(--text); margin-bottom: 6px; }
.about-ver { font-size: 22px !important; font-weight: 800; letter-spacing: .04em; margin: 0 0 2px !important;
  background: linear-gradient(120deg, #fff, #ffd77a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-dim { font-size: 11.5px !important; color: var(--text-dim) !important; }
.about-lead { font-size: 13px !important; font-weight: 600; }
.about-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.about-list li { font-size: 12px; line-height: 1.85; color: var(--text); padding-left: 15px; position: relative; }
.about-list li::before { content: '·'; position: absolute; left: 4px; color: #ffd77a; font-weight: 800; }
.about-license {
  font-size: 10px; line-height: 1.6; color: var(--text-dim); background: rgba(0,0,0,.28);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0;
  max-height: 168px; overflow: auto; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.changelog { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow: auto; padding-right: 6px; }
.cl-item { display: grid; grid-template-columns: 74px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,.09); }
.cl-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-ver { font-size: 12px; font-weight: 800; color: #ffd77a; letter-spacing: .04em; }
.cl-ver span { display: block; font-size: 10px; color: var(--text-dim); font-weight: 400; letter-spacing: 0; }
.cl-note { font-size: 12px; line-height: 1.8; color: var(--text); }
.cl-note b { color: #9ff6ff; font-weight: 600; }

/* ================= 帮助中心分区 ================= */
.help-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.help-tab {
  cursor: pointer; font-family: inherit; font-size: 12.5px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text-dim); transition: all .2s;
}
.help-tab:hover { background: rgba(255,255,255,.1); color: var(--text); }
.help-tab.active { color: #1a1206; font-weight: 700; border-color: transparent; background: linear-gradient(135deg, var(--accent-2), #ff9a3c); }
.help-sec.hidden { display: none; }
.help-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; padding-left: 2px; }

.keys-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.keys-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.keys-row .k {
  min-width: 62px; text-align: center; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,.1); border: 1px solid var(--line-strong); color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.keys-row .d { color: var(--text-dim); }

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); overflow: hidden; }
.faq-q {
  cursor: pointer; font-family: inherit; width: 100%; text-align: left; font-size: 13px; font-weight: 600;
  padding: 12px 16px; background: none; border: 0; color: var(--text); display: flex; justify-content: space-between; gap: 12px;
}
.faq-q::after { content: '+'; color: #ffd77a; font-size: 16px; line-height: 1; flex: none; }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a { display: none; font-size: 12.5px; line-height: 1.8; color: var(--text-dim); padding: 0 16px 14px; }
.faq-item.open .faq-a { display: block; }
.parent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

/* ================= 统计面板工具 ================= */
.stat-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stat-tools .chip { flex: 1; min-width: 92px; text-align: center; font-size: 11px; padding: 6px 8px; }
.stat-tools .chip.active { color: #1a1206; border-color: transparent; background: linear-gradient(135deg, var(--accent-2), #ff9a3c); font-weight: 700; }

/* ================= 信息弹窗（零件清单等） ================= */
.info-card { width: min(520px, 90vw); text-align: left; max-height: 82vh; display: flex; flex-direction: column; }
.info-card h2 { text-align: center; }
.info-desc { text-align: center; font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; }
.info-body { overflow: auto; margin-bottom: 18px; flex: 1; }
.parts-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 7px 2px; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: 12.5px; }
.parts-row .pname { display: flex; align-items: center; gap: 8px; }
.parts-row .pbar { width: 90px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.parts-row .pbar i { display: block; height: 100%; background: linear-gradient(90deg,#4de1f0,#5aa8ff); }
.parts-row .pnum { font-weight: 700; min-width: 42px; text-align: right; }
.parts-total { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.info-ok { text-align: center; font-size: 13px; padding: 20px 0; color: #7dffb3; }
.info-warn { font-size: 12.5px; line-height: 1.8; color: var(--text-dim); }

/* ================= 无障碍 ================= */
/* 键盘操作时让焦点清晰可见（鼠标点击不会出现难看的框） */
:focus-visible { outline: 2px solid #ffd77a; outline-offset: 2px; border-radius: 6px; }
button:focus-visible, .chip:focus-visible, .help-tab:focus-visible { outline-offset: 3px; }

/* 系统开启「减少动态效果」时，关掉装饰性动画，避免眩晕/不适 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .bp-ph::after { display: none; }
  .ws-item button.del.armed { animation: none; }
}

/* ===================== 机械动力面板 ===================== */
.panel-tip { font-size: 10.5px; color: var(--text-dim); line-height: 1.6; margin: 6px 0 0; }
#runSpeed { width: 110px; accent-color: #9ff6ff; }
#btnRunStop { border-color: rgba(159,246,255,.5); color: #9ff6ff; }

/* ===================== 装配台 ===================== */
#xformPanel {
  position: fixed; left: 14px; bottom: 96px; z-index: 60;
  width: 300px; padding: 12px 14px 10px;
  background: rgba(13,17,38,.92); border: 1px solid rgba(159,246,255,.35);
  border-radius: 16px; backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  animation: xfIn .18s cubic-bezier(.2,.9,.3,1);
}
@keyframes xfIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
#xformPanel.hidden { display: none; }
.xf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.xf-head b { font-size: 13.5px; color: #9ff6ff; }
#xfClose {
  width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: var(--text-dim); cursor: pointer; font-size: 11px;
}
#xfClose:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.xf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.xf-row > span { width: 32px; font-size: 11px; color: var(--text-dim); flex: none; }
.xf-row input[type="range"] { flex: 1; min-width: 0; accent-color: #9ff6ff; }
#xfScaleV { font-size: 11px; color: #ffd77a; width: 42px; text-align: right; flex: none; }
.xf-btns { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.xf-btns button {
  flex: 1; min-width: 0; height: 24px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  color: #e8f2ff; font-size: 10.5px; padding: 0;
}
.xf-btns button:hover { border-color: rgba(159,246,255,.5); color: #9ff6ff; }
.xf-btns button:active { transform: scale(.94); }
.xf-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
#xfReset {
  height: 24px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-size: 11px;
  border: 1px solid rgba(255,207,92,.4); background: rgba(255,207,92,.1); color: #ffd77a;
}
#xfReset:hover { background: rgba(255,207,92,.2); }
.xf-foot span { font-size: 10px; color: var(--text-dim); }
/* 装配台「参数」区：齿数 / 节数 / 销距…… */
#xfParams { margin: 2px 0 8px; padding: 8px 8px 4px; border-radius: 10px; background: rgba(159,246,255,.07); border: 1px dashed rgba(159,246,255,.3); }
#xfParams.hidden { display: none; }
.xf-param-title { font-size: 10px; color: #9ff6ff; margin-bottom: 6px; letter-spacing: .5px; }
.xf-param { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.xf-param > span { width: 44px; font-size: 11px; color: var(--text-dim); flex: none; }
.xf-param input[type="range"] { flex: 1; min-width: 0; accent-color: #ffd77a; }
.xf-param b { font-size: 11px; color: #ffd77a; min-width: 56px; text-align: right; flex: none; }
@media (max-width: 760px) {
  #xformPanel { left: 8px; right: 8px; width: auto; bottom: 84px; }
}

/* ---------- v1.26 图纸选中态 / 当前图纸徽标 / 选择信息卡 ---------- */
/* 图纸页：点开过的那张保持高亮，翻回图纸页能一眼看出「现在搭的是哪张」 */
.bp-card.bp-active {
  border-color: rgba(255,207,92,.85);
  box-shadow: 0 0 0 2px rgba(255,207,92,.45), 0 18px 40px rgba(0,0,0,.45);
  background: rgba(255,207,92,.07);
}
.bp-card.bp-active::after {
  content: '✓ 正在搭建';
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-size: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,207,92,.92); color: #241a00; font-weight: 700; letter-spacing: .04em;
}
.bp-card.bp-active .bp-meta b { color: var(--accent-2); }

/* 搭建页顶部：当前图纸名称（可一键退出该图纸，回到自由创作） */
.bp-badge {
  position: absolute; left: 50%; top: 72px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 26;
  padding: 6px 8px 6px 14px; border-radius: 999px; pointer-events: auto;
  background: rgba(16,20,40,.9); border: 1px solid rgba(255,207,92,.45);
  color: var(--accent-2); font-size: 12.5px; letter-spacing: .04em;
  box-shadow: 0 10px 26px rgba(0,0,0,.42); backdrop-filter: blur(8px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.9,.3,1);
}
.bp-badge.hidden { display: none; }
.bp-badge b { font-weight: 600; color: #fff; }
.bp-badge i { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.bp-badge button {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; flex: none;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  color: var(--text-dim); font-size: 12px; line-height: 1;
}
.bp-badge button:hover { color: #fff; border-color: rgba(255,255,255,.4); }

/* 选择模式：选中零件的信息卡（点击后一直显示名称，不再一闪而过） */
.sel-info {
  position: absolute; left: 18px; top: 76px; z-index: 26; min-width: 190px; max-width: 260px;
  padding: 11px 13px 12px; border-radius: 14px; pointer-events: none;
  background: rgba(12,18,34,.92); border: 1px solid rgba(107,255,158,.42);
  box-shadow: 0 14px 32px rgba(0,0,0,.5); backdrop-filter: blur(8px);
}
.sel-info.hidden { display: none; }
.sel-info .si-name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: #d8ffe6; }
.sel-info .si-name em { font-style: normal; font-size: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(107,255,158,.16); color: #6bff9e; font-weight: 600; }
.sel-info .si-role { margin-top: 5px; font-size: 11px; color: var(--text-dim); }
.sel-info .si-params { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.sel-info .si-params span { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.07); color: #cfd8ff; }
.sel-info .si-pos { margin-top: 7px; font-size: 10px; color: #7f8ab0; letter-spacing: .04em; }

/* ---------- 自定义形状工作台（v1.28） ---------- */
.vox-wrap { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.vox-left { flex: 1 1 340px; min-width: 300px; }
.vox-right { flex: 0 0 300px; display: flex; flex-direction: column; gap: 12px; }
.vox-layers { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.vox-layer {
  cursor: pointer; font-family: inherit; font-size: 12px; padding: 5px 10px; border-radius: 8px;
  color: var(--text-dim); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: all .16s;
}
.vox-layer:hover { color: var(--text); background: rgba(255,255,255,.09); }
.vox-layer.active { color: var(--accent-2); border-color: rgba(255,207,92,.45); background: rgba(255,207,92,.12); }
.vox-layer i { font-style: normal; opacity: .55; font-size: 10px; margin-left: 3px; }
.vox-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  width: min(100%, 340px); aspect-ratio: 1; padding: 8px; border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.01)),
    repeating-linear-gradient(0deg, transparent 0 15.6%, rgba(255,255,255,.04) 15.6% 16.2%),
    repeating-linear-gradient(90deg, transparent 0 15.6%, rgba(255,255,255,.04) 15.6% 16.2%);
  border: 1px solid var(--line);
}
.vox-cell {
  border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03); transition: all .12s; position: relative;
}
.vox-cell:hover { background: rgba(255,207,92,.18); border-color: rgba(255,207,92,.4); }
.vox-cell.on {
  background: linear-gradient(150deg, rgba(255,207,92,.85), rgba(255,140,60,.7));
  border-color: rgba(255,207,92,.9); box-shadow: 0 2px 10px rgba(255,150,60,.3);
}
.vox-cell.below::after {
  content: ''; position: absolute; inset: 34%; border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.vox-tip { margin-top: 10px; font-size: 11.5px; color: var(--text-dim); }
#voxPreview {
  width: 100%; aspect-ratio: 6 / 5; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(70,90,160,.35), rgba(12,16,34,.6) 70%);
  border: 1px solid var(--line);
}
.vox-name { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.vox-name input {
  flex: 1; font-family: inherit; font-size: 13px; padding: 7px 10px; border-radius: 9px;
  color: var(--text); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); outline: none;
}
.vox-name input:focus { border-color: rgba(255,207,92,.5); }
/* 形状面板里的"新建"磁贴 */
.shape-btn.add {
  display: grid; place-items: center; color: var(--accent-2); font-size: 24px; font-weight: 300;
  background: rgba(255,207,92,.07) !important; border: 1px dashed rgba(255,207,92,.4);
}
.shape-btn.add .lbl { font-size: 9.5px; color: var(--accent-2); }
.shape-btn .edit-badge {
  position: absolute; top: 1px; left: 2px; font-size: 9px; line-height: 1;
  color: #9fd8ff; text-shadow: 0 0 6px rgba(120,190,255,.9); pointer-events: none;
}

/* ===== 存为形状：主平台多选后打包成一块新积木 ===== */
.pick-bar{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;z-index:60;
  padding:10px 12px;border-radius:14px;
  background:rgba(18,24,48,.94);border:1px solid rgba(120,160,255,.28);
  box-shadow:0 10px 32px rgba(0,0,0,.45);backdrop-filter:blur(8px);
}
.pick-bar[hidden]{display:none}
.pick-count{color:#9fe8ff;font-size:13px;font-weight:700;min-width:74px;text-align:center}
.pick-name{
  width:150px;padding:7px 10px;border-radius:9px;font-size:13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(150,180,255,.28);color:#e8f2ff;
}
.pick-name::placeholder{color:#7d8db3}
.pick-btn{
  padding:7px 13px;border-radius:9px;font-size:13px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(150,180,255,.24);color:#dbe7ff;
}
.pick-btn:hover{background:rgba(255,255,255,.14)}
.pick-btn.primary{background:#3b82f6;border-color:#60a5fa;color:#fff;font-weight:700}
.pick-btn.primary:hover{background:#4f8ef7}
.pick-btn:disabled{opacity:.45;cursor:not-allowed}

/* 装饰件图标：水彩贴图直接用原图，等比缩放居中 */
.shape-btn img.deco-ico {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 底部多留一点：装饰件名字标签贴在底边，图标若顶到最底会被文字压住一截 */
  padding: 5% 12% 20%;
  box-sizing: border-box;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3));
  pointer-events: none;
  user-select: none;
}

/* ---------- 悬停放大预览（v1.31）：形状按钮上停一下，在面板右侧放大展示 ---------- */
#shapePreview {
  position: fixed; z-index: 60;
  width: 232px; padding: 10px 10px 8px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(28,33,68,.96), rgba(18,22,48,.96));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 42px rgba(0,0,0,.5), 0 0 0 1px rgba(255,207,92,.18);
  pointer-events: none;             /* 纯展示：鼠标可以"穿过"它落到搭建台上 */
  transition: opacity .14s;
}
#shapePreview canvas, #shapePreview img {
  width: 212px; height: 212px; display: block; margin: 0 auto;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(255,255,255,.02) 70%);
  object-fit: contain;
}
#shapePreview .sp-name {
  margin-top: 7px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--text);
  letter-spacing: .03em;
}