/* d20craft sign-in. Hand-written, no build step. */
:root {
    color-scheme: dark;
    --ground: #15171c;
    --panel: #1e2128;
    --line: #333845;
    --text: #e6e2d8;
    --muted: #9a978f;
    --accent: #c9a860;
    --discord: #5865f2;
    --good: #7fb77e;
    --bad: #e07a5f;
    --radius: 8px;
}
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--ground); color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent); }
.wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
.narrow { max-width: 420px; }
header.top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 12px 16px; }
header.top .brand { font-weight: 700; letter-spacing: .02em; color: var(--text); text-decoration: none; }
header.top .brand span { color: var(--accent); }
header.top nav { display: flex; gap: 14px; flex-wrap: wrap; }
header.top .me { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.1rem; margin: 32px 0 12px; }
.muted { color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.status { background: var(--panel); border-left: 3px solid var(--accent); padding: 10px 14px; margin: 0 0 20px; border-radius: 4px; }
.errors { border-left-color: var(--bad); }
.btn, button {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--panel); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; padding: 8px 14px; font: inherit; text-decoration: none;
}
.btn:hover, button:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: #1a1a1a; border-color: var(--accent); font-weight: 600; }
.btn-discord { background: var(--discord); border-color: var(--discord); color: #fff; font-weight: 600; width: 100%; justify-content: center; padding: 12px; }
.btn-small, .inline button { padding: 3px 10px; font-size: .875rem; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; }
form.inline { display: inline; }
label { display: block; margin: 14px 0 4px; font-weight: 600; }
.hint { font-weight: 400; color: var(--muted); font-size: .875rem; }
input[type=text], input[type=url], textarea, select {
    width: 100%; background: var(--ground); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; padding: 8px 10px; font: inherit;
}
textarea { min-height: 5em; font-family: ui-monospace, monospace; font-size: .875rem; }
.checks label { display: inline-flex; gap: 6px; font-weight: 400; margin-right: 16px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
code, .mono { font-family: ui-monospace, monospace; font-size: .875em; }
.secret { word-break: break-all; background: var(--ground); border: 1px dashed var(--accent); padding: 10px; border-radius: 6px; }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: .8125rem; margin: 0 4px 2px 0; }
.tag.good { border-color: var(--good); color: var(--good); }
.tag.bad { border-color: var(--bad); color: var(--bad); }
.sites { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sites a { display: block; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 160px; }
.row > .shrink { flex: 0 0 auto; }