:root{--glass-bg:#10141c8c;--glass-bg-strong:#10141c9e;--glass-border:#ffffff1f;--text-primary:#e8eef6;--text-muted:#9fb3c8;--text-dim:#cfd8e3;--accent-yellow:#ffd23f;--accent-blue:#1f6feb;--accent-blue-light:#78b4ff;--accent-orange:#ff8c28}*{box-sizing:border-box;margin:0;padding:0}html,body{background:#000;width:100%;height:100%;font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}#app{position:fixed;inset:0}#ui{z-index:10;pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:auto}#title{z-index:5;color:#fff;text-shadow:0 2px 8px #00000073;pointer-events:none;position:absolute;top:18px;left:20px}#title h1{letter-spacing:1px;font-size:20px;font-weight:600}#title p{opacity:.8;margin-top:4px;font-size:12px}#hud{z-index:10;background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--glass-border);color:var(--text-primary);border-radius:12px;min-width:210px;padding:12px 16px;position:absolute;top:18px;right:20px;box-shadow:0 6px 24px #00000059}#hud .row{justify-content:space-between;align-items:center;margin:4px 0;font-size:13px;display:flex}#hud .label{opacity:.65}#hud .val{font-variant-numeric:tabular-nums;font-weight:600}#hud .status{color:var(--accent-yellow)}#hud button{cursor:pointer;color:#fff;border:none;border-radius:8px;width:100%;margin-top:8px;padding:9px 10px;font-size:13px;font-weight:600;transition:background .2s}#modeBtn{background:#1f6febd9}#modeBtn:hover{background:#1f6feb}#modeBtn.manual{background:#ff8c28eb}#modeBtn.manual:hover{background:#ff8c28}#craftBtn{background:#5a6470d9}#craftBtn:hover{background:#5a6470}#hud .quality{border-top:1px solid #ffffff1a;margin-top:10px;padding-top:8px}#hud .q-head{justify-content:space-between;align-items:center;font-size:12px;display:flex}#hud .seg{gap:4px;margin-top:6px;display:flex}#hud .seg-btn{color:#cfe0f5;cursor:pointer;background:#ffffff14;border:1px solid #0000;border-radius:6px;flex:1;width:auto;margin-top:0;padding:5px 0;font-size:12px;transition:background .15s,border-color .15s}#hud .seg-btn:hover{background:#ffffff29}#hud .seg-btn.on{color:#fff;background:#1f6febbf;border-color:#78b4ff99}#hud #shareBtn{border:1px solid var(--glass-border);color:#cfe0f5;background:#ffffff1a}#hud #shareBtn:hover{color:#fff;background:#ffffff2e}#tourBar{z-index:14;align-items:center;gap:8px;display:flex;position:absolute;bottom:26px;left:50%;transform:translate(-50%)}#tourBtn{color:#fff;border:1px solid var(--glass-border);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#10141c9e;border-radius:20px;padding:9px 16px;font-size:13px;font-weight:600;transition:background .2s,border-color .2s}#tourBtn:hover{background:#1f6febcc}#tourBtn.on{background:#ff8c28e6;border-color:#ffb47899}#tourBar .tour-cap{color:#dfe7f0;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;background:#10141c9e;border-radius:16px;padding:6px 12px;font-size:12px}#drawerBtn{z-index:23;background:var(--glass-bg-strong);border:1px solid var(--glass-border);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:38px;height:38px;padding:0;display:none;position:absolute;top:14px;left:14px}#drawerBtn .bar{background:#fff;border-radius:1px;width:16px;height:2px;display:block}#drawerBackdrop{z-index:21;background:#00000073;border:none;display:none;position:absolute;inset:0}#tip{color:var(--text-dim);text-align:center;text-shadow:0 1px 4px #0009;opacity:.9;pointer-events:none;font-size:12px;line-height:1.7;position:absolute;bottom:134px;left:50%;transform:translate(-50%)}.joy{z-index:12;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:none;background:#10141c80;border:1px solid #ffffff2e;border-radius:50%;width:122px;height:122px;position:absolute;bottom:24px}.joy.active{border-color:#78b4fff2;box-shadow:0 0 14px #78b4ff66}#joyL{left:26px}#joyR{right:26px}.joy .knob{pointer-events:none;background:#78b4ffd9;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%;box-shadow:0 3px 10px #00000073}.joy .cap{text-align:center;color:#aab8c8;pointer-events:none;width:100%;font-size:11px;position:absolute;bottom:-22px}#sidebar{z-index:22;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:14px;flex-direction:column;width:252px;padding:14px 12px;display:flex;position:absolute;top:72px;bottom:158px;left:16px;box-shadow:0 8px 30px #0006}#sidebar .sb-head{color:#fff;font-size:15px;font-weight:700}#sidebar .sb-sub{color:var(--text-muted);margin:3px 0 8px;font-size:11px}#sbList{flex:1;padding-right:4px;overflow-y:auto}#sbList::-webkit-scrollbar{width:6px}#sbList::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.sb-cat{color:#7f93a8;letter-spacing:1px;margin:11px 2px 4px;font-size:11px}.sb-item{cursor:pointer;color:#dfe7f0;border:1px solid #0000;border-radius:9px;align-items:center;gap:8px;margin:3px 0;padding:7px 9px;font-size:13px;transition:background .15s,border-color .15s;display:flex}.sb-item:hover{background:#ffffff14}.sb-item.active{color:#fff;background:#1f6feb59;border-color:#78b4ff99}.sb-item .no{color:#cfe0f5;text-align:center;background:#ffffff24;border-radius:5px;min-width:18px;padding:1px 5px;font-size:10px}.sb-item.free .no{color:#d6ffe6;background:#2ecc7152}.sb-item .nm{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sb-item .cl{color:#8aa0b8;margin-left:auto;font-size:10px}#subjPanel{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);width:288px;color:var(--text-primary);background:#10141ca8;border-radius:14px;max-height:calc(100vh - 180px);padding:14px 14px 12px;position:absolute;top:150px;right:16px;overflow:auto;box-shadow:0 8px 30px #0006}#subjPanel.hidden{display:none}#subjPanel .sp-head{align-items:baseline;gap:8px;display:flex}#spName{font-size:16px;font-weight:700}#spClause{color:#cfe0f5;background:#ffffff1f;border-radius:6px;padding:1px 7px;font-size:11px}#spDesc{color:#bcccdb;margin:8px 0 10px;font-size:12px;line-height:1.75}.sp-mt{color:#7f93a8;letter-spacing:1px;border-top:1px solid #ffffff1a;margin-bottom:6px;padding-top:8px;font-size:11px}#subjMetrics{color:#dfe7f0;font-size:12.5px;line-height:1.95}#subjMetrics b{color:#fff}.verdict{text-align:center;border-radius:9px;margin:10px 0 4px;padding:7px 10px;font-size:13px;font-weight:600}.verdict.run{color:#bcd8ff;background:#78b4ff33}.verdict.pass{color:#7dffb0;background:#2ecc7140}.verdict.warn{color:#ffe08a;background:#ffd23f38}.verdict.fail{color:#ff9b94;background:#ff3b3040}#subjPanel button{cursor:pointer;color:#fff;border:none;border-radius:8px;width:100%;margin-top:8px;padding:8px;font-size:13px;font-weight:600}#reTestBtn{background:#1f6febd9}#reTestBtn:hover{background:#1f6feb}#exitTestBtn{background:#5a6470d9}#exitTestBtn:hover{background:#5a6470}#hud button:disabled{opacity:.4;cursor:not-allowed}@media (max-width:720px){#drawerBtn{display:flex}#drawerBackdrop{display:block}#title{top:18px;left:64px}#title h1{font-size:16px}#title p,#tip{display:none}#hud{width:46vw;min-width:0;max-width:186px;padding:10px 12px;top:12px;right:12px}#hud .row{font-size:12px}#hud button{padding:7px 8px;font-size:12px}#hud .q-head{font-size:11px}#hud .seg-btn{padding:4px 0;font-size:11px}.joy{width:104px;height:104px}.joy .knob{width:44px;height:44px;margin:-22px 0 0 -22px}#tourBar{bottom:142px}#tourBtn{padding:8px 14px;font-size:12px}#tourBar .tour-cap{padding:5px 10px;font-size:11px}#sidebar{border-radius:0 14px 14px 0;width:78vw;max-width:300px;padding:58px 12px 16px;transition:transform .24s;top:0;bottom:0;left:0;transform:translate(-102%)}#sidebar.open{transform:none}#subjPanel{width:auto;max-height:48vh;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));border-radius:14px 14px 0 0;inset:auto 0 0}}@media (max-width:720px) and (max-height:480px){#subjPanel{max-height:64vh}#hud{width:40vw}.joy{width:88px;height:88px}.joy .knob{width:38px;height:38px;margin:-19px 0 0 -19px}}