:root{--bg:#f1f5f9;--surface:#fff;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-soft:#eff6ff;--success:#16a34a;--success-soft:#f0fdf4;--danger:#dc2626;--danger-soft:#fef2f2;--warning:#d97706;--warning-soft:#fffbeb;--radius:12px;--shadow:0 1px 3px #0f172a14, 0 4px 16px #0f172a0f}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}main{max-width:520px;margin:0 auto;padding:24px 16px 48px}main.wide{max-width:1080px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.stack{flex-direction:column;gap:16px;display:flex}.row{align-items:center;gap:12px;display:flex}.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}h1{margin:0 0 4px;font-size:1.5rem}h2{margin:0 0 12px;font-size:1.15rem}p{margin:0 0 8px}label{margin:12px 0 4px;font-size:.85rem;font-weight:600;display:block}input,select{border:1px solid var(--border);width:100%;color:var(--text);background:#fff;border-radius:8px;padding:10px 12px;font-size:1rem}input:focus,select:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}.btn{cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:10px 16px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .15s;display:inline-flex}.btn:hover{text-decoration:none}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-ghost{border-color:var(--border);color:var(--text);background:#fff}.btn-ghost:hover{background:var(--primary-soft)}.btn-danger{color:var(--danger);background:#fff;border-color:#fecaca}.btn-danger:hover{background:var(--danger-soft)}.btn-block{width:100%}.badge{border-radius:999px;padding:2px 8px;font-size:.75rem;font-weight:600;display:inline-block}.badge-active{background:var(--success-soft);color:var(--success)}.badge-suspended{background:var(--warning-soft);color:var(--warning)}.badge-late{background:var(--danger-soft);color:var(--danger)}.badge-on-time{background:var(--success-soft);color:var(--success)}.alert{border-radius:8px;padding:12px 14px;font-size:.9rem}.alert-error{background:var(--danger-soft);color:var(--danger)}.alert-success{background:var(--success-soft);color:var(--success)}.alert-info{background:var(--primary-soft);color:var(--primary)}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{text-align:left;border-bottom:1px solid var(--border);padding:8px 10px}th{text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-size:.78rem}tbody tr:hover{background:#f8fafc}.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;display:grid}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}.stat .value{font-size:1.8rem;font-weight:700}.stat .label{color:var(--muted);font-size:.8rem}.brand{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.brand .mark{font-size:1.1rem;font-weight:800}.qr-frame{border:1px solid var(--border);background:#fff;border-radius:8px;padding:16px;display:inline-block}.qr-frame img{width:220px;height:220px;display:block}.grid-2{grid-template-columns:1fr 1fr;align-items:start;gap:16px;display:grid}@media (max-width:760px){.grid-2,.stats{grid-template-columns:1fr}}.checkin-hero{text-align:center;margin-bottom:16px}.checkin-hero .logo{font-size:2.4rem}.checkin-hero h1{margin-top:4px}.brand-logo{object-fit:contain;display:block}.brand-logo-hero{width:auto;max-width:220px;height:64px;margin:0 auto 8px}.brand-logo-header{width:auto;max-width:140px;height:34px}.brand-logo-emoji.brand-logo-hero{height:auto;font-size:2.6rem;line-height:1}.brand-logo-emoji.brand-logo-header{height:auto;font-size:1.5rem;line-height:1}.autocomplete-list{z-index:20;border:1px solid var(--border);box-shadow:var(--shadow);background:#fff;border-radius:8px;max-height:220px;margin:4px 0 0;padding:0;list-style:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.autocomplete-list li{margin:0}.autocomplete-list button{text-align:left;cursor:pointer;width:100%;color:var(--text);background:0 0;border:none;padding:8px 12px;font-size:.9rem}.autocomplete-list button:hover{background:var(--primary-soft)}.modal-overlay{z-index:40;background:#0f172a80;justify-content:center;align-items:flex-start;padding:24px 16px;display:flex;position:fixed;inset:0;overflow-y:auto}.modal{width:100%;max-width:480px}.landing{flex-direction:column;max-width:560px;min-height:100vh;margin:0 auto;padding:44px 20px 28px;display:flex}.hero{text-align:center;padding:8px 0 28px}.hero .brand-logo-hero{max-width:240px;height:84px;margin:0 auto 16px}.hero .brand-logo-emoji.brand-logo-hero{font-size:3rem}.hero h1{margin:0 0 10px;font-size:1.9rem}.hero-tagline{color:var(--muted);margin:0;font-size:1.02rem}.landing-cta{text-align:center}.btn-lg{padding:14px 22px;font-size:1.05rem}.landing-footer{text-align:center;flex-direction:column;align-items:center;gap:10px;margin-top:auto;padding-top:36px;display:flex}.footer-link{font-weight:600}.number-display{letter-spacing:.06em;background:var(--primary-soft);color:var(--primary);border:1px dashed var(--primary);border-radius:12px;margin:10px auto;padding:14px 24px;font-size:2.3rem;font-weight:800;display:inline-block}.success-check{font-size:2.6rem;line-height:1}summary.card-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:12px;list-style:none;display:flex}summary.card-header::-webkit-details-marker{display:none}summary.card-header h2{margin:0}.chevron{color:var(--muted);flex:none;font-size:1.1rem;transition:transform .15s}details.card[open] .chevron{transform:rotate(180deg)}.card-body{margin-top:16px}.table-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:640px){.row>input,.row>select{min-width:100%;flex:100%!important}}.badge-role-admin{color:#6d28d9;background:#ede9fe}.badge-role-teacher{color:#0369a1;background:#e0f2fe}.badge-role-student{color:#b45309;background:#fef3c7}.toast{background:var(--text);color:#fff;z-index:50;box-shadow:var(--shadow);border-radius:8px;padding:10px 16px;font-size:.9rem;position:fixed;top:16px;left:50%;transform:translate(-50%)}