*{box-sizing:border-box}
html,body{margin:0;background:#f4f6f9;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#2563eb}
a:hover{color:#1d4ed8}
.pscroll::-webkit-scrollbar{width:0;height:0}
.pscroll{scrollbar-width:none}

@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes growBar{from{width:0}}

/* layout real, mobile-first: full-bleed no celular, coluna centralizada em telas maiores */
.stage{min-height:100dvh;display:flex;justify-content:center;background:#e7ebf0}
.col{width:100%;max-width:480px;min-height:100dvh;background:#f4f6f9;display:flex;flex-direction:column;position:relative}
@media (min-width:481px){
  .col{box-shadow:0 0 40px rgba(15,23,42,.08)}
}

.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:center;padding:14px 18px 0}
.screen{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}

/* role switch */
.roleswitch{display:flex;gap:4px;padding:4px;background:#fff;border:1px solid #e2e8f0;border-radius:999px;box-shadow:0 2px 8px rgba(15,23,42,.06)}

/* inputs inherit font */
input,select,textarea,button{font-family:inherit}

/* ---- barra de usuário (modo conectado) ---- */
.userbar{width:100%;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:999px;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.userbar .who{display:flex;flex-direction:column;line-height:1.15}
.userbar .who b{font-size:13px;color:#0f172a}
.userbar .who span{font-size:11px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.userbar button{padding:8px 16px;border:none;border-radius:999px;background:#f1f5f9;color:#475569;font-size:13px;font-weight:700;cursor:pointer}
.userbar button:hover{background:#e2e8f0}

/* ---- tela de login ---- */
.authwrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.authcard{width:100%;max-width:380px;background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:30px 28px;box-shadow:0 30px 60px -30px rgba(15,23,42,.35)}
.authlogo{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin-bottom:16px}
.authcard h1{font-size:22px;font-weight:800;color:#0f172a;margin:0 0 4px;letter-spacing:-.02em}
.authcard p.sub{font-size:13px;color:#64748b;margin:0 0 20px;font-weight:500}
.authfield{margin-bottom:12px}
.authfield label{display:block;font-size:12px;font-weight:700;color:#475569;margin:0 2px 6px}
.authfield input,.authfield select{width:100%;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;font-size:14px;color:#0f172a;outline:none;background:#f8fafc}
.authfield input:focus,.authfield select:focus{border-color:#2563eb;background:#fff}
.authbtn{width:100%;margin-top:6px;padding:14px;border:none;border-radius:13px;background:#2563eb;color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 24px -10px rgba(37,99,235,.7)}
.authbtn:hover{background:#1d4ed8}
.authbtn:disabled{opacity:.6;cursor:default}
.autherr{margin-top:12px;font-size:12.5px;font-weight:600;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:11px;padding:10px 12px}
.authswitch{margin-top:18px;text-align:center;font-size:13px;color:#64748b;font-weight:600}
.authswitch button{border:none;background:none;color:#2563eb;font-weight:800;cursor:pointer;font-size:13px}

.loader{min-height:100dvh;display:flex;align-items:center;justify-content:center;font-size:14px;color:#64748b;font-weight:700}