*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#0f0f0f;color:#e0e0e0;font-family:system-ui,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:40px 20px 28px}
button,select,input{font:inherit}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #35c44f;outline-offset:2px}
.main{display:grid;grid-template-columns:260px minmax(0,1fr) 260px;gap:14px;align-items:start;
  width:min(1180px,100%)}
.main::before{content:''}
.left{display:flex;flex-direction:column;align-items:center;min-width:0}
.card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:28px;width:100%;max-width:640px}
h1{font-size:1.45rem;margin-bottom:3px;letter-spacing:-.02em}
.sub{color:#555;font-size:.8rem;margin-bottom:20px}
.foot{text-align:center;margin:18px 0 0}
.foot p{margin:5px 0}
.drop{border:2px dashed #2e2e2e;border-radius:10px;padding:42px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.drop.over{border-color:#35c44f;background:#1c2a1e}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop .icon{font-size:2rem}
.drop p{margin-top:8px;color:#666;font-size:.85rem}
#fname{margin-top:10px;font-size:.8rem;color:#999;text-align:center;min-height:16px}
.cblock{display:none;margin-top:14px;border:1px solid #2a2a2a;border-radius:10px;overflow:hidden}
.ctop{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;
  background:#111;cursor:pointer;user-select:none;gap:10px}
.ctop .clabel{font-size:.85rem;font-weight:500}
.ctop .cbadge{font-size:.72rem;color:#8a8a8a;margin-left:6px}
.switch{position:relative;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#2e2e2e;border-radius:22px;cursor:pointer;transition:.2s}
.slider:before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;
  background:#888;border-radius:50%;transition:.2s}
input:checked+.slider{background:#35c44f}
input:checked+.slider:before{transform:translateX(18px);background:#fff}
.cpanel{display:none;padding:14px;border-top:1px solid #222;background:#111;gap:10px;flex-direction:column}
.cpanel.open{display:flex}
#mode_newbie{display:flex;flex-direction:column;gap:10px}
#browser_content,#mode_expert{display:none;flex-direction:column;gap:10px}
.loctabs,.modetabs{display:flex;gap:6px}
.ltab,.mtab{flex:1;padding:7px;border:1px solid #2e2e2e;border-radius:7px;background:transparent;
  color:#888;font-size:.8rem;cursor:pointer;transition:all .15s;text-align:center}
.mtab{padding:6px;font-size:.76rem;color:#666}
.ltab.active{background:#35c44f;border-color:#35c44f;color:#fff}
.mtab.active{background:#1a2e1d;border-color:#35c44f;color:#ccc}
.mode-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode-btn{padding:10px 8px;border:2px solid #2a2a2a;border-radius:9px;background:transparent;
  color:#888;cursor:pointer;transition:all .18s;text-align:center;line-height:1.5;width:100%}
.mode-btn .mbicon{font-size:1.3rem;display:block;margin-bottom:2px}
.mode-btn .mbtitle{font-weight:600;display:block;font-size:.78rem;color:#aaa}
.mode-btn .mbdesc{font-size:.64rem;color:#444;display:block;margin-top:1px}
.mode-btn.active{border-color:#35c44f;background:#0d1f10}
.mode-btn.active .mbtitle{color:#35c44f}
.mode-btn.active .mbdesc{color:#2a8035}
.target-row{display:flex;align-items:center;gap:8px;padding-top:6px}
.target-row label{font-size:.72rem;color:#555;white-space:nowrap;flex-shrink:0}
.num-inp{flex:1;background:#1a1a1a;border:1px solid #2e2e2e;border-radius:6px;
  color:#ccc;padding:5px 8px;font-size:.8rem;min-width:0}
.num-inp:focus{outline:none;border-color:#35c44f}
.tunit{font-size:.72rem;color:#555}
.srow{display:flex;align-items:center;gap:10px}
.srow label{font-size:.75rem;color:#666;width:88px;flex-shrink:0}
.srow select,.srow input[type=range]{flex:1;background:#1a1a1a;border:1px solid #2e2e2e;
  border-radius:6px;color:#ccc;padding:5px 8px;font-size:.8rem;min-width:0}
.srow select:focus{outline:none;border-color:#35c44f}
.srow input[type=range]{padding:0;cursor:pointer;accent-color:#35c44f}
.srow .val{font-size:.75rem;color:#888;width:110px;text-align:right;flex-shrink:0}
.hint{font-size:.72rem;color:#666;padding:6px 10px;background:#0d0d0d;border-radius:6px;line-height:1.5}
button.upload{width:100%;margin-top:14px;padding:11px;background:#35c44f;color:#fff;
  border:none;border-radius:8px;font-size:.95rem;cursor:pointer;transition:background .2s}
button.upload:disabled{background:#222;color:#444;cursor:not-allowed}
button.upload:not(:disabled):hover{background:#2eae45}
#prog{display:none;margin-top:14px}
progress{width:100%;height:7px;border-radius:4px;appearance:none}
progress::-webkit-progress-bar{background:#1e1e1e;border-radius:4px}
progress::-webkit-progress-value{background:#35c44f;border-radius:4px}
progress::-moz-progress-bar{background:#35c44f;border-radius:4px}
progress.indeterminate::-webkit-progress-value{
  background:linear-gradient(90deg,#1f6b32,#35c44f,#8ee89a,#35c44f,#1f6b32);
  background-size:200% 100%;animation:slide 1.1s linear infinite}
progress.indeterminate::-moz-progress-bar{
  background:linear-gradient(90deg,#1f6b32,#35c44f,#8ee89a,#35c44f,#1f6b32);
  background-size:200% 100%;animation:slide 1.1s linear infinite}
@keyframes slide{from{background-position:200% 0}to{background-position:0 0}}
#status{margin-top:8px;font-size:.95rem;font-weight:600;color:#f2f2f2;text-align:center}
#status-sub{margin-top:4px;font-size:.8rem;color:#bdbdbd;text-align:center;min-height:16px;font-variant-numeric:tabular-nums}
#queue{display:none;margin-top:12px;border:1px solid #2a2a2a;border-radius:8px;overflow:hidden}
.queue-hd,#queueSummary{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#111;font-size:.78rem}
#queueTitle{color:#ccc}
#clearQueueBtn,.bractions button{background:transparent;border:1px solid #2e2e2e;color:#888;border-radius:5px;padding:3px 9px;font-size:.7rem;cursor:pointer}
#queueSummary{display:none;font-size:.7rem;color:#888;border-top:1px solid #1a1a1a}
.qrow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid #1a1a1a;font-size:.76rem}
.qrow .qnum{flex-shrink:0;width:22px;text-align:right;color:#35c44f;font-weight:600;font-variant-numeric:tabular-nums}
.qrow .qname{flex:1;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .qsize{color:#777;font-size:.68rem}
.qrow .qprog{width:72px;flex-shrink:0}
.qrow .qstatus{font-size:.7rem;color:#888;min-width:110px;text-align:right;flex-shrink:0}
.qrow .qstatus a{color:#35c44f;text-decoration:none}
.qrow .ok{color:#5dbb63}
.qrow .err{color:#e06}
.qrow-error{background:#1f1316}
.qrow-done{background:#0f1a10}
.qremove{background:transparent;border:1px solid #2e2e2e;color:#888;border-radius:5px;width:24px;height:24px;cursor:pointer;flex-shrink:0}
.qremove:hover{background:#3a1a1d;border-color:#a33;color:#f66}
.batch-results{display:none;margin-top:10px;border:1px solid #2a2a2a;border-radius:8px;overflow:hidden}
.batch-results-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:#111;font-size:.78rem;flex-wrap:wrap}
.batch-results-hd .brtitle{color:#ccc;font-weight:500}
.bractions{display:flex;gap:6px;flex-wrap:wrap}
.bractions button:hover,#clearQueueBtn:hover{color:#fff;border-color:#35c44f}
.bres{display:flex;flex-direction:column;padding:10px 12px;border-top:1px solid #1a1a1a;font-size:.76rem;gap:6px}
.bres-head{display:flex;align-items:center;gap:6px}
.bres-head .bnum{flex-shrink:0;min-width:24px;text-align:right;color:#35c44f;font-weight:700}
.bres-head .bname{color:#ccc;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bres-head .bsize{color:#777;font-size:.68rem}
.bok{color:#5dbb63;font-size:.7rem}
.berr{color:#e06;font-size:.7rem}
.preview{width:100%;max-height:220px;background:#000;border-radius:8px;object-fit:contain}
audio.preview{max-height:none;background:transparent}
.bres-link{display:flex;align-items:center;gap:6px}
.bres-link .blabel{font-size:.65rem;color:#777;width:50px;text-align:right;flex-shrink:0}
.bbox{flex:1;background:#161616;border:1px solid #2a2a2a;border-radius:4px;padding:4px 7px;font-size:.7rem;color:#bbb;word-break:break-all;cursor:pointer;font-family:ui-monospace,monospace}
.bbox:hover{border-color:#35c44f}
.bcopy{background:#222;color:#bbb;border:none;border-radius:4px;font-size:.68rem;cursor:pointer;padding:3px 8px;flex-shrink:0}
.bcopy:hover{background:#2e2e2e}
.bcopy.ok{color:#5dbb63}
.bcopy.danger:hover{background:#3a1a1d;color:#f66}
.sidebar{position:sticky;top:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.snav{display:flex;flex-direction:column;gap:4px}
.stab{background:transparent;border:1px solid #222;border-radius:7px;color:#555;
  padding:8px 12px;font-size:.8rem;cursor:pointer;text-align:left;transition:all .15s;width:100%}
.stab.active{background:#1a1a1a;border-color:#35c44f;color:#e0e0e0}
.stab:hover:not(.active){background:#161616;color:#aaa}
.spage{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:16px}
#page_qa,#page_links{display:none}
.perf-header{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#35c44f;flex-shrink:0;box-shadow:0 0 6px #35c44f88;animation:live-pulse 2s ease-in-out infinite}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.perf-updated{font-size:.64rem;color:#8a8a8a;margin-left:auto}
.gauge-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.gauge-ring{position:relative;width:100%}
.gauge-svg{width:100%;height:auto;display:block}
.gauge-track{fill:none;stroke:#1e1e1e;stroke-width:5}
.gauge-fill{fill:none;stroke:#35c44f;stroke-width:5;stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:150.8;transition:stroke-dashoffset .7s ease,stroke .4s ease}
.gauge-fill.warn{stroke:#f0a500}.gauge-fill.crit{stroke:#e03}
.gauge-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.gauge-val{font-size:.75rem;font-weight:600;color:#ddd;font-variant-numeric:tabular-nums}
.gauge-label{font-size:.6rem;color:#9a9a9a;letter-spacing:.04em;text-transform:uppercase}
.spark-section{margin-bottom:12px}
.spark-hd{display:flex;justify-content:space-between;font-size:.62rem;color:#8a8a8a;margin-bottom:4px}
.sparkline{width:100%;height:36px;display:block}
.spark-area{fill:url(#spark_grad)}.spark-line{fill:none;stroke:#35c44f;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.net-section{display:flex;align-items:stretch;background:#111;border:1px solid #1e1e1e;border-radius:8px;overflow:hidden;margin-bottom:12px}
.net-card{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 4px}
.net-divider{width:1px;background:#1e1e1e;margin:8px 0}
.net-arrow{font-size:.95rem;line-height:1;color:#35c44f}.net-tx-arrow{color:#5b9cf6}
.net-speed{font-size:.75rem;font-weight:600;color:#ccc;font-variant-numeric:tabular-nums;margin:2px 0}
.net-dir{font-size:.58rem;color:#9a9a9a;text-transform:uppercase;letter-spacing:.04em}
.detail-label{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:#9a9a9a;margin-bottom:4px}
.detail-val{color:#c8c8c8;font-variant-numeric:tabular-nums;text-align:right}
.detail-track{background:#111;border-radius:3px;height:4px;overflow:hidden}
.detail-fill{height:100%;border-radius:3px;background:#35c44f;width:0%;transition:width .7s ease}
.detail-fill.warn{background:#f0a500}.detail-fill.crit{background:#e03}
.qa-item{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #222}
.qa-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.qa-q{font-size:.8rem;color:#ccc;font-weight:500;margin-bottom:4px}
.qa-a{font-size:.76rem;color:#8a8a8a;line-height:1.55}
.link-item{display:flex;align-items:center;gap:8px;padding:7px 0}
.link-dot{width:5px;height:5px;border-radius:50%;background:#35c44f;flex-shrink:0}
.link-item a{font-size:.8rem;color:#999;text-decoration:none}
.link-item a:hover{color:#35c44f}
@media(max-width:860px){
  body{padding:18px 12px 24px}
  .main{grid-template-columns:1fr}
  .main::before{display:none}
  .sidebar{position:static;width:100%}
  .card{padding:20px 16px;max-width:none}
  .srow{flex-wrap:wrap}
  .srow .val{width:auto;margin-left:auto}
}