/* Tela de login — mesmos tokens de cor da POC (app/app.css) */
:root {
  --bg: #eef2ee; --surface: #ffffff; --surface-2: #f6f8f6; --ink: #17211b; --muted: #5b695f;
  --line: #d9e1da; --accent: #1f6f43; --accent-ink: #ffffff; --bad: #b3261e; --bad-soft: #fbe3e1;
  --f-ui: "Figtree", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0e1411; --surface: #161e1a; --surface-2: #1b2520; --ink: #e2eae4; --muted: #98a79d;
  --line: #2a3630; --accent: #5cbc85; --accent-ink: #0c1a12; --bad: #f08a80; --bad-soft: #3a1b18;
  color-scheme: dark; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--f-ui); }
button, input { font: inherit; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.login-card section { display: flex; flex-direction: column; gap: 12px; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; }
.brand-text span { color: var(--muted); font-size: 0.85rem; }
.login-title { margin: 0; font-size: 1.2rem; }
.login-lede { margin: 0; color: var(--muted); }
.login-hint { margin: 0; color: var(--muted); font-size: 0.8rem; }
.login-identity { margin: 0; font-family: Consolas, "Courier New", monospace; font-size: 0.9rem; overflow-wrap: anywhere; }
.login-error { background: var(--bad-soft); color: var(--bad); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; }

.btn-azure, .btn, .btn-ghost { border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.btn-azure { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-weight: 600; }
.btn { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-ghost { border: 1px solid var(--line); background: none; color: var(--ink); }
.btn-azure:disabled, .btn:disabled { opacity: .6; cursor: wait; }
.login-alt { border: none; background: none; color: var(--accent); padding: 0; cursor: pointer; text-align: left; font-size: 0.9rem; }
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 0.82rem; color: var(--muted); }
.login-form input { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); margin-bottom: 6px; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); align-self: center; }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 0.9s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }