:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5b6570; --line:#d9dee4; --card:#fff; --accent:#1f5fbf; --ok:#177245; --bad:#b3261e; --warn:#8a5a00; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--fg); }
header.top { background:#111820; color:#fff; padding:0 16px; display:flex; align-items:center; gap:20px; height:44px; }
header.top strong { font-weight:600; }
header.top nav { display:flex; gap:4px; }
header.top a { color:#cfd8e3; text-decoration:none; padding:6px 10px; border-radius:4px; }
header.top a:hover, header.top a.on { background:#25303c; color:#fff; }
main { max-width:1100px; margin:0 auto; padding:18px 16px 40px; }
h1 { font-size:20px; margin:0 0 4px; } h2 { font-size:15px; margin:22px 0 8px; } h3 { font-size:13px; margin:0 0 6px; }
p.lead { color:var(--muted); margin:0 0 14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; }
.grid { display:grid; gap:12px; } .cols-2 { grid-template-columns:repeat(2,1fr); } .cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:760px) { .cols-2,.cols-3 { grid-template-columns:1fr; } }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:6px; }
th,td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; color:var(--muted); font-weight:600; background:#fafbfc; }
tr:last-child td { border-bottom:0; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.muted { color:var(--muted); } .nowrap { white-space:nowrap; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--line); background:#fff; }
.pill.PENDING,.pill.warn { color:var(--warn); border-color:#e5c98a; background:#fff8e6; }
.pill.PAID,.pill.COMPLETED,.pill.ok { color:var(--ok); border-color:#a6d4b8; background:#eef9f2; }
.pill.FAILED,.pill.bad { color:var(--bad); border-color:#e8b4b0; background:#fdeeed; }
.flash { padding:8px 12px; border-radius:6px; margin:0 0 14px; border:1px solid; }
.flash.ok { background:#eef9f2; border-color:#a6d4b8; color:var(--ok); } .flash.err { background:#fdeeed; border-color:#e8b4b0; color:var(--bad); }
form.inline { display:inline; }
button,.btn { font:inherit; padding:5px 12px; border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer; color:var(--fg); text-decoration:none; display:inline-block; }
button:hover,.btn:hover { background:#f0f3f6; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); } button.primary:hover { background:#184d9c; }
button.danger { color:var(--bad); }
label { display:block; font-size:12px; color:var(--muted); margin:8px 0 2px; }
input,select,textarea { font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:4px; width:100%; background:#fff; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
dl.facts { display:grid; grid-template-columns:150px 1fr; gap:4px 12px; margin:0; } dl.facts dt { color:var(--muted); } dl.facts dd { margin:0; word-break:break-word; }
pre { background:#0f1720; color:#e3eaf2; padding:10px 12px; border-radius:6px; overflow:auto; max-height:420px; margin:0; font-size:12.5px; }
.tabs { display:flex; gap:4px; margin:0 0 10px; } .tabs a { padding:4px 12px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--fg); text-decoration:none; } .tabs a.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.activity { list-style:none; margin:0; padding:0; } .activity li { padding:4px 0; border-bottom:1px solid var(--line); } .activity li:last-child { border-bottom:0; }
.small { font-size:12px; } a { color:var(--accent); }
.checkout { max-width:420px; margin:40px auto; }