:root { color-scheme: light; --ink:#1c2430; --muted:#667085; --line:#e4e7ec; --surface:#fff; --background:#f5f7fb; --accent:#356ae6; --danger:#b42318; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--ink); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
.topbar { align-items:center; background:#182230; color:#fff; display:flex; justify-content:space-between; padding:28px 5vw; }
h1,h2,p { margin-top:0; } h1 { font-size:28px; margin-bottom:0; } h2 { font-size:18px; margin-bottom:6px; }
.eyebrow { color:#98a2b3; font-size:12px; letter-spacing:.12em; margin-bottom:2px; text-transform:uppercase; }
.shell { margin:32px auto; padding:0 0 48px; width:90%; }
.card,.table-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 16px rgba(16,24,40,.04); }
.auth-card { margin:10vh auto; max-width:560px; padding:28px; } .auth-card p,.table-heading p { color:var(--muted); }
label { display:block; font-weight:600; margin-bottom:6px; } .token-row { display:flex; gap:10px; }
input { border:1px solid #cfd4dc; border-radius:7px; flex:1; font:inherit; min-width:0; padding:10px 12px; }
.button { background:var(--accent); border:0; border-radius:7px; color:#fff; cursor:pointer; font:inherit; font-weight:600; padding:10px 16px; } .button.secondary { background:#344054; border:1px solid #667085; }
.error { color:var(--danger)!important; margin:12px 0 0; } .status { color:var(--muted); min-height:24px; margin-bottom:8px; }
.tabs { display:flex; gap:4px; margin-bottom:12px; } .tab { background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; font:inherit; padding:10px 14px; } .tab.active { border-bottom-color:var(--accent); color:var(--accent); font-weight:700; }
.table-heading { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:22px 24px 14px; } .count { color:var(--muted); font-size:13px; } .table-wrap { overflow-x:auto; padding:0 16px 16px; }
table { width:100%; } td,th { white-space:nowrap; } td:last-child { white-space:normal; }
.row-button { background:none; border:0; color:var(--accent); cursor:pointer; font:inherit; padding:0; text-align:left; } .status-pill { border-radius:999px; display:inline-block; font-size:12px; padding:2px 8px; } .status-pill.success { background:#dcfae6; color:#067647; } .status-pill.failure { background:#fee4e2; color:#b42318; }
dialog { border:0; border-radius:12px; box-shadow:0 20px 50px rgba(16,24,40,.25); max-height:80vh; padding:0; width:min(720px,calc(100% - 32px)); } dialog::backdrop { background:rgba(16,24,40,.45); }
.modal-heading { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:18px 22px; } .modal-heading h2 { margin:0; } .close { background:none; border:0; color:var(--muted); cursor:pointer; font-size:28px; line-height:1; }
pre { background:#101828; color:#e6edf3; margin:0; max-height:60vh; overflow:auto; padding:22px; white-space:pre-wrap; word-break:break-word; }
@media (max-width:600px) { .topbar { padding:24px 16px; } .shell { padding-bottom:32px; width:calc(100% - 32px); } .token-row { flex-direction:column; } .table-heading { align-items:flex-start; flex-direction:column; gap:8px; } }