:root{--ink:#202124;--muted:#71716f;--paper:#f7f4ee;--card:#fffdf9;--red:#c44432;--orange:#e4973d;--line:#e9e2d8;--green:#2c8b6d}*{box-sizing:border-box}body{margin:0;background:#ddd8d0;color:var(--ink);font-family:'DM Sans',sans-serif}.app-shell{max-width:480px;min-height:100vh;margin:auto;background:var(--paper);position:relative;padding:0 22px 104px;overflow:hidden}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:700;letter-spacing:2.2px;font-size:17px;display:flex;align-items:baseline;gap:2px}.brand-mark{font-family:'Playfair Display',serif;color:var(--red);font-size:31px;line-height:0}.brand small{font-size:7px;letter-spacing:1.6px;margin-left:3px;color:var(--muted)}.profile{width:37px;height:37px;border:1px solid var(--line);border-radius:50%;background:#ede7dc;color:var(--red);font-weight:700}.screen{display:none}.screen.active{display:block}.intro{padding:21px 2px 25px}.intro p,.modal p{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--red);margin:0 0 8px}.intro h1{font:700 38px/1.04 'Playfair Display',serif;letter-spacing:-1.7px;margin:0}.intro h1 em{color:var(--red)}.intro>span{display:block;margin-top:12px;color:var(--muted);font-size:13px}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px rgba(83,60,25,.04)}.form-card{padding:21px 18px 18px}label{font-size:11px;font-weight:700;letter-spacing:.8px;display:block;margin-bottom:17px;color:#55514c}input,select{font:500 15px 'DM Sans',sans-serif;color:var(--ink);display:block;width:100%;margin-top:7px;border:1px solid #ded7cd;border-radius:10px;padding:13px 12px;background:#fffdfa;outline:none}.two-column{display:grid;grid-template-columns:1.5fr .7fr;gap:12px}.add-group{margin:-3px 0 19px;background:transparent;border:0;color:var(--red);font:600 12px 'DM Sans',sans-serif;padding:0}.add-group span{font-size:19px}.primary{border:0;width:100%;background:var(--red);color:white;border-radius:11px;padding:15px 16px;font:700 14px 'DM Sans',sans-serif;box-shadow:0 7px 16px rgba(196,68,50,.22);cursor:pointer}.primary span{float:right;font-size:19px;line-height:13px}.summary{text-align:center;color:var(--muted);font-size:12px;padding:19px}.summary span{font-weight:700;color:var(--ink)}.summary i{border-left:1px solid #cfc7bc;margin:0 9px}.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:82px;background:#fffdfa;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:34px}.nav-item{border:0;background:transparent;color:#aaa49d;font:600 10px 'DM Sans',sans-serif;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}.nav-item.selected{color:var(--red)}.nav-icon{font-size:22px;line-height:21px}.attendance-intro{padding-bottom:20px}.attendance-intro h1{font-size:34px}.attendance-card{padding:19px 17px}.filter-label{font-size:10px;margin-bottom:12px}.filter-label select{font-size:14px;padding:11px}.attendance-list{border-top:1px solid var(--line)}.student-row,.user-row{display:flex;align-items:center;padding:15px 1px;border-bottom:1px solid var(--line);gap:11px}.avatar{height:37px;width:37px;border-radius:50%;background:#f1e5d7;color:var(--red);display:grid;place-items:center;font-size:12px;font-weight:700}.student-info{flex:1}.student-info strong{font-size:14px;display:block}.student-info small{font-size:11px;color:var(--muted);margin-top:3px;display:block}.presence{border:1px solid #d8d0c6;background:#fffdfa;border-radius:50%;width:31px;height:31px;cursor:pointer;color:transparent;font-size:16px}.presence.present{background:var(--green);border-color:var(--green);color:white}.empty{text-align:center;padding:31px 8px;color:var(--muted);font-size:13px;line-height:1.5}.fixed-action{margin-top:18px}.modal-backdrop{position:fixed;inset:0;background:rgba(32,33,36,.42);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:.2s;z-index:4}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{width:min(480px,100%);background:#fffdf9;border-radius:24px 24px 0 0;padding:28px 23px 34px;position:relative;transform:translateY(20px);transition:.2s}.open .modal{transform:translateY(0)}.modal h2{font-family:'Playfair Display',serif;font-size:27px;margin:0 0 24px}.close{position:absolute;right:18px;top:14px;border:0;background:#f2ede4;border-radius:50%;font-size:24px;width:31px;height:31px;color:#625d57}.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);background:#202124;color:white;border-radius:9px;padding:12px 16px;font-size:13px;white-space:nowrap;opacity:0;transition:.25s;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}.login-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-bottom:34px}.login-visual{padding:0 4px 32px}.login-visual .large{font-size:20px;margin-bottom:48px}.login-visual .brand-mark{font-size:39px}.login-visual p{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--red);margin:0 0 9px}.login-visual h1{font:700 43px/1.02 'Playfair Display',serif;letter-spacing:-2px;margin:0}.login-visual h1 em{color:var(--red)}.login-visual>span{color:var(--muted);font-size:13px;display:block;margin-top:14px}.login-card{padding:22px 18px 18px}.login-card label{margin-bottom:16px}.login-error{min-height:16px;color:var(--red);font-size:12px;margin:-3px 0 11px}.login-note{text-align:center;color:var(--muted);font-size:12px;margin:18px 0 0}.user-list{margin-top:17px;padding:4px 17px}.list-title{font-size:10px;letter-spacing:1px;font-weight:700;color:var(--muted);padding:13px 0 10px;margin:0}.role-badge{font-size:10px;font-weight:700;padding:5px 7px;border-radius:5px;background:#ece7df;color:#6b655e}.role-badge.admin{background:#f4ded9;color:var(--red)}@media(min-width:600px){body{padding:28px}.app-shell{min-height:780px;border-radius:26px;box-shadow:0 18px 60px rgba(41,30,19,.18)}}