:root{
  --bg:#ECE5D6; --surface:#FBF8F1; --ink:#1B2231; --muted:#6A6F80;
  --line:#D8CFBB; --ochre:#B07A24; --red:#BD4630;
}
/* whatsapp-desk lesson: author CSS must not re-show [hidden] elements */
[hidden]{display:none!important;}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{font-weight:700; font-size:19px; display:flex; align-items:center; gap:10px;}
.mark{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:var(--ink); color:#F1E6CB; font-weight:700;
}
.userbox{display:flex; align-items:center; gap:12px; font-size:14px;}
main{max-width:720px; margin:40px auto; padding:0 20px;}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:26px; box-shadow:0 6px 22px -12px rgba(27,34,49,.25);
}
.login{max-width:380px; margin:60px auto;}
.login h1{font-size:24px; margin-bottom:4px;}
.muted{color:var(--muted); font-size:14px;}
label{display:block; font-size:13px; font-weight:600; margin:16px 0 6px;}
input{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:#fff; font-size:15px; color:var(--ink);
}
input:focus{outline:none; border-color:var(--ochre);}
.btn{
  font:inherit; font-weight:600; cursor:pointer; border:1px solid transparent;
  border-radius:9px; padding:10px 16px; font-size:14px;
}
.btn.primary{background:var(--ink); color:#F3EAD4; width:100%; margin-top:20px;}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.err{color:var(--red); font-size:13px; margin-top:12px;}
.dash{display:flex; flex-direction:column; gap:18px;}
.rolebar{display:flex;}
.pill{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--ochre); background:#F3E8CF; padding:6px 14px; border-radius:20px;
}
.rolecard{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px;
}
.rolecard h2{font-size:20px; margin-bottom:8px;}
footer{text-align:center; color:var(--muted); font-size:12px; padding:30px;}