:root{
  --bg:#f6f7f9; --panel:#ffffff; --line:#e5e7eb; --line2:#d1d5db;
  --text:#1f2937; --muted:#6b7280; --faint:#9ca3af;
  --accent:#185fa5; --accent2:#378add; --purple:#534ab7; --green:#0f6e56;
  --warn:#b45309;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;line-height:1.55;}
.wrap{max-width:1120px;margin:0 auto;padding:20px 18px 48px;}
header h1{font-size:19px;margin:0 0 4px;font-weight:600;}
header .sub{color:var(--muted);font-size:12px;}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:14px;}
.panel h2{font-size:14px;margin:0 0 12px;font-weight:600;display:flex;align-items:center;gap:8px;}
.panel h2 .tag{font-size:11px;color:var(--muted);font-weight:400;}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
.fgroup{display:flex;flex-direction:column;gap:4px;}
.fgroup label{font-size:11px;color:var(--muted);}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;}
.seg button{border:0;background:#fff;color:var(--text);padding:6px 12px;font-size:12px;cursor:pointer;border-right:1px solid var(--line2);}
.seg button:last-child{border-right:0;}
.seg button.on{background:var(--accent);color:#fff;}
select,input[type=text]{border:1px solid var(--line2);border-radius:8px;padding:6px 9px;font-size:12px;background:#fff;color:var(--text);min-width:120px;}
input[type=text]{min-width:160px;}

/* kpi */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.kpi{background:#f3f6fb;border-radius:10px;padding:12px 14px;}
.kpi .v{font-size:23px;font-weight:600;margin-top:2px;}
.kpi .l{font-size:12px;color:var(--muted);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:880px){.grid2{grid-template-columns:1fr;}.kpis{grid-template-columns:repeat(2,1fr);}}

/* table */
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);}
th{color:var(--muted);font-weight:500;font-size:11.5px;background:#fafbfc;position:sticky;top:0;}
tbody tr{cursor:pointer;}
tbody tr:hover{background:#f5f8fc;}
tbody tr.sel{background:#eaf2fb;}
.pill{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;border:1px solid var(--line2);color:var(--muted);}
.pill.vc{background:#eef4ff;color:var(--accent);border-color:#cfe0fb;}
.pill.pe{background:#eafaf3;color:var(--green);border-color:#c7ecdd;}
.amt{font-variant-numeric:tabular-nums;}
.evttable{max-height:430px;overflow:auto;border:1px solid var(--line);border-radius:10px;}

/* comparable */
.metricbar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;}
.metricbar button{border:1px solid var(--line2);background:#fff;border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;color:var(--text);}
.metricbar button.on{background:var(--accent);color:#fff;border-color:var(--accent);}
.cmp-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;}
@media(max-width:880px){.cmp-grid{grid-template-columns:1fr;}}
.sim{color:var(--accent);font-weight:600;}
.loss{color:var(--warn);}
.hint{font-size:11.5px;color:var(--faint);margin-top:6px;}
.foot{color:var(--faint);font-size:11px;margin-top:18px;text-align:center;}

/* source button + modal */
.srcbtn{border:1px solid var(--line2);background:#fff;border-radius:7px;padding:3px 9px;font-size:11.5px;cursor:pointer;color:var(--accent);}
.srcbtn:hover{background:#eaf2fb;}
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:center;justify-content:center;z-index:50;}
.modal-mask.show{display:flex;}
.modal{background:#fff;border-radius:14px;width:min(560px,92vw);max-height:86vh;overflow:auto;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.22);}
.modal h3{margin:0 0 2px;font-size:16px;font-weight:600;}
.modal .mh{color:var(--muted);font-size:12px;margin-bottom:12px;}
.modal .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:10px 0 14px;}
.modal .grid div{font-size:12.5px;}
.modal .grid b{color:var(--muted);font-weight:500;}
.modal .src{background:#f3f6fb;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.6;}
.modal .src a{color:var(--accent);font-weight:600;}
.modal .x{float:right;cursor:pointer;border:0;background:#f1f5f9;border-radius:8px;padding:4px 10px;font-size:12px;color:var(--muted);}
.taglist{display:flex;flex-wrap:wrap;gap:5px;}
.taglist span{background:#eef4ff;color:var(--accent);border:1px solid #cfe0fb;border-radius:999px;padding:1px 8px;font-size:11px;}