/* Tela de login da versão web. Usa as mesmas cores do app (variáveis em app.css). */
html, body { margin: 0; padding: 0; }
html.cfl-aberto, html.cfl-aberto body { overflow: hidden; }
#cf-login { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow-y: auto; padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)); background: var(--bg, #0C0F13); color: var(--fg, #E7EBF0); font-family: var(--f-ui, system-ui, sans-serif); }
#cf-login[hidden] { display: none !important; }
#cf-login .cfl-card { width: 100%; max-width: 380px; display: grid; gap: 14px; padding: 24px 20px; border-radius: 18px; background: var(--panel, #151A21); border: 1px solid var(--line, #232A34); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
#cf-login .cfl-marca { display: flex; align-items: center; gap: 10px; font-size: 17px; }
#cf-login .cfl-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft, #252C4A); color: var(--accent, #AAB8FF); flex: none; }
#cf-login .cfl-sub { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2, #BAC3CE); }
#cf-login .cfl-form { display: grid; gap: 12px; }
#cf-login .cfl-campo { display: grid; gap: 6px; font-size: 13px; color: var(--muted, #8B94A2); }
#cf-login .cfl-inp { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line-2, #313A46); background: var(--bg-2, #10141A); color: var(--fg, #E7EBF0); font: inherit; font-size: 16px; box-sizing: border-box; }
#cf-login .cfl-inp:focus-visible { outline: 2px solid var(--accent, #AAB8FF); outline-offset: 1px; }
#cf-login .cfl-btn { min-height: 46px; border-radius: 12px; border: 0; background: var(--accent, #AAB8FF); color: var(--on-accent, #0C0F13); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
#cf-login .cfl-btn:disabled { opacity: 0.6; cursor: default; }
#cf-login .cfl-link { justify-self: center; border: 0; background: none; color: var(--accent, #AAB8FF); font: inherit; font-size: 14px; padding: 6px; cursor: pointer; }
#cf-login .cfl-msg { margin: 0; min-height: 1.2em; font-size: 13.5px; color: var(--bad, #FF6B6B); }
#cf-login .cfl-msg.bom { color: var(--in, #5BD1A5); }
#cf-login .cfl-msg:empty { display: none; }