/* wli-expert.css —— 真实 WLI 操作台 */
.wx-station {
  height: calc(100vh - 100px);
  min-height: 560px;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 128px;
  background: #070c10;
  color: #d9e7ea;
  font-family: var(--sans);
}
.wx-head { display:flex; align-items:center; gap:18px; padding:0 18px; background:linear-gradient(180deg,#121b21,#0b1217); border-bottom:1px solid #23343c; }
.wx-brand { display:flex; flex-direction:column; gap:1px; min-width:230px; }
.wx-brand b { font:700 14px var(--mono); letter-spacing:.14em; color:#7ef0dc; }
.wx-brand span { font:8px var(--mono); color:#6f929e; letter-spacing:.04em; }
.wx-flow { display:flex; gap:2px; flex:1; overflow:hidden; }
.wx-flow span { display:flex; align-items:center; gap:4px; font:8px var(--mono); color:#566f79; padding:5px 7px; border-bottom:2px solid transparent; white-space:nowrap; }
.wx-flow span i { font-style:normal; width:15px; height:15px; border:1px solid #2a444d; border-radius:50%; display:grid; place-items:center; font-size:7px; }
.wx-flow span.on { color:#dff8f4; border-bottom-color:#4fe0c8; }
.wx-flow span.on i { border-color:#4fe0c8; color:#4fe0c8; }
.wx-flow span.done { color:#4b8f87; }
.wx-flow span.done i { border-color:#316b65; color:#4fe0c8; }
.wx-head-right { display:flex; align-items:center; gap:6px; }
.wx-head-right span { font:10px var(--mono); color:#7fa2ad; margin-right:6px; }
.wx-head-right button { height:26px; padding:0 9px; border:1px solid #2a444d; border-radius:4px; background:#0b161b; color:#9fd7e2; font:9px var(--mono); cursor:pointer; }
.wx-head-right button:hover { border-color:#4fe0c8; color:#4fe0c8; }
.wx-body { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(380px,.78fr); min-height:0; }
.wx-view { position:relative; min-height:0; background:#020708; overflow:hidden; }
.wx-view canvas { width:100%; height:100%; display:block; }
.wx-view-top { position:absolute; left:14px; top:12px; right:14px; display:flex; justify-content:space-between; pointer-events:none; font:8px var(--mono); color:#7fa2ad; letter-spacing:.08em; }
.wx-view-top span:first-child { color:#6fe8d6; }
.wx-coach { position:absolute; left:16px; bottom:16px; width:330px; background:rgba(5,15,19,.94); border:1px solid #24505c; border-left:2px solid #4fe0c8; border-radius:6px; padding:10px 12px; box-shadow:0 12px 30px rgba(0,0,0,.45); }
.wx-coach-head { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.wx-coach-head b { font:8px var(--mono); color:#6fe8d6; letter-spacing:.1em; }
.wx-coach-head span { font:12px var(--sans); color:#dff8f4; }
.wx-coach p { margin:0 0 7px; font:10px/1.65 var(--sans); color:#9fb8c0; }
.wx-coach-do { font:10px/1.6 var(--sans); color:#ffcf8a; border-top:1px solid #16333e; padding-top:6px; }
.wx-coach-foot { display:flex; justify-content:space-between; align-items:center; margin-top:7px; }
.wx-coach-foot span { font:8px var(--mono); color:#5f7f8c; }
.wx-coach-foot button { height:22px; border:1px solid #2a444d; border-radius:3px; background:transparent; color:#9fd7e2; font:8px var(--mono); cursor:pointer; }
.wx-quiz { margin-top:7px; border-top:1px solid #16333e; padding-top:6px; }
.wx-quiz b { display:block; font:8px var(--mono); color:#ffb454; margin-bottom:2px; }
.wx-quiz span { display:block; font:9px/1.5 var(--sans); color:#9fb8c0; margin-bottom:5px; }
.wx-quiz div { display:flex; flex-wrap:wrap; gap:3px; }
.wx-quiz button { border:1px solid #2a444d; background:#07161c; color:#9fd7e2; font:8px var(--sans); padding:4px 5px; border-radius:3px; cursor:pointer; }
.wx-quiz button:hover { border-color:#4fe0c8; }
.wx-soft { display:flex; flex-direction:column; min-width:0; min-height:0; background:#0d151b; border-left:1px solid #22343c; }
.wx-soft-head { height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border-bottom:1px solid #22343c; background:#111c22; }
.wx-soft-head div { display:flex; flex-direction:column; gap:1px; }
.wx-soft-head b { font:700 11px var(--mono); color:#dff8f4; letter-spacing:.08em; }
.wx-soft-head span { font:7px var(--mono); color:#5f7f8c; }
.wx-state { font:8px var(--mono); color:#ffb454; border:1px solid #3a4d42; padding:3px 6px; border-radius:3px; }
.wx-tabs { display:flex; border-bottom:1px solid #22343c; }
.wx-tabs button { flex:1; height:32px; border:0; border-bottom:2px solid transparent; background:transparent; color:#6f929e; font:9px var(--sans); cursor:pointer; }
.wx-tabs button.on { color:#7ef0dc; border-bottom-color:#4fe0c8; background:#0b171c; }
.wx-soft-body { flex:1; overflow:auto; padding:12px; min-height:0; }
.wx-soft-foot { height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border-top:1px solid #22343c; font:8px var(--mono); color:#5f7f8c; }
.wx-live { border:1px solid #22343c; background:#020708; }
.wx-live canvas { width:100%; aspect-ratio:8/5; display:block; }
.wx-live-meta { display:flex; justify-content:space-between; padding:4px 6px; font:8px var(--mono); color:#6f929e; border-top:1px solid #1b3038; }
.wx-inline { display:flex; align-items:center; gap:8px; margin-top:10px; font:9px var(--mono); color:#7fa2ad; }
.wx-inline b { color:#ff9a6b; }
.wx-inline b.ok { color:#4fe0c8; }
.wx-mini { margin-left:auto; height:24px; border:1px solid #2a444d; background:#0b161b; color:#9fd7e2; font:8px var(--mono); border-radius:3px; padding:0 7px; cursor:pointer; }
.wx-live-tip { margin-top:8px; padding:7px 8px; border-left:2px solid #ffb454; background:#101b20; font:9px/1.6 var(--sans); color:#9fb8c0; }
.wx-form h4, .wx-report h4 { margin:0 0 10px; font:10px var(--mono); color:#dff8f4; letter-spacing:.08em; }
.wx-form label { display:flex; flex-direction:column; gap:4px; margin-bottom:9px; font:9px var(--mono); color:#7fa2ad; }
.wx-form select, .wx-form input { height:28px; background:#07161c; color:#dff8f4; border:1px solid #2a444d; border-radius:4px; font:10px var(--mono); padding:0 7px; }
.wx-form label b { color:#dff8f4; }
.wx-recipe-note { margin:8px 0; padding:7px; border:1px solid #2a444d; background:#0a171c; font:9px/1.6 var(--sans); color:#9fb8c0; }
.wx-primary { height:28px; border:1px solid #4fe0c8; background:#0e3a3f; color:#7ef0dc; font:9px var(--mono); border-radius:4px; padding:0 10px; cursor:pointer; }
.wx-empty { padding:30px 10px; text-align:center; font:10px/1.7 var(--sans); color:#5f7f8c; }
.wx-verdict { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid #2a444d; border-radius:5px; }
.wx-verdict.ok { border-color:#2f8d7a; background:rgba(79,224,200,.06); }
.wx-verdict.bad { border-color:#c46d50; background:rgba(255,154,107,.06); }
.wx-verdict b { font:700 18px var(--mono); color:#4fe0c8; }
.wx-verdict.bad b { color:#ff9a6b; }
.wx-verdict span { font:9px var(--mono); color:#9fb8c0; }
.wx-table { width:100%; border-collapse:collapse; margin-top:9px; font:9px var(--mono); }
.wx-table th { text-align:left; color:#6f929e; font-weight:400; border-bottom:1px solid #2a444d; padding:5px; }
.wx-table td { color:#dff8f4; border-bottom:1px solid #162a31; padding:4px 5px; }
.wx-analyze-note { margin:8px 0; font:8px/1.5 var(--mono); color:#5f7f8c; }
.wx-report p { margin:0 0 7px; font:10px/1.7 var(--sans); color:#9fb8c0; }
.wx-report-events { margin-top:8px; font:8px var(--mono); color:#5f7f8c; }
.wx-hardware { display:flex; align-items:stretch; gap:10px; padding:8px 14px; background:linear-gradient(180deg,#1b2429,#10181d); border-top:1px solid #34464e; overflow:hidden; }
.wx-hw-group { display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 10px; border-right:1px solid #2b3c43; }
.wx-hw-group:last-child { border-right:0; }
.wx-hw-label { font:7px var(--mono); color:#6f929e; letter-spacing:.1em; }
.wx-hw-power { display:grid; grid-template-columns:repeat(3,auto); gap:4px; }
.wx-hw-power .wx-hw-label { grid-column:1/4; }
.wx-hw-power .wx-led { display:none; }
.wx-btn { height:25px; padding:0 8px; border:1px solid #3d535b; border-radius:3px; background:#17242a; color:#b8d5da; font:8px var(--mono); cursor:pointer; }
.wx-btn:hover { border-color:#6fb8ad; }
.wx-btn.on { border-color:#4fe0c8; background:#103a3e; color:#7ef0dc; }
.wx-btn:disabled { opacity:.4; cursor:not-allowed; }
.wx-led { width:7px; height:7px; border-radius:50%; background:#24343a; display:inline-block; }
.wx-led.on { background:#4fe0c8; box-shadow:0 0 7px #4fe0c8; }
.wx-hw-z { flex-direction:row; align-items:center; }
.wx-hw-z .wx-hw-label { position:absolute; margin-top:-34px; }
.wx-hw-z b { font:9px var(--mono); color:#ffcf8a; min-width:70px; text-align:center; }
.wx-knob { width:48px; height:48px; border-radius:50%; border:2px solid #4b626a; background:radial-gradient(circle at 35% 30%,#566b72,#1b282d 70%); position:relative; cursor:ns-resize; touch-action:none; }
.wx-knob i { position:absolute; left:50%; top:5px; width:2px; height:15px; background:#7ef0dc; transform:translateX(-50%); }
.wx-knob span { position:absolute; inset:0; display:grid; place-items:center; font:7px var(--mono); color:#9fb8c0; }
.wx-turret { display:flex; gap:3px; }
.wx-turret button { width:34px; height:24px; border:1px solid #3d535b; background:#17242a; color:#9fb8c0; font:8px var(--mono); cursor:pointer; }
.wx-turret button.on { border-color:#4fe0c8; color:#7ef0dc; background:#103a3e; }
.wx-hw-stage { align-items:center; }
.wx-joy { width:54px; height:54px; border-radius:50%; border:2px solid #445b62; background:radial-gradient(circle at 40% 35%,#3b5057,#121e23); position:relative; touch-action:none; }
.wx-joy i { position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%; background:#7ef0dc; transform:translate(-50%,-50%); box-shadow:0 0 8px rgba(79,224,200,.6); }
.wx-joy span { position:absolute; inset:0; display:grid; place-items:end center; padding-bottom:3px; font:6px var(--mono); color:#5f7f8c; }
.wx-hw-stage > span { font:8px var(--mono); color:#7fa2ad; }
.wx-hw-run { margin-left:auto; flex-direction:row; align-items:center; border-left:1px solid #2b3c43; border-right:0; padding-left:14px; }
.wx-start { height:42px; background:#0e3a3f; border-color:#4fe0c8; color:#7ef0dc; font-weight:700; }
.wx-stop { height:42px; }
.wx-estop { width:46px; height:46px; border-radius:50%; border:3px solid #6b2b22; background:radial-gradient(circle at 35% 30%,#e35b45,#7c1c13); color:#fff; font:7px var(--mono); cursor:pointer; }
@media (max-width:1100px) {
  .wx-body { grid-template-columns:1fr; }
  .wx-soft { display:none; }
  .wx-coach { width:280px; }
  .wx-flow { display:none; }
}

body.wx-mode .ai-fab, body.wx-mode .sitefoot { display:none!important; }
body.wx-mode { overflow:hidden; }
.wx-hw-power { grid-template-columns:repeat(4,auto)!important; }

.wx-diagnose { margin: 10px 0; padding: 8px; border: 1px solid #2a444d; background: #0a171c; }
.wx-diagnose b { display:block; font: 9px/1.5 var(--sans); color:#dff8f4; margin-bottom:5px; }
.wx-diagnose button { display:block; width:100%; text-align:left; margin:3px 0; padding:5px 6px; border:1px solid #2a444d; background:#07161c; color:#9fb8c0; font:8px/1.4 var(--sans); cursor:pointer; }
.wx-diagnose button:hover { border-color:#4fe0c8; color:#dff8f4; }
#wxDiagOut { margin: 4px 0 8px; font:8px/1.5 var(--sans); color:#ffcf8a; }

.wx-gloss { position:absolute; z-index:30; left:50%; top:70px; transform:translateX(-50%); width:min(620px,80vw); max-height:70vh; overflow:auto; background:#0b161b; border:1px solid #2a505a; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.6); padding:12px 14px; }
.wx-gloss-head { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #22343c; padding-bottom:6px; margin-bottom:6px; }
.wx-gloss-head b { font:10px var(--mono); color:#7ef0dc; letter-spacing:.08em; }
.wx-gloss-head button { background:transparent; border:0; color:#9fb8c0; font-size:18px; cursor:pointer; }
.wx-gloss dl { margin:0; }
.wx-gloss dt { font:10px var(--mono); color:#ffcf8a; margin-top:7px; }
.wx-gloss dd { margin:2px 0 0; font:10px/1.6 var(--sans); color:#9fb8c0; }
.wx-reflection { display:block; margin:10px 0; font:9px var(--mono); color:#7fa2ad; }
.wx-reflection textarea { display:block; width:100%; margin-top:4px; background:#07161c; color:#dff8f4; border:1px solid #2a444d; border-radius:4px; font:10px/1.6 var(--sans); padding:6px; resize:vertical; }

.wx-replay-panel { position:fixed; right:24px; bottom:150px; z-index:40; width:300px; background:#0b161b; border:1px solid #2a505a; border-radius:6px; box-shadow:0 18px 50px rgba(0,0,0,.6); padding:9px 10px; }
.wx-replay-panel > div:first-child { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #22343c; padding-bottom:5px; }
.wx-replay-panel b { font:9px var(--mono); color:#7ef0dc; letter-spacing:.08em; }
.wx-replay-panel span { font:8px var(--mono); color:#7fa2ad; }
.wx-replay-row { display:flex; gap:4px; margin-top:6px; }
.wx-replay-row button { flex:1; height:24px; border:1px solid #2a444d; background:#07161c; color:#9fd7e2; font:8px var(--mono); cursor:pointer; }
.wx-replay-row button:hover { border-color:#4fe0c8; color:#4fe0c8; }
.wx-replay-panel p { margin:6px 0 0; font:8px/1.5 var(--mono); color:#ffcf8a; min-height:24px; }

.wx-vsi-map { display:block; width:100%; height:auto; margin:8px 0; border:1px solid #2a444d; background:#020708; }

.wx-exam-panel { position:fixed; z-index:60; left:50%; top:50%; transform:translate(-50%,-50%); width:min(620px,90vw); max-height:82vh; overflow:auto; background:#0b161b; border:1px solid #2a505a; border-radius:7px; box-shadow:0 30px 90px rgba(0,0,0,.75); padding:14px 16px; }
.wx-exam-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #22343c; padding-bottom:7px; margin-bottom:8px; }
.wx-exam-head b { font:10px var(--mono); color:#7ef0dc; letter-spacing:.08em; }
.wx-exam-head span { font:8px var(--mono); color:#5f7f8c; }
.wx-exam-q { margin:9px 0; padding:8px; background:#07161c; border:1px solid #1b3038; border-radius:4px; }
.wx-exam-q p { margin:0 0 6px; font:10px/1.6 var(--sans); color:#dff8f4; }
.wx-exam-q label { display:flex; gap:6px; align-items:center; font:9px/1.7 var(--sans); color:#9fb8c0; cursor:pointer; }
.wx-exam-foot { display:flex; gap:6px; justify-content:flex-end; }

.wx-anno-layer { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.wx-anno { position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:3px; pointer-events:none; white-space:nowrap; }
.wx-anno i { width:7px; height:7px; border:1px solid #7ef0dc; border-radius:50%; background:rgba(126,240,220,.25); box-shadow:0 0 8px rgba(79,224,200,.5); }
.wx-anno span { padding:2px 5px; background:rgba(4,14,18,.82); border:1px solid rgba(79,224,200,.35); border-radius:3px; color:#cdeee9; font:8px var(--mono); letter-spacing:.02em; }
#wxAnno.on { border-color:#4fe0c8; color:#4fe0c8; }
@media (max-width:760px){ .wx-anno { display:none!important; } }

.wx-viewbar { position:absolute; right:12px; bottom:12px; z-index:6; display:flex; align-items:center; gap:3px; padding:3px 5px; background:rgba(5,14,18,.8); border:1px solid #1d4653; border-radius:5px; }
.wx-viewbar span { font:8px var(--mono); color:#4f7380; margin-right:2px; letter-spacing:.08em; }
.wx-viewbar button { height:22px; border:0; border-radius:3px; background:transparent; color:#9fd7e2; font:8px var(--mono); cursor:pointer; padding:0 6px; }
.wx-viewbar button.on { background:rgba(79,224,200,.14); color:#4fe0c8; }
.wx-viewbar button:hover { color:#4fe0c8; }

.wx-exam-result { padding:4px 2px; }
.wx-exam-result > b { display:block; font:700 14px var(--mono); color:#4fe0c8; margin-bottom:6px; }
.wx-exam-result p { margin:0 0 7px; font:10px/1.7 var(--sans); color:#9fb8c0; }
.wx-exam-result .wx-primary { height:28px; font:9px var(--mono); padding:0 10px; margin-bottom:8px; }
.wx-coach-foot button { padding:0 6px; }

.wx-trace-banner { position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:10px; padding:5px 9px; background:rgba(8,25,30,.92); border:1px solid #ffb454; border-radius:4px; font:8px var(--mono); color:#ffcf8a; }
.wx-trace-banner b { color:#ffb454; letter-spacing:.08em; }
.wx-trace-banner button { height:22px; border:1px solid #8b6a36; background:#1b1710; color:#ffcf8a; font:8px var(--mono); border-radius:3px; cursor:pointer; }
.wx-trace-mode .wx-viewbar, .wx-trace-mode .wx-coach { opacity:.35; pointer-events:none; }

.wx-knob i { transform:translateX(-50%) rotate(var(--wx-angle, 0deg)); transform-origin:50% 19px; }
.wx-task { margin-bottom:8px; padding:8px 9px; background:#0a171c; border-left:2px solid #ffb454; border-radius:3px; }
.wx-task b { display:block; font:8px var(--mono); color:#ffb454; letter-spacing:.08em; margin-bottom:3px; }
.wx-task span { display:block; font:9px/1.55 var(--sans); color:#dff8f4; }
.wx-task em { display:block; margin-top:3px; font:8px var(--mono); color:#7fa2ad; font-style:normal; }
.wx-tour { position:fixed; inset:0; z-index:70; background:rgba(2,10,14,.62); display:flex; align-items:center; justify-content:center; }
.wx-tour-card { width:min(520px,88vw); background:#0b171d; border:1px solid #2a505a; border-radius:7px; box-shadow:0 30px 90px rgba(0,0,0,.8); padding:18px 20px; }
.wx-tour-k { font:8px var(--mono); color:#ffb454; letter-spacing:.12em; margin-bottom:6px; }
.wx-tour-card h3 { margin:0 0 7px; font:600 18px var(--sans); color:#e7fbf7; }
.wx-tour-card p { margin:0 0 14px; font:11px/1.8 var(--sans); color:#a9c4cb; }
.wx-tour-foot { display:flex; justify-content:flex-end; gap:6px; }


@media (max-height:820px){
  .wx-station { min-height:0; grid-template-rows:46px minmax(0,1fr) 118px; }
  .wx-head { padding:0 10px; gap:10px; }
  .wx-brand { min-width:180px; }
  .wx-flow span { font-size:7px; padding:4px 5px; }
  .wx-coach { width:300px; bottom:8px; left:8px; padding:8px 10px; }
  .wx-coach p { font-size:9px; margin-bottom:5px; }
  .wx-coach-do { font-size:9px; padding-top:4px; }
  .wx-hardware { padding:6px 8px; gap:6px; }
  .wx-hw-group { padding:0 6px; gap:3px; }
  .wx-btn { height:22px; padding:0 6px; }
}
/* readability pass: larger physical controls */
.wx-station { grid-template-rows: 52px minmax(0, 1fr) 150px; }
.wx-hardware { padding: 10px 16px; gap: 12px; overflow-x: auto; overflow-y: hidden; }
.wx-hw-group { gap: 7px; padding: 0 12px; flex: 0 0 auto; }
.wx-hw-label { font: 9px var(--mono); color: #90b2bd; }
.wx-btn { height: 32px; min-width: 52px; padding: 0 10px; font: 9px var(--mono); }
.wx-hw-power { grid-template-columns: repeat(2, auto) !important; }
.wx-hw-power .wx-hw-label { grid-column: 1 / 3; }
.wx-turret button { width: 40px; height: 32px; font: 9px var(--mono); }
.wx-knob { width: 38px !important; height: 38px !important; }
.wx-knob span { font: 8px var(--mono); }
.wx-knob i { top: 6px; height: 16px; }
.wx-joy { width: 60px; height: 60px; }
.wx-joy span { font: 7px var(--mono); }
.wx-start, .wx-stop { height: 48px; min-width: 88px; font: 10px var(--mono); }
.wx-estop { width: 56px; height: 56px; font: 8px var(--mono); }
.wx-hw-stage > span { font: 9px var(--mono); }
@media (max-height: 820px) {
  .wx-station { grid-template-rows: 46px minmax(0, 1fr) 140px; }
  .wx-hardware { padding: 7px 10px; gap: 8px; }
  .wx-hw-group { padding: 0 8px; gap: 5px; }
  .wx-btn { height: 30px; min-width: 48px; }
  .wx-start, .wx-stop { height: 44px; min-width: 80px; }
  .wx-estop { width: 50px; height: 50px; }
}
.wx-result-card { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:80; width:min(430px,86vw); background:#0b171d; border:1px solid #3b7a78; border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.8); padding:16px 18px; }
.wx-rc-k { font:8px var(--mono); color:#7fa2ad; letter-spacing:.12em; }
.wx-rc-verdict { margin:4px 0 6px; font:700 28px var(--mono); color:#4fe0c8; letter-spacing:.06em; }
.wx-rc-metric { display:flex; align-items:baseline; gap:8px; padding:8px 0; border-top:1px solid #22343c; border-bottom:1px solid #22343c; }
.wx-rc-metric b { font:10px var(--sans); color:#9fb8c0; font-weight:400; }
.wx-rc-metric strong { font:700 30px var(--mono); color:#e7fbf7; }
.wx-rc-metric em { font:10px var(--mono); color:#7fa2ad; font-style:normal; }
.wx-rc-sub { margin:7px 0 11px; font:9px/1.6 var(--mono); color:#9fb8c0; }
.wx-rc-actions { display:flex; gap:6px; justify-content:flex-end; }
/* device-first interaction */
.wx-station.wx-hw-hidden { grid-template-rows: 52px minmax(0,1fr) 0 !important; }
.wx-station.wx-hw-hidden .wx-hardware { display: none !important; }
.wx-reticle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:7; pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:5px; opacity:.75; }
.wx-reticle i { width:18px; height:18px; border:1px solid rgba(126,240,220,.7); border-radius:50%; box-shadow:0 0 10px rgba(79,224,200,.35); }
.wx-reticle i::before, .wx-reticle i::after { content:''; position:absolute; background:rgba(126,240,220,.7); }
.wx-reticle i::before { width:1px; height:24px; left:8px; top:-4px; }
.wx-reticle i::after { width:24px; height:1px; left:-4px; top:8px; }
.wx-reticle span { font:8px var(--mono); color:#9fd7e2; background:rgba(5,15,19,.6); padding:1px 4px; border-radius:2px; }
#wxHwToggle.on { color:#4fe0c8; }
@media (max-width:760px){ .wx-reticle { display:none; } }
.wx-journey { position:absolute; left:50%; bottom:58px; transform:translateX(-50%); z-index:30; width:min(560px,88%); background:rgba(5,15,19,.95); border:1px solid #3b7a78; border-radius:7px; box-shadow:0 18px 50px rgba(0,0,0,.65); padding:13px 16px; }
.wj-kicker { font:8px var(--mono); color:#4fe0c8; letter-spacing:.1em; }
.wx-journey h3 { margin:4px 0 5px; font:600 16px var(--sans); color:#e7fbf7; }
.wx-journey p { margin:0 0 10px; font:11px/1.75 var(--sans); color:#a9c4cb; }
.wj-bar { height:4px; background:#10272d; border-radius:2px; overflow:hidden; margin-bottom:9px; }
.wj-bar i { display:block; height:100%; background:linear-gradient(90deg,#4fe0c8,#ffb454); }
.wj-foot { display:flex; justify-content:flex-end; gap:6px; }
.wx-anno[data-act] { pointer-events:auto; cursor:pointer; }
.wx-anno[data-act]:hover span { border-color:#ffcf8a; color:#ffcf8a; }
.wx-device-panel { position:absolute; right:14px; bottom:14px; z-index:16; width:270px; padding:8px; background:rgba(5,15,19,.95); border:1px solid #2a505a; border-radius:6px; box-shadow:0 16px 44px rgba(0,0,0,.65); display:none; }
.wx-device-panel.on { display:block; }
.dp-head { display:flex; align-items:baseline; gap:8px; padding:0 2px 6px; border-bottom:1px solid #22343c; }
.dp-head b { font:9px var(--mono); color:#7ef0dc; letter-spacing:.08em; }
.dp-head span { font:7px var(--mono); color:#6f929e; }
.dp-head button { margin-left:auto; border:0; background:transparent; color:#9fb8c0; font-size:16px; cursor:pointer; }
.dp-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding-top:7px; }
.dp-grid button { height:42px; border:1px solid #3d535b; border-radius:4px; background:#12242b; color:#dff8f4; font:9px var(--mono); cursor:pointer; line-height:1.25; }
.dp-grid button i { display:block; font-style:normal; font:8px var(--sans); color:#7fa2ad; margin-top:2px; }
.dp-grid button:hover { border-color:#4fe0c8; color:#7ef0dc; }
.dp-grid button.go { background:#0e3a3f; border-color:#4fe0c8; color:#7ef0dc; }
.wx-measure-anim { position:absolute; inset:0; z-index:25; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(2,9,13,.72); pointer-events:none; }
.wma-orbit { width:150px; height:150px; border:1px solid rgba(79,224,200,.28); border-radius:50%; position:relative; animation:wmaPulse 1.4s ease-in-out infinite; }
.wma-orbit::before, .wma-orbit::after { content:''; position:absolute; inset:18px; border:1px solid rgba(79,224,200,.25); border-radius:50%; }
.wma-orbit::after { inset:42px; border-color:rgba(255,180,84,.4); }
.wma-orbit i { position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%; background:#ffb454; box-shadow:0 0 24px #ffb454; transform:translate(-50%,-50%); animation:wmaDot 1.4s linear infinite; }
@keyframes wmaPulse { 0%,100% { box-shadow:0 0 25px rgba(79,224,200,.12); } 50% { box-shadow:0 0 55px rgba(79,224,200,.3); } }
@keyframes wmaDot { from { transform:translate(-50%,-50%) rotate(0) translateX(62px) rotate(0); } to { transform:translate(-50%,-50%) rotate(360deg) translateX(62px) rotate(-360deg); } }
.wma-cap { font:600 14px var(--mono); color:#dff8f4; letter-spacing:.06em; }
.wma-sub { font:9px var(--mono); color:#7fa2ad; }