:root{--bg:#0f172a;--pri:#1d4ed8;--pri2:#2563eb;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--line:#e5e7eb;--muted:#64748b;--card:#fff;--soft:#f1f5f9}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#f5f7fb;color:#0f172a;font-size:14px}
a{color:var(--pri);text-decoration:none}h1{font-size:18px;margin:0}h3{margin:0 0 12px}h4{margin:16px 0 6px;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.05em}
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--bg);color:#cbd5e1;flex-shrink:0;display:flex;flex-direction:column}
.brand{display:flex;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid #1e293b}
.brand b{color:#fff;display:block;font-size:14px}.brand small{color:#94a3b8;font-size:11px}
.logo{background:var(--pri2);color:#fff;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700}
.logo.big{width:60px;height:60px;font-size:22px;margin:0 auto 10px}
.sidebar nav{display:flex;flex-direction:column;padding:10px}
.sidebar nav a{color:#cbd5e1;padding:10px 12px;border-radius:8px;margin:2px 0}
.sidebar nav a:hover{background:#1e293b;color:#fff}.sidebar nav a.logout{margin-top:auto;color:#fca5a5}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:14px 22px;border-bottom:1px solid var(--line)}
.userbox{display:flex;gap:10px;align-items:center}.userbox b{display:block;font-size:13px}.userbox small{color:var(--muted)}
.content{padding:22px;flex:1}.foot{padding:14px 22px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card.narrow{max-width:640px}
.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:1fr 1fr 1fr}.grid.four{grid-template-columns:repeat(4,1fr)}
.grid.cards{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid.two,.grid.three,.grid.four,.grid.cards{grid-template-columns:1fr 1fr}.sidebar{width:64px}.brand div,.sidebar nav a span{display:none}}
@media(max-width:600px){.grid.cards{grid-template-columns:1fr 1fr}}
.kpi{text-align:left}.kpi-v{font-size:30px;font-weight:800;color:var(--pri)}.kpi-l{color:var(--muted);font-size:12px;margin-top:4px}
.kpi.accent{background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff}.kpi.accent .kpi-v,.kpi.accent .kpi-l{color:#fff}
label{display:block;margin:8px 0;font-size:13px;color:#334155}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:14px;margin-top:4px;font-family:inherit}
label.check{display:flex;gap:8px;align-items:center}label.check input{width:auto;margin:0}
.btn{display:inline-block;background:#fff;border:1px solid #cbd5e1;color:#334155;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;text-decoration:none}
.btn:hover{background:var(--soft)}.btn.primary{background:var(--pri2);border-color:var(--pri2);color:#fff}.btn.primary:hover{background:var(--pri)}
.btn.block{width:100%;margin-top:10px}.btn.sm{padding:5px 9px;font-size:12px}.inline{display:inline-flex;gap:4px;align-items:center;margin:0}
.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
.table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.table.rank td{white-space:nowrap}
.kv{width:100%;font-size:14px}.kv td{padding:6px 4px;border-bottom:1px solid var(--soft)}.kv td:first-child{color:var(--muted);width:45%}
.filter{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.filter label{margin:0}.filter input,.filter select{width:auto}
.flash{padding:12px 16px;border-radius:8px;margin-bottom:16px}.flash.success{background:#dcfce7;color:#166534}.flash.danger{background:#fee2e2;color:#991b1b}
.muted{color:var(--muted)}.center{text-align:center}.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#94a3b8}.dot.live{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.badge{padding:2px 9px;border-radius:20px;font-weight:700;font-size:12px}.grade-A{background:#dcfce7;color:#166534}.grade-B{background:#dbeafe;color:#1e40af}.grade-C{background:#fef9c3;color:#854d0e}.grade-D{background:#fee2e2;color:#991b1b}
.tag{background:var(--soft);padding:2px 8px;border-radius:6px;font-size:11px}.tag.auto{background:#ede9fe;color:#6d28d9}
.status{padding:2px 8px;border-radius:6px;font-size:11px}.s-present{background:#dcfce7;color:#166534}.s-late{background:#fef9c3;color:#854d0e}.s-absent{background:#fee2e2;color:#991b1b}.s-approved{background:#dbeafe;color:#1e40af}.s-submitted{background:var(--soft)}.s-rejected{background:#fee2e2;color:#991b1b}
.rec{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700}.rec-reward{background:#dcfce7;color:#166534}.rec-maintain{background:#dbeafe;color:#1e40af}.rec-coaching{background:#fef9c3;color:#854d0e}.rec-punishment{background:#fee2e2;color:#991b1b}.rec-none{background:var(--soft)}
.bar-row{display:flex;align-items:center;gap:10px;margin:8px 0}.bar-row span{width:110px;font-size:12px;color:var(--muted)}.bar{flex:1;height:9px;background:var(--soft);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#22c55e)}
.score-big{display:flex;gap:12px;align-items:center}.legend{margin-top:10px}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f172a,#1d4ed8)}
.login-card{background:#fff;padding:34px;border-radius:16px;width:380px;max-width:92vw;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-head{text-align:center;margin-bottom:18px}.login-head h2{margin:6px 0 4px}.login-head p{color:var(--muted);font-size:12px;margin:0}
@media print{.sidebar,.topbar,.foot,.btn,.filter{display:none!important}.card{box-shadow:none;border:1px solid #ccc}.main{width:100%}}