*{box-sizing:border-box}body{color:#172033;background:#f4f7fb;margin:0;font-family:Arial,Helvetica,sans-serif}button,input,textarea,select{font:inherit}button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:10px;padding:10px 14px;font-weight:700}button:hover{filter:brightness(.96)}button:disabled{opacity:.55;cursor:not-allowed}textarea{resize:vertical;min-height:110px}input,textarea,select{background:#fff;border:1px solid #cbd5e1;border-radius:10px;width:100%;padding:11px 12px}.login-page{place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;width:min(460px,94vw);padding:28px;box-shadow:0 20px 50px #0f172a1a}.app-shell{grid-template-columns:280px 1fr;min-height:100vh;display:grid}.sidebar{color:#fff;background:#0f172a;flex-direction:column;gap:24px;height:100vh;padding:22px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand.center{justify-content:center;margin-bottom:24px}.brand span,.sidebar-footer small{color:#cbd5e1;margin-top:3px;font-size:13px;display:block}.brand-mark{color:#fff;background:#2563eb;border-radius:13px;place-items:center;width:44px;height:44px;font-weight:800;display:grid}nav{gap:8px;display:grid}nav button{text-align:left;color:#e2e8f0;background:0 0}nav button:hover,.nav-active{background:#1e293b}.sidebar-footer{background:#111827;border-radius:14px;gap:8px;margin-top:auto;padding:14px;display:grid}.role{font-weight:700;color:#93c5fd!important}.content{width:min(1180px,100%);padding:28px}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.topbar h1{margin:0 0 4px}.topbar p{color:#64748b;margin:0}.card,.stat{background:#fff;border:1px solid #e5e7eb;border-radius:16px;margin-bottom:18px;padding:20px;box-shadow:0 10px 25px #0f172a0f}.stats-grid{grid-template-columns:repeat(4,minmax(160px,1fr));gap:16px;margin-bottom:18px;display:grid}.stat{margin:0}.stat span,.stat small{color:#64748b}.stat b{margin:8px 0;font-size:34px;display:block}.form{gap:10px;display:grid}.two-cols{grid-template-columns:220px 1fr;align-items:start}.form-submit{grid-column:2}.actions{flex-wrap:wrap;gap:10px;display:flex}.actions.vertical{flex-direction:column;min-width:130px}.secondary{background:#475569}.danger{background:#dc2626}.full{width:100%}.notice{color:#155e75;background:#ecfeff;border:1px solid #67e8f9;border-radius:12px;margin-bottom:18px;padding:12px}.hint{color:#475569;background:#f8fafc;border-radius:12px;margin-top:16px;padding:12px}.table-list{gap:12px;display:grid}.list-item{background:#fbfdff;border:1px solid #e5e7eb;border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:14px;display:grid}.list-item.compact{padding:12px}.list-item h3{margin:0 0 6px}.list-item p{color:#475569;margin:6px 0;line-height:1.45}.badges{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.badges span{color:#3730a3;background:#eef2ff;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;display:inline-flex}.teacher-note{background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:8px;color:#9a3412!important}.timeline{margin-bottom:0;line-height:1.8}.empty{color:#64748b;background:#f8fafc;border-radius:12px;padding:18px}.upload-box{background:#f8fafc;border:1px dashed #94a3b8;border-radius:14px;gap:10px;margin:14px 0;padding:14px;display:grid}@media (width<=900px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:static}.stats-grid{grid-template-columns:1fr 1fr}.two-cols{grid-template-columns:1fr}.form-submit{grid-column:1}.list-item{grid-template-columns:1fr}}.timeline-list{gap:14px;display:grid}.timeline-item{background:#fbfdff;border:1px solid #e5e7eb;border-radius:14px;grid-template-columns:18px 1fr;gap:12px;padding:12px;display:grid}.timeline-item h3{margin:0 0 6px}.timeline-item p{color:#475569;margin:6px 0}.timeline-dot{background:#2563eb;border-radius:999px;width:12px;height:12px;margin-top:6px}.detail-header{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;display:flex}.detail-header h2{margin-bottom:4px}.detail-grid{grid-template-columns:1.5fr 1fr;gap:22px;display:grid}.muted{color:#64748b}@media (width<=900px){.detail-header{flex-direction:column}.detail-grid{grid-template-columns:1fr}}