/* DUOSS HUB — estilos das telas de acesso */ /* As fontes vêm por no de cada página (com preconnect + display=swap), não por @import: @import é render-blocking e trava o estilo quando o Google Fonts está lento — a página aparecia sem estilo até a fonte chegar. */ :root{ --bg:#0A0A0A; --panel:#131311; --panel-2:#1B1B18; --yellow:#FFDF00; --yellow-d:#E6C800; --ink:#fff; --muted:#9C9C92; --line:rgba(255,255,255,.12); --green:#33D17A; --red:#FF6B6B; /* Inter no corpo: desenhada p/ tela, segura melhor os tamanhos pequenos dos painéis. Mesma da LP do Summit. Para voltar: tag `fonte-manrope`. */ --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} /* o atributo `hidden` esconde via display:none do navegador — mas qualquer `display` no nosso CSS vence ele (foi assim que contadores "escondidos" apareciam como "0"). Isto garante que hidden sempre esconde. */ [hidden]{display:none !important} body{font-family:var(--body);background:var(--bg);color:var(--ink);min-height:100vh; display:flex;align-items:center;justify-content:center;padding:24px; background-image:radial-gradient(700px 400px at 80% -10%,rgba(255,223,0,.10),transparent 60%);} .card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line); border-radius:20px;padding:36px 32px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)} .brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px} .brand .d{width:32px;height:32px;border-radius:8px;background:var(--yellow);color:#111; display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.2rem} .brand b{font-family:var(--display);font-size:1.25rem} .brand .hub{color:var(--yellow)} h1{font-family:var(--display);font-size:1.5rem;text-align:center;margin:14px 0 4px} .sub{text-align:center;color:var(--muted);font-size:.94rem;margin-bottom:24px} /* seletor de perfil */ .roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .role{border:1.5px solid var(--line);border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:.16s;background:transparent} .role:hover{border-color:rgba(255,255,255,.35)} .role.active{border-color:var(--yellow);background:rgba(255,223,0,.08)} .role .t{font-family:var(--display);font-weight:600;font-size:.98rem} .role .d{font-size:.76rem;color:var(--muted);margin-top:2px} label{display:block;font-size:.82rem;color:var(--muted);margin:14px 0 6px;font-weight:500} input{width:100%;background:var(--panel-2);border:1.5px solid var(--line);border-radius:11px; padding:13px 14px;color:var(--ink);font-family:var(--body);font-size:.98rem;transition:.16s} input:focus{outline:none;border-color:var(--yellow)} input::placeholder{color:#6E6E66} .btn{width:100%;margin-top:22px;background:var(--yellow);color:#111;border:none;border-radius:11px; padding:14px;font-family:var(--display);font-weight:600;font-size:1rem;cursor:pointer;transition:.16s} .btn:hover{background:var(--yellow-d)} .btn:disabled{opacity:.5;cursor:not-allowed} .alt{text-align:center;margin-top:20px;font-size:.9rem;color:var(--muted)} .alt a{color:var(--yellow);text-decoration:none;font-weight:600} .msg{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:.88rem;display:none} .msg.show{display:block} .msg.err{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.4);color:#ffb4b4} .msg.ok{background:rgba(51,209,122,.12);border:1px solid rgba(51,209,122,.4);color:#9ff0c4} .hint{font-size:.78rem;color:var(--muted);margin-top:6px}