:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#10213d;background:#f3f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select,textarea{font:inherit;letter-spacing:0}button{cursor:pointer}.app-shell,.login-shell{min-height:100vh;padding-bottom:calc(22px + env(safe-area-inset-bottom))}.topbar{height:calc(68px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:10px;background:#173b7a;color:#fff}.topbar div:nth-child(2),.login-brand div:last-child{display:flex;flex-direction:column}.topbar strong{font-size:17px}.topbar span{font-size:11px;opacity:.75;margin-top:2px}.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:#173b7a;background:#fff;font-weight:900}.brand-mark.large{width:58px;height:58px;font-size:19px}.icon-button{width:40px;height:40px;border:0;color:#fff;background:transparent;display:grid;place-items:center}.teacher-strip{display:flex;gap:12px;align-items:center;padding:18px 20px 8px;max-width:720px;margin:auto}.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#164fbb;background:#dceaff;font-weight:850}.teacher-strip div:last-child{display:grid}.teacher-strip span,.teacher-strip small{color:#64748b;font-size:12px}.teacher-strip strong{margin:2px 0}.panel{margin:16px auto;padding:22px 20px;width:calc(100% - 32px);max-width:720px;background:#fff;border:1px solid #dbe3ed;border-radius:8px;box-shadow:0 10px 30px #132d5512}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.section-head span,.class-title span,.secure{font-size:12px;font-weight:850;color:#087f73}h1{margin:6px 0;font-size:28px}.class-title p{margin:0 0 16px;color:#64748b}.class-mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:4px;border:1px solid #dbe3ed;border-radius:8px;background:#f8fafc}.class-mode-tabs button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:6px;background:transparent;color:#334155;font-size:13px;font-weight:850}.class-mode-tabs .active{color:#fff;background:#173b7a;box-shadow:0 8px 20px #173b7a2e}.assignment-list{display:grid;gap:10px}.assignment-card{min-height:76px;display:grid;grid-template-columns:46px 1fr;align-items:center;gap:12px;padding:12px;border:1px solid #dbe3ed;border-radius:8px;background:#fff;text-align:left}.assignment-card:active{transform:translateY(1px)}.assignment-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;color:#0f8b83;background:#dff7f4}.assignment-card strong{display:block;font-size:16px}.assignment-card small{display:block;margin-top:3px;color:#64748b}.small-button,.back-button{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#173b7a;font-weight:800}.attendance-toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}.attendance-toolbar label{height:38px;min-width:162px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid #cbd5e1;border-radius:6px;background:#fff}.attendance-toolbar input{height:32px;border:0;outline:0;color:#10213d}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}.summary-grid div{min-height:70px;padding:12px;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0}.summary-grid span{color:#64748b;font-size:12px}.summary-grid strong{display:block;margin-top:5px;font-size:24px}.green{color:#059669}.red{color:#dc2626}.amber{color:#d97706}.student-list{display:grid;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.student-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border-bottom:1px solid #e2e8f0}.student-row:last-child{border-bottom:0}.student-row strong{display:block}.student-row small{display:block;margin-top:3px;color:#64748b}.status-buttons{display:flex;gap:6px}.status-buttons button{min-width:86px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#334155;font-size:12px;font-weight:800}.status-buttons .present{color:#fff;background:#16a34a;border-color:#16a34a}.status-buttons .absent{color:#fff;background:#dc2626;border-color:#dc2626}.status-buttons .late{color:#111827;background:#f59e0b;border-color:#f59e0b}.primary-button{width:100%;min-height:48px;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:6px;color:#fff;background:#2563eb;font-weight:850}.primary-button:disabled{opacity:.6}.error-banner,.success-banner{width:calc(100% - 32px);max-width:720px;margin:12px auto;padding:11px 13px;border-radius:6px}.login-card .error-banner{width:100%}.error-banner{color:#b42318;background:#fff1f0;border:1px solid #ffccc7}.success-banner{color:#166534;background:#f0fdf4;border:1px solid #86efac;font-weight:750}.empty-state{min-height:190px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:9px;color:#64748b}.empty-state strong{color:#10213d}.login-shell{display:grid;grid-template-columns:minmax(260px,42%) 1fr;background:#fff}.login-brand{padding:70px 11%;display:flex;align-items:flex-start;gap:14px;color:#fff;background:#173b7a}.login-brand strong{font-size:22px}.login-brand span{font-size:12px;font-weight:850;color:#5eead4}.login-card{width:min(440px,calc(100% - 40px));margin:auto}.login-card h1{font-size:36px;margin:18px 0 8px}.login-card>p{color:#64748b}form label{display:grid;gap:7px;margin:16px 0 7px;font-size:14px;font-weight:750}input,select{width:100%;height:48px;padding:0 13px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#10213d;outline:none}textarea{width:100%;min-height:120px;padding:12px 13px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#10213d;outline:none;resize:vertical}input:focus,select:focus,textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1f}.content-form{border:1px solid #e2e8f0;border-radius:8px;padding:14px;background:#fff}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.8fr);gap:12px}.file-picker{height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px dashed #94a3b8;border-radius:6px;background:#f8fafc;color:#173b7a;font-weight:850;position:relative;overflow:hidden}.file-picker input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.phone-field{display:flex}.phone-field span{width:62px;display:grid;place-items:center;border:1px solid #cbd5e1;border-right:0;border-radius:6px 0 0 6px;background:#f1f5f9}.phone-field input{border-radius:0 6px 6px 0}.hint{display:block;margin-top:16px;color:#64748b}.center{min-height:100vh;display:grid;place-content:center;justify-items:center}.loader{width:34px;height:34px;border:3px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 700px){.login-shell{display:block}.login-brand{min-height:180px;padding:calc(38px + env(safe-area-inset-top)) 28px 30px}.login-card{padding:30px 0 50px}.login-card h1{font-size:30px}.student-row{grid-template-columns:1fr}.status-buttons{display:grid;grid-template-columns:repeat(3,1fr)}.status-buttons button{min-width:0}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}}