:root { --fg:#1b1f23; --muted:#6a737d; --bg:#fff; --line:#e1e4e8; --ok:#1a7f37; --warn:#9a6700; --bad:#cf222e; --info:#0969da; }
* { 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); }
header.top { display:flex; gap:1.25rem; align-items:center; padding:.6rem 1.2rem; border-bottom:1px solid var(--line); background:#f6f8fa; }
header.top a { color:var(--fg); text-decoration:none; font-weight:600; }
header.top a.active { color:var(--info); }
header.top .spacer { flex:1; }
header.top form { margin:0; }
main { padding:1.2rem; max-width:1400px; }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; }
h2 { font-size:1.05rem; margin:1.4rem 0 .6rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.8rem; }
.card { border:1px solid var(--line); border-radius:6px; padding:.8rem 1rem; }
.card .big { font-size:1.8rem; font-weight:700; }
.card .sub { color:var(--muted); font-size:.85rem; }
table { border-collapse:collapse; width:100%; margin:.4rem 0 1rem; }
th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.badge { display:inline-block; padding:.05rem .45rem; border-radius:999px; font-size:.78rem; font-weight:600; background:#eaeef2; }
.badge.paid, .badge.delivered, .badge.shipped { background:#dafbe1; color:var(--ok); }
.badge.processing, .badge.submitting, .badge.submitted, .badge.awaiting_3ds, .badge.awaiting_wallet, .badge.pending { background:#fff8c5; color:var(--warn); }
.badge.error, .badge.declined { background:#ffebe9; color:var(--bad); }
.badge.handed_off, .badge.archived, .badge.cancelled, .badge.refunded, .badge.draft { background:#eaeef2; color:var(--muted); }
.warn { color:var(--warn); } .bad { color:var(--bad); } .ok { color:var(--ok); } .muted { color:var(--muted); }
form.inline { display:inline; }
input, select, textarea, button { font:inherit; padding:.3rem .5rem; border:1px solid #c9d1d9; border-radius:4px; }
button { background:#f6f8fa; cursor:pointer; } button.primary { background:var(--info); color:#fff; border-color:var(--info); }
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.error { background:#ffebe9; border:1px solid #ff8182; padding:.5rem .8rem; border-radius:4px; margin:.5rem 0; }
.login { max-width:22rem; margin:6rem auto; }
.login input { width:100%; margin:.3rem 0 .8rem; }
code { background:#f6f8fa; padding:.05rem .3rem; border-radius:3px; font-size:.9em; }
.timeline li { margin:.3rem 0; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:.2rem 1rem; } dt { color:var(--muted); }