:root{
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f6f8fb; --border:#d8dee8;
  --ink:#1f2937; --ink2:#64748b; --muted:#94a3b8;
  --brand:#1f5fa8; --brand-d:#174a85; --accent:#e8730c;
  --ok:#11a36b; --warn:#e0a106; --danger:#d23b3b; --rail:#d8a13a;
  --steel:#8a98ad;
  --shadow:0 1px 3px rgba(20,30,50,.08),0 6px 18px rgba(20,30,50,.06);
  --r:10px;
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
  display:flex; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h2,h3,h4{margin:0;font-weight:600;}
button{font-family:inherit;cursor:pointer;}
.muted{color:var(--muted);font-weight:400;font-size:12px;}

/* ---------- 顶栏 ---------- */
.topbar{
  height:58px; flex:0 0 58px; display:flex; align-items:center; gap:22px;
  padding:0 18px; background:linear-gradient(180deg,#fff,#f3f6fb);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow); z-index:5;
}
.brand{display:flex;align-items:center;gap:11px;}
.logo{
  width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-d));
  color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.brand-title{font-size:16px;font-weight:700;letter-spacing:.5px;}
.brand-sub{font-size:11px;color:var(--ink2);}
.seg-group{display:flex;align-items:center;gap:9px;}
.seg-label{font-size:12px;color:var(--ink2);}
.seg{display:flex;background:#e9eef5;border-radius:9px;padding:3px;gap:2px;}
.seg-btn{
  border:none;background:transparent;padding:7px 13px;border-radius:7px;
  font-size:13px;color:var(--ink2);transition:.15s;font-weight:600;
}
.seg-btn:hover{color:var(--brand);}
.seg-btn.active{background:#fff;color:var(--brand);box-shadow:var(--shadow);}
.seg.small .seg-btn{padding:5px 9px;font-size:12px;}
.help-btn{
  margin-left:auto;border:1px solid var(--border);background:#fff;border-radius:8px;
  padding:8px 14px;font-size:13px;color:var(--brand);font-weight:600;
}
.help-btn:hover{background:#f0f5fb;}

/* ---------- 主区 ---------- */
.app{
  flex:1; min-height:0; display:grid;
  grid-template-columns:300px 1fr 360px; gap:12px; padding:12px;
}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:auto; padding:12px;
}
.panel-left{display:flex;flex-direction:column;gap:14px;}
.ctl-block h3{
  font-size:13px;color:var(--brand-d);margin-bottom:8px;
  padding-bottom:6px;border-bottom:1px dashed var(--border);
}
.row{display:flex;align-items:center;}
.row.gap{gap:7px;flex-wrap:wrap;}
.row.gap.sm{gap:5px;}
.mini-label{font-size:12px;color:var(--ink2);}

.btn{
  flex:1; min-width:0; border:1px solid var(--border); background:#fff; color:var(--ink);
  border-radius:8px; padding:9px 6px; font-size:13px; font-weight:600; transition:.12s;
}
.btn:hover{background:#f0f5fb;border-color:#c3d2e6;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-danger{color:#fff;background:linear-gradient(180deg,#e35b5b,#cf3a3a);border-color:#cf3a3a;}
.btn-danger:hover{background:linear-gradient(180deg,#d85050,#bf3333);}
.btn-ok{color:#fff;background:linear-gradient(180deg,#2bb47e,#11a36b);border-color:#11a36b;}
.btn-run{color:#fff;background:linear-gradient(180deg,#2f7fce,#1f5fa8);border-color:#1f5fa8;}
.btn-mini{flex:0 0 auto;padding:6px 11px;font-size:12px;}

/* JOG */
.jog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:4px;}
.jog-axis{display:contents;}
.jog-label{
  grid-column:1 / -1; font-size:11px;color:var(--ink2);margin-top:2px;
  display:flex;justify-content:space-between;
}
.jog-btn{
  border:1px solid var(--border);background:#f7faff;border-radius:8px;padding:11px 0;
  font-size:15px;font-weight:700;color:var(--brand-d);user-select:none;touch-action:none;
}
.jog-btn:hover{background:#e7f0fb;}
.jog-btn:active,.jog-btn.held{background:var(--brand);color:#fff;}

/* 滑块 */
.slider-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.slider-row label{font-size:12px;color:var(--ink2);width:48px;}
.slider-row input[type=range]{flex:1;accent-color:var(--brand);}
.slider-row output{font-weight:700;font-size:13px;min-width:42px;text-align:right;}
.slider-row .unit{font-size:11px;color:var(--muted);width:42px;}
.hint-sm{font-size:11px;color:var(--muted);margin:6px 0 0;}

/* ---------- 中间机床 ---------- */
.stage-wrap{
  position:relative; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; min-width:0;
}
#stage{width:100%;height:100%;display:block;cursor:grab;touch-action:none;}
#stage.dragging{cursor:grabbing;}
.stage-toolbar{
  position:absolute;top:10px;left:10px;display:flex;gap:6px;align-items:center;
  background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:9px;
  padding:5px;box-shadow:var(--shadow);z-index:3;
}
.tool{
  border:1px solid var(--border);background:#fff;border-radius:7px;padding:6px 9px;
  font-size:13px;color:var(--ink);font-weight:600;min-width:34px;
}
.tool:hover{background:#f0f5fb;color:var(--brand);}
.tool:disabled{opacity:.45;cursor:not-allowed;}
.divider{width:1px;height:22px;background:var(--border);margin:0 2px;}
.tool.active{background:var(--brand);color:#fff;border-color:var(--brand);}

.stage-hint{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:rgba(31,41,55,.82);color:#fff;font-size:12px;padding:6px 14px;
  border-radius:20px;white-space:nowrap;pointer-events:none;
}
.tooltip{
  position:absolute;background:var(--ink);color:#fff;font-size:12px;padding:4px 9px;
  border-radius:6px;pointer-events:none;z-index:6;transform:translate(-50%,-130%);
  white-space:nowrap;box-shadow:var(--shadow);
}
.tooltip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);}

/* SVG 部件交互 */
/* 顶层装饰图层永远不拦截点击，避免刀路线/主轴十字线/标注盖住部件 */
#axes,#labels,#trail,#overlay{pointer-events:none;}
.part{cursor:pointer;transition:filter .15s;pointer-events:auto;}
.part polygon,.part path,.part ellipse{transition:filter .15s,stroke .12s;}
.part:hover polygon,.part:hover path,.part:hover ellipse{filter:brightness(1.18);}
.part.selected polygon,.part.selected path,.part.selected ellipse{
  stroke:var(--accent)!important;stroke-width:2.2!important;filter:url(#glow);
}
.part.dim{opacity:.32;}
.plabel{font-size:11px;fill:var(--ink);font-weight:600;paint-order:stroke;
  stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none;}
.part-hit{fill:transparent;}

/* ---------- 右侧信息 ---------- */
.panel-right{display:flex;flex-direction:column;gap:12px;}
.info-block{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:11px;}
.info-block h3{font-size:13px;color:var(--brand-d);margin-bottom:9px;}
.coord-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.coord-tile{
  background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px;text-align:center;
  position:relative;overflow:hidden;
}
.coord-tile .ax{font-size:12px;font-weight:800;color:var(--brand);}
.coord-tile .val{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0;
  font-family:"Consolas",monospace;}
.coord-tile .bar{height:4px;background:#e3e9f2;border-radius:3px;overflow:hidden;margin-top:4px;}
.coord-tile .bar i{display:block;height:100%;background:var(--brand);width:50%;}
.coord-tile.zero .val{color:var(--ok);}

.status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.st{display:flex;justify-content:space-between;background:#fff;border:1px solid var(--border);
  border-radius:7px;padding:7px 9px;font-size:12px;}
.st span{color:var(--ink2);}
.st b{font-weight:700;}
.st b.ok{color:var(--ok);} .st b.run{color:var(--brand);} .st b.warn{color:var(--warn);}
.st b.danger{color:var(--danger);}

.part-card{background:linear-gradient(180deg,#fff,#fbfdff);}
#pcTitle{color:var(--accent);}
.pc-en{font-size:12px;color:var(--muted);margin:-4px 0 8px;font-style:italic;}
.pc-row{display:flex;gap:8px;font-size:12.5px;margin-bottom:5px;align-items:baseline;}
.pc-k{flex:0 0 64px;color:var(--ink2);}
.pc-v{flex:1;color:var(--ink);}
.pc-sec{margin-top:8px;font-size:12.5px;}
.pc-sec b{color:var(--brand-d);display:block;margin-bottom:3px;}
.pc-sec p{margin:0;line-height:1.6;color:#334155;}

.explain{font-size:12.5px;line-height:1.7;color:#334155;margin:0;}

/* 测验 */
#quizPanel{background:linear-gradient(180deg,#fff,#fff8ef);}
.quiz-q{font-size:15px;font-weight:700;color:var(--brand-d);margin-bottom:8px;}
.quiz-meta{display:flex;gap:18px;font-size:12px;color:var(--ink2);margin-bottom:8px;}
.quiz-meta b{font-size:15px;color:var(--accent);}
.quiz-fb{font-size:12.5px;min-height:34px;line-height:1.5;margin-bottom:8px;color:var(--ink2);}
.quiz-fb.ok{color:var(--ok);} .quiz-fb.bad{color:var(--danger);}

/* ---------- 底部 G 代码 ---------- */
.gcode{
  flex:0 0 auto; background:var(--panel); border-top:1px solid var(--border);
  box-shadow:0 -2px 10px rgba(20,30,50,.05); display:flex; flex-direction:column;
}
.gcode-head{
  display:flex;align-items:center;justify-content:space-between;padding:8px 14px;
  border-bottom:1px solid var(--border);
}
.gcode-head h3{font-size:13px;color:var(--brand-d);}
.gcode-body{display:flex;height:170px;transition:height .2s;}
.gcode.collapsed .gcode-body{height:0;overflow:hidden;}
#gcodeText{
  flex:1; border:none; resize:none; padding:10px 12px; font-family:"Consolas",monospace;
  font-size:13px; line-height:1.5; color:#1f2937; outline:none; background:#fbfcfe;
  border-right:1px solid var(--border);
}
.gcode-lines{
  width:240px; overflow:auto; background:#f4f6fa; padding:6px 0; font-family:"Consolas",monospace;
  font-size:12.5px;
}
.gcode-lines .ln{display:flex;gap:8px;padding:1px 10px;white-space:pre;}
.gcode-lines .ln .num{color:var(--muted);width:28px;text-align:right;flex:0 0 28px;}
.gcode-lines .ln.active{background:#fff3e2;color:var(--accent);font-weight:700;}
.gcode-lines .ln.done{color:#9aa6b8;}
.hidden{display:none!important;}
[hidden]{display:none!important;}

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(20,30,50,.45);display:flex;align-items:center;
  justify-content:center;z-index:50;
}
.modal{
  background:#fff;border-radius:14px;width:min(640px,92vw);max-height:86vh;overflow:auto;
  padding:24px 26px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal-close{position:absolute;top:14px;right:18px;border:none;background:none;font-size:26px;
  color:var(--muted);line-height:1;}
.modal h2{font-size:19px;color:var(--brand-d);margin-bottom:14px;}
.modal-body h4{font-size:14px;color:var(--accent);margin:14px 0 5px;}
.modal-body p{font-size:13px;line-height:1.7;color:#334155;margin:0;}
.modal-body b{color:var(--brand-d);}

/* 响应式：窄屏堆叠 */
@media (max-width:1180px){
  .app{grid-template-columns:260px 1fr 300px;}
}
@media (max-width:980px){
  .app{grid-template-columns:1fr;grid-auto-rows:min-content;}
  .stage-wrap{min-height:420px;}
}

/* 运行错误横幅（调试用） */
#errBanner{
  position:fixed;left:50%;top:8px;transform:translateX(-50%);z-index:99;
  max-width:90vw;background:#b91c1c;color:#fff;font-size:12px;line-height:1.5;
  padding:8px 14px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.25);
  white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;
}

/* 部件速选 + 占位提示 */
.parts-quick{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px;}
.pq-btn{
  border:1px solid var(--border);background:#f7faff;border-radius:7px;
  padding:6px 9px;font-size:12px;font-weight:600;color:var(--brand-d);
  cursor:pointer;transition:.12s;
}
.pq-btn:hover{background:#e7f0fb;border-color:var(--brand);}
.pq-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.parts-hint{
  font-size:12px;color:var(--muted);line-height:1.6;
  background:#f3f7fc;border:1px dashed var(--border);border-radius:8px;padding:10px 11px;
}
.parts-hint b{color:var(--brand-d);}