:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#213247;background:#f4f8fc;--blue:#1565c0;--line:#dce6f0;--muted:#607086;--card:#fff}
*{box-sizing:border-box}body{margin:0;background:#f4f8fc;min-height:100vh}button,input,select{font:inherit}button{border:0;cursor:pointer}
.app-shell{width:min(100%,760px);margin:0 auto;padding:16px 14px 32px}.view{min-height:calc(100vh - 48px)}.hidden{display:none!important}
#login-view{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.brand-mark{width:76px;height:76px;margin-bottom:4px}.brand-mark img{width:100%;height:100%}
h1{margin:0;color:var(--blue);font-size:30px;text-align:center}.muted{color:var(--muted);font-size:14px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(21,62,95,.06)}
.form-card{width:min(100%,420px);padding:18px;display:grid;gap:14px}label{display:grid;gap:7px;font-weight:650;font-size:14px}
input,select{width:100%;min-height:46px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#1f2937}button{min-height:44px;border-radius:9px;padding:10px 16px;font-weight:700}
.primary{background:#1976d2;color:#fff}.primary:disabled{background:#b9c7d6;color:#edf2f7;cursor:not-allowed}.secondary{background:#eef4fa;color:#24435e;border:1px solid var(--line)}.message{min-height:20px;margin:0;color:#b42318;font-size:13px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:4px 2px}.topbar strong{font-size:22px;color:var(--blue);display:block}
.filters{display:grid;grid-template-columns:1fr 160px auto;gap:10px;padding:12px;margin-bottom:12px;align-items:end}.class-info{padding:14px;margin-bottom:12px;line-height:1.5}
.student-list{display:grid;gap:10px}.student-card{padding:12px;display:grid;gap:10px}.attendance-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;justify-content:initial;gap:10px;align-items:center}.student-main{min-width:0}.student-name{font-weight:800}.status-current{font-size:12px;color:var(--muted)}.present-toggle{display:flex;align-items:center;gap:7px;white-space:nowrap;font-weight:750;color:#24435e;cursor:pointer}.present-toggle input{width:20px;min-height:20px;accent-color:#1565c0}.student-actions{display:grid;grid-template-columns:minmax(150px,180px) 1fr;gap:8px}.status-select{min-height:42px}.note{font-size:13px}.status-badge{font-size:12px;font-weight:750;white-space:nowrap;padding:5px 8px;border-radius:999px;background:#eef4fa;color:#24435e}.status-badge.is-present{background:#e8f5e9;color:#216e39}.status-badge.is-late{background:#fff4d6;color:#8a5a00}.status-badge.is-absent{background:#fdecec;color:#a12b2b}.status-action{min-height:40px;background:#eef4fa;color:#24435e;border:1px solid var(--line)}.status-action:disabled{opacity:.65;cursor:default}
.sync-status{margin:8px 2px 0;font-size:13px;font-weight:650}.sync-status.online{color:#216e39}.sync-status.pending{color:#8a5a00}.sync-status.offline{color:#a12b2b}.save-button{position:sticky;bottom:12px;width:100%;margin-top:14px;box-shadow:0 6px 22px rgba(21,101,192,.18)}@media(max-width:620px){.filters{grid-template-columns:1fr}.attendance-row{grid-template-columns:minmax(0,1fr) auto}.status-badge{grid-column:1 / -1;justify-self:start}.student-actions{grid-template-columns:1fr}.app-shell{padding-left:10px;padding-right:10px}}