body{font-family:system-ui,sans-serif;margin:0;background:#f4f4f2;color:#222}
header{display:flex;gap:1rem;align-items:center;background:#1d3d2f;color:#fff;padding:.6rem 1rem}
header a{color:#cde;margin-right:.8rem} .brand{font-weight:700}
.logout{margin-left:auto} .banner{background:#f3d774;padding:.5rem 1rem}
main{padding:1rem;max-width:1200px;margin:auto}
.card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:1rem;max-width:22rem}
.card label{display:block;margin-bottom:.6rem} .card input{width:100%}
.err{color:#a22} table{border-collapse:collapse;width:100%;background:#fff}
td,th{border-bottom:1px solid #e5e5e5;padding:.4rem .6rem;text-align:left}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%}
.dot.green{background:#2c7} .dot.yellow{background:#e6b820} .dot.red{background:#d33}
.dot.gray{background:#aaa}
.card.wide{max-width:60rem;margin-bottom:1rem}
.card.wide input,.card.wide select{width:auto}
.inline{display:inline-block;margin:0 .3rem .3rem 0}
.usercode{font-size:1.6rem;letter-spacing:.2rem;background:#eef2ff;padding:.2rem .6rem;
  border-radius:4px}
.ok{color:#2c7;font-weight:600}