:root {
  --iec-red: #BD4F5C;
  --iec-blue: #3C5896;
  --bg: #FAFAFA;
  --fg: #1F2933;
  --muted: #6B7280;
  --line: #E5E7EB;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.45;
}

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: white;
}
.brand { font-weight: bold; color: var(--iec-blue); letter-spacing: 0.04em; }
nav { display: flex; gap: 1rem; align-items: center; }
.who { color: var(--muted); font-size: 0.9rem; }
.logout { display: inline; }
.logout button {
  background: none; border: 1px solid var(--line); padding: 0.35rem 0.75rem;
  border-radius: 4px; cursor: pointer; color: var(--fg);
}
.logout button:hover { background: var(--line); }

main { max-width: 720px; margin: 2rem auto; padding: 0 1.5rem; }

.login-card, .welcome {
  background: white; border: 1px solid var(--line); border-radius: 8px;
  padding: 2rem; margin-top: 1rem;
}
.login-card h1 { margin-top: 0; color: var(--iec-blue); }
.login-card label { display: block; margin: 0.75rem 0; }
.login-card input {
  display: block; width: 100%; padding: 0.55rem; margin-top: 0.25rem;
  border: 1px solid var(--line); border-radius: 4px; font-size: 1rem;
}
.login-card button {
  margin-top: 0.75rem; padding: 0.6rem 1.25rem; background: var(--iec-blue);
  color: white; border: 0; border-radius: 4px; cursor: pointer; font-size: 1rem;
}
.login-card button:hover { background: #324a80; }
.error {
  background: #FEE2E2; color: #991B1B; padding: 0.6rem 0.9rem;
  border-radius: 4px; margin-bottom: 1rem; border: 1px solid #FCA5A5;
}