:root { color-scheme:dark; --bg:#0b0f14; --card:#121924; --surface:#0e1520; --primary:#05080c; --line:#1f2a3a; --fg:#e6edf3; --fg2:#c9d1d9; --muted:#8b9bb4; --dim:#566579; --dot:#3b4656; --accent:#3fb950; --accent2:#58a6ff; --sky:#79c0ff; --purple:#b392f0; --warn:#d29922; --bad:#f85149; --btn-fg:#04101e; --logo-a:#1f6feb; --logo-b:#3fb950; --shadow:none; --hover:rgba(255,255,255,.04);
  --s1:#4590e6; --s2:#2ea043; --s3:#9270e8; --s4:#bf8700; --seq0:#16223a; --seq1:#1e3f6e; --seq2:#245ea6; --seq3:#2f7ad3; --seq4:#58a6ff; --grid:#1a2330; --axis:#2c3a4d; --wash:rgba(69,144,230,.12) }
:root[data-theme="light"] { color-scheme:light; --bg:#f6f8fa; --card:#ffffff; --surface:#f0f3f7; --primary:#e8f0fb; --line:#d0d7de; --fg:#1f2328; --fg2:#3b444d; --muted:#59636e; --dim:#8b949e; --dot:#c5ccd3; --accent:#1a7f37; --accent2:#0969da; --sky:#0a5bc4; --purple:#6639ba; --warn:#9a6700; --bad:#cf222e; --btn-fg:#ffffff; --logo-a:#0969da; --logo-b:#1a7f37; --shadow:0 1px 2px rgba(31,35,40,.06); --hover:rgba(31,35,40,.045);
  --s1:#0969da; --s2:#1a7f37; --s3:#6639ba; --s4:#9a6700; --seq0:#eef4fc; --seq1:#c6dcf7; --seq2:#8fbaf0; --seq3:#4a90e2; --seq4:#0969da; --grid:#e6eaf0; --axis:#d0d7de; --wash:rgba(9,105,218,.10) }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme:light; --bg:#f6f8fa; --card:#ffffff; --surface:#f0f3f7; --primary:#e8f0fb; --line:#d0d7de; --fg:#1f2328; --fg2:#3b444d; --muted:#59636e; --dim:#8b949e; --dot:#c5ccd3; --accent:#1a7f37; --accent2:#0969da; --sky:#0a5bc4; --purple:#6639ba; --warn:#9a6700; --bad:#cf222e; --btn-fg:#ffffff; --logo-a:#0969da; --logo-b:#1a7f37; --shadow:0 1px 2px rgba(31,35,40,.06); --hover:rgba(31,35,40,.045);
  --s1:#0969da; --s2:#1a7f37; --s3:#6639ba; --s4:#9a6700; --seq0:#eef4fc; --seq1:#c6dcf7; --seq2:#8fbaf0; --seq3:#4a90e2; --seq4:#0969da; --grid:#e6eaf0; --axis:#d0d7de; --wash:rgba(9,105,218,.10) } }
* { box-sizing:border-box }
html { background:var(--bg) }
body { margin:0 auto; width:1200px; max-width:100%; background:var(--bg); color:var(--fg); font:15px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; padding:0 20px 40px }
header { display:flex; justify-content:space-between; align-items:center; padding:22px 0 10px; flex-wrap:nowrap; gap:12px }
.brand { display:flex; gap:14px; align-items:center; min-width:0; flex:1 1 auto }
.logo { width:52px; height:52px; display:grid; place-items:center; background:linear-gradient(135deg,var(--logo-a),var(--logo-b)); border-radius:14px; flex:0 0 auto }
h1 { margin:0; font-size:26px; letter-spacing:.3px }
.sub { color:var(--muted); font-size:13px }
.headright { display:flex; align-items:center; gap:10px; flex:0 0 auto }
.pill { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:13px; color:var(--muted) }
.pill .dot { width:9px; height:9px; border-radius:50%; background:var(--warn); box-shadow:0 0 8px var(--warn) }
.pill.ok .dot { background:var(--accent); box-shadow:0 0 10px var(--accent) }
.pill.bad .dot { background:var(--bad); box-shadow:0 0 10px var(--bad) }
.themebtn, a.hbtn, button.hbtn { background:transparent; color:var(--muted); border:1px solid var(--line); padding:5px 10px; border-radius:999px; font-size:13px; font-weight:400; cursor:pointer; text-decoration:none; font:inherit; font-size:13px }
.themebtn:hover, a.hbtn:hover, button.hbtn:hover { color:var(--fg); text-decoration:none }
.tabs { display:flex; gap:6px; margin:4px 0 12px; border-bottom:1px solid var(--line) }
.tabs a { padding:8px 14px; color:var(--muted); text-decoration:none; border:1px solid transparent; border-bottom:0; border-radius:8px 8px 0 0; font-weight:600; font-size:14px }
.tabs a.active { color:var(--fg); background:var(--card); border-color:var(--line); margin-bottom:-1px }
.tabs a:hover { color:var(--fg); text-decoration:none }
.filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 14px; font-size:13px; color:var(--muted) }
.filters .seg { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden }
.filters .seg button { background:transparent; color:var(--muted); border:0; padding:5px 12px; font:inherit; font-size:13px; cursor:pointer; border-radius:0 }
.filters .seg button.active { background:var(--card); color:var(--fg); font-weight:600 }
.filters .seg button:hover { color:var(--fg) }
.filters .win { margin-left:auto; font-variant-numeric:tabular-nums }
.sectionhead { margin:22px 0 4px; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.8px }
.counters { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; margin:10px 0 16px }
.counter { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 12px; text-align:center; box-shadow:var(--shadow); min-width:0 }
.counter .n { font-size:22px; font-weight:700; white-space:nowrap; letter-spacing:-.2px }
.counter .l { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px; margin-top:2px }
.counter .d { font-size:12px; margin-top:4px; color:var(--muted); font-variant-numeric:tabular-nums }
.counter .d.ok { color:var(--accent) } .counter .d.bad { color:var(--bad) } .counter .d.warn { color:var(--warn) }
.counter svg.spark { display:block; width:100%; height:26px; margin-top:6px }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px }
.grid.one { grid-template-columns:1fr } .grid.three { grid-template-columns:1fr 1fr 1fr } .grid.four { grid-template-columns:repeat(4,minmax(0,1fr)) }
.grid + .sectionhead { margin-top:8px }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); min-width:0 }
.card.wide { grid-column:1 / -1 }
.card .head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px }
.card .head h2 { margin:0 }
h2 { margin:0 0 10px; font-size:16px } h2 .muted { font-size:13px; margin-left:6px }
h3 { margin:14px 0 6px; font-size:14px }
.muted { color:var(--muted); font-weight:400 } .small { font-size:12px } .dim { color:var(--dim) }
.ok { color:var(--accent) } .bad { color:var(--bad) } .warn { color:var(--warn) }
.tag { display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap }
.tag.ok { color:var(--accent); border-color:var(--accent) } .tag.bad { color:var(--bad); border-color:var(--bad) } .tag.warn { color:var(--warn); border-color:var(--warn) } .tag.info { color:var(--accent2); border-color:var(--accent2) }
.notice { border:1px solid var(--warn); color:var(--warn); border-radius:8px; padding:8px 12px; font-size:13px; margin:0 0 12px }
.notice.info { border-color:var(--line); color:var(--muted) }
a { color:var(--accent2); text-decoration:none } a:hover { text-decoration:underline }
code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px }
.tbl { position:relative; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:8px; max-height:720px }
table { width:100%; border-collapse:collapse; font-size:12.5px }
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top }
tbody tr:last-child td { border-bottom:0 }
tbody tr:hover td { background:var(--hover) }
tbody tr.clickable { cursor:pointer }
th { color:var(--muted); font-weight:500; background:var(--surface); position:sticky; top:0; z-index:1; white-space:nowrap }
th.sortable { cursor:pointer } th.sortable:hover { color:var(--fg) } th.sorted::after { content:" \25BE"; color:var(--accent2) } th.sorted.asc::after { content:" \25B4" }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums }
.zero { color:var(--dim) }
td .who { display:inline-flex; align-items:center; gap:8px } .swatch { width:10px; height:10px; border-radius:3px; display:inline-block; flex:0 0 auto }
.chart { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px 8px; min-width:0 }
.chart svg { display:block; width:100%; overflow:visible }
.chart .title { font-size:13px; color:var(--fg2); font-weight:600; margin:0 0 6px; display:flex; justify-content:space-between; gap:8px; align-items:baseline }
.chart .title .v { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums } .chart .title .v.up { color:var(--accent) } .chart .title .v.down { color:var(--bad) } .chart .title .v.same { color:var(--accent2) }
.chart .title .u { color:var(--muted); font-weight:400; font-size:12px }
.legend { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:6px 0 2px } .legend span { display:inline-flex; align-items:center; gap:6px } .legend i { width:12px; height:3px; border-radius:2px; display:inline-block } .legend i.box { height:10px; border-radius:3px }
.small-multiples { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.small-multiples.three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.axis text { fill:var(--muted); font-size:11px } .axis line, .axis path { stroke:var(--axis); stroke-width:1 }
.gridline { stroke:var(--grid); stroke-width:1 }
.bar { rx:0 } .bar:hover, .cell:hover, .hit:hover { opacity:.85 }
.tt { position:fixed; z-index:20; pointer-events:none; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--fg2); box-shadow:0 4px 18px rgba(0,0,0,.35); display:none; max-width:280px }
.tt b { color:var(--fg); font-variant-numeric:tabular-nums } .tt .t { color:var(--muted); margin-bottom:4px } .tt .r { display:flex; gap:8px; align-items:center; white-space:nowrap } .tt .r i { width:10px; height:3px; border-radius:2px; display:inline-block; flex:0 0 auto }
.tview { font-size:12px } .tview button { background:transparent; color:var(--muted); border:1px solid var(--line); padding:2px 8px; border-radius:999px; font:inherit; font-size:11px; cursor:pointer } .tview button:hover { color:var(--fg) } .tview button.active { color:var(--fg); border-color:var(--accent2) }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px }
select, input { background:var(--surface); border:1px solid var(--line); color:var(--fg); padding:8px 10px; border-radius:8px; min-width:220px; font:inherit }
button { background:var(--accent2); color:var(--btn-fg); border:0; padding:9px 14px; border-radius:8px; font-weight:600; cursor:pointer; font:inherit }
button.secondary { background:transparent; color:var(--muted); border:1px solid var(--line) }
.kv { display:grid; grid-template-columns:minmax(150px,max-content) 1fr; gap:5px 14px; font-size:13.5px }
.kv .k { color:var(--muted) } .kv .v { font-variant-numeric:tabular-nums }
.cmdbox { position:relative; background:var(--primary); border:1px solid var(--line); border-radius:10px; margin:8px 0 0; padding:14px 16px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.7; white-space:pre-wrap; word-break:break-all; color:var(--fg) }
.cmdbox .prompt { color:var(--accent); user-select:none; margin-right:10px } .cmdbox .kw { color:var(--accent2) } .cmdbox .flag { color:var(--purple) } .cmdbox .url { color:var(--sky) }
.tools { display:grid; grid-template-columns:1fr 1fr; gap:10px } .tool { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface) } .tool b { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; color:var(--accent2) } .tool p { margin:4px 0 0; font-size:13px; color:var(--fg2) }
.qs { margin:0; padding-left:18px; font-size:14px; line-height:1.6; color:var(--fg2) }
.login { width:420px; margin:14vh auto 0 } .login input { width:100%; margin:10px 0 }
.connect { margin-top:18px; padding-top:14px; border-top:1px solid var(--line) }
.connect-head { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin-bottom:8px }
.cmd { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; color:var(--fg2); white-space:pre-wrap; overflow-wrap:break-word }
.loading { opacity:.55; transition:opacity .2s }
.empty { color:var(--dim); font-size:13px; padding:8px 0 }
footer { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-top:18px; flex-wrap:wrap; gap:8px }
@media (max-width: 900px) { .counters { grid-template-columns:repeat(4,minmax(0,1fr)) } .grid, .grid.three, .grid.four, .tools { grid-template-columns:1fr } .small-multiples, .small-multiples.three { grid-template-columns:repeat(2,minmax(0,1fr)) } header { flex-wrap:wrap } body { width:100%; padding:0 16px 32px } .login { width:100% } }

#pweeks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
#pweeks .chart .title { font-size:12px }

#team { font-size:13px } #team th, #team td { padding:8px 10px; vertical-align:middle }
#team thead tr.groups th { padding:5px 10px 3px; font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); border-bottom:0; text-align:center }
#team thead tr.groups th i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:0 }
#team thead tr:nth-child(2) th { top:26px }
#team thead tr.groups th { top:0 }
#team th.col-github, #team td.col-github, #team th.g.github { border-left:1px solid var(--line) } #team th.col-github ~ th.col-github, #team td.col-github ~ td.col-github { border-left:0 }
#team th.col-slack, #team td.col-slack, #team th.g.slack { border-left:1px solid var(--line) } #team th.col-slack ~ th.col-slack, #team td.col-slack ~ td.col-slack { border-left:0 }
#team th.col-notion, #team td.col-notion, #team th.g.notion { border-left:1px solid var(--line) }
#team th.col-working, #team td.col-working { border-left:1px solid var(--line); width:40%; max-width:0 }
#team td.col-person { white-space:nowrap }
#team th.col-github, #team td.col-github, #team th.col-slack, #team td.col-slack, #team th.col-notion, #team td.col-notion { text-align:center }
#team .who { display:inline-flex; align-items:center; gap:10px } #team .name { font-weight:600; color:var(--fg) }
#team .avatar { width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; font-size:10.5px; font-weight:700; letter-spacing:.3px; color:var(--fg2); background:var(--primary); border:1px solid var(--line); flex:0 0 auto }
#team td.col-output { min-width:96px; padding-right:12px } #team .obar { display:inline-flex; flex-direction:column; align-items:flex-end; width:100%; gap:3px } #team .obar b { font-weight:600; color:var(--fg) } #team .obar i { display:block; height:4px; border-radius:2px; background:var(--s1); min-width:2px; align-self:flex-start } #team td.zero .obar b { color:var(--dim); font-weight:500 } #team td.zero .obar i { display:none }
#team .chips { display:flex; flex-wrap:nowrap; gap:6px; overflow:hidden; width:100% } #team .chip.off { display:none } .chip { display:inline-flex; align-items:center; gap:5px; max-width:170px; flex:0 0 auto; padding:1px 8px; font-size:11.5px; line-height:18px; color:var(--fg2); background:var(--primary); border:1px solid var(--line); border-radius:999px; white-space:nowrap } .chip span { overflow:hidden; text-overflow:ellipsis } .chip i { width:6px; height:6px; border-radius:50%; flex:0 0 auto } .chip.more { color:var(--muted); background:transparent }
#team tr.idle td { color:var(--dim) } #team tr.idle .name { color:var(--muted); font-weight:500 } #team tr.idle .avatar { color:var(--dim) }
#team .dim { color:var(--dim) }
.versus { display:flex; flex-direction:column; gap:7px; padding:4px 0 2px }
.vrow { display:grid; grid-template-columns:112px 1fr 48px; align-items:center; gap:10px; font-size:13px; cursor:default; border-radius:6px } .vrow:hover { background:var(--hover) }
.vrow .vl { color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vrow .vbars { display:flex; flex-direction:column; gap:3px } .vrow .vbars i { display:block; height:8px; border-radius:3px; min-width:2px } .vrow .vbars i.cur { background:var(--s1) } .vrow .vbars i.prev { background:var(--dot) } .vrow .vbars i.none { min-width:0; background:transparent }
.vrow .vc { text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600 } .vrow .vc.up { color:var(--accent) } .vrow .vc.down { color:var(--bad) }
details summary { cursor:pointer; list-style:none } details summary::-webkit-details-marker { display:none }
details summary h2 { margin:0; display:inline } details summary h2::before { content:"\25B8"; display:inline-block; width:16px; color:var(--muted) }
details[open] summary h2::before { content:"\25BE" }
.notes { margin:12px 0 0; padding-left:18px; font-size:13px; color:var(--fg2); line-height:1.5 } .notes li { margin:4px 0 } .notes b { color:var(--fg) }
.ranked { display:flex; flex-direction:column; gap:6px; padding:4px 0 2px }
.rrow { display:grid; grid-template-columns:20px minmax(110px,150px) 1fr 52px 74px; align-items:center; gap:10px; font-size:13px; cursor:default; border-radius:6px; min-height:22px } .rrow:hover { background:var(--hover) }
.grid.three .rrow { grid-template-columns:16px minmax(80px,112px) 1fr 44px; gap:8px } .grid.three .rrow .rd { display:none }
.rrow .rk { color:var(--dim); font-size:11px; text-align:right; font-variant-numeric:tabular-nums }
.rrow .rl { color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px } .rrow .rl > span { overflow:hidden; text-overflow:ellipsis }
.chart .rrow svg.lock { flex:0 0 auto; color:var(--muted); width:12px; height:12px; display:inline-block }
.rrow .rbar { display:flex; gap:2px; height:10px } .rrow .rbar i { display:block; height:100%; border-radius:3px; min-width:2px }
.rrow .rv { text-align:right; font-weight:600; color:var(--fg); font-variant-numeric:tabular-nums }
.rrow .rd { color:var(--muted); font-size:12px; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums }