:root {
  --bg: #f3f4f6; --card: #ffffff; --text: #111827; --muted: #6b7280;
  --border: #e5e7eb; --accent: #2563eb; --accent-text: #ffffff; --warn: #b91c1c; --pill: #e0e7ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a; --card: #1e293b; --text: #f1f5f9; --muted: #94a3b8;
    --border: #334155; --accent: #3b82f6; --warn: #f87171; --pill: #312e81;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
h1 { margin: 0 0 .5rem; font-size: 1.6rem; }
h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
p { margin: .25rem 0 .75rem; }
.muted { color: var(--muted); }
.tiny { font-size: .8rem; }
.warn { color: var(--warn); }
code { font-size: .85em; }
pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .75rem; overflow: auto; font-size: .8rem; }

.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.card.login { width: 100%; max-width: 380px; text-align: center; }
.logo { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 14px; background: var(--accent); color: var(--accent-text); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1.1rem; border-radius: 8px; background: var(--accent); color: var(--accent-text); font-weight: 600; border: 0; }
.btn.ms { width: 100%; justify-content: center; margin: 1rem 0 .5rem; }
.btn.small { padding: .35rem .7rem; font-size: .85rem; }

.topbar { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 16px; background: var(--card); border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; }
.topbar nav { display: flex; gap: 1rem; flex: 1; }
.who { display: flex; align-items: center; gap: .6rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

.container { max-width: 1000px; margin: 0 auto; padding: 1.5rem 16px; }
.hero { margin-bottom: 1.5rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; word-break: break-all; }
.pill { display: inline-block; background: var(--pill); border-radius: 999px; padding: .1rem .6rem; font-size: .8rem; margin-right: .3rem; }