:root{
  color-scheme: light dark;
  --surface:#f7f7f8;--surface2:#eef0f3;--line:rgba(23,23,23,.12);
  --text:#171717;--muted:#5b6169;--brand:#4b3fe3;--brand2:#efeefd;
  --warn:#e8463a;--ok:#1dc981;
}
*{box-sizing:border-box}
body{margin:0;font-family:"SF Pro Text","PingFang SC",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--surface);color:var(--text);font-size:14px;line-height:1.5;}
.top{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px}
.tag{color:var(--muted);font-size:12px}
.wrap{display:flex;gap:18px;padding:20px 24px;max-width:1200px;margin:0 auto;align-items:flex-start}
.panel{flex:0 0 340px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.panel.grow{flex:1 1 auto}
.panel-title{font-weight:600;margin:14px 0 8px}
.panel-title:first-child{margin-top:0}
.drop{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;cursor:pointer;background:var(--surface);transition:border-color .15s}
.drop:hover,.drop:focus{border-color:var(--brand)}
.drop{margin-bottom:8px}
.drop-main{margin:0;font-weight:600}
.sample-row{margin:6px 0 2px}
.sample{width:100%;padding:7px;border:1px dashed var(--brand);background:transparent;border-radius:9px;color:var(--brand);font-size:13px;cursor:pointer}
.sample:hover{background:var(--brand2)}
.drop-sub{margin:6px 0 0;color:var(--muted);font-size:12px}
.field{display:flex;align-items:center;gap:10px;margin:8px 0}
.lbl{color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{border:0;background:transparent;padding:6px 12px;cursor:pointer;font-size:13px;color:var(--muted)}
.seg button.on{background:var(--brand);color:#fff}
.switch input{display:none}
.switch span{width:34px;height:20px;border-radius:999px;background:#c9cdd4;position:relative;display:inline-block;transition:.15s}
.switch input:checked+span{background:var(--brand)}
.switch span::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:.15s}
.switch input:checked+span::after{left:16px}
.clsbar{display:flex;gap:8px;margin-bottom:8px}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer;color:var(--muted)}
.chip.on{background:var(--brand2);border-color:var(--brand);color:var(--brand)}
.clist{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px}
.clist label{display:flex;align-items:center;gap:8px;padding:4px 8px;font-size:13px;cursor:pointer}
.clist label.sens{font-weight:600}
.clist input{accent-color:var(--brand)}
.run{width:100%;margin-top:14px;padding:11px;border:0;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;font-size:14px;cursor:pointer}
.run:disabled{background:#cfd2d9;cursor:not-allowed}
.run.ghost{margin-top:0;background:#fff;color:var(--brand);border:1px solid var(--brand)}
.status{margin-top:10px;font-size:12px;color:var(--muted)}
.stage{position:relative;min-height:280px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;display:flex;align-items:center;justify-content:center}
#cv{max-width:100%;max-height:560px;display:none}
.empty{color:var(--muted);font-size:13px}
.row{display:flex;align-items:center;gap:14px;margin:14px 0}
.row .run{width:auto;margin-top:0}
.metric{font-size:12px;color:var(--muted)}
.results{margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:10px;max-height:260px;overflow:auto}
.results li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.results li:last-child{border-bottom:0}
.results .cls{font-weight:600}
.results .tag2{color:var(--muted);font-size:12px}
.results .masked{color:var(--ok)}
.results .ok{color:var(--warn)}
@media (max-width:860px){.wrap{flex-direction:column}.panel{flex:1 1 auto}.panel.grow{width:100%}}