:root{
  --a-bg:var(--panel);
  --a-panel:var(--stone);
  --a-tile:var(--stone-2);
  --a-tile-hover:color-mix(in srgb,var(--stone-2) 82%,var(--cyan) 18%);
  --a-line:var(--line);
  --a-text:var(--ink);
  --a-dim:var(--ink-dim);
  --a-faint:var(--ink-dim);
  --a-cyan:var(--cyan);
  --a-cyan-2:var(--cyan-deep);
  --a-amber:var(--amber);
  --a-claude:var(--provider-claude);
  --a-openai:var(--provider-openai);
  --a-google:var(--provider-google);
  --a-ui:var(--font-ui);
  --a-mono:var(--font-mono);
}

*{box-sizing:border-box}
html,body{min-height:100%;background:var(--a-bg)}
body{margin:0;color:var(--a-text);font-family:var(--a-ui)}
button{cursor:pointer;font:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.activity-shell{width:min(100% - 32px,1040px);margin:0 auto;padding:36px 0 56px}
.activity-nav{display:flex;align-items:center;gap:12px;min-height:38px;margin-bottom:14px}
.activity-back{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--a-line);
  border-radius:10px;background:rgba(21,27,29,.82);color:var(--a-dim);text-decoration:none;
  transition:color .12s ease,border-color .12s ease,background .12s ease}
.activity-back:hover{color:var(--a-cyan);border-color:var(--a-cyan-2);background:var(--a-panel)}
.activity-brand{font:700 12px/1 var(--a-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--a-dim)}
.activity-status{margin-left:auto;font:500 10px/1.2 var(--a-mono);color:var(--a-faint)}

.activity-card{border:0;border-radius:0;background:transparent;padding:0;box-shadow:none}
.activity-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin:-56px 0 18px}
.ranges{display:flex;align-items:center;gap:5px}
.ranges button{border:0;border-radius:9px;background:transparent;color:var(--a-dim);
  padding:8px 13px;line-height:1;transition:background .12s ease,color .12s ease}
.ranges button{font-size:13px}
.ranges button[aria-pressed=true]{
  background:var(--a-tile);color:var(--a-text)}
.ranges button:focus-visible,.activity-back:focus-visible,
.recent-drawer summary:focus-visible{outline:2px solid var(--a-cyan);outline-offset:2px}

.activity-message{min-height:0;margin:0;color:var(--a-amber);font:500 10px/1.4 var(--a-mono)}
.activity-message:not(:empty){margin:-7px 0 13px}
.tab-panel{min-width:0}
.worker-activity-panel,.jobs-activity-panel{padding-top:2px}
.worker-activity-intro,.jobs-activity-intro{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;margin:0 0 14px;padding:0 2px 13px;border-bottom:1px solid rgba(255,255,255,.065);
  color:var(--a-dim);font:500 10px/1.4 var(--a-mono)}
.worker-activity-intro>span:first-child,.jobs-activity-intro>span:first-child{min-width:0}
.worker-activity-list{display:grid;gap:8px;margin:0;padding:0}
.worker-activity-list li{margin:0;padding:12px 14px;background:var(--a-tile);
  border-color:color-mix(in srgb,var(--a-line) 82%,transparent)}
.worker-activity-list li:hover{background:var(--a-tile-hover)}
.worker-activity-list a{font-family:var(--a-mono);font-size:12px;font-weight:600}
.worker-activity-panel .hp-empty,.worker-activity-panel .hp-notfound{padding:18px 2px}
.activity-jobs-list{gap:8px}
.activity-jobs-list .job-row{margin:0}

.models-usage-panel{padding-top:2px}
.models-usage-panel .usage-controls{margin-bottom:18px}
.model-activity-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--a-line)}
.model-activity-heading{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;margin-bottom:12px}
.model-activity-heading > div:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.model-activity-heading h3{margin:0;color:var(--a-text);font-size:15px;line-height:1.2}
.model-activity-heading span{color:var(--a-dim);font:500 10px/1.35 var(--a-mono)}
.model-activity-ranges{display:flex;align-items:center;gap:5px}
.model-activity-ranges button{border:0;border-radius:9px;background:transparent;color:var(--a-dim);
  padding:8px 11px;font-size:13px;line-height:1}
.model-activity-ranges button[aria-pressed=true]{background:var(--a-tile);color:var(--a-text)}
.model-activity-ranges button:focus-visible{outline:2px solid var(--a-cyan);outline-offset:2px}
.model-activity-message{min-height:0;margin:0;color:var(--a-amber);font:500 10px/1.4 var(--a-mono)}
.model-activity-message:not(:empty){margin:0 0 12px}
.models-usage-panel .events-drawer{margin-top:14px;box-shadow:none}

.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.metric{min-width:0;min-height:72px;border-radius:9px;background:var(--a-tile);
  padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between}
.metric span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--a-dim);font-size:12px;line-height:1.15}
.metric b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--a-text);font:650 18px/1.1 var(--a-mono);font-variant-numeric:tabular-nums}

.contribution-wrap{margin-top:14px}
.contribution-map{display:grid;grid-template-columns:repeat(53,minmax(0,1fr));
  grid-template-rows:repeat(7,minmax(0,1fr));grid-auto-flow:column;gap:4px;width:100%}
.heat{display:block;min-width:0;aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--a-line) 76%,var(--a-panel))}
.heat.unknown{background:color-mix(in srgb,var(--a-line) 58%,var(--a-panel));opacity:.65}
.heat.level-1{background:color-mix(in srgb,var(--a-cyan) 38%,var(--a-line))}
.heat.level-2{background:color-mix(in srgb,var(--a-cyan) 58%,var(--a-line))}
.heat.level-3{background:color-mix(in srgb,var(--a-cyan) 78%,var(--a-line))}
.heat.level-4{background:var(--a-cyan)}
.activity-summary{margin:14px 0 0;color:var(--a-dim);font-size:12px}
.activity-summary b{color:var(--a-text);font-weight:650}

.model-plot{display:grid;grid-template-columns:46px minmax(0,1fr);gap:9px;
  height:260px;margin:12px 0 6px}
.y-axis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  padding:0 0 18px;color:var(--a-dim);font-size:10px;font-variant-numeric:tabular-nums}
.bars-wrap{position:relative;min-width:0;border-bottom:1px solid var(--a-line);
  background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),
    rgba(255,255,255,.045) 25%)}
.model-bars{position:absolute;inset:0 0 18px;display:flex;align-items:flex-end;gap:5px}
.stack{position:relative;display:flex;flex:1 1 0;min-width:3px;max-width:32px;
  height:100%;flex-direction:column-reverse;justify-content:flex-start;border-radius:4px 4px 0 0;
  overflow:hidden}
.stack i{display:block;width:100%;flex:0 0 auto}
.Claude{background:var(--a-claude)}
.OpenAI{background:var(--a-openai)}
.Google{background:var(--a-google)}
.x-axis{position:absolute;left:0;right:0;bottom:0;height:18px;display:flex;
  justify-content:space-between;align-items:flex-end;color:var(--a-dim);font-size:10px}

.provider-legend{display:grid;gap:7px;margin-top:14px}
.provider-row{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(220px,1.5fr) auto;
  align-items:center;gap:14px;color:var(--a-dim);font-size:13px}
.provider-name{display:flex;align-items:center;gap:8px;color:var(--a-text)}
.swatch{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.provider-detail{text-align:right;font-variant-numeric:tabular-nums}
.provider-share{min-width:54px;text-align:right;color:var(--a-text);font-size:15px;
  font-variant-numeric:tabular-nums}
.provider-row.unavailable .provider-detail,.provider-row.unavailable .provider-share{color:var(--a-faint)}
.model-note{margin:13px 0 0;color:var(--a-dim);font:500 10px/1.45 var(--a-mono)}

.activity-meta{display:flex;justify-content:space-between;gap:12px;margin-top:15px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.055);
  color:var(--a-faint);font:500 9px/1.3 var(--a-mono)}

.recent-drawer{margin-top:12px;border:1px solid color-mix(in srgb,var(--a-line) 75%,transparent);
  border-radius:12px;background:rgba(21,27,29,.72);overflow:hidden}
.recent-drawer summary{cursor:pointer;list-style:none;padding:13px 16px;color:var(--a-dim);
  font:600 11px/1 var(--a-mono);letter-spacing:.06em;text-transform:uppercase}
.recent-drawer summary::-webkit-details-marker{display:none}
.recent-drawer summary::after{content:"＋";float:right;color:var(--a-faint)}
.recent-drawer[open] summary::after{content:"−"}
.recent-events{max-height:300px;overflow:auto;padding:0 16px 10px}
.event{padding:9px 0;border-top:1px solid rgba(255,255,255,.055);
  color:var(--a-dim);font:500 10px/1.45 var(--a-mono)}
.event b{color:var(--a-cyan);font-weight:650}
.empty-event{color:var(--a-faint);font-size:12px}

@media(max-width:760px){
  .activity-shell{width:min(100% - 20px,1040px);padding:16px 0 34px}
  .activity-card{padding:0}
  .activity-controls{margin:-52px 0 16px;flex-wrap:wrap}
  .ranges{margin-left:auto}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{min-height:66px}
  .contribution-map{gap:2px}
  .model-plot{grid-template-columns:34px minmax(0,1fr);height:220px}
  .model-bars{gap:2px}
  .provider-row{grid-template-columns:1fr auto}
  .provider-detail{grid-column:1/-1;text-align:left;padding-left:18px;font-size:11px}
  .models-usage-panel .usage-controls{align-items:flex-start;gap:10px;overflow-x:auto}
  .model-activity-heading{align-items:flex-start;flex-direction:column}
}

@media(max-width:440px){
  .activity-brand{display:none}
  .activity-status{max-width:68%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .activity-controls{align-items:flex-start;gap:10px}
  .ranges button{padding:8px 10px}
  .worker-activity-intro,.jobs-activity-intro{align-items:flex-start}
  .contribution-map{gap:1px}
  .heat{border-radius:2px}
  .model-plot{height:190px}
}

@media(prefers-reduced-motion:reduce){
  .activity-back,.ranges button{transition:none}
}
