*{box-sizing:border-box}
:root{
  --bg:#0b0e13; --accent:#C41230; --accent-soft:rgba(196,18,48,.14);
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
  --txt:#eef1f6; --muted:#8a93a0; --dim:#5f6c7d;
  --card:linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.014));
  --labelw:290px; --dayw:18px; --tailw:134px; --rowh:34px; --grph:38px; --axish:46px;
}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1100px 620px at 50% -12%,#1b2230,#0b0e13 62%);
  background-attachment:fixed;color:var(--txt);min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1580px;margin:0 auto;padding:38px 22px 54px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------------- header ---------------- */
h1{margin:0;font-size:29px;font-weight:900;letter-spacing:.4px}
h1 b{color:var(--accent)}
.sub{color:var(--muted);font-size:13px;margin-top:10px;line-height:1.85}
.sub b{color:#c8d0db;font-weight:800}
.sub .sep{color:var(--dim);margin:0 7px}
.sub .wl{color:#e8b45a;font-weight:700}
.tag{display:inline-block;font-size:11px;font-weight:800;color:var(--accent);
  background:var(--accent-soft);border:1px solid rgba(196,18,48,.42);border-radius:999px;
  padding:2px 9px;margin-left:8px;vertical-align:2px;letter-spacing:.4px}
.tag2{display:inline-block;font-size:11px;font-weight:800;color:#e8b45a;
  background:rgba(232,180,90,.12);border:1px solid rgba(232,180,90,.42);border-radius:999px;
  padding:2px 9px;margin-left:6px;vertical-align:2px;letter-spacing:.3px}

/* ---------------- 口径声明 ---------------- */
.scope{margin-top:20px;background:linear-gradient(180deg,rgba(232,180,90,.10),rgba(255,255,255,.012));
  border:1px solid rgba(232,180,90,.34);border-left:4px solid #e8b45a;border-radius:14px;padding:14px 18px 15px}
.scope .sc-t{font-size:12px;font-weight:900;color:#e8b45a;letter-spacing:.6px}
.scope .sc-b{font-size:13px;color:#d5dbe4;line-height:1.95;margin-top:7px}
.scope .sc-b b{color:#fff;font-weight:800}

/* ---------------- metrics ---------------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin-top:26px}
.m{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px 13px;min-width:0;
  transition:border-color .18s}
.m:hover{border-color:rgba(255,255,255,.2)}
.m .k{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m .v{font-size:25px;font-weight:900;color:#fff;margin-top:8px;line-height:1.12;letter-spacing:-.3px}
.m .v small{font-size:12.5px;font-weight:800;color:var(--muted);margin-left:4px;letter-spacing:0}
.m.hero{border-color:rgba(196,18,48,.5);background:linear-gradient(180deg,rgba(196,18,48,.15),rgba(255,255,255,.012))}
.m.hero .v{color:#ff8fa1}
.m .f{font-size:11px;color:var(--dim);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- panels ---------------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-top:22px;overflow:hidden}
.ptitle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 18px 13px;border-bottom:1px solid var(--line-soft)}
.ptitle h2{margin:0;font-size:14.5px;font-weight:800;padding-left:10px;border-left:3px solid var(--accent)}
.ptitle .hint{font-size:11.5px;color:var(--dim);margin-left:auto;line-height:1.6}

/* ---------------- legend ---------------- */
.legend{display:flex;flex-wrap:wrap;gap:9px;padding:14px 18px 15px;align-items:center}
.chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px 7px 11px;cursor:pointer;
  font-size:12.5px;font-weight:700;color:#d8dde6;transition:.16s;user-select:none}
.chip:hover{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.055)}
.chip:focus{outline:none;border-color:rgba(255,255,255,.34)}
.chip .dot{width:10px;height:10px;border-radius:3px;flex:none}
.chip .num{font-size:11px;color:var(--dim);font-weight:800;white-space:nowrap}
.chip.off{opacity:.34;filter:saturate(.25)}
.chip.off .dot{background:var(--dim)!important}
.chip.on{border-color:rgba(196,18,48,.55);box-shadow:inset 0 0 0 1px rgba(196,18,48,.18)}
.legend .spacer{flex:1;min-width:8px}
.btn{background:rgba(255,255,255,.04);border:1px solid var(--line);color:#cfd6e0;border-radius:999px;
  padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;transition:.16s;font-family:inherit}
.btn:hover{border-color:rgba(255,255,255,.24);color:#fff}

/* ---------------- gantt ---------------- */
.gscroll{overflow-x:auto;overflow-y:visible;padding-bottom:2px}
.gscroll::-webkit-scrollbar{height:10px}
.gscroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:8px}
.gscroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.gscroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
.ginner{min-width:max-content;position:relative}
.grows{min-width:max-content}
.grow{display:flex;align-items:stretch}

/* left label column */
.g-lcell{width:var(--labelw);flex:none;min-width:var(--labelw);position:sticky;left:0;z-index:4;
  background:linear-gradient(90deg,#11151c 84%,rgba(17,21,28,.9));
  border-right:1px solid var(--line);box-shadow:6px 0 14px -12px #000}
/* right tail column */
.g-tcell{width:var(--tailw);flex:none;min-width:var(--tailw);position:sticky;right:0;z-index:4;
  background:linear-gradient(270deg,#11151c 80%,rgba(17,21,28,.9));
  border-left:1px solid var(--line);box-shadow:-6px 0 14px -12px #000}

/* header row */
.hrow{position:sticky;top:0;z-index:9}
.hrow .g-lcell{z-index:11;display:flex;align-items:flex-end;padding:0 14px 9px 18px;
  height:var(--axish);font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.3px;
  border-bottom:1px solid var(--line);background:#11151c}
.hrow .g-tcell{z-index:11;display:flex;align-items:center;justify-content:center;height:var(--axish);
  font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.3px;border-bottom:1px solid var(--line);background:#11151c}
.hrow .g-track{position:relative;flex:none;height:var(--axish);border-bottom:1px solid var(--line)}

/* middle track column */
.g-track{position:relative;flex:none}

/* group header row */
.ghrow{position:sticky;top:var(--axish);z-index:6}
.ghrow .g-lcell{z-index:8;height:var(--grph);display:flex;align-items:center;gap:9px;padding:0 14px 0 18px;
  font-size:12.5px;font-weight:900;color:#fff;letter-spacing:.4px;background:#11151c;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ghrow .g-lcell .gd{width:11px;height:11px;border-radius:3px;flex:none}
.ghrow .g-lcell .gn{font-size:10.5px;color:var(--dim);font-weight:800;white-space:nowrap}
.ghrow .g-track{height:var(--grph);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008))}
.ghrow .g-tcell{height:var(--grph);display:flex;align-items:center;justify-content:flex-end;padding:0 12px;
  font-size:11px;font-weight:900;color:#fff;background:#11151c;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)}

/* item row */
.irow{cursor:help}
.irow .g-lcell{min-height:var(--rowh);display:flex;align-items:center;padding:5px 13px 5px 22px;
  font-size:12.5px;color:#c8d0db;line-height:1.35;transition:color .15s}
.irow:hover .g-lcell{color:#fff;background:linear-gradient(90deg,#171c25 84%,rgba(23,28,37,.9))}
.irow .g-lcell .name{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.irow .g-track{min-height:var(--rowh)}
.irow .rowline{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.045)}
.irow .g-tcell{min-height:var(--rowh);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:5px 12px 5px 13px}
.irow:hover .g-tcell{background:linear-gradient(270deg,#171c25 80%,rgba(23,28,37,.9))}

/* bars */
.span-bar{position:absolute;top:50%;transform:translateY(-50%);height:8px;border-radius:5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);overflow:hidden}
.span-fill{position:absolute;inset:0;opacity:.22;border-radius:5px}
.seg{position:absolute;top:50%;transform:translateY(-50%);height:14px;border-radius:4px;
  min-width:6px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.seg::after{content:"";position:absolute;inset:0;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 62%)}

/* background grid layer（绝对定位铺满整行，对齐中间轨道列） */
.grid{position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;
  margin-left:var(--labelw);width:calc(var(--dayw) * var(--ndays, 51))}.weekend{position:absolute;top:0;bottom:0;width:calc(var(--dayw) * 2);background:rgba(255,255,255,.026)}
.hgrid{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.05)}
.today{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,90,120,.7);
  box-shadow:0 0 9px rgba(255,90,120,.55)}

/* axis labels */
.mlabel{position:absolute;top:7px;font-size:12px;font-weight:900;color:#fff;letter-spacing:.6px;
  padding-left:8px;border-left:2px solid rgba(196,18,48,.85);line-height:16px;white-space:nowrap;pointer-events:none}
.wlabel{position:absolute;top:27px;font-size:9.5px;color:var(--dim);font-weight:700;padding-left:5px;
  white-space:nowrap;pointer-events:none}
.gname{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:11.5px;font-weight:900;
  color:#fff;opacity:.9;pointer-events:none}

/* tail content */
.tnum{font-size:12px;font-weight:800;color:#e8edf4;white-space:nowrap}
.tnum .u{font-size:10.5px;color:var(--dim);font-weight:700;margin-left:4px}
.tnum .hl{color:#ff8fa1}
.tbar{height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.tbar i{display:block;height:100%;border-radius:2px}

/* empty (all filtered out) */
#gempty{display:none;padding:26px 20px;text-align:center;color:var(--muted);font-size:12.5px}
#gempty b{color:#fff}

/* ---------------- top10 ---------------- */
.t10{padding:6px 18px 16px}
.t10r{display:grid;grid-template-columns:24px minmax(120px,1.05fr) minmax(80px,2fr) 92px;
  align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.t10r:last-child{border-bottom:0}
.t10r .rk{font-size:12px;font-weight:900;color:var(--dim);text-align:center}
.t10r.top3 .rk{color:var(--accent)}
.t10r .nm{font-size:12.5px;color:#cfd7e1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t10 .cat{font-size:10.5px;color:var(--dim);font-weight:700;margin-left:7px}
.t10r .bw{background:rgba(255,255,255,.055);border-radius:5px;height:16px;overflow:hidden;position:relative}
.t10r .bw i{display:block;height:100%;border-radius:5px;transition:width .4s ease}
.t10r .bw i.bg{position:absolute;inset:0;width:100%!important;opacity:.22}
.t10r .hv{font-size:12.5px;font-weight:900;color:#fff;text-align:right;white-space:nowrap}
.t10r .hv .u{font-size:10.5px;color:var(--dim);font-weight:700;margin-left:3px}
.t10r.hidden-row{opacity:.3}

/* ---------------- tooltip ---------------- */
#tip{position:fixed;z-index:99;left:0;top:0;max-width:336px;min-width:250px;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,28,37,.985),rgba(15,19,25,.985));
  border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 15px 12px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.9);opacity:0;transform:translateY(4px);
  transition:opacity .13s,transform .13s}
#tip.show{opacity:1;transform:translateY(0)}
#tip .t{font-size:13.5px;font-weight:900;color:#fff;line-height:1.4}
#tip .cbadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  margin-top:8px;padding:2px 9px;border-radius:999px;color:#dfe5ee;background:rgba(255,255,255,.06);
  border:1px solid var(--line)}
#tip .cbadge .d{width:8px;height:8px;border-radius:2px;flex:none}
#tip .rows{margin-top:10px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px}
#tip .rows .k{color:var(--muted);font-weight:700;white-space:nowrap}
#tip .rows .v{color:#eef1f6;font-weight:800;text-align:right}
#tip .rows .v.hl{color:#ff8fa1}
#tip .note{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:#9aa4b2;line-height:1.65}

/* ---------------- footer ---------------- */
.foot{margin-top:30px;font-size:11.5px;color:var(--dim);line-height:2;border-top:1px solid var(--line);padding-top:15px}
.foot b{color:#9aa4b2;font-weight:800}

/* ---------------- error / skeleton ---------------- */
#err{display:none;margin-top:22px}
.errbox{background:linear-gradient(180deg,rgba(196,18,48,.13),rgba(255,255,255,.015));
  border:1px solid rgba(196,18,48,.45);border-radius:16px;padding:30px 26px;text-align:center}
.errbox .et{font-size:17px;font-weight:900;color:#fff}
.errbox .ed{font-size:12.5px;color:var(--muted);line-height:2;margin-top:11px}
.errbox code{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;font-size:11.5px;color:#ffb3c0}
.skel{padding:18px;display:grid;gap:11px}
.skel i{display:block;height:15px;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));
  background-size:220% 100%;animation:sh 1.25s infinite linear}
@keyframes sh{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1180px){ :root{--labelw:238px} }
@media (max-width:860px){
  .wrap{padding:26px 13px 40px}
  h1{font-size:22px}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(139px,1fr));gap:9px}
  .m .v{font-size:21px}
  .legend{padding:12px 14px 13px;gap:7px}
  .ptitle{padding:13px 14px 11px}
  .ptitle .hint{display:none}
  .t10{padding:4px 14px 14px}
  .t10r{grid-template-columns:20px minmax(88px,1fr) 78px;gap:9px}
  .t10r .bw{display:none}
  #tip{max-width:calc(100vw - 22px);min-width:0}
}
@media (max-width:620px){
  :root{--labelw:174px;--tailw:106px}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(116px,1fr))}
  .m{padding:12px 12px 11px}
  .m .v{font-size:19px}
  .irow .g-lcell{padding-left:15px;font-size:11.5px}
  h1{font-size:20px}
  .t10 .cat{display:none}
}
@media (max-width:430px){ :root{--labelw:150px} .m .f{display:none} }