*{box-sizing:border-box}
html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f4f6f8;color:#111;margin:0;line-height:1.4;display:flex;flex-direction:column;min-height:100vh}
.wrap{max-width:1200px;margin:0 auto;padding:16px;width:100%}
.main-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.site-hdr{background:#1e3a5f;color:#fff;padding:12px 0;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.hdr-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.hdr-txt{display:flex;flex-direction:column;gap:2px;align-items:center}
.site-hdr strong{font-size:1.05rem;line-height:1.2}
.site-hdr .sub{color:#cbd5e1;font-size:.9rem;margin:0;line-height:1.2}
.site-ftr{color:#cbd5e1;padding:14px 0;text-align:center;background:#1e3a5f;border-top:1px solid #152a45}
.site-ftr small{color:#cbd5e1}
.login-logo{display:block;margin:0 auto 14px;width:96px;height:96px;object-fit:contain}

.card{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.06);padding:28px 32px;margin:0 auto;max-width:460px;width:100%;text-align:center}
.login-card h1,.info-card h1{margin:0 0 4px;font-size:1.4rem;color:#1e3a5f;text-align:center}
.login-card .lede,.info-card .lede{color:#475569;margin-top:0;margin-bottom:16px;font-size:.92rem;text-align:center}
.login-card form{text-align:left}
.login-card label{display:block;margin-top:14px;font-size:.86rem;color:#334155;font-weight:500}
.login-card input{display:block;width:100%;padding:9px 10px;margin-top:5px;border:1px solid #cbd5e1;border-radius:4px;font-size:1rem;font-family:inherit}
.login-card input:focus{outline:none;border-color:#1e3a5f;box-shadow:0 0 0 3px rgba(30,58,95,.15)}
.login-card select{display:block;padding:9px 10px;border:1px solid #cbd5e1;border-radius:4px;font-size:1rem;font-family:inherit;background:#fff;cursor:pointer;color:#334155}
.login-card select:focus{outline:none;border-color:#1e3a5f;box-shadow:0 0 0 3px rgba(30,58,95,.15)}
.dob-row{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;margin-top:5px}
.dob-row select{width:100%;padding:9px 6px}
.login-card button{margin-top:18px;background:#1e3a5f;color:#fff;border:0;padding:11px 18px;font-size:1rem;border-radius:4px;cursor:pointer;width:100%;font-weight:500}
.login-card button:hover{background:#152a45}
.hint{color:#64748b;font-size:.8rem;margin-top:16px;margin-bottom:0;text-align:center}
.err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;padding:10px 12px;border-radius:4px;font-size:.9rem;margin-bottom:14px;text-align:left}

/* City-slip info page */
.info-card{max-width:540px}
.info-tbl{margin:14px 0 20px;border:1px solid #e2e8f0;border-radius:4px;overflow:hidden}
.info-tbl > div{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #e2e8f0;font-size:.9rem;text-align:left}
.info-tbl > div:last-child{border-bottom:0}
.info-tbl .k{color:#475569;font-weight:500}
.info-tbl .v{color:#111;font-weight:600}
.btn-primary{display:block;background:#1e3a5f;color:#fff;padding:13px 20px;border-radius:5px;text-decoration:none;font-weight:600;text-align:center;margin:16px 0 8px}
.btn-primary:hover{background:#152a45}
.mono{font-family:'SF Mono',Menlo,Consolas,monospace}
.foot-row{margin-top:14px;display:flex;justify-content:center}
.btn-link{color:#1e3a5f;text-decoration:none;font-size:.9rem;font-weight:500}
.btn-link:hover{text-decoration:underline}

/* Stats */
.stats-wrap{width:100%;max-width:1200px;margin:0 auto;padding:20px}
.stats-hdr{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.stats-hdr h1{margin:0;color:#1e3a5f;font-size:1.4rem}
.stats-actions{display:flex;gap:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.tile{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:16px 18px;box-shadow:0 2px 4px rgba(0,0,0,.03)}
.tile .v{font-size:1.9rem;font-weight:700;color:#1e3a5f;line-height:1.1}
.tile .k{color:#64748b;font-size:.82rem;margin-top:4px;text-transform:uppercase;letter-spacing:.4px}
.stats-wrap h2{color:#1e3a5f;font-size:1.05rem;margin:20px 0 8px}
.stats-tbl{width:100%;border-collapse:collapse;background:#fff;font-size:.85rem;box-shadow:0 2px 4px rgba(0,0,0,.03);border-radius:5px;overflow:hidden}
.stats-tbl th,.stats-tbl td{padding:7px 10px;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.stats-tbl th{background:#f8fafc;font-weight:600;color:#334155;font-size:.78rem;text-transform:uppercase;letter-spacing:.3px}
.stats-tbl tr:last-child td{border-bottom:0}
.stats-tbl .ua{color:#64748b;font-size:.75rem;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-block;padding:2px 8px;font-size:.72rem;font-weight:600;border-radius:10px;background:#e2e8f0;color:#1e293b;letter-spacing:.3px}
.pill-login{background:#dcfce7;color:#166534}
.pill-login-fail{background:#fee2e2;color:#991b1b}
.pill-download-pdf{background:#dbeafe;color:#1e40af}
.pill-view-info{background:#f1f5f9;color:#475569}
.pill-logout{background:#f5f5f5;color:#64748b}
.pill-staff-login{background:#fef3c7;color:#92400e}
.pill-staff-login-fail{background:#fee2e2;color:#991b1b}