/* ==========================================================================
   3D 打印抽屉收纳盒设计器 —— 工具自身样式
   颜色全部指向站点 token（assets/css/style.css 的 :root / [data-theme="dark"]）。
   站点 token 覆盖不到的（危险/警告/浮层玻璃/视口底色）在 .page-tool 上另起一组 --t-*，
   深色下整体覆盖一次，不用逐条改规则。
   ========================================================================== */

body.page-tool {
  --t-focus-ring: rgba(37, 99, 235, .16);
  --t-viewport-bg: #767b82;
  --t-swatch-ring: #d8dade;
  --t-btn-hover-line: #c9ccd0;
  --t-danger-bg: #fbeceb;
  --t-danger-line: #eec7c3;
  --t-danger-fg: #b03a34;
  --t-danger-solid: rgba(214, 87, 77, .92);
  --t-warn-bg: #fdf3e0;
  --t-warn-fg: #8a6420;
  --t-glass: rgba(255, 255, 255, .88);
  --t-glass-line: rgba(0, 0, 0, .07);
  --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, .07);
  --t-shadow-md: 0 6px 18px rgba(0, 0, 0, .09);
  --t-scrollbar: rgba(0, 0, 0, .18);
}

[data-theme="dark"] body.page-tool {
  --t-focus-ring: rgba(107, 156, 255, .24);
  --t-viewport-bg: #0b1120;
  --t-swatch-ring: #3a4763;
  --t-btn-hover-line: #4a5a7d;
  --t-danger-bg: rgba(214, 87, 77, .14);
  --t-danger-line: rgba(214, 87, 77, .38);
  --t-danger-fg: #ff9a90;
  --t-warn-bg: rgba(224, 180, 92, .14);
  --t-warn-fg: #e8c07a;
  --t-glass: rgba(19, 29, 51, .9);
  --t-glass-line: rgba(255, 255, 255, .1);
  --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --t-shadow-md: 0 6px 18px rgba(0, 0, 0, .45);
  --t-scrollbar: rgba(255, 255, 255, .22);
}

/* ---------- 页面骨架 ----------
   桌面端让 header 按自身高度自然占位、工具区吃满剩余视口。
   用 flex 而不是 calc(100dvh - var(--header-h))：--header-h 只是 header 的内容高，
   站点 header 还压着 1px 下边框（style.css 的 .site-header），照 --header-h 去减
   会多出 1px 文档高度，鼠标滚轮一滚整页就跳 1px。flex 取的是真实占位，改 header 也不会失配。
   移动端仍在文件末尾用 calc + vh 兜底（老浏览器不认 dvh 会把整条声明丢弃）。

   注意这些高度是必须的，不是外观选择：#viewport 一旦没有确定高度，
   它的高度就取决于里面 canvas 的高度，而工具的 resize 又把 canvas 高度设成
   #viewport.clientHeight，两者会互相喂养、逐帧变大。 */
body.page-tool { overflow: hidden; }
body.page-tool #app { display: flex; width: 100%; }
@media (min-width:900px){
  body.page-tool{display:flex;flex-direction:column;height:100vh;height:100dvh;}
  body.page-tool .site-header{flex:0 0 auto;}
  body.page-tool #app{flex:1 1 auto;min-height:0;}
}

/* ---------- 控制面板 ---------- */
#panel{flex:0 0 330px;max-width:350px;background:var(--card-bg);border-right:1px solid var(--line);overflow-y:auto;overflow-x:hidden;padding:16px 20px 26px;}
#panel header h1{font-size:19px;margin:0 0 2px;color:var(--text);}
#panel header .sub{font-size:12px;color:var(--text-3);margin:0 0 12px;}
.group{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:13px;}
.group>h2{font-size:12px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin:0 0 10px;display:flex;align-items:center;gap:6px;}
.group>h2 .step{color:var(--accent);}
.field{margin-bottom:9px;}
.field:last-child{margin-bottom:0;}
.field>label{display:block;font-size:12.5px;color:var(--text-2);margin-bottom:3px;overflow-wrap:anywhere;}
.snap-label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);margin-top:8px;cursor:pointer;}
.inputwrap{display:flex;align-items:stretch;}
.inputwrap input{flex:1;min-width:0;font-size:15px;font-variant-numeric:tabular-nums;padding:7px 9px;border:1px solid var(--line);border-radius:10px;outline:none;background:var(--card-bg);color:var(--text);}
.inputwrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--t-focus-ring);}
.inputwrap .unit{display:flex;align-items:center;padding:0 9px;margin-left:6px;font-size:12px;color:var(--text-3);background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;flex:none;}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:100%;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:100%;}
.grid3 .field>label{font-size:11.5px;}
.grid2>*,.grid3>*,.field,.inputwrap,.swatches,.btns,.seg{min-width:0;max-width:100%;}
.hint{font-size:11.5px;color:var(--text-3);line-height:1.55;margin:6px 0 0;overflow-wrap:anywhere;}
/* 原样式没有这条：加粗的说明文字沿用 --text-3 在深色下对比度偏低。 */
.hint b{color:var(--text-2);}

.seg{display:flex;background:var(--bg-alt);border-radius:10px;padding:3px;}
.seg button{flex:1;border:0;background:transparent;padding:8px 4px;border-radius:8px;font:inherit;font-size:13px;color:var(--text-2);cursor:pointer;transition:.15s;}
.seg button.is-active{background:var(--card-bg);color:var(--accent);font-weight:600;box-shadow:var(--t-shadow-sm);}

.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--card-bg);box-shadow:0 0 0 1px var(--t-swatch-ring);cursor:pointer;transition:.12s;flex:none;}
/* 触屏没有真正的 hover：点一下会「粘」在悬停态。位移只在真有指针的设备上启用。 */
@media (hover: hover) {
  .sw:hover{transform:scale(1.08);}
}
.sw.is-active{box-shadow:0 0 0 2px var(--text);transform:scale(1.12);}

.btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
button.btn{border:1px solid var(--line);background:var(--bg-alt);color:var(--text-2);font:inherit;font-size:13px;padding:8px 12px;border-radius:999px;cursor:pointer;transition:.12s;flex:1;min-width:0;}
button.btn:hover{border-color:var(--t-btn-hover-line);background:var(--card-bg);color:var(--text);}
/* 实心蓝底用 --accent-solid 而不是 --accent：深色下 --accent 会提亮，白字就糊了。
   站点 style.css 对这两个 token 的分工有同样的说明。 */
button.btn.primary{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff;font-weight:600;}
button.btn.primary:hover{background:var(--accent-solid-hover);border-color:var(--accent-solid-hover);}
button.btn.danger{background:var(--t-danger-bg);border-color:var(--t-danger-line);color:var(--t-danger-fg);}
button.btn[disabled]{opacity:.45;cursor:not-allowed;}

#result{font-size:12.5px;color:var(--text-2);}
#result .row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);}
#result .row:last-child{border-bottom:0;}
#result .row b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);}
#warn{display:none;margin-top:10px;padding:8px 10px;border-radius:8px;background:var(--t-warn-bg);color:var(--t-warn-fg);font-size:11.5px;line-height:1.5;}
#warn.show{display:block;}

/* ---------- 3D 视口 ---------- */
#viewport{flex:1;min-width:0;position:relative;overflow:hidden;background:var(--t-viewport-bg);}
#viewport canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block;touch-action:none;}
.ov{position:absolute;z-index:2;pointer-events:none;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;}
#ovtl{top:12px;left:12px;display:flex;gap:8px;flex-wrap:wrap;}
.chip{background:var(--t-glass);backdrop-filter:blur(4px);border:1px solid var(--t-glass-line);border-radius:20px;padding:5px 11px;font-size:12px;color:var(--text);box-shadow:var(--t-shadow-sm);}
.chip b{color:var(--accent);font-weight:700;}
.chip.warn{background:var(--t-danger-solid);color:#fff;border-color:var(--t-danger-solid);}
#ovbl{bottom:12px;left:50%;transform:translateX(-50%);font-size:11.5px;color:var(--text-3);background:var(--t-glass);padding:5px 12px;border-radius:20px;white-space:nowrap;}

/* 右上角小盒明细面板 */
.tr-panel{top:12px;right:12px;z-index:4;width:218px;max-height:44%;pointer-events:auto;
  background:var(--t-glass);backdrop-filter:blur(6px);border:1px solid var(--t-glass-line);
  border-radius:var(--radius);box-shadow:var(--t-shadow-md);padding:10px 12px;display:flex;flex-direction:column;}
.tr-panel .tr-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.tr-panel .tr-head b{color:var(--accent);font-variant-numeric:tabular-nums;}
.tr-panel .tr-list{overflow-y:auto;min-height:0;margin:0 -4px;padding:0 4px;scrollbar-width:thin;}
.tr-panel .tr-row{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;padding:5px 2px;border-bottom:1px dashed var(--line);}
.tr-panel .tr-row:last-child{border-bottom:0;}
.tr-panel .tr-row .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.tr-panel .tr-row .meta{display:flex;flex-direction:column;min-width:0;}
.tr-panel .tr-row .nm{font-size:11.5px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;}
.tr-panel .tr-row .rt{font-size:10px;color:var(--text-3);white-space:nowrap;}
.tr-panel .tr-row .cnt{font-size:12px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;}
.ov.hide{display:none !important;}

/* 右上角竖直堆叠：上方「小盒明细」列表，下方点选盒子的参数卡 */
#rstack{top:12px;right:12px;z-index:4;width:228px;height:calc(100% - 24px);
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  overflow-y:auto;pointer-events:none;padding:1px;}
#rstack::-webkit-scrollbar{width:5px;}
#rstack::-webkit-scrollbar-thumb{background:var(--t-scrollbar);border-radius:6px;}
#rstack .tr-panel{position:static;width:100%;min-height:0;}
#ovtr{flex:0 1 auto;max-height:45%;}
#selCard{flex:0 0 auto;max-height:none;display:none;padding:10px 12px;}
#selCard .sel-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line);}
#selCard .sel-head .foot{flex:1;min-width:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#selCard .xbtn{border:0;background:var(--bg-alt);border-radius:7px;width:22px;height:22px;font-size:12px;color:var(--text-2);cursor:pointer;flex:none;line-height:1;}
#selCard .xbtn:hover{background:var(--line);color:var(--text);}
#selCard .grid2{margin-bottom:7px;}
#selCard .field{margin-bottom:7px;}
#selCard .field:last-child{margin-bottom:0;}
#selCard .swatches{margin-top:0;gap:6px;}
#selCard .sw{width:18px;height:18px;}
#selCard .btns{margin-top:9px;}
#selCard .inputwrap input{min-width:0;}

#err{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;background:var(--bg);color:var(--t-danger-fg);font-size:14px;padding:24px;text-align:center;line-height:1.7;}
#err.show{display:flex;}

/* ---------- 移动端 ----------
   沿用工具原有的 899px 断点：恢复页面滚动，3D 视口置顶 50dvh，参数面板在下全宽。
   站点 header 的高度仍用 var(--header-h) 取，769–899px（iPad 竖屏）区间与站点 768px 断点
   互不干扰：那时工具堆叠、header 仍是 72px。 */
@media (max-width:899px){
  body.page-tool{overflow:auto;}
  body.page-tool #app{flex-direction:column;height:auto;min-height:calc(100dvh - var(--header-h));}
  #viewport{flex:none;height:50dvh;width:100%;order:1;}
  #panel{flex:none;width:100%;max-width:none;order:2;border-right:0;border-top:1px solid var(--line);overflow:visible;padding-bottom:calc(24px + env(safe-area-inset-bottom));}
}