*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f5f7fb;color:#182230}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center;background:#eef4ff}.box{width:390px;max-width:92%;padding:32px;background:#fff;border-radius:20px;box-shadow:0 15px 45px #1234  }.logo{display:grid;place-items:center;width:55px;height:55px;border-radius:14px;background:#1769e0;color:#fff}.box h1{margin-bottom:5px}.box p{color:#7b8697}.box input{display:block;width:100%;padding:12px;margin:10px 0;border:1px solid #dce2eb;border-radius:10px}.box button,#add,#save{border:0;border-radius:10px;padding:12px 16px;background:#1769e0;color:#fff;font-weight:700}.box button{width:100%;margin-top:8px}.box small{display:block;margin-top:12px}.app{display:flex;min-height:100vh}.app aside{width:240px;background:#fff;border-right:1px solid #e5e9ef;padding:20px;display:flex;flex-direction:column}.app aside h3{margin:5px 5px 25px}.app aside button{border:0;background:none;text-align:left;padding:13px;border-radius:10px;margin:2px 0}.app aside button:hover{background:#edf4ff;color:#1769e0}.app aside #logout{margin-top:auto;color:#d33}.app main{flex:1;padding:28px;overflow:auto}.app header{display:flex;justify-content:space-between;margin-bottom:22px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.cards>div,.panel{background:#fff;border:1px solid #e6eaf0;border-radius:15px;padding:20px}.cards strong{display:block;font-size:28px;margin-top:8px}.panel{overflow:auto}table{width:100%;border-collapse:collapse;min-width:650px}th,td{padding:12px;border-bottom:1px solid #edf0f4;text-align:left;font-size:13px}.attendance{text-align:center;max-width:600px;margin:auto}.attendance #clock{font-size:48px;font-weight:800;margin:20px}.attendance button{border:0;padding:15px 25px;border-radius:10px;font-weight:700;margin:5px}.attendance button:first-of-type{background:#e8f8ef;color:#198754}.attendance button:last-of-type{background:#fff0ef;color:#d33}.form{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:15px 0}.form input{padding:11px;border:1px solid #dce2eb;border-radius:9px}.form button{grid-column:1/-1}@media(max-width:800px){.app aside{width:72px;padding:10px}.app aside h3{font-size:0}.app aside button{font-size:0}.app aside button:after{content:"•";font-size:20px}.app main{padding:16px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.cards{grid-template-columns:1fr}.form{grid-template-columns:1fr}}