*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{min-height:100vh}body{background:linear-gradient(135deg,#a7aeae 0%,#e7ebec 50%,#9ac8dc 100%);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.page-wrapper{min-height:100vh;padding:2rem 1rem}.main-card{background:#fff;border-radius:16px;max-width:1200px;margin:0 auto;overflow:hidden;box-shadow:0 20px 60px #0003}.app-header{background:linear-gradient(135deg,#0f2027 0%,#203a43 50%,#2c5364 100%);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.75rem 2rem;display:flex}.app-header h2{color:#fff;letter-spacing:-.3px;margin:0;font-size:1.5rem;font-weight:700}.header-badge{color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap;background:#ffffff26;border:1px solid #ffffff40;border-radius:50px;padding:.35rem .85rem;font-size:.8rem;font-weight:500}.toolbar{border-bottom:1px solid #f1f3f5;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 2rem 1rem;display:flex}.search-wrapper{width:280px;position:relative}.search-wrapper .search-icon{color:#adb5bd;pointer-events:none;font-size:.85rem;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search-wrapper .form-control{border:1.5px solid #e9ecef;border-radius:10px;padding-left:2.2rem;padding-right:2.2rem;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.search-wrapper .form-control:focus{border-color:#38b2ac;box-shadow:0 0 0 3px #38b2ac26}.search-clear{color:#adb5bd;cursor:pointer;background:0 0;border:none;padding:0;font-size:.8rem;line-height:1;transition:color .15s;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.search-clear:hover{color:#495057}.btn-add{color:#fff;white-space:nowrap;background:linear-gradient(135deg,#38b2ac,#0694a2);border:none;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem 1.25rem;font-size:.875rem;font-weight:600;transition:opacity .2s,transform .15s,box-shadow .2s;display:flex;box-shadow:0 4px 12px #38b2ac59}.btn-add:hover{opacity:.92;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px #38b2ac73}.btn-add:active{transform:translateY(0)}.table-container{padding:0 2rem 1.5rem;overflow-x:auto}.student-table{border-collapse:separate;border-spacing:0;width:100%;margin-top:1rem}.student-table thead th{color:#495057;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;-webkit-user-select:none;user-select:none;background:#f8f9fa;border-bottom:2px solid #e9ecef;padding:.85rem 1rem;font-size:.75rem;font-weight:600}.student-table thead th.sortable{cursor:pointer;transition:background .15s,color .15s}.student-table thead th.sortable:hover{color:#212529;background:#e6fffa}.student-table thead th.sorted{color:#0694a2;background:#e6fffa}.sort-icon{opacity:.7;margin-left:4px;font-size:.7rem}.student-table tbody tr{transition:background .15s}.student-table tbody tr:nth-child(2n){background:#f0fdfa}.student-table tbody tr:hover{background:#ccfbf1}.student-table tbody td{color:#343a40;vertical-align:middle;border-bottom:1px solid #f1f3f5;padding:.85rem 1rem;font-size:.875rem}.student-table tbody tr:last-child td{border-bottom:none}.id-badge{color:#0694a2;background:#ccfbf1;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:.75rem;font-weight:700;display:inline-flex}.student-avatar{color:#fff;background:linear-gradient(135deg,#38b2ac,#0694a2);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;margin-right:.5rem;font-size:.75rem;font-weight:700;display:inline-flex}.student-name-cell{align-items:center;display:flex}.course-pill{color:#2e7d32;background:#e8f5e9;border-radius:50px;padding:.2rem .65rem;font-size:.75rem;font-weight:600;display:inline-block}.date-text{color:#868e96;font-size:.8rem}.action-btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.3rem;padding:.3rem .65rem;font-size:.78rem;font-weight:600;transition:opacity .15s,transform .1s;display:inline-flex}.action-btn:hover{opacity:.85;transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.btn-edit{color:#856404;background:#fff3cd}.btn-delete{color:#842029;background:#f8d7da}.state-container{text-align:center;color:#adb5bd;padding:4rem 2rem}.state-icon{opacity:.4;margin-bottom:1rem;font-size:3rem}.state-container p{margin:0;font-size:.95rem}.spinner-ring{border:4px solid #e9ecef;border-top-color:#38b2ac;border-radius:50%;width:48px;height:48px;margin:0 auto 1rem;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.table-footer{border-top:1px solid #f1f3f5;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 2rem 1.5rem;display:flex}.record-count{color:#868e96;font-size:.8rem}.pagination-btns{gap:.3rem;display:flex}.page-btn{color:#495057;cursor:pointer;background:#fff;border:1.5px solid #e9ecef;border-radius:8px;min-width:36px;padding:.3rem .65rem;font-size:.8rem;font-weight:500;transition:all .15s}.page-btn:hover:not(:disabled){color:#0694a2;background:#e6fffa;border-color:#38b2ac}.page-btn.active{color:#fff;background:linear-gradient(135deg,#38b2ac,#0694a2);border-color:#38b2ac}.page-btn:disabled{opacity:.4;cursor:not-allowed}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1050;background:#0000008c;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:16px;width:100%;max-width:520px;animation:.2s modalIn;overflow:hidden;box-shadow:0 24px 64px #00000040}@keyframes modalIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal-header-custom{justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-header-custom.add{color:#fff;background:linear-gradient(135deg,#0f2027,#2c5364)}.modal-header-custom.edit{color:#fff;background:linear-gradient(135deg,#f59e0b,#d97706)}.modal-header-custom h5{margin:0;font-size:1rem;font-weight:700}.modal-close{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.85rem;transition:background .15s;display:flex}.modal-close:hover{background:#ffffff59}.modal-body-custom{padding:1.5rem}.form-label-custom{color:#495057;text-transform:uppercase;letter-spacing:.4px;margin-bottom:.35rem;font-size:.8rem;font-weight:600;display:block}.form-control-custom{border:1.5px solid #e9ecef;border-radius:10px;outline:none;width:100%;padding:.6rem .85rem;font-family:inherit;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.form-control-custom:focus{border-color:#38b2ac;box-shadow:0 0 0 3px #38b2ac26}.modal-footer-custom{background:#f8f9fa;border-top:1px solid #e9ecef;justify-content:flex-end;gap:.6rem;padding:1rem 1.5rem;display:flex}.btn-cancel{color:#495057;cursor:pointer;background:#fff;border:1.5px solid #dee2e6;border-radius:10px;padding:.55rem 1.1rem;font-size:.875rem;font-weight:500;transition:background .15s}.btn-cancel:hover{background:#f1f3f5}.btn-submit-add{color:#fff;cursor:pointer;background:linear-gradient(135deg,#38b2ac,#0694a2);border:none;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem 1.25rem;font-size:.875rem;font-weight:600;transition:opacity .2s,transform .15s;display:flex}.btn-submit-edit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem 1.25rem;font-size:.875rem;font-weight:600;transition:opacity .2s,transform .15s;display:flex}.btn-submit-add:hover,.btn-submit-edit:hover{opacity:.9;transform:translateY(-1px)}@media (width<=1024px){.main-card{border-radius:12px}.app-header{padding:1.5rem}.toolbar{padding:1.25rem 1.5rem 1rem}.table-container{padding:0 1.5rem 1.25rem}.table-footer{padding:1rem 1.5rem 1.25rem}}@media (width<=768px){.page-wrapper{background:linear-gradient(135deg,#0f2027 0%,#203a43 50%,#2c5364 100%);padding:0}.main-card{box-shadow:none;border-radius:0;min-height:100vh}.app-header{border-radius:0;padding:1rem}.app-header h2{font-size:1.1rem}.toolbar{flex-direction:column;align-items:stretch;padding:.875rem 1rem .75rem}.search-wrapper{width:100%}.btn-add{justify-content:center;width:100%;padding:.65rem 1rem}.table-container{overflow-x:unset;padding:0 0 1rem}.student-table thead{display:none}.student-table,.student-table tbody,.student-table tr,.student-table td{width:100%;display:block}.student-table tbody tr{background:#fff;border:1px solid #e9ecef;border-radius:12px;margin:.75rem 1rem;padding:.75rem;box-shadow:0 2px 8px #0000000f}.student-table tbody tr:nth-child(2n){background:#fff}.student-table tbody tr:hover{background:#f0fdfa}.student-table tbody td{border-bottom:none;align-items:center;gap:.5rem;padding:.3rem .25rem;font-size:.875rem;display:flex}.student-table tbody td:before{content:attr(data-label);text-transform:uppercase;letter-spacing:.5px;color:#adb5bd;flex-shrink:0;min-width:70px;font-size:.7rem;font-weight:700}.student-table tbody td.actions-cell:before{display:none}.student-table tbody td.actions-cell{border-top:1px solid #f1f3f5;justify-content:flex-end;margin-top:.25rem;padding-top:.5rem}.student-name-cell{flex:1}.table-footer{flex-direction:column;align-items:center;gap:.75rem;padding:.75rem 1rem 1.25rem}.pagination-btns{flex-wrap:wrap;justify-content:center}.modal-overlay{align-items:flex-end;padding:0}.modal-card{border-radius:16px 16px 0 0;max-width:100%;animation:.25s modalSlideUp}@keyframes modalSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-body-custom>div{grid-template-columns:1fr!important}}@media (width<=400px){.app-header h2{font-size:1rem}.header-badge{padding:.25rem .65rem;font-size:.72rem}.page-btn{min-width:30px;padding:.25rem .45rem;font-size:.75rem}}