
:root{--bg:#f6f8fb;--card:#fff;--text:#17202a;--muted:#6b7280;--primary:#16a34a;--primary2:#15803d;--danger:#dc2626;--warn:#d97706;--line:#e5e7eb;--dark:#0f172a;--soft:#f1f5f9}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}a{color:var(--primary);text-decoration:none}.login-page{min-height:100vh;background:linear-gradient(135deg,#064e3b,#16a34a);display:flex;align-items:center;justify-content:center;padding:16px}.login-wrapper{width:100%;display:flex;justify-content:center}.login-card{background:#fff;border-radius:22px;box-shadow:0 20px 60px #0004;padding:28px;width:100%;max-width:420px}.login-logo{text-align:center;margin-bottom:22px}.logo-icon{width:64px;height:64px;background:#dcfce7;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;font-size:32px}.login-logo h1{margin:10px 0 4px;font-size:30px}.login-logo p{margin:0;color:var(--muted)}.form-group{margin-bottom:14px}.form-group label{display:block;font-weight:700;margin-bottom:7px;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:16px;background:#fff;color:var(--text)}.form-group textarea{min-height:90px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary2)}.btn-dark{background:var(--dark);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-soft{background:var(--soft);color:var(--text)}.btn-block{width:100%}.input-eye{display:flex}.input-eye input{border-radius:12px 0 0 12px}.eye-btn{border:1px solid var(--line);border-left:0;background:#fff;border-radius:0 12px 12px 0;padding:0 12px}.flash{padding:12px 14px;border-radius:12px;margin-bottom:14px;font-weight:700}.flash-success{background:#dcfce7;color:#166534}.flash-error{background:#fee2e2;color:#991b1b}.flash-info{background:#dbeafe;color:#1e40af}.login-footer{text-align:center;margin-top:18px}.hint{font-weight:400;color:var(--muted)}.section-label{font-weight:900;margin:8px 0;color:#064e3b}.app{min-height:100vh}.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:10}.brand{font-weight:900;font-size:22px;color:#064e3b}.userbox{display:flex;align-items:center;gap:10px}.layout{display:flex}.sidebar{width:250px;background:#fff;border-right:1px solid var(--line);min-height:calc(100vh - 62px);padding:14px;position:sticky;top:62px}.nav a{display:block;padding:12px 14px;border-radius:12px;color:#334155;font-weight:700;margin-bottom:6px}.nav a.active,.nav a:hover{background:#dcfce7;color:#166534}.main{flex:1;padding:22px;min-width:0}.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.page-head h2{margin:0}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 4px 16px #00000008;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat h3{margin:0;font-size:28px}.stat p{margin:4px 0 0;color:var(--muted);font-weight:700}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.table th{background:#f8fafc;font-size:13px;text-transform:uppercase;color:#475569}.badge{display:inline-block;padding:5px 10px;border-radius:999px;font-weight:800;font-size:12px}.badge-green{background:#dcfce7;color:#166534}.badge-red{background:#fee2e2;color:#991b1b}.badge-yellow{background:#fef3c7;color:#92400e}.mobile-actions{display:none}.student-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.student-check{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:flex-start;background:#fff}.student-check input{width:22px;height:22px;accent-color:#dc2626}.student-check.checked{background:#fee2e2;border-color:#fca5a5}.report-title{font-weight:900;font-size:18px;margin:10px 0}.percent-good{color:#16a34a;font-weight:900}.percent-mid{color:#d97706;font-weight:900}.percent-bad{color:#dc2626;font-weight:900}@media(max-width:900px){.layout{display:block}.sidebar{display:none}.main{padding:14px}.grid{grid-template-columns:repeat(2,1fr)}.page-head{align-items:flex-start;flex-direction:column}.mobile-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}.mobile-actions a{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center;font-weight:800;color:#334155}.student-list{grid-template-columns:1fr}.topbar{padding:0 12px}.userbox span{display:none}.form-row{grid-template-columns:1fr}.table th,.table td{padding:10px 8px;font-size:13px}}@media(max-width:520px){.grid{grid-template-columns:1fr}.login-card{padding:22px}.btn{width:100%}.card{padding:14px}}.btn-sm{padding:8px 12px;font-size:13px;border-radius:10px;width:auto}.compact-form .btn{align-self:end}.compact-form textarea{min-height:120px}.attendance-list{display:grid;gap:10px}.attendance-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.attendance-row.present{border-color:#86efac;background:#f0fdf4}.attendance-row.absent{border-color:#fca5a5;background:#fef2f2}.segmented{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}.segmented label{margin:0}.segmented input{display:none}.segmented span{display:block;padding:8px 14px;font-weight:900;cursor:pointer}.segmented input:checked+span{background:var(--primary);color:#fff}.segmented label:last-child input:checked+span{background:var(--danger);color:#fff}.summary-panel{display:grid;grid-template-columns:2fr 1fr;gap:14px}.summary-box{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px}.summary-box h4{margin:0 0 8px}.mini-list{margin:0;padding-left:18px}@media(max-width:700px){.attendance-row{align-items:flex-start;flex-direction:column}.segmented{width:100%}.segmented label{flex:1;text-align:center}.summary-panel{grid-template-columns:1fr}.btn-sm{width:auto}}
/* v1.0.4 UI polish */
.btn{width:auto!important;min-width:110px;max-width:220px;padding:9px 14px;border-radius:10px;font-size:14px;line-height:1.2}.btn-block{width:100%!important;max-width:none}.form-row .btn{align-self:end;justify-self:start}.card h3{margin-top:0}.compact-form{max-width:920px}.page-head .btn{min-width:auto}.table .btn{min-width:auto;padding:7px 10px;font-size:12px;margin:2px}.form-group input,.form-group select,.form-group textarea{padding:10px 12px;font-size:14px}.card{padding:16px}.student-action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.student-status-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;display:grid;gap:10px}.student-status-card.present{border-color:#86efac;background:#f0fdf4}.student-status-card.absent{border-color:#fca5a5;background:#fef2f2}.student-name{font-weight:900;font-size:15px}.choice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice-buttons label{margin:0}.choice-buttons input{display:none}.choice-buttons span{display:block;text-align:center;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-weight:900;background:#fff;cursor:pointer}.choice-buttons input:checked+span.ok{background:#16a34a;color:#fff;border-color:#16a34a}.choice-buttons input:checked+span.no{background:#dc2626;color:#fff;border-color:#dc2626}.report-toolbar{display:flex;gap:8px;flex-wrap:wrap}.chart-wrap{height:260px;display:flex;align-items:end;gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#f8fafc;overflow:auto}.bar-item{min-width:70px;text-align:center}.bar{width:100%;border-radius:8px 8px 0 0;background:#16a34a;min-height:8px}.bar.low{background:#dc2626}.bar.mid{background:#d97706}.bar-label{font-size:11px;margin-top:6px;font-weight:800}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.kpi{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px}.kpi b{font-size:24px;display:block}.kpi span{color:var(--muted);font-weight:800;font-size:12px}@media(max-width:700px){.btn{min-width:90px;max-width:180px}.form-row{gap:10px}.report-toolbar{width:100%}.report-toolbar .btn{flex:1}.student-action-grid{grid-template-columns:1fr}}
/* v1.0.5 fixes */
.progress-chart{display:grid;gap:14px}.progress-row{display:grid;gap:7px}.progress-info{display:flex;justify-content:space-between;gap:10px;font-size:14px}.progress-info span{font-weight:900}.progress-track{height:14px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#16a34a)}.progress-fill.mid{background:linear-gradient(90deg,#f59e0b,#d97706)}.progress-fill.low{background:linear-gradient(90deg,#ef4444,#dc2626)}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)!important}.table-wrap{overflow-x:auto}.table{min-width:680px}.table td:last-child{display:flex;gap:4px;min-width:170px}.table .btn{min-width:52px!important;max-width:70px!important;padding:6px 7px!important;font-size:11px!important}.main{padding:10px}.card{padding:12px;border-radius:14px}.stat h3{font-size:22px}.stat p{font-size:12px}.student-action-grid{grid-template-columns:1fr!important}.student-status-card{padding:11px;border-radius:14px}.choice-buttons span{padding:8px 6px;font-size:13px}.btn{min-width:84px!important;max-width:150px!important;padding:8px 10px!important}.btn-block{width:100%!important;max-width:none!important}.topbar{height:56px}.brand{font-size:18px}.login-card{max-width:360px}}
@media(max-width:430px){.grid{grid-template-columns:repeat(2,1fr)!important;gap:8px}.stat{padding:10px!important}.form-row{grid-template-columns:1fr!important}.page-head{gap:8px}.report-toolbar{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.report-toolbar .btn{min-width:0!important;width:100%!important;font-size:12px!important}.summary-panel{grid-template-columns:1fr!important}.table .btn{display:inline-flex!important}.mobile-actions{grid-template-columns:repeat(2,1fr)}}


