/* Identidade TIG: monocromática (preto/branco/cinzas), tipografia grotesca como no logo.
       Tema claro/escuro igual ao painel (ver dashboard.css e theme.js). */
    :root {
      color-scheme: light dark;
      --ink: light-dark(#0a0a0a, #f2f2f0);
      --ink-2: light-dark(#2a2a2a, #d6d6d4);
      --on-ink: light-dark(#ffffff, #0a0a0a);
      --paper: light-dark(#f7f7f7, #121212);
      --surface: light-dark(#ffffff, #1c1c1c);
      --line: light-dark(#e3e3e3, #2e2e2e);
      --muted: light-dark(#626262, #a3a3a0);
      --error: light-dark(#b42318, #f97066);
      --error-bg: light-dark(#fdf0ef, #2a1513);
    }
    :root[data-theme="light"] { color-scheme: light; }
    :root[data-theme="dark"] { color-scheme: dark; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      min-height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink);
      -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    }
    body {
      min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--paper);
      padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }
    form {
      background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
      padding: clamp(24px, 7vw, 32px) clamp(20px, 6vw, 28px); width: 100%; max-width: 340px;
      display: flex; flex-direction: column; gap: 14px;
    }
    .logo { width: 96px; height: 46px; margin-bottom: 6px; display: block; }
    :root[data-theme="dark"] .logo { filter: invert(1); mix-blend-mode: screen; }
    @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo { filter: invert(1); mix-blend-mode: screen; } }
    h1 { font-size: 15px; font-weight: 400; color: var(--muted); margin-bottom: 6px; }
    label { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
    input {
      border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px;
      font: inherit; font-size: 16px; /* 16px evita o zoom automático do iOS */ width: 100%;
      color: var(--ink); background: var(--surface);
    }
    input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
    button {
      border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink);
      min-height: 44px; padding: 11px; border-radius: 4px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 6px;
    }
    button:hover { background: var(--ink-2); }
    button:active { transform: translateY(1px); }
    .erro {
      display: none; background: var(--error-bg); border: 1px solid var(--error); color: var(--error);
      font-size: 13px; padding: 9px 11px; border-radius: 4px;
    }
    .erro.show { display: block; }
    @media (max-height: 520px) {
      body { align-items: flex-start; }
      form { gap: 10px; }
      .logo { width: 78px; height: 38px; margin-bottom: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; }
    }