:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #5f6b7a;
  --border: #d9dee5;
  --accent: #1f4e8c;
  --accent-text: #ffffff;
  --error-bg: #fdecec;  --error-text: #8a1c1c;
  --ok-bg: #e8f5ec;     --ok-text: #1d5c33;
  --info-bg: #e9f0fa;   --info-text: #1f3f6b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c;
    --surface: #1d2128;
    --text: #e6e9ee;
    --muted: #9aa5b4;
    --border: #2f3540;
    --accent: #5b8fd6;
    --accent-text: #0e1116;
    --error-bg: #3a1f1f;  --error-text: #f2b8b8;
    --ok-bg: #1d3326;     --ok-text: #a9dcb9;
    --info-bg: #1e2a3d;   --info-text: #b5cbea;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
body.centered { min-height: 100vh; display: grid; place-items: center; padding: 16px; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
.muted { color: var(--muted); }
code { font-size: .9em; background: var(--bg); padding: .1em .35em; border-radius: 4px; word-break: break-all; }

.card {
  width: 100%; max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}
.card-narrow { max-width: 380px; }
.brand { font-weight: 700; color: var(--accent); letter-spacing: .02em; margin-bottom: .5rem; }

form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: .92rem; font-weight: 500; }
input {
  font: inherit; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button, .button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 16px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--accent-text);
  text-decoration: none; display: inline-block; text-align: center;
}
.button-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 6px 12px; }

.alert { padding: 10px 12px; border-radius: 8px; margin: 0 0 1rem; }
.alert-error { background: var(--error-bg); color: var(--error-text); }
.alert-ok    { background: var(--ok-bg);    color: var(--ok-text); }
.alert-info  { background: var(--info-bg);  color: var(--info-text); }

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar .brand { margin: 0; }
.who { display: flex; align-items: center; gap: 12px; font-size: .92rem; }
.who form { display: block; }

.content { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.modules {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.module {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.module-name { font-weight: 600; }
.badge { font-size: .75rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }