*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;margin:0;background:#f4f5f7;color:#111}
header{position:sticky;top:0;background:#1f2937;color:#fff;padding:12px 16px;display:flex;justify-content:center;align-items:center}
header h2{margin:0;font-size:1.1rem}
header .logout{position:absolute;right:14px;color:#ffd4d4;text-decoration:none}
.legend{display:flex;flex-wrap:wrap;gap:8px;padding:10px;justify-content:center}
.badge{display:inline-block;padding:6px 8px;border-radius:8px;font-size:.8rem;border:1px solid rgba(0,0,0,.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:12px}
.card{border-radius:12px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.08)}
.card h3{margin:0 0 6px 0}
.card p{margin:4px 0;font-size:.9rem}
.green{background:#b9f6c1}
.lightblue{background:#bde3ff}
.yellow{background:#fff6b2}
.red{background:#ffc1c1}
.white{background:#fff}
footer{padding:10px;text-align:center;color:#555;font-size:.8rem}
.login-body{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#1f2937,#374151)}
.login-container{width:min(92%,360px);background:#ffffff14;color:#fff;padding:20px;border-radius:12px;backdrop-filter:blur(6px)}
.login-container h2{margin-top:0}
.login-container input{width:100%;padding:10px;margin:8px 0;border-radius:8px;border:1px solid #ffffff44;background:#00000022;color:#fff}
.login-container button{width:100%;padding:10px;border:none;border-radius:8px;background:#22a3ff;color:#fff;font-weight:700}