:root { --bg:#f6f7f9; --card:#fff; --ink:#1d2430; --muted:#6b7280; --line:#e5e7eb; --accent:#e00018; --ok:#15803d; --err:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:var(--ink); background:var(--bg); }
header { display:flex; align-items:center; gap:16px; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; font-size:18px; } .brand span { color:var(--accent); }
.env { padding:2px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.user { margin-left:auto; display:flex; gap:10px; align-items:center; color:var(--muted); }
main { max-width:1200px; margin:0 auto; padding:24px; }
h1 { font-size:22px; margin:0 0 8px; } h2 { font-size:16px; margin:0; } h3 { margin:0 0 12px; }
button { font:inherit; padding:7px 14px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.ghost { background:transparent; }
button.ghost:hover, button:hover { border-color:#9ca3af; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; padding:10px 14px; color:var(--muted); }
.tabs button.active { color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.card .k { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.card .v { font-size:16px; font-weight:600; margin-top:2px; word-break:break-all; }
.card.error { color:var(--err); }
.toolbar { display:flex; justify-content:space-between; align-items:center; margin:8px 0; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:#fafafa; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr.inactive td { color:var(--muted); }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:#f3f4f6; }
.pill.ok { background:#dcfce7; color:var(--ok); } .pill.error { background:#fee2e2; color:var(--err); }
.muted { color:var(--muted); } .small { font-size:12px; } .error { color:var(--err); margin-top:8px; }
form#tenant-form { margin-top:20px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
label.check { flex-direction:row; align-items:center; gap:8px; align-self:end; color:var(--ink); font-size:14px; }
input { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:6px; color:var(--ink); }
.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
code { background:#f3f4f6; padding:1px 5px; border-radius:4px; }
.two-col { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px,1fr)); gap:16px; margin-bottom:16px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px; margin-bottom:16px; }
.panel h2 { margin-bottom:10px; } .panel h3 { margin-top:16px; font-size:14px; }
.steps { padding-left:20px; margin:0; } .steps li { margin-bottom:8px; }
pre.code { background:#1d2430; color:#e5e7eb; padding:12px 14px; border-radius:6px; font:12.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-x:auto; margin:8px 0; }
pre.code.wrap { white-space:pre-wrap; word-break:break-all; }
.token-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
label.inline { flex-direction:row; align-items:center; gap:6px; }
select { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); }
.samples-tabs { display:flex; gap:4px; } .samples-tabs button { padding:5px 10px; font-size:12px; }
.samples-tabs button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.card .v a { color:#1d4ed8; word-break:break-all; }
form#admin-form { margin-top:20px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:18px; }
form#admin-form h4 { margin:14px 0 6px; font-size:13px; }
.roles { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:8px; }
.roles label.check { align-items:flex-start; font-size:13px; }
td.row-actions { white-space:nowrap; }
header a.docs { color:var(--muted); text-decoration:none; font-size:13px; } header a.docs:hover { color:var(--ink); }