:root{--demo-purple:#625ce1;--demo-blue:#4c8bdf;--demo-teal:#22b8aa;--demo-ink:#26345f}
html{scroll-behavior:smooth}
body{overflow-x:hidden}body:before{content:"静态演示";position:fixed;inset:14px 14px auto auto;width:auto;height:auto;z-index:9999;padding:7px 11px;border:1px solid rgba(255,255,255,.58);border-radius:999px;background:rgba(35,42,112,.76);box-shadow:0 8px 24px rgba(20,30,92,.24);backdrop-filter:blur(12px);filter:none;color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;pointer-events:none}
button,a,.seg-tab,.tab,.quick-link,.wifi-band-toggle{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(38,151,218,.34)!important;outline-offset:2px}
.demo-toast{position:fixed;left:50%;bottom:24px;z-index:12000;max-width:min(440px,calc(100% - 28px));padding:11px 16px;border:1px solid #c8d2f9;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 16px 44px rgba(39,50,111,.24);color:#344472;font-size:13px;font-weight:800;transform:translate(-50%,18px);opacity:0;transition:.22s ease;pointer-events:none}.demo-toast.show{transform:translate(-50%,0);opacity:1}
.demo-modal{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:18px;background:rgba(21,29,70,.56);backdrop-filter:blur(5px)}.demo-modal[hidden]{display:none}.demo-modal-panel{width:min(560px,100%);max-height:min(720px,88vh);overflow:auto;border:1px solid #d5dcf7;border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(20,28,84,.34);padding:22px}.demo-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.demo-modal-head h2{margin:0;color:#2c3d74;font-size:20px}.demo-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.demo-modal-grid label{display:grid;gap:6px;color:#677495;font-size:12px;font-weight:800}.demo-modal-grid input,.demo-modal-grid select{width:100%;box-sizing:border-box}.demo-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.demo-chip,.demo-status{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 8px;border:1px solid #cbd4f5;border-radius:999px;background:#f3f5ff;color:#5262b8;font-size:11px;font-weight:850;white-space:nowrap}.demo-status.online{border-color:#a8ead2;background:#ecfff7;color:#087b54}.demo-status.offline{border-color:#ffc7cf;background:#fff1f3;color:#b52b42}.demo-status.warn{border-color:#f3d18f;background:#fff8e7;color:#9a6711}
.demo-row-actions{display:flex;gap:6px;flex-wrap:wrap}.demo-row-actions button{min-height:30px;padding:4px 9px}.demo-select{min-width:112px;padding:6px 26px 6px 9px}.demo-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}.demo-location{display:flex;align-items:center;gap:6px;white-space:nowrap}.demo-dot{width:7px;height:7px;border-radius:50%;background:#56d7ae;box-shadow:0 0 0 4px rgba(86,215,174,.14)}
.demo-stat-card{border:1px solid #dbe2f7;border-radius:14px;background:linear-gradient(145deg,#fff,#f6f8ff);padding:16px;box-shadow:0 8px 22px rgba(68,82,167,.09)}.demo-stat-card small{color:#7582a2;font-weight:800}.demo-stat-card strong{display:block;margin-top:8px;color:#2c3f78;font:900 24px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace}.demo-stat-card p{margin:7px 0 0;color:#6c7897;font-size:12px}
.demo-gauge{--value:50;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:conic-gradient(#5f5de1 calc(var(--value)*1%),#e7eafa 0);position:relative}.demo-gauge:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}.demo-gauge b{position:relative;color:#34467f;font:900 18px ui-monospace,SFMono-Regular,Consolas,monospace}
.demo-chart{width:100%;height:250px}.demo-chart .grid{stroke:#d9e0f2;stroke-width:1;stroke-dasharray:4 6}.demo-chart .area-in{fill:rgba(32,166,121,.16)}.demo-chart .area-out{fill:rgba(40,109,180,.17)}.demo-chart .line-in{fill:none;stroke:#20a679;stroke-width:3}.demo-chart .line-out{fill:none;stroke:#286db4;stroke-width:3}.demo-chart-legend{display:flex;justify-content:flex-end;gap:18px;color:#596884;font-size:12px;font-weight:800}.demo-chart-legend i{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%}
.demo-help{color:#475675;line-height:1.75}.demo-help h2{margin-top:0;color:#293b75}.demo-help h3{margin:24px 0 8px;color:#4255a2}.demo-help ol{padding-left:22px}.demo-help code{padding:2px 6px;border-radius:6px;background:#eef1ff;color:#4d5fc0}.demo-help-note{padding:13px 15px;border:1px solid #cbd6fd;border-radius:12px;background:#f5f7ff}
.demo-progress{height:8px;overflow:hidden;border-radius:999px;background:#e7eafb}.demo-progress>i{display:block;width:72%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#625ce1,#2db7cd);animation:demo-progress 2.2s ease-in-out infinite alternate}
.demo-empty{padding:28px;text-align:center;color:#7a86a5}.demo-hidden{display:none!important}
.proxy-console #proxy-pane-other #proxy-table th:nth-child(6),.proxy-console #proxy-pane-other #proxy-table td:nth-child(6){width:7.2%!important}
.proxy-console #proxy-pane-other #proxy-table th:nth-child(8),.proxy-console #proxy-pane-other #proxy-table td:nth-child(8){width:12.8%!important}
#proxy-table th:last-child,#proxy-table td:last-child,#proxy-pptp-table th:last-child,#proxy-pptp-table td:last-child,#proxy-l2tp-table th:last-child,#proxy-l2tp-table td:last-child,#proxy-sstp-table th:last-child,#proxy-sstp-table td:last-child{position:sticky;right:0;z-index:3;min-width:248px;white-space:nowrap;background:#fff;box-shadow:-9px 0 16px rgba(57,72,147,.12)}
#proxy-table thead th:last-child,#proxy-pptp-table thead th:last-child,#proxy-l2tp-table thead th:last-child,#proxy-sstp-table thead th:last-child{z-index:5;background:linear-gradient(135deg,#605ce1,#4c8bdf)}
#proxy-table td:last-child .demo-row-actions,#proxy-pptp-table td:last-child .demo-row-actions,#proxy-l2tp-table td:last-child .demo-row-actions,#proxy-sstp-table td:last-child .demo-row-actions{flex-wrap:nowrap;min-width:max-content}
@keyframes demo-progress{from{width:34%}to{width:86%}}
@media(max-width:780px){body:before{inset:8px 8px auto auto;padding:5px 8px;font-size:9px}.demo-modal-grid{grid-template-columns:1fr}.demo-row-actions{flex-wrap:nowrap}.demo-row-actions button{white-space:nowrap}.demo-chart{height:210px}.device-toolbar-right{width:100%;max-width:100%;flex-wrap:wrap!important}.device-online-badge{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-toast,.demo-progress>i{transition:none;animation:none}.protocol-flow-packets{display:none}}