:root {
    --navy: #172546;
    --blue: #1d70b7;
    --green: #95c11e;
    --bg: #f6f8fa;
    --line: #dce0e6;
    --muted: #6b7486;
    --danger: #c0392b;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--navy);
}

body { margin: 0; background: var(--bg); }
h1, h2, h3 { color: var(--navy); }
a { color: var(--blue); }
.narrow { max-width: 520px; margin: 48px auto; padding: 0 16px; }
.wide { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--muted); }
.error { color: var(--danger); }
.notice { background: #e8f5d8; padding: 8px 12px; border-radius: 6px; }
form { display: grid; gap: 8px; margin: 16px 0; }
form.inline { display: inline; margin: 0; }
input, select, button { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
button { background: var(--navy); color: #fff; border: 0; cursor: pointer; }
button.link { background: none; color: var(--blue); padding: 0; }
/* Sign-in alternatives ("Email me a code", "send another code"): a link-styled button within a sentence. */
.alternative { display: block; margin: 8px 0; }
.alternative button.link { text-decoration: underline; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.small { font-size: 12px; }
td.actions { display: flex; gap: 8px; align-items: center; }
td.actions button { padding: 4px 10px; }
.tag { font-size: 11px; padding: 2px 6px; border-radius: 10px; background: var(--line); margin-left: 6px; }
.tag.published { background: #c1f0c6; }
.tag.draft { background: #fdecd2; }
.tag.withdrawn, .tag.internal { background: #fbe0dd; }
.cards { list-style: none; padding: 0; display: grid; gap: 8px; }
.cards a { display: block; background: #fff; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; }
/* Version reference under the project name, e.g. "Version 3, 21 Oct 2026 14:32". */
.cards .reference { display: block; margin-top: 4px; font-size: .85em; color: var(--muted); }
pre.token { background: #fff; padding: 8px; border: 1px solid var(--line); overflow-x: auto; }
/* Authenticator setup: the QR code on a white background (scanners need contrast) and the key to type instead. */
.qr svg { width: 220px; height: 220px; background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
code.key { font-size: 1.05em; letter-spacing: .05em; white-space: nowrap; }

.frame { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.frame-bar { display: flex; gap: 16px; align-items: center; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); font-size: 14px; }
.frame-body { position: relative; overflow: hidden; }
.frame-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.watermark { position: absolute; inset: -50%; pointer-events: none; display: flex; flex-wrap: wrap; gap: 80px 120px; transform: rotate(-24deg); opacity: .08; font-size: 14px; user-select: none; color: #000; }