:root { --fg:#1d2330; --muted:#6b7385; --line:#e3e6ec; --bg:#f6f7f9; --card:#fff; --accent:#1f5eff; --warn:#a15c00; --warnbg:#fff4e0; --err:#b3261e; --errbg:#fdecea; --ok:#1e6b3a; --okbg:#e8f5ec; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--fg); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { display:flex; align-items:center; gap:24px; padding:10px 24px; background:#111827; color:#fff; }
header.top a { color:#cdd5e5; } header.top a.on, header.top .brand { color:#fff; font-weight:600; }
header.top nav { display:flex; gap:16px; flex:1; }
.who { display:flex; gap:10px; align-items:center; color:#cdd5e5; margin:0; }
main { max-width:1200px; margin:0 auto; padding:20px 24px 60px; }
h1 { font-size:22px; margin:0; } h2 { font-size:16px; margin:0 0 10px; }
.head { display:flex; align-items:baseline; gap:16px; justify-content:space-between; margin:6px 0 16px; }
.muted { color:var(--muted); font-size:12.5px; } .mono { font-family: ui-monospace, Consolas, monospace; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); margin-bottom:16px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#fafbfc; font-weight:600; font-size:12.5px; white-space:nowrap; } th a { color:var(--fg); }
td.num { text-align:right; white-space:nowrap; } table.compact td { padding:5px 8px; font-size:12.5px; }
tr.attn td { background:#fffaf0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:16px; margin-bottom:16px; }
details.card summary { cursor:pointer; font-weight:600; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:900px) { .cols { grid-template-columns:1fr; } }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:12px; align-items:end; }
label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); }
input, select { font:inherit; padding:6px 8px; border:1px solid #c9ced8; border-radius:4px; background:#fff; color:var(--fg); }
form.inline { display:inline-flex; gap:8px; align-items:center; margin:0; } form.add { margin-top:6px; flex-wrap:wrap; }
.filters { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.btn { display:inline-block; font:inherit; padding:7px 14px; border-radius:4px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; }
.btn.small { padding:5px 10px; } .btn:hover { filter:brightness(1.05); text-decoration:none; }
button.link { background:none; border:0; color:inherit; cursor:pointer; text-decoration:underline; padding:0; font:inherit; }
button.link.danger { color:var(--err); }
.flash { padding:9px 12px; border-radius:4px; margin:0 0 12px; background:#eef2ff; }
.flash.ok { background:var(--okbg); color:var(--ok); } .flash.warn { background:var(--warnbg); color:var(--warn); } .flash.error { background:var(--errbg); color:var(--err); }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; background:#eef0f4; font-size:12px; margin:1px 0; }
.pill.warn { background:var(--warnbg); color:var(--warn); }
.pill.s-active, .pill.s-trialing { background:var(--okbg); color:var(--ok); }
.pill.s-past_due, .pill.s-unpaid, .pill.s-error { background:var(--errbg); color:var(--err); }
.pill.s-canceled, .pill.s-incomplete_expired, .pill.s-not-configured, .pill.s-no-customer { background:#eef0f4; color:var(--muted); }
dl.kv { display:grid; grid-template-columns:150px 1fr; gap:6px 12px; margin:0; } dl.kv dt { color:var(--muted); }
.big { font-size:18px; margin:0 0 10px; }
section.login { max-width:420px; margin:60px auto; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:28px; }
section.login .btn.provider { display:block; text-align:center; margin:10px 0; background:#fff; color:var(--fg); border-color:#c9ced8; }
.or { text-align:center; color:var(--muted); margin:14px 0; } .stack { display:flex; flex-direction:column; gap:10px; }