:root { color-scheme: light; --bg:#f4f7fb; --panel:#fff; --ink:#141821; --muted:#667085; --line:#d8dde7; --brand:#276ef1; --danger:#b42318; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--ink); }
header { display:flex; align-items:center; justify-content:space-between; padding: 18px 28px; background:#111827; color:#fff; }
header a { color:#fff; }
main { max-width: 1180px; margin: 0 auto; padding: 28px; display:grid; gap:20px; }
h1, h2 { margin: 0 0 14px; }
.panel { background: var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px; box-shadow:0 10px 30px rgba(16,24,40,.06); }
.auth { min-height:100vh; display:grid; place-items:center; padding:20px; }
.auth-panel { width:min(420px, 100%); }
.stack, .grid { display:grid; gap:14px; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wide { grid-column: 1 / -1; }
label { display:grid; gap:6px; font-weight:700; color:#344054; }
input, select, textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px; font:inherit; background:#fff; }
textarea { min-height:90px; }
button, .button { border:0; border-radius:8px; padding:10px 14px; background:var(--brand); color:#fff; font-weight:700; text-decoration:none; cursor:pointer; display:inline-block; }
.actions { display:flex; align-items:center; gap:8px; }
.actions form { margin:0; }
.actions button { background: var(--danger); }
.mini-link { display:inline-block; margin-top:6px; color:var(--brand); font-weight:700; font-size:13px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:#475467; font-size:13px; }
code { word-break:break-all; }
.pill { display:inline-flex; border-radius:999px; padding:4px 8px; background:#eef4ff; color:#175cd3; font-weight:700; font-size:12px; }
.pill.active, .pill.trial { background:#ecfdf3; color:#067647; }
.pill.past_due { background:#fffaeb; color:#b54708; }
.pill.suspended, .pill.cancelled { background:#fef3f2; color:#b42318; }
.alert { border-radius:8px; padding:10px 12px; background:#fef3f2; color:#b42318; margin-bottom:14px; }
@media (max-width: 760px) { .grid { grid-template-columns:1fr; } header { padding:16px; } main { padding:16px; } }