/* Login page: self-contained (served without authentication, only /public/ files). */
:root {
  --accent: #2ad4c8; --accent-2: #3b8cff; --accent-deep: #0b3a6e; --on-accent: #04161c;
  --bg: #0b1420; --panel: #111e2d; --text: #e3eef6; --muted: #7f95a8; --line: #1d2f42;
  --down: #f87171; --glow: #2ad4c833;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --accent: #0e9f9a; --accent-2: #2563eb; --on-accent: #fff;
  --bg: #f2f7fa; --panel: #fff; --text: #102231; --muted: #5f7385; --line: #dde7ee;
  --down: #dc2626; --glow: #0e9f9a33;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
  font-family: Inter, system-ui, sans-serif; color: var(--text);
  background: radial-gradient(900px 500px at 15% 0%, var(--accent-deep), transparent 70%), var(--bg);
}
:root[data-theme="light"] body {
  background: radial-gradient(900px 500px at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--bg);
}
.login {
  width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 32px 28px; box-shadow: 0 10px 40px #0006;
}
.brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #fff;
  font: 600 24px Fredoka, sans-serif; letter-spacing: -2px; box-shadow: 0 4px 18px var(--glow);
}
.brand-name { font: 600 30px Fredoka, sans-serif; color: var(--text); letter-spacing: .3px; white-space: nowrap; }
.brand-name span { color: var(--accent); }
.brand-name .tld { color: inherit; opacity: .55; font-weight: 500; }
.msg { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; background: #10323a; color: var(--accent); }
.msg.err { background: #3a1a22; color: var(--down); }
:root[data-theme="light"] .login { box-shadow: 0 10px 40px rgba(16, 34, 49, .12); }
:root[data-theme="light"] .msg { background: #e0f5f4; }
:root[data-theme="light"] .msg.err { background: #fdecec; color: var(--down); }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
input:not([type="hidden"]) {
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; color: var(--text); font: inherit; outline: none;
}
input:focus { border-color: var(--accent); }
button {
  width: 100%; margin-top: 24px; border: 0; border-radius: 12px; padding: 12px; cursor: pointer;
  font: 600 15px Inter, system-ui, sans-serif; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 16px var(--glow);
}
button:hover { filter: brightness(1.08); }