:root {
  --navy: #102b43;
  --gold: #d2a242;
  --ink: #1c2733;
  --line: #e3e7ec;
  --bg: #f6f8fa;
  --cream: #f7f4ef;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Liberation Sans", Arial, sans-serif; color: var(--ink);
  background: var(--bg); line-height: 1.5;
}
a { color: #1c4263; }
header.topbar {
  background: var(--navy); color: #fff; display: flex; align-items: center;
  gap: 18px; padding: 10px 20px; flex-wrap: wrap;
}
header.topbar .brand { display: flex; align-items: center; text-decoration: none; }
header.topbar .brand-logo { height: 30px; display: block; }
header.topbar nav { display: flex; gap: 14px; flex-wrap: wrap; }
header.topbar nav a { color: #dbe3ec; text-decoration: none; font-size: 14px; }
header.topbar nav a:hover { color: #fff; }
header.topbar .spacer { flex: 1; }
header.topbar form { margin: 0; }
.btn-link { background: none; border: none; color: #dbe3ec; cursor: pointer; font-size: 14px; }
main { max-width: 1000px; margin: 24px auto; padding: 0 20px; }
h1 { color: var(--navy); font-size: 22px; }
h2 { color: var(--navy); font-size: 17px; margin-top: 26px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; }
.layout { display: grid; grid-template-columns: 240px 1fr; gap: 22px; }
.tree { list-style: none; padding-left: 14px; margin: 6px 0; }
.tree > li { margin: 3px 0; }
.tree a { text-decoration: none; }
.topic { border-bottom: 1px solid var(--line); padding: 10px 0; }
.topic:last-child { border-bottom: none; }
.topic .meta { color: #6b7480; font-size: 13px; }
.tag { display: inline-block; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 12px; color: var(--navy); }
.btn { display: inline-block; background: var(--navy); color: #fff; border: none; border-radius: 6px; padding: 7px 13px; font-size: 14px; text-decoration: none; cursor: pointer; }
.btn.gold { background: var(--gold); color: var(--navy); }
.btn.ghost { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.btn.danger { background: #b3392f; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
th { background: var(--navy); color: #fff; font-weight: 600; }
tr:nth-child(even) td { background: #fafbfc; }
.status { font-size: 12px; padding: 1px 8px; border-radius: 999px; text-transform: capitalize; }
.status.pending, .status.queued { background: #fdf0d5; }
.status.granted, .status.done { background: #d5f0df; }
.status.denied, .status.revoked, .status.failed { background: #f3d9d6; }
.status.sent { background: #e8edf6; }
input, textarea, select { font: inherit; padding: 8px 10px; border: 1px solid #c7ced6; border-radius: 6px; width: 100%; }
label { display: block; font-size: 13px; color: #44505d; margin: 10px 0 4px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; }
.note { color: #6b7480; font-size: 13px; }
.error { background: #f3d9d6; border: 1px solid #d8a39c; color: #7a241c; padding: 8px 12px; border-radius: 6px; }
.ok { background: #d5f0df; border: 1px solid #a3cdb2; padding: 8px 12px; border-radius: 6px; }
.authwrap { max-width: 360px; margin: 8vh auto; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions form { margin: 0; }