:root { color-scheme: light; --ink:#17212b; --muted:#6b7785; --line:#e6e9ed; --panel:#fff; --canvas:#f5f7f9; --blue:#2368d1; --blue-soft:#eaf2ff; --green:#16845b; --green-soft:#e7f7ef; --amber:#aa6b00; --amber-soft:#fff4dc; --red:#c43d4b; --red-soft:#ffedf0; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.topbar { min-height:72px; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:#fff; border-bottom:1px solid var(--line); }
.brand,.toolbar,.hero-row,.worker-state,.panel-heading,.dialog-actions,.switch-control { display:flex; align-items:center; }
.brand { gap:11px; min-width:220px; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; background:#17212b; color:#fff; font-weight:800; border-radius:8px; } .brand strong,.brand small { display:block; } .brand strong { font-size:15px; } .brand small { color:var(--muted); font-size:11px; margin-top:1px; letter-spacing:.04em; }
.toolbar { justify-content:flex-end; gap:10px; flex-wrap:wrap; } .search,.select { height:36px; background:#fff; border:1px solid #d4dae1; border-radius:6px; color:var(--ink); padding:0 11px; outline:none; } .search { width:190px; } .search:focus,.select:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.button { height:36px; border:0; border-radius:6px; padding:0 14px; background:var(--blue); color:#fff; cursor:pointer; font-weight:650; } .button:disabled { opacity:.55; cursor:wait; } .button.secondary { background:#fff; color:var(--ink); border:1px solid #d4dae1; }
.switch-control { gap:9px; color:#3c4650; white-space:nowrap; cursor:pointer; } .switch-control input { position:absolute; opacity:0; } .switch-control i { width:38px; height:22px; padding:3px; display:block; background:#cbd2d9; border-radius:12px; transition:.15s; } .switch-control i:after { content:""; display:block; width:16px; height:16px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 2px #0002; } .switch-control input:checked+i { background:var(--green); } .switch-control input:checked+i:after { transform:translateX(16px); }
.shell { max-width:1780px; margin:0 auto; padding:30px 28px 42px; } .hero-row { justify-content:space-between; gap:20px; margin-bottom:24px; } .eyebrow { margin:0 0 5px; color:var(--blue); font-size:11px; font-weight:750; letter-spacing:.12em; } h1,h2,p { margin:0; } h1 { font-size:27px; letter-spacing:-.02em; } h2 { font-size:16px; } .muted { color:var(--muted); font-size:12px; } #sync-state { margin-top:5px; } .worker-state { gap:8px; color:#3c4650; } .dot { width:8px; height:8px; display:inline-block; background:#aab3bd; border-radius:50%; } .dot.on { background:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.summary-grid { display:grid; grid-template-columns:repeat(6,minmax(120px,1fr)); gap:12px; margin-bottom:16px; } .summary-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; min-height:88px; } .summary-card .label { color:var(--muted); font-size:12px; } .summary-card .value { display:block; margin-top:5px; font-size:24px; font-weight:750; letter-spacing:-.03em; } .summary-card .detail { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.notice { background:var(--red-soft); color:var(--red); border:1px solid #f6cdd2; padding:11px 14px; border-radius:6px; margin-bottom:16px; }
.worker-panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:16px; }
.worker-metrics { display:grid; grid-template-columns:repeat(7,minmax(100px,1fr)); gap:1px; background:var(--line); }
.worker-metrics > div { background:var(--panel); padding:12px 16px; }
.worker-metrics span,.worker-metrics strong { display:block; }
.worker-metrics span { color:var(--muted); font-size:11px; }
.worker-metrics strong { margin-top:3px; font-size:18px; font-variant-numeric:tabular-nums; }
.table-panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; } .panel-heading { justify-content:space-between; padding:17px 18px; border-bottom:1px solid var(--line); } .panel-heading h2 { display:inline; margin-right:9px; } .legend { color:var(--muted); font-size:11px; } .table-scroll { overflow:auto; } table { width:100%; min-width:1180px; border-collapse:collapse; } th,td { padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; } th { background:#fafbfc; color:var(--muted); font-size:11px; font-weight:650; white-space:nowrap; } tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:#fbfcfe; } .account-source { color:var(--blue); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .account-name { font-weight:650; white-space:nowrap; } .account-id { color:var(--muted); font:11px ui-monospace,SFMono-Regular,monospace; margin-top:2px; } .status { display:inline-flex; align-items:center; gap:5px; border-radius:4px; padding:4px 7px; font-size:11px; white-space:nowrap; } .status.available { background:var(--green-soft); color:var(--green); } .status.low { background:var(--amber-soft); color:var(--amber); } .status.exhausted,.status.error { background:var(--red-soft); color:var(--red); } .status.stale { background:#eef1f4; color:#65717d; }
.source-strip { display:flex; gap:8px; overflow:auto; padding:10px 18px; border-bottom:1px solid var(--line); } .source-chip { flex:0 0 auto; padding:5px 9px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font-size:11px; } .source-chip strong { color:var(--ink); margin-right:5px; } .source-chip.bad { color:var(--red); border-color:#f6cdd2; background:var(--red-soft); }
.quota { width:156px; } .quota-top { display:flex; justify-content:space-between; gap:8px; font-size:11px; margin-bottom:5px; } .quota-value { color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; } .quota-percent { color:var(--muted); } .bar { height:5px; overflow:hidden; background:#e9edf1; border-radius:3px; } .bar i { display:block; height:100%; background:var(--blue); border-radius:inherit; min-width:0; padding:0; } .bar i.low { background:#d59622; } .bar i.zero { background:var(--red); } .quota-empty { color:var(--muted); font-size:11px; } .requests { font-variant-numeric:tabular-nums; white-space:nowrap; } #empty { padding:36px; color:var(--muted); text-align:center; }
dialog { width:min(360px,calc(100% - 32px)); border:0; border-radius:8px; padding:22px; box-shadow:0 20px 60px #17212b33; } dialog::backdrop { background:#17212b66; } dialog h2 { margin-bottom:8px; } dialog p { color:var(--muted); margin-bottom:14px; } dialog input { width:100%; height:38px; border:1px solid #d4dae1; border-radius:6px; padding:0 10px; } .dialog-actions { justify-content:flex-end; gap:8px; margin-top:18px; }
@media (max-width:950px) { .topbar { align-items:flex-start; flex-direction:column; padding:16px; gap:14px; } .toolbar { width:100%; justify-content:flex-start; } .search { flex:1; min-width:150px; } .shell { padding:22px 16px 32px; } .summary-grid { grid-template-columns:repeat(3,1fr); } .worker-metrics { grid-template-columns:repeat(3,1fr); } .hero-row { align-items:flex-start; flex-direction:column; } }
@media (max-width:520px) { .toolbar { display:grid; grid-template-columns:1fr 1fr; } .search { width:auto; grid-column:1/-1; } .switch-control { grid-column:1/-1; justify-content:space-between; } .summary-grid { grid-template-columns:repeat(2,1fr); } .summary-card { padding:12px; } .summary-card .value { font-size:20px; } }