*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;background:#f5f7fa;color:#1f2937;font-size:14px}
.hidden{display:none!important}
.center-card{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
h1,h3{margin:.2em 0 .6em}
form label{display:block;margin:8px 0;font-size:13px;color:#374151}
input,select{display:block;width:100%;padding:9px 10px;margin-top:4px;border:1px solid #d1d5db;border-radius:7px;font-size:14px;background:#fff}
input:focus,select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
button{padding:9px 14px;border:1px solid #d1d5db;border-radius:7px;background:#fff;cursor:pointer;font-size:14px}
button:hover{background:#f3f4f6}
button.primary{background:#2563eb;color:#fff;border-color:#2563eb}
button.primary:hover{background:#1d4ed8}
button.ghost{background:transparent}
.err{color:#dc2626;font-size:13px;margin-top:8px;min-height:1em}
.muted{color:#9ca3af}
.small{font-size:12px;color:#6b7280}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#loginForm{width:320px}
header{display:flex;align-items:center;gap:18px;background:#fff;border-bottom:1px solid #e5e7eb;padding:0 20px;height:56px;position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:16px}
header nav{display:flex;gap:4px}
.nav{border:none;background:transparent;padding:8px 12px;border-radius:7px;color:#6b7280;font-weight:500;cursor:pointer}
.nav.active{background:#eff6ff;color:#2563eb}
header #logoutBtn{margin-left:auto}
main{max-width:1180px;margin:18px auto;padding:0 18px}
.view{display:flex;flex-direction:column;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{padding:16px}
.kpi-t{color:#6b7280;font-size:13px}
.kpi-v{font-size:24px;font-weight:700;margin:6px 0 2px}
.kpi-s{color:#9ca3af;font-size:12px}
.chart-wrap canvas{width:100%;display:block}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid #f0f1f3;vertical-align:top}
th{color:#6b7280;font-weight:600;background:#fafbfc}
tr:hover td{background:#fafbfc}
.ok{color:#059669;font-weight:600}
.used{color:#6b7280}
.dis{color:#dc2626}
.fail{color:#dc2626}
.pagination{justify-content:center;margin-top:10px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:10;padding:20px}
.modal-card{width:560px;max-width:100%;max-height:90vh;overflow:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.codes-box{max-height:260px;overflow:auto;border:1px solid #e5e7eb;border-radius:8px;padding:8px;margin-top:8px}
.code-line{padding:3px 2px;font-size:12.5px}
@media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr}}