:root {
  /* Gold palette from the tenka logo (dark theme). */
  --bg: #0c0a06; --card: #15110a; --ink: #f6e7c1; --muted: #bfa974;
  --line: #3a2f14; --brand: #e3ab3b; --brand-ink: #1a1203;
  --ok: #8fd694; --danger: #ff7a6b; --warn: #f8c868; --chip: #1f180b;
  --shadow: 0 0 18px rgba(227,171,59,.10);
  --radius: 2px;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  background-image:radial-gradient(ellipse at 50% -10%, rgba(227,171,59,.14), transparent 60%);
  background-attachment:fixed; background-repeat:no-repeat;
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
a { color: var(--brand); }
.wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 64px; }
.brandbar { display:flex; align-items:center; gap:10px; padding:16px; max-width:560px; margin:0 auto; }
.brandbar .brand-logo { height:52px; width:auto; display:block; }
.brandbar h1 { color:var(--muted); font-weight:600; }
.brandbar h1 { font-size:16px; margin:0; letter-spacing:.2px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); margin-bottom:16px; }
h2 { margin:.1em 0 .5em; font-size:19px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.center { text-align:center; }
button, .btn { font:inherit; border:0; border-radius:var(--radius); padding:13px 18px; cursor:pointer;
  background:var(--brand); color:var(--brand-ink); font-weight:600; width:100%; }
button.secondary { background:var(--chip); color:var(--ink); }
button.ghost { background:transparent; color:var(--muted); box-shadow:none; }
button:disabled { opacity:.55; cursor:default; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }
.kv { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); }
.kv .v { font-weight:600; text-align:right; }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--chip); }
.pill.ok { background:rgba(143,214,148,.12); color:var(--ok); }
.pill.pending { background:rgba(248,200,104,.14); color:var(--warn); }
.pill.bad { background:rgba(255,122,107,.14); color:var(--danger); }
.big-code { font-size:44px; font-weight:800; letter-spacing:8px; text-align:center; margin:8px 0; }
.numin { font-size:34px; letter-spacing:10px; text-align:center; width:100%; padding:12px;
  border:2px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--ink); }
.req-item { display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; color:inherit; cursor:pointer; }
.req-item h3 { margin:0 0 3px; font-size:16px; }
.device { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.device:last-child { border-bottom:0; }
.device .revoke { width:auto; padding:8px 12px; font-size:13px; background:transparent; color:var(--danger); }
.spacer { height:10px; }
.notice { padding:12px 14px; border-radius:var(--radius); background:var(--chip); margin:10px 0; }
.notice.err { background:rgba(255,122,107,.12); color:var(--danger); }
.notice.ok { background:rgba(143,214,148,.10); color:var(--ok); }
.hidden { display:none !important; }
.icon-approve, .icon-deny { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 8px;
  border-radius:50%; font-size:30px; }
.icon-approve { background:rgba(143,214,148,.12); }
.icon-deny { background:rgba(255,122,107,.14); }
label.field { display:block; margin:10px 0; }
label.field span { display:block; color:var(--muted); font-size:13px; margin-bottom:5px; }
input[type=text], input[type=email], select, textarea { width:100%; padding:11px 12px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg); color:var(--ink); font:inherit; }
textarea { resize:vertical; }

/* docs */
.docs-wrap { max-width: 820px; }
.docs-wrap .card { padding: 22px 26px; }
.docs h2 { margin-top: 0; }
.docs h3 { font-size: 15px; margin: 22px 0 6px; }
.docs h3:first-of-type { margin-top: 4px; }
.docs p, .docs li { color: var(--ink); }
.docs ul, .docs ol { padding-left: 20px; }
.docs li { margin: 4px 0; }
.docs pre { background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; margin: 10px 0; }
.docs pre code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.docs code { font: 0.92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--chip); padding: 1px 6px; border-radius: 6px; }
.docs pre code { background: none; padding: 0; }
.docs table { margin: 10px 0; }
.docs th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.docs td code { white-space: nowrap; }
.method { display:inline-block; font: 700 12px ui-monospace, monospace; padding:2px 8px;
  border-radius:6px; background: rgba(47,109,246,.14); color: var(--brand); margin-right:6px; vertical-align:middle; }
.method.get { background: rgba(143,214,148,.12); color: var(--ok); }
.toc a { display:inline-block; margin:2px 12px 2px 0; }
.site-foot { max-width:560px; margin:0 auto; padding:8px 16px 40px; text-align:center; }
.site-foot a { color:var(--muted); font-size:13px; text-decoration:none; }
.site-foot a:hover { color:var(--brand); text-decoration:underline; }
/* admin */
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tabs button { width:auto; padding:8px 14px; background:var(--chip); color:var(--ink); font-size:13px; }
.tabs button.active { background:var(--brand); color:var(--brand-ink); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; word-break:break-all; }
.admin-wrap { max-width: 960px; }

/* onboarding: install steps, QR display, camera scanner */
.steps { margin:10px 0; padding-left:22px; color:var(--ink); }
.steps li { margin:6px 0; }
.qr { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px;
  width:220px; max-width:100%; margin:12px auto; }
.qr svg { display:block; width:100%; height:auto; }
.scanner { position:relative; margin:12px 0; border-radius:var(--radius); overflow:hidden;
  background:#000; aspect-ratio:1/1; max-width:340px; margin-inline:auto; }
.scanner video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame { position:absolute; inset:14%; border:3px solid rgba(255,255,255,.9);
  border-radius:var(--radius); box-shadow:0 0 0 100vmax rgba(0,0,0,.25); pointer-events:none; }

/* footer: "A product by Tenka AB" */
.brand-foot { max-width:560px; margin:0 auto; padding:8px 16px 40px; display:flex; align-items:center;
  justify-content:center; gap:10px; color:var(--muted); font-size:13px; }
.brand-foot img { height:24px; width:auto; display:block; opacity:.9; }
.brand-foot a { display:inline-flex; }
.docs-wrap ~ .brand-foot, .admin-wrap ~ .brand-foot { max-width:820px; }