/* ===================================================================
   设计 token 与基础组件：与 CNC 数控仿真教学平台保持一致
   =================================================================== */
: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;
  --mono:"Consolas","SFMono-Regular",Menlo,monospace;
}
*{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:var(--left-w,280px) 7px 1fr 7px var(--right-w,340px); 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-danger.active{background:linear-gradient(180deg,#a52a2a,#8d2020);border-color:#7d1c1c;}
.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-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:9px 0 8px;
  font-size:13px;font-weight:700;color:var(--brand-d);user-select:none;touch-action:none;
  display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.3;
}
.jog-btn.no{color:var(--ok);background:#f2fbf6;border-color:#bfe6d3;}
.jog-btn.nc{color:var(--danger);background:#fff7f7;border-color:#f0c9c9;}
.jog-btn.fault{color:#a57406;background:#fffaf0;border-color:#f0dcae;}
.jog-btn.tripped{background:var(--danger);color:#fff;border-color:var(--danger);}
/* 交互反馈必须排在颜色变体之后：特异性相同，后写者生效。故障态保持红色不被覆盖。 */
.jog-btn:hover:not(.tripped):not(.held):not(:active){background:#e7f0fb;}
.jog-btn:active:not(.tripped),.jog-btn.held:not(.tripped){background:var(--brand);color:#fff;}
.jog-btn .bitval{font-family:var(--mono);font-size:10px;font-weight:600;opacity:.75;}
.jog-btn.held .bitval{opacity:1;}

/* 滑块 */
.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;line-height:1.5;}

/* ---------- 中间电气柜视图 ---------- */
.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;}
.tool.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.divider{width:1px;height:22px;background:var(--border);margin:0 2px;}
.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);}

#axes,#labels,#overlay{pointer-events:none;}
.part{cursor:pointer;transition:filter .15s;pointer-events:auto;}
.part polygon,.part path,.part rect,.part circle,.part ellipse{transition:filter .15s,stroke .12s;}
.part:hover polygon,.part:hover path,.part:hover rect,.part:hover circle,.part:hover ellipse{filter:brightness(1.12);}
.part.selected polygon,.part.selected path,.part.selected rect,.part.selected circle,.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:7px 4px;text-align:center;
  position:relative;overflow:hidden;
}
.coord-tile .ax{font-size:11px;font-weight:800;color:var(--brand);font-family:var(--mono);}
.coord-tile .val{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0;
  font-family:var(--mono);}
.coord-tile .nm{font-size:9px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.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:0%;}
.coord-tile.on{border-color:#bfe6d3;background:#f4fcf8;}
.coord-tile.on .val{color:var(--ok);}
.coord-tile.fault{border-color:#f0c9c9;background:#fff6f6;}
.coord-tile.fault .val{color:var(--danger);}
.coord-tile.timer .bar i{background:var(--accent);}

.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;}

/* 教学流程 */
.step-current{background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px 10px;}
.step-kicker{font-size:10px;color:var(--brand);font-family:var(--mono);font-weight:700;}
.step-title{font-size:13px;font-weight:700;color:var(--brand-d);margin:3px 0 6px;}
.step-line{font-size:11.5px;line-height:1.6;color:#334155;margin-bottom:4px;}
.step-line b{color:var(--brand-d);}
.step-status{display:inline-block;font-size:10px;padding:2px 8px;border-radius:20px;
  background:#e0ecfb;color:var(--brand);font-weight:600;margin-top:3px;}
.step-status.pass{background:#e4f5ed;color:var(--ok);}
.step-actions{display:flex;gap:6px;margin-top:8px;}
.step-list{margin-top:7px;max-height:124px;overflow:auto;}
.step-row{display:flex;align-items:flex-start;gap:7px;padding:3px 2px;font-size:11px;color:var(--muted);}
.step-row.active{color:var(--ink);font-weight:700;}
.step-row.done{color:var(--ok);}
.step-dot{width:15px;height:15px;border-radius:50%;flex:0 0 15px;border:1px solid var(--border);
  font-size:9px;line-height:13px;text-align:center;background:#fff;}
.step-row.active .step-dot{border-color:var(--brand);background:#e0ecfb;color:var(--brand);}
.step-row.done .step-dot{border-color:var(--ok);background:var(--ok);color:#fff;}

/* 测验 */
#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);}

/* 日志 */
.log-scroll{max-height:126px;overflow:auto;font-size:11px;line-height:1.5;}
.log-item{display:flex;gap:6px;padding:2px 0;border-bottom:1px solid #eef2f7;color:var(--ink2);}
.log-time{font-family:var(--mono);font-size:10px;color:var(--muted);flex:0 0 auto;}
.log-item.ok{color:var(--ok);} .log-item.warn{color:#a57406;}
.log-item.err{color:var(--danger);} .log-item.info{color:var(--brand);}

/* ---------- 底部梯形图区 ---------- */
.gcode{
  flex:0 0 auto; height:var(--gcode-h,210px); 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);gap:8px;
}
.gcode-head h3{font-size:13px;color:var(--brand-d);white-space:nowrap;}
.gcode-body{display:flex;flex:1;min-height:0;transition:height .2s;}
.gcode.collapsed .gcode-body{height:0;flex:0 0 0;overflow:hidden;}
.ladder-wrap{flex:1;min-width:0;overflow:auto;background:#fbfcfe;border-right:1px solid var(--border);padding:6px 10px;}
.ladder-wrap svg{display:block;width:100%;height:auto;}
.gcode-lines{
  width:240px; overflow:auto; background:#f4f6fa; padding:6px 0; font-family:var(--mono);
  font-size:12.5px;
}
.gcode-lines .ln{display:flex;gap:8px;padding:2px 10px;white-space:pre;cursor:default;}
.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;}
.gcode-lines .ln.on .val{color:var(--ok);font-weight:700;}

/* 梯形图 SVG */
.lad-rail{stroke:#9fb0c4;stroke-width:2;}
.lad-wire{fill:none;stroke:#b9c6d6;stroke-width:1.8;stroke-linecap:round;}
.lad-wire.live{stroke:var(--accent);stroke-width:2.6;}
.lad-contact{fill:none;stroke:#8fa1b6;stroke-width:1.8;stroke-linecap:round;}
.lad-contact.on{stroke:var(--accent);stroke-width:2.4;}
.lad-addr{fill:var(--ink2);font-size:10px;font-family:var(--mono);}
.lad-addr.on{fill:var(--accent);font-weight:700;}
.lad-coil{fill:none;stroke:#8fa1b6;stroke-width:1.8;}
.lad-coil.on{stroke:var(--ok);stroke-width:2.6;fill:#e4f5ed;}
.lad-coiltext{fill:var(--ink2);font-size:10px;font-family:var(--mono);}
.lad-coiltext.on{fill:var(--ok);font-weight:700;}
.lad-comment{fill:var(--muted);font-size:10px;}
.lad-timerbar{fill:#e3e9f2;}
.lad-timerfill{fill:var(--accent);}
.lad-timeval{fill:var(--accent);font-size:10px;font-family:var(--mono);}

/* ---------- 可拖拽分隔条 ---------- */
.vsp{align-self:stretch;cursor:col-resize;position:relative;z-index:4;border-radius:4px;background:transparent;transition:background .15s;}
.vsp::before{content:"";position:absolute;top:0;bottom:0;left:-9px;right:-9px;}
.vsp::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:32px;border-radius:3px;background:#c3d2e6;transition:.15s;pointer-events:none;}
.vsp:hover,.vsp.dragging{background:rgba(31,95,168,.08);}
.vsp:hover::after,.vsp.dragging::after{background:var(--brand);height:58px;}
.hsp{flex:0 0 7px;cursor:row-resize;position:relative;z-index:4;background:transparent;transition:background .15s;}
.hsp::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;}
.hsp::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:3px;width:46px;border-radius:3px;background:#c3d2e6;transition:.15s;pointer-events:none;}
.hsp:hover,.hsp.dragging{background:rgba(31,95,168,.08);}
.hsp:hover::after,.hsp.dragging::after{background:var(--brand);width:74px;}
body.stage-full .panel-left,body.stage-full .panel-right,body.stage-full .gcode,
body.stage-full .hsp,body.stage-full .vsp{display:none!important;}
body.stage-full .app{grid-template-columns:1fr!important;padding:8px;}
body.stage-full .stage-wrap{min-height:0;}

.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);}
.modal-wide{width:min(820px,94vw);}
.modal-sub{font-size:13px;color:#475569;margin:0 0 14px;line-height:1.6;}
.case-list{display:flex;flex-direction:column;gap:14px;max-height:62vh;overflow:auto;padding-right:4px;}
.case-card{background:#f7f9fc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;}
.case-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.case-title{font-size:15px;font-weight:700;color:var(--brand-d);}
.case-tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:#e0ecfb;color:#2563eb;}
.case-teach{font-size:13px;line-height:1.7;color:#334155;margin-bottom:10px;}
.case-steps{font-size:12.5px;line-height:1.75;color:#334155;margin:0 0 10px;padding-left:18px;}
.case-steps li{margin-bottom:3px;}
.case-steps b{color:var(--brand-d);}
.case-code{background:#0f172a;color:#e2e8f0;font-family:var(--mono);
  font-size:12px;line-height:1.55;padding:12px 14px;border-radius:8px;overflow:auto;margin:0 0 12px;
  white-space:pre;max-height:170px;}
.case-code b{color:#fbbf24;}
.case-actions{display:flex;gap:10px;}

/* 电气柜 SVG 元件 */
.cab-body{fill:#f8fafc;stroke:#c3d0df;stroke-width:2;}
.cab-inner{fill:#eef3f9;stroke:#cfdbe8;stroke-width:1.2;}
.cab-rail{fill:#dde5ef;stroke:#b9c6d6;stroke-width:1;}
.wire{fill:none;stroke:#b9c6d6;stroke-width:3;stroke-linecap:round;}
.wire.live{stroke:var(--accent);stroke-width:4;}
.wire.rail{stroke:var(--rail);stroke-width:5;}
.wire.fault{stroke:var(--danger);stroke-width:3.5;stroke-dasharray:7 5;}
.dev-box{fill:#fff;stroke:#b6c4d6;stroke-width:1.6;}
.dev-box.on{fill:#e9f8f1;stroke:var(--ok);stroke-width:2.2;}
.dev-box.fault{fill:#fdecec;stroke:var(--danger);stroke-width:2.2;}
.dev-box.qf{fill:#eef4fb;stroke:var(--brand);stroke-width:1.8;}
.dev-txt{font-size:12px;fill:var(--ink);font-weight:700;}
.dev-sub{font-size:10px;fill:var(--ink2);font-family:var(--mono);}
.dev-addr{font-size:9px;fill:var(--muted);font-family:var(--mono);}
.lamp{fill:#dfe6ee;stroke:#b6c4d6;stroke-width:2;}
.lamp.on{fill:#ffd45c;stroke:var(--warn);filter:url(#glow);}
.motor-case{fill:#e8eef6;stroke:#9fb0c4;stroke-width:2;}
.motor-case.on{stroke:var(--ok);}
.rotor{fill:none;stroke:#8fa1b6;stroke-width:3;stroke-linecap:round;}
.rotor.on{stroke:var(--ok);}
.spin{animation:spin 1.1s linear infinite;}
.spin.rev{animation-direction:reverse;}
@keyframes spin{to{transform:rotate(360deg);}}
.phase-txt{font-size:11px;fill:var(--accent);font-family:var(--mono);font-weight:700;}
.terminal{fill:#d9e1eb;stroke:#aab9ca;stroke-width:1;}

/* 响应式 */
@media (max-width:1180px){
  .app{--left-w:250px;--right-w:300px;}
  .brand-sub{display:none;}
  .seg-label{display:none;}
}
@media (max-width:980px){
  .app{grid-template-columns:1fr;grid-auto-rows:min-content;}
  .vsp,.hsp{display:none;}
  .stage-wrap{min-height:420px;}
  body{overflow:auto;}
}
.gcode.collapsed{height:auto!important;}
#errBanner{
  position:fixed;left:50%;top:66px;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:var(--mono);cursor:pointer;
}
.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);}