@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Prompt:wght@300;400;500;600;700&display=swap";:root{--color-primary:#111;--color-primary-hover:#333;--color-secondary:#f0f0f0;--color-accent:#3b82f6;--color-background:#fafafa;--color-surface:#fff;--color-text-main:#171717;--color-text-muted:#737373;--color-border:#e5e5e5;--color-success:#10b981;--color-danger:#ef4444;--color-warning:#f59e0b;--shadow-sm:0 2px 8px #0000000a;--shadow-md:0 8px 24px #0000000f;--shadow-lg:0 20px 40px #00000014;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--transition-bounce:.5s cubic-bezier(.68, -.55, .265, 1.55)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background);color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;margin:0;padding:0;font-family:Prompt,Inter,sans-serif;line-height:1.6}#root{min-height:100vh}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.animate-fade-up{animation:.6s cubic-bezier(.16,1,.3,1) forwards fadeUp}.animate-slide-in{animation:.5s cubic-bezier(.16,1,.3,1) forwards slideInRight}.glass-panel{background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);border-radius:var(--radius-lg);transition:box-shadow var(--transition-normal), transform var(--transition-normal)}@keyframes skeleton-pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.skeleton{background-color:var(--color-border);border-radius:var(--radius-md);animation:1.5s ease-in-out infinite skeleton-pulse}.skeleton-text{height:1rem;margin-bottom:.5rem}.skeleton-title{height:1.75rem;margin-bottom:.5rem}.skeleton-card{height:120px}.skeleton-avatar{border-radius:50%}.glass-panel:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.modern-input{border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-background);width:100%;color:var(--color-text-main);transition:all var(--transition-normal);outline:none;padding:12px 16px;font-family:inherit;font-size:15px}.modern-input:focus{background-color:var(--color-surface);border-color:var(--color-accent);box-shadow:0 0 0 4px #3b82f61a}.modern-btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-family:inherit;font-size:15px;font-weight:500;display:inline-flex;position:relative;overflow:hidden}.modern-btn:after{content:"";opacity:0;background:#fff3;border-radius:50%;width:100%;height:100%;transition:transform .4s ease-out,opacity .4s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.modern-btn:active:after{opacity:1;transition:all;transform:translate(-50%,-50%)scale(2)}.modern-btn-primary{background-color:var(--color-primary);color:#fff;box-shadow:0 4px 12px #0000001a}.modern-btn-primary:hover{background-color:var(--color-primary-hover);transform:scale(1.02);box-shadow:0 6px 16px #00000026}.modern-btn-primary:active{transform:scale(.98)}.layout-container{flex-direction:row;width:100%;min-height:100vh;display:flex}.sidebar{background-color:var(--color-surface);border-right:1px solid var(--color-border);width:260px;transition:transform var(--transition-normal);z-index:50;flex-direction:column;flex-shrink:0;height:100vh;display:flex;position:sticky;top:0}.main-content{background-color:var(--color-background);flex:1;min-width:0;padding:2rem}.mobile-header{display:none}*,:before,:after{box-sizing:border-box}@media (width<=768px){.layout-container{grid-template-rows:64px 1fr;grid-template-columns:100%;width:100vw;min-height:100vh;overflow-x:hidden;display:grid!important}.mobile-header{-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);z-index:40;background:#fffffff2;grid-row:1;justify-content:space-between;align-items:center;padding:0 1.5rem;display:flex!important}.main-content{z-index:10;grid-row:2;overflow-y:auto;background-color:var(--color-background)!important;width:100%!important;height:100%!important;padding:1rem!important}.sidebar{height:100vh;box-shadow:var(--shadow-lg);top:0;left:0;transform:translate(-100%);z-index:50!important;position:fixed!important}.sidebar.open{transform:translate(0)}}h1,h2,h3,h4,h5,h6{color:var(--color-text-main);margin-bottom:var(--spacing-sm);font-weight:600}p{color:var(--color-text-muted);margin-bottom:var(--spacing-md)}input,select,textarea{border-radius:var(--radius-md);background-color:var(--color-surface-solid);border:1px solid #e5e7eb;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:1rem;transition:all .2s}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #4f46e533}label{margin-bottom:var(--spacing-xs);font-size:.875rem;font-weight:500;display:block}.btn{border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{background-color:var(--color-primary-hover);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-back{background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.5rem 1.25rem;font-size:.9rem;font-weight:500;text-decoration:none;display:inline-flex}.btn-back:hover{background-color:var(--color-background);color:var(--color-primary);box-shadow:var(--shadow-md);border-color:var(--color-primary);transform:translate(-4px)}.btn-back:active{transform:translate(-2px)}.page-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2.5rem;display:flex}.container{width:100%;max-width:1200px;padding:var(--spacing-lg);margin:0 auto}.flex-center{justify-content:center;align-items:center;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}@keyframes fadeOverlay{0%{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.animate-fade-overlay{animation:.3s ease-out forwards fadeOverlay}.attendance-list{flex-direction:column;display:flex}.attendance-header{color:#ffffffb3;border-bottom:1px solid #ffffff0d;padding:1rem 1.5rem;font-weight:500;display:flex}.attendance-row{border-bottom:1px solid #ffffff0d;align-items:center;padding:1rem 1.5rem;display:flex}.attendance-row:last-child{border-bottom:none}.attendance-col-code{color:#d1d5db;flex:0 0 120px}.attendance-col-name{flex:1;font-weight:500}.attendance-col-actions{flex:0 0 280px;justify-content:center;gap:.5rem;display:flex}@media (width<=768px){.sidebar{border-top-right-radius:1.25rem;border-bottom-right-radius:1.25rem;width:280px!important}main.main-content,.glass-panel{padding:1rem!important}.table-responsive{margin:0 -1rem;padding:0 1rem}.page-header{flex-direction:column!important;align-items:flex-start!important;gap:1.25rem!important}.page-header button,.page-header .btn,.page-header .modern-btn{justify-content:center!important;width:100%!important}.attendance-header{display:none!important}.attendance-row{flex-direction:column!important;align-items:flex-start!important;gap:.75rem!important;padding:1.25rem 1rem!important}.attendance-col-code{opacity:.7;margin-bottom:-.5rem;font-size:.875rem;flex:auto!important}.attendance-col-name{margin-bottom:.25rem;font-size:1.125rem;flex:auto!important}.attendance-col-actions{grid-template-columns:repeat(4,1fr);gap:.5rem;flex:auto!important;width:100%!important;display:grid!important}.attendance-col-actions button{font-size:.9rem;width:100%!important;padding:.75rem .25rem!important}}@media (width<=480px){h1{font-size:1.5rem!important}.btn{padding:.5rem 1rem;font-size:.875rem}input,select{padding:.5rem}}