*{margin:0;padding:0;box-sizing:border-box}html{width:100%;height:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-touch-callout:none;-webkit-overflow-scrolling:touch}:root{--falsso-primary: #059669;--falsso-primary-dark: #047857;--falsso-primary-light: #10b981;--falsso-bg-gradient-start: #ecfdf5;--falsso-bg-gradient-mid: #d1fae5;--falsso-bg-gradient-end: #a7f3d0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(to bottom,#ecfdf5,#f0fdf4 30%,#fff);color:#333;line-height:1.6;width:100%;min-height:100vh;overflow-x:hidden;position:relative;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);-webkit-overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#root{width:100%;max-width:100vw;overflow-x:hidden;position:relative;min-height:100vh;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.container{max-width:1200px;margin:0 auto;padding:0 24px;width:100%;box-sizing:border-box}@media (max-width: 768px){.container{padding:0 16px}}@media (max-width: 480px){.container{padding:0 12px}}.header{background:linear-gradient(to right,#fff,#f0fdf4);box-shadow:0 2px 8px #0596691a;position:sticky;top:0;z-index:100;padding-top:env(safe-area-inset-top)}.nav-container{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;min-height:60px}.logo-container{display:flex;align-items:center;gap:12px}.logo-img{width:64px;height:64px;border-radius:50%;object-fit:contain;min-width:64px;min-height:64px;background:transparent}.logo-text{font-size:28px;font-weight:700;color:#059669;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.nav-buttons{display:flex;gap:16px}@media (max-width: 768px){.header{padding-top:0}.nav-container{padding:12px 16px;min-height:56px}.logo-img{width:56px;height:56px;min-width:56px;min-height:56px}.logo-text{font-size:24px}.nav-buttons{gap:8px}}@media (max-width: 480px){.nav-container{padding:8px 12px;min-height:48px}.logo-img{width:48px;height:48px;min-width:48px;min-height:48px}.logo-text{font-size:20px}}.btn-login{padding:12px 24px;background:#fff;color:#059669;border:2px solid #059669;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block;min-height:44px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(5,150,105,.1);touch-action:manipulation}.btn-login:hover{background:#eff6ff;transform:translateY(-1px)}.btn-login:active{transform:translateY(0);background:#d1fae5}.btn-register{padding:12px 24px;background:#059669;color:#fff;border:2px solid #059669;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s;text-decoration:none;display:inline-block;min-height:44px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(255,255,255,.2);touch-action:manipulation}.btn-register:hover{background:#047857;transform:translateY(-1px)}.btn-register:active{transform:translateY(0);background:#065f46}@media (max-width: 768px){.btn-login,.btn-register{padding:12px 20px;font-size:14px;min-height:48px;border-radius:6px}}@media (max-width: 480px){.btn-login,.btn-register{padding:12px 16px;font-size:14px;min-height:44px;width:100%;max-width:200px}}.hero-section{background:linear-gradient(135deg,#d1fae5,#a7f3d0,#6ee7b7);padding:80px 24px}.hero-container{max-width:1200px;margin:0 auto}.hero-content{text-align:center;max-width:1000px;margin:0 auto}.hero-title{font-size:48px;font-weight:700;color:#1f2937;margin-bottom:24px;line-height:1.2}.hero-title .highlight{color:#059669}.hero-subtitle{font-size:40px;font-weight:700;color:#1f2937;margin-bottom:24px;line-height:1.2}.highlight{color:#059669}.hero-description{font-size:18px;color:#4b5563;margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto;text-align:center}.hero-main-card{background:#fff;border-radius:12px;padding:48px;box-shadow:0 4px 6px #0000001a;margin:48px auto 0;max-width:900px;width:100%;box-sizing:border-box;overflow-x:hidden}.hero-attendance-section{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid #e5e7eb}.hero-calendar-section{margin-top:32px;padding-top:0}.hero-card-title{font-size:24px;font-weight:700;color:#1f2937;margin-bottom:12px;text-align:center}.hero-card-note{font-size:14px;color:#6b7280;margin-bottom:24px;line-height:1.6;text-align:center}.calendar-wrapper-inline{width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.calendar-wrapper-inline .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #e5e7eb}.calendar-wrapper-inline .calendar-month{font-size:20px;font-weight:700;color:#1f2937;margin:0}.calendar-wrapper-inline .calendar-nav{background:transparent;border:none;padding:8px 12px;cursor:pointer;color:#059669;font-size:16px;border-radius:6px;transition:background .3s}.calendar-wrapper-inline .calendar-nav:hover{background:#eff6ff}.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:48px}.btn-hero-primary{padding:12px 32px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;transition:background .3s;text-decoration:none;display:inline-block}.btn-hero-primary:hover{background:#047857}.btn-hero-secondary{padding:12px 32px;background:#fff;color:#059669;border:2px solid #059669;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;transition:background .3s;text-decoration:none;display:inline-block}.btn-hero-secondary:hover{background:#eff6ff}.btn-primary{padding:12px 32px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;transition:background .3s}.btn-primary:hover{background:#047857}.btn-secondary{padding:12px 32px;background:#fff;color:#059669;border:2px solid #059669;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;transition:background .3s}.btn-secondary:hover{background:#eff6ff}.about-section{padding:80px 24px;background:#fff}.section-title-center{font-size:36px;font-weight:700;color:#1f2937;text-align:center;margin-bottom:12px}.title-underline{width:80px;height:4px;background:#059669;margin:0 auto 48px}.about-content{display:flex;gap:48px;align-items:center;max-width:1000px;margin:0 auto}.about-logo{flex-shrink:0;display:flex;justify-content:center;align-items:center}.about-logo-img{width:300px;height:300px;border-radius:50%;object-fit:cover;border:8px solid #059669;box-shadow:0 8px 16px #05966933;display:block;margin:0 auto}.about-text{flex:1}.about-heading{font-size:28px;font-weight:700;color:#1f2937;margin-bottom:16px;text-align:left}.about-description{font-size:16px;color:#4b5563;line-height:1.8;margin-bottom:32px;text-align:left}.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.benefit-item{display:flex;align-items:center;gap:12px;font-size:16px;color:#1f2937;font-weight:500}.benefit-icon{font-size:24px;color:#059669}.features-section{padding:80px 24px;background:#f9fafb}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-bottom:48px;max-width:1000px;margin-left:auto;margin-right:auto}.feature-card{background:#fff;border-radius:12px;padding:32px;text-align:center;box-shadow:0 4px 6px #0000001a;transition:transform .3s,box-shadow .3s}.feature-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #00000026}.feature-icon-circle{width:80px;height:80px;border-radius:50%;border:3px solid #059669;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;background:#fff}.feature-icon{font-size:36px;color:#059669}.feature-title{font-size:22px;font-weight:700;color:#1f2937;margin-bottom:12px}.feature-description{font-size:15px;color:#4b5563;line-height:1.6}.features-summary{text-align:center;font-size:16px;color:#4b5563;line-height:1.8;max-width:900px;margin:0 auto}.attendance-section{padding:64px 24px}.attendance-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:32px;max-width:700px;margin:0 auto}.section-title{font-size:28px;font-weight:700;color:#1f2937;margin-bottom:16px}.note-text{font-size:14px;color:#4b5563;margin-bottom:24px}.search-container{display:flex;gap:16px}.search-input{flex:1;padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:16px;outline:none;transition:border-color .3s}.search-input:focus{border-color:#059669}.btn-search{padding:12px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .3s}.btn-search:hover{background:#047857}.calendar-section{padding:80px 24px;background:#f9fafb}.section-description{text-align:center;color:#4b5563;margin-bottom:48px;font-size:16px}.calendar-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:40px;max-width:700px;margin:0 auto}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.calendar-month-year{font-size:26px;font-weight:700;color:#1f2937;margin:0;text-align:center;flex:1}.calendar-nav-btn{background:transparent;border:none;padding:10px 12px;cursor:pointer;color:#059669;font-size:18px;border-radius:8px;transition:all .3s;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.calendar-nav-btn:hover{background:#eff6ff;transform:scale(1.1)}.calendar-nav-btn i{font-size:18px}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px;width:100%;max-width:100%;box-sizing:border-box}.weekday{text-align:center;font-weight:600;color:#6b7280;padding:12px 8px;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden}.calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:all .2s;font-size:15px;font-weight:500;min-height:45px}.calendar-day.empty{background:transparent;cursor:default}.calendar-day.normal{background:#f9fafb;color:#374151;border:1px solid transparent}.calendar-day.normal:hover{background:#e5e7eb;border-color:#059669;transform:scale(1.05)}.calendar-day.event{background:#059669;color:#fff;font-weight:700;border:2px solid #047857;box-shadow:0 2px 8px #0596694d}.calendar-day.event:hover{background:#047857;transform:scale(1.08);box-shadow:0 4px 12px #05966966}.calendar-day.today{background:#d1fae5;color:#065f46;font-weight:700;border:2px solid #059669}.officers-section{padding:80px 24px;background:#fff}.officers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:1200px;margin:48px auto 0}.officer-card{background:#fff;border-radius:16px;box-shadow:0 4px 6px #0000001a;padding:32px 24px;text-align:center;transition:transform .3s,box-shadow .3s;border:1px solid #e5e7eb}.officer-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #00000026}.officer-image-container{width:200px;height:200px;margin:0 auto 24px;border-radius:50%;overflow:hidden;border:4px solid #059669;background:#f3f4f6;display:flex;align-items:center;justify-content:center}.officer-image{width:100%;height:100%;object-fit:cover;object-position:center 25%;transform:scale(1.3)}.officer-name{font-size:22px;font-weight:700;color:#1f2937;margin-bottom:8px}.officer-position{font-size:16px;font-weight:600;color:#059669;margin-bottom:16px}.officer-description{font-size:14px;color:#4b5563;line-height:1.6;margin:0}@media (max-width: 1024px){.officers-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}}@media (max-width: 768px){.officers-section{padding:60px 20px}.officers-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:32px}.officer-image-container{width:160px;height:160px}.officer-name{font-size:20px}.officer-position{font-size:15px}.officer-description{font-size:13px}}@media (max-width: 480px){.officers-grid{grid-template-columns:1fr;gap:24px}.officer-image-container{width:150px;height:150px}}.search-results-section{padding:60px 24px;background:#f9fafb}.search-results-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:32px;max-width:900px;margin:0 auto}.student-info-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;padding-bottom:24px;border-bottom:2px solid #e5e7eb}.student-profile-display{display:flex;align-items:center;gap:20px}.student-profile-pic{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #059669}.student-info-text{display:flex;flex-direction:column;gap:8px}.student-name-display{font-size:24px;font-weight:700;color:#1f2937;margin:0}.student-id-display{font-size:16px;color:#6b7280;margin:0}.student-course-display{font-size:15px;color:#4b5563;margin:0}.btn-close-search{transition:color .3s}.btn-close-search:hover{color:#ef4444}.attendance-records-list{margin-top:24px}.inline-search-results{margin-top:24px;width:100%}.student-name-box{background:#fef3c7;padding:16px 20px;border-radius:8px;font-size:18px;font-weight:600;color:#92400e;margin-bottom:20px;text-align:left;display:flex;align-items:center;gap:16px}.student-search-profile-pic{flex-shrink:0;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fde68a;display:flex;align-items:center;justify-content:center}.student-search-avatar{width:100%;height:100%;object-fit:cover}.student-search-avatar-placeholder{font-size:24px;color:#b45309}.student-search-name{flex:1}.inline-attendance-records{margin-top:16px}.inline-attendance-content{flex:1;display:flex;flex-direction:column;gap:8px}.inline-event-name{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:4px}.inline-time-label{color:#6b7280;font-weight:500;min-width:70px}.attendance-records-title{font-size:20px;font-weight:700;color:#1f2937;margin-bottom:20px}.attendance-items{display:flex;flex-direction:column;gap:16px}.attendance-item{padding:20px;border-radius:12px;border:2px solid #e5e7eb;background:#f9fafb;transition:all .3s}.attendance-item.present{border-color:#d1fae5;background:#f0fdf4}.attendance-item.absent{border-color:#fee2e2;background:#fef2f2}.attendance-item-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.attendance-status-icon{font-size:24px}.attendance-event-info{flex:1;display:flex;flex-direction:column;gap:4px}.attendance-event-name{font-size:18px;color:#1f2937}.attendance-event-date{font-size:14px;color:#6b7280}.attendance-badge{padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600}.present-badge{background:#d1fae5;color:#065f46}.absent-badge{background:#fee2e2;color:#991b1b}.attendance-times{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px;border-top:1px solid #e5e7eb}.time-item{display:flex;align-items:center;font-size:14px}.time-label{font-weight:600;color:#4b5563;margin-right:8px}.time-value{color:#1f2937}.inline-search-results{margin-top:20px;width:100%}.student-name-box{background:#ffe4b5;padding:14px 20px;border-radius:8px;font-size:18px;font-weight:600;color:#92400e;margin-bottom:20px;text-align:left;display:flex;align-items:center;gap:16px}.inline-attendance-records{margin-top:0}.inline-attendance-items{display:flex;flex-direction:column;gap:12px;margin-top:12px}.inline-attendance-item{display:flex;align-items:flex-start;gap:12px;padding:16px;background:#f9fafb;border-radius:8px;border:1px solid #E5E7EB}.inline-attendance-icon{font-size:20px;margin-top:2px;flex-shrink:0}.inline-attendance-content{flex:1;display:flex;flex-direction:column;gap:6px}.inline-event-name{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:2px}.inline-time-info{display:flex;align-items:center;gap:8px;font-size:14px}.inline-time-label{color:#6b7280;font-weight:500;min-width:75px}.inline-time-value{color:#1f2937}@media (max-width: 768px){.search-results-card{padding:24px 16px}.student-info-header{flex-direction:column;gap:16px}.student-profile-display{flex-direction:column;text-align:center}.attendance-item-header{flex-wrap:wrap}.attendance-times{grid-template-columns:1fr}.student-name-box{font-size:16px;padding:12px 16px}.inline-attendance-item{padding:12px}}.contact-section{padding:64px 24px;background:#fff}.contact-info{display:flex;flex-wrap:wrap;gap:32px;justify-content:center;margin-top:32px}.contact-item{display:flex;align-items:center;gap:12px;color:#374151}.contact-item i{color:#059669;font-size:24px}.footer{background:linear-gradient(180deg,#0f172a,#134e4a,#115e59);color:#d1d5db;padding:48px 24px 24px}.footer-container{max-width:1200px;margin:0 auto}.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-bottom:32px}.footer-title{color:#fff;font-size:18px;font-weight:700;margin-bottom:16px}.footer-links{list-style:none}.footer-links li{margin-bottom:8px}.footer-links a{color:#d1d5db;text-decoration:none;transition:color .3s}.footer-links a:hover{color:#34d399}.social-link{display:flex;align-items:center;gap:8px}.social-link i{color:#34d399;font-size:24px}.social-link a{color:#d1d5db;text-decoration:none;transition:color .3s}.social-link a:hover{color:#34d399}.footer-bottom{border-top:1px solid #374151;padding-top:24px;text-align:center;color:#9ca3af}@media (max-width: 768px){.hero-title{font-size:48px}.hero-subtitle{font-size:28px}.nav-container{flex-direction:column;gap:16px}.search-container{flex-direction:column}.btn-search{width:100%;justify-content:center}.contact-info{flex-direction:column;align-items:center}.about-content{flex-direction:column;text-align:center;align-items:center;gap:32px}.about-logo{display:flex;justify-content:center;width:100%}.about-logo-img{width:250px;height:250px;margin:0 auto;display:block}.about-text{width:100%;text-align:left}.about-heading{text-align:left;margin-bottom:16px}.about-description{text-align:left;margin-bottom:24px}.benefits-grid{grid-template-columns:1fr;gap:16px;text-align:left}.benefit-item{justify-content:flex-start}.features-grid{grid-template-columns:1fr}.section-title-center{font-size:28px}.calendar-card{padding:24px}.calendar-header{margin-bottom:24px}.calendar-month-year{font-size:20px}.calendar-day{min-height:35px;font-size:13px}.weekday{padding:8px 4px;font-size:12px}}.login-page{background:linear-gradient(to bottom,#ecfdf5,#f0fdf4,#fafafa);min-height:100vh;display:flex;flex-direction:column}.back-to-home{padding:24px}.back-link{display:inline-flex;align-items:center;gap:8px;color:#4b5563;text-decoration:none;font-size:16px;transition:color .3s}.back-link:hover{color:#059669}.back-link i{font-size:14px}.login-container{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px}.login-content{width:100%;max-width:480px;text-align:center}.login-logo{margin-bottom:32px}.login-logo-img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #059669;box-shadow:0 4px 12px #05966933}.login-title{font-size:36px;font-weight:700;color:#1f2937;margin-bottom:8px}.login-subtitle{font-size:16px;color:#6b7280;margin-bottom:32px}.login-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:40px;text-align:left}.login-form{width:100%}.form-group{margin-bottom:24px}.form-label{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-input{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;color:#1f2937;transition:border-color .3s,box-shadow .3s;outline:none;background:#fff;min-height:44px;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(5,150,105,.1);touch-action:manipulation}.form-input:focus{border-color:#059669;box-shadow:0 0 0 3px #0596691a}.form-input::placeholder{color:#9ca3af}.form-input:disabled{background-color:#f9fafb;color:#9ca3af;cursor:not-allowed}.form-input:invalid{border-color:#ef4444}.form-input:invalid:focus{box-shadow:0 0 0 3px #ef44441a}.form-textarea{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;color:#1f2937;transition:border-color .3s,box-shadow .3s;outline:none;background:#fff;min-height:100px;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;resize:vertical;-webkit-tap-highlight-color:rgba(5,150,105,.1);touch-action:manipulation}.form-textarea:focus{border-color:#059669;box-shadow:0 0 0 3px #0596691a}.form-textarea::placeholder{color:#9ca3af}@media (max-width: 768px){.form-group{margin-bottom:20px}.form-label{font-size:14px;margin-bottom:6px}.form-input,.form-select,.form-textarea{font-size:16px;padding:14px 16px;min-height:48px;border-radius:6px}.form-textarea{min-height:120px}}@media (max-width: 480px){.form-group{margin-bottom:16px}.form-input,.form-select,.form-textarea{padding:12px 14px;min-height:44px;border-radius:6px}.form-textarea{min-height:100px}}.password-input-wrapper{position:relative}.password-input-wrapper .form-input{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#6b7280;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:color .3s}.password-toggle:hover{color:#059669}.password-toggle i{font-size:18px}.btn-signin{width:100%;padding:14px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s;margin-bottom:24px}.btn-signin:hover{background:#047857}.btn-signin:active{transform:scale(.98)}.auth-divider{display:flex;align-items:center;margin:20px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#e5e7eb}.auth-divider span{padding:0 16px;color:#9ca3af;font-size:14px;font-weight:500}.btn-google{width:100%;padding:12px 24px;background:#fff;color:#374151;border:1px solid #e5e7eb;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}.btn-google:hover{background:#f9fafb;border-color:#d1d5db;box-shadow:0 2px 4px #0000000d}.btn-google:active{transform:scale(.98)}.btn-google:disabled{opacity:.6;cursor:not-allowed}.btn-google-only{margin-top:20px;font-size:16px;padding:14px 28px;font-weight:600;box-shadow:0 4px 12px #0000001a;transition:all .3s ease}.btn-google-only:hover{box-shadow:0 6px 16px #00000026;transform:translateY(-1px)}.google-icon{flex-shrink:0}.signup-link-text{text-align:center;font-size:14px;color:#6b7280;margin:0}.demo-access-section{margin-top:32px;padding-top:24px;border-top:1px solid #e5e7eb}.demo-text{text-align:center;font-size:14px;color:#6b7280;margin-bottom:16px}.demo-buttons{display:flex;flex-direction:column;gap:12px}.btn-demo{width:100%;padding:12px 24px;background:#f3f4f6;color:#1f2937;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:8px}.btn-demo:hover{background:#e5e7eb;border-color:#9ca3af;color:#111827}.btn-demo i{font-size:16px}.signup-link{color:#059669;text-decoration:none;font-weight:600;transition:color .3s}.signup-link:hover{color:#047857;text-decoration:underline}.login-footer{text-align:center;padding:24px;color:#9ca3af;font-size:14px}.register-content{width:100%;max-width:700px;text-align:center}.register-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000014;padding:40px;text-align:left}.register-form{width:100%}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}.form-group-half,.form-group-third{grid-column:span 1}.input-with-icon{position:relative}.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#6b7280;font-size:16px;z-index:1}.input-with-icon .form-input{padding-left:44px}.input-with-icon .password-toggle{right:12px}.form-select{background-image:none;cursor:pointer;padding-right:44px;font-size:16px;min-height:44px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(5,150,105,.1);touch-action:manipulation}.select-arrow,.select-arrow-select{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none;font-size:14px;z-index:1}.select-arrow,.select-arrow-select{right:16px}@media (max-width: 768px){.login-title{font-size:28px}.login-card{padding:32px 24px}.login-logo-img{width:100px;height:100px}.register-card{padding:32px 24px}.form-row{grid-template-columns:1fr;gap:16px}.form-group-half,.form-group-third{grid-column:span 1}}@media (max-width: 480px){.login-page{padding:0;min-height:100vh}.back-to-home{padding:12px 16px}.back-link{font-size:14px;padding:8px 12px}.login-container{padding:20px 16px;min-height:calc(100vh - 60px)}.register-content{max-width:100%;padding:0}.login-logo-img{width:80px;height:80px}.login-title{font-size:24px;margin:16px 0 8px}.login-subtitle{font-size:14px;margin-bottom:24px}.register-card{padding:24px 16px;border-radius:12px;margin:0}.form-row{grid-template-columns:1fr;gap:16px;margin-bottom:16px}.form-group{margin-bottom:16px}.form-label{font-size:14px;margin-bottom:8px}.form-input{font-size:16px;padding:12px 16px 12px 44px}.input-icon{font-size:14px;left:12px}.select-arrow,.select-arrow-select{right:12px;font-size:12px}.password-toggle{right:12px;width:32px;height:32px;font-size:14px}.btn-signin{width:100%;padding:14px 24px;font-size:16px;margin-top:8px}.signup-link-text{font-size:14px;margin-top:20px}.login-footer{padding:16px;font-size:12px}.success-message,.error-message{padding:12px!important;font-size:13px!important;margin-bottom:16px!important;line-height:1.5!important}.success-message div,.error-message{gap:8px!important}.success-message div div{font-size:12px!important}}.dashboard-body{background:#f9fafb;min-height:100vh;padding-bottom:80px}.dashboard-header{background:#fff;box-shadow:0 2px 4px #0000001a;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}.dashboard-header-left{display:flex;align-items:center;gap:12px}.dashboard-icon{font-size:24px;color:#059669}.dashboard-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.dashboard-header-right{display:flex;align-items:center;gap:20px}.user-info-container{position:relative}.user-info{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background .3s}.user-info:hover{background:#f3f4f6}.user-icon{font-size:32px;color:#059669}.user-name{font-size:16px;font-weight:600;color:#1f2937}.dropdown-arrow{font-size:12px;color:#6b7280;transition:transform .3s}.user-info.active .dropdown-arrow{transform:rotate(180deg)}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000026;min-width:220px;z-index:1000;display:none;overflow:hidden}.user-dropdown.show{display:block}.dropdown-header{padding:12px 16px;font-size:13px;font-weight:600;color:#9ca3af;text-transform:uppercase;border-bottom:1px solid #e5e7eb}.dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#374151;text-decoration:none;font-size:14px;transition:background .2s;border-bottom:1px solid #f3f4f6}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#f9fafb}.dropdown-item i{font-size:16px;color:#6b7280;width:20px;text-align:center}.dropdown-item:last-child{color:#ef4444}.stats-overview{max-width:100%}.stats-title{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 24px;text-align:center}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:40px}.stat-card{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:16px;padding:24px;box-shadow:0 4px 12px #00000014;border:1px solid #e5e7eb;display:flex;align-items:center;gap:16px;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.stat-icon{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,#10b981,#047857);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;flex-shrink:0}.stat-icon.attended{background:linear-gradient(135deg,#10b981,#059669)}.stat-icon.qr{background:linear-gradient(135deg,#f59e0b,#d97706)}.stat-icon.rate{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.stat-content{flex:1}.stat-number{font-size:32px;font-weight:800;color:#1f2937;margin:0 0 4px;line-height:1}.stat-label{font-size:14px;color:#6b7280;margin:0;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.recent-activity{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 12px #00000014;border:1px solid #e5e7eb;margin-bottom:32px}.activity-title{font-size:20px;font-weight:700;color:#1f2937;margin:0 0 20px}.activity-list{display:flex;flex-direction:column;gap:16px}.activity-item{display:flex;align-items:center;gap:16px;padding:16px;background:#f8fafc;border-radius:12px;border:1px solid #e5e7eb}.activity-icon{width:40px;height:40px;border-radius:8px;background:#10b981;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;flex-shrink:0}.activity-content{flex:1}.activity-text{font-size:14px;color:#1f2937;margin:0 0 4px;font-weight:500}.activity-time{font-size:12px;color:#6b7280}@media (max-width: 768px){.stats-grid{grid-template-columns:1fr;gap:16px}.stat-card{padding:20px;gap:12px}.stat-icon{width:50px;height:50px;font-size:20px}.stat-number{font-size:28px}.stats-grid{grid-template-columns:1fr;gap:16px;margin-bottom:32px}.stat-card{padding:20px;flex-direction:row;align-items:center;gap:16px}.stat-card-icon{width:50px;height:50px;font-size:20px;flex-shrink:0}.stat-card-value{font-size:24px;margin-bottom:4px}.stat-card-label{font-size:13px}@media (max-width: 480px){.stats-grid{gap:12px;margin-bottom:24px}.stat-card{padding:16px;gap:12px}.stat-card-icon{width:44px;height:44px;font-size:18px}.stat-card-value{font-size:20px}.stat-card-label{font-size:12px}}.activity-item{padding:12px;gap:12px}}.dropdown-item:last-child i{color:#ef4444}.back-link-header{display:flex;align-items:center;gap:8px;color:#374151;text-decoration:none;font-size:16px;transition:color .3s}.back-link-header:hover{color:#059669}.back-link-header i{font-size:14px}.page-title-header{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:#1f2937}.search-icon-header{color:#059669;font-size:20px}.search-page-content{max-width:700px;margin:0 auto;padding:40px 0}.search-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:32px;margin-bottom:24px}.search-card-title{font-size:22px;font-weight:700;color:#1f2937;margin:0 0 24px}.search-input-container{display:flex;gap:12px}.search-input-field{flex:1;padding:14px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;color:#1f2937;outline:none;transition:border-color .3s}.search-input-field:focus{border-color:#059669}.search-input-field::placeholder{color:#9ca3af}.btn-search-student{padding:14px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .3s;white-space:nowrap}.btn-search-student:hover{background:#047857}.info-card{background:#eff6ff;border:2px solid #bfdbfe;border-radius:12px;padding:24px}.info-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.info-icon-large{font-size:24px;color:#059669}.info-card-title{font-size:18px;font-weight:700;color:#065f46;margin:0}.info-list{list-style:none;padding:0;margin:0}.info-list li{font-size:15px;color:#065f46;margin-bottom:10px;padding-left:20px;position:relative;line-height:1.6}.info-list li:last-child{margin-bottom:0}.info-list li:before{content:"•";position:absolute;left:0;color:#059669;font-weight:700;font-size:20px}@media (max-width: 768px){.dashboard-header{flex-direction:column;gap:16px;align-items:flex-start}.dashboard-header-left,.dashboard-header-right{width:100%;justify-content:space-between}.search-input-container{flex-direction:column}.btn-search-student{width:100%;justify-content:center}}.records-container{display:grid;grid-template-columns:350px 1fr;gap:24px;padding:24px;max-width:1400px;margin:0 auto}.records-left-panel{position:sticky;top:100px;height:fit-content}.select-event-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:24px}.select-event-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.select-event-icon{font-size:24px;color:#059669}.select-event-title{font-size:18px;font-weight:700;color:#1f2937;margin:0}.event-select-dropdown{width:100%;padding:12px 44px 12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:600;color:#1f2937;background:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;margin-bottom:12px;min-height:48px}.event-select-dropdown:focus{outline:none;border-color:#059669}.event-location{padding-top:12px;border-top:1px solid #e5e7eb;display:flex;flex-direction:column;gap:4px}.event-name-display{font-size:14px;font-weight:700;color:#1f2937}.event-location-text{font-size:13px;color:#6b7280}.records-right-panel{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:32px;width:100%;box-sizing:border-box}.attendance-statistics-header{display:flex;align-items:center;gap:12px;margin-bottom:32px;padding-bottom:20px;border-bottom:2px solid #e5e7eb}.stats-icon{font-size:28px;color:#059669}.attendance-statistics-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.statistics-content{display:flex;flex-direction:column;gap:24px}.chart-container{display:flex;flex-direction:column;align-items:center;width:100%}.chart-title{font-size:16px;font-weight:600;color:#374151;margin-bottom:20px}.chart-wrapper{width:100%;max-width:300px;height:300px;position:relative}.chart-legend{display:flex;flex-direction:column;gap:12px;margin-top:20px}.legend-item{display:flex;align-items:center;gap:8px}.legend-color{width:16px;height:16px;border-radius:4px}.attended-color{background:#059669}.not-attended-color{background:#e5e7eb}.paid-color{background:#8b5cf6}.unpaid-color{background:#e5e7eb}.legend-label{font-size:14px;color:#374151}.metric-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.metric-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000001a}.total-card{background:#eff6ff}.attended-card{background:#d1fae5}.not-attended-card{background:#fff}.rate-card{background:#d1fae5}.metric-content{display:flex;justify-content:space-between;align-items:center}.metric-label{font-size:14px;font-weight:600;color:#374151;margin:0 0 8px}.metric-value{font-size:clamp(18px,5vw,32px);font-weight:700;color:#1f2937;margin:0;word-break:break-all;overflow-wrap:break-word;white-space:normal;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.2em;line-height:1.1}.metric-icon{font-size:32px;color:#6b7280}.attended-icon{color:#10b981}.not-attended-icon{color:#ef4444}.rate-icon{color:#059669}.records-bottom-section{background:#eff6ff;border-radius:12px;padding:24px 32px;max-width:1400px;margin:24px auto}.bottom-section-content{display:flex;justify-content:space-between;align-items:center}.event-details-left{display:flex;align-items:center;gap:16px}.bottom-icon{font-size:32px;color:#059669}.event-name-bottom{font-size:20px;font-weight:700;color:#1f2937;margin:0 0 4px}.registered-count{font-size:14px;color:#6b7280;margin:0}.btn-download-excel{padding:12px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .3s}.btn-download-excel:hover{background:#047857}.user-avatar{width:36px;height:36px;border-radius:50%;background:#059669;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}@media (max-width: 1024px){.records-container{grid-template-columns:1fr}.records-left-panel{position:static}.statistics-content{grid-template-columns:1fr}.chart-container{order:2}.metric-cards-grid{order:1;grid-template-columns:repeat(4,1fr)}}@media (max-width: 768px){.records-container{padding:12px;gap:16px;grid-template-columns:1fr}.records-left-panel{position:static}.select-event-card{padding:16px}.select-event-title{font-size:16px}.event-select-dropdown{font-size:16px!important;padding:12px 44px 12px 14px!important;background-position:right 14px center!important;background-size:18px 18px!important;min-height:48px;width:100%;box-sizing:border-box}.records-right-panel{width:100%}.attendance-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.records-bottom-section{padding:16px;margin:16px 12px}.metric-cards-grid{grid-template-columns:1fr;gap:16px}.metric-card{padding:20px}.metric-value{font-size:clamp(16px,4vw,24px);-webkit-line-clamp:2}@media (max-width: 480px){.metric-cards-grid{gap:12px}.metric-card{padding:16px}.metric-value{font-size:clamp(14px,3.5vw,20px);-webkit-line-clamp:2}.metric-label{font-size:12px}}@media (max-width: 360px){.metric-value{font-size:clamp(12px,3vw,16px);-webkit-line-clamp:3;line-height:.9}.metric-card{padding:12px;min-height:80px}}.metric-icon{font-size:24px}.attendance-statistics-header{margin-bottom:20px;padding-bottom:16px}.attendance-statistics-title{font-size:20px}.statistics-content{grid-template-columns:1fr;gap:24px}.bottom-section-content{flex-direction:column;gap:16px;align-items:flex-start}.btn-download-excel{width:100%;justify-content:center}.chart-wrapper{width:200px;height:200px}}.modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:2000;align-items:center;justify-content:center;padding:20px}.modal-content{background:#fff;border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0003}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.modal-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.modal-close{background:transparent;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s}.modal-close:hover{background:#f3f4f6;color:#1f2937}.modal-form{padding:24px}.form-group-modal{margin-bottom:20px}.form-label-modal{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:8px}.required{color:#ef4444}.form-input-modal,.form-textarea-modal,.form-select-modal{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:15px;color:#1f2937;transition:border-color .3s;font-family:inherit}.form-input-modal:focus,.form-textarea-modal:focus,.form-select-modal:focus{outline:none;border-color:#059669}.form-textarea-modal{resize:vertical;min-height:100px}.image-upload-area{border:2px dashed #d1d5db;border-radius:8px;padding:32px;text-align:center;cursor:pointer;transition:all .3s;background:#f9fafb;margin-bottom:12px}.image-upload-area:hover{border-color:#059669;background:#eff6ff}.upload-icon{font-size:32px;color:#6b7280;margin-bottom:8px}.upload-text{font-size:14px;color:#6b7280;margin:0}.or-text{font-size:13px;color:#6b7280;text-align:center;margin:12px 0 8px}.form-row-modal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.datetime-input-wrapper{position:relative}.datetime-input{padding-right:40px}.datetime-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#6b7280;pointer-events:none}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid #e5e7eb}.btn-cancel{padding:12px 24px;background:#f3f4f6;color:#374151;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.btn-cancel:hover{background:#e5e7eb}.btn-add-event-submit{padding:12px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.btn-add-event-submit:hover{background:#047857}@media (max-width: 768px){.modal-overlay{padding:20px 12px 12px;align-items:flex-start}.modal-content{max-width:100%;margin:0;max-height:calc(100vh - 40px);border-radius:12px}.modal-header{padding:16px}.modal-title{font-size:20px}.modal-close{width:28px;height:28px;font-size:20px}.modal-form{padding:16px}.form-group-modal{margin-bottom:16px}.form-label-modal{font-size:13px;margin-bottom:6px}.form-input-modal,.form-textarea-modal,.form-select-modal{padding:10px 14px;font-size:16px!important}.form-row-modal{grid-template-columns:1fr;gap:12px}.modal-actions{flex-direction:column-reverse;gap:10px;margin-top:24px;padding-top:20px}.btn-cancel,.btn-add-event-submit,.btn-save{width:100%;padding:14px 24px;font-size:16px}}@media (max-width: 480px){.modal-overlay{padding:16px 8px 8px}.modal-content{max-height:calc(100vh - 32px)}.modal-header{padding:12px}.modal-title{font-size:18px}.modal-form{padding:12px}.form-group-modal{margin-bottom:14px}}.scanner-body{background:#f8fafc;min-height:100vh;padding-bottom:90px}.scanner-header{background:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 3px #0000001a;position:sticky;top:0;z-index:110}.scanner-header-left{display:flex;align-items:center;gap:12px}.scanner-icon{width:32px;height:32px;border-radius:8px;background:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}.scanner-title{margin:0;font-size:24px;font-weight:700;color:#111827}.scanner-header-right{position:relative}.scanner-user-menu{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .2s}.scanner-user-menu:hover{background:#f3f4f6}.scanner-user-icon{font-size:22px;color:#4b5563}.scanner-user-name{font-size:14px;color:#111827;font-weight:600}.scanner-dropdown-arrow{font-size:12px;color:#6b7280;transition:transform .2s}.scanner-user-menu.active .scanner-dropdown-arrow{transform:rotate(180deg)}.scanner-dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000001f;padding:8px 0;min-width:200px;display:none;z-index:120}.scanner-dropdown-menu.show{display:block}.scanner-dropdown-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 14px;background:none;border:none;color:#111827;font-size:14px;text-align:left;cursor:pointer;text-decoration:none;transition:background .2s}.scanner-dropdown-item i{width:16px;color:#6b7280}.scanner-dropdown-item:hover{background:#f3f4f6}.scanner-dropdown-item.danger,.scanner-dropdown-item.danger i{color:#ef4444}.scanner-main{padding:24px 16px 100px;max-width:1200px;margin:0 auto}.scanner-events-section{margin-top:0}.scanner-section-header{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}.scanner-section-title{font-size:24px;font-weight:700;color:#111827;margin:0}.scanner-section-subtitle{font-size:16px;color:#6b7280;margin:0}.scanner-loading{padding:24px;text-align:center;color:#6b7280;background:#fff;border-radius:12px;border:1px solid #e5e7eb}.scanner-events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.scanner-event-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a;transition:transform .2s,box-shadow .2s}.scanner-event-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.scanner-event-card .event-image-student{height:180px}.scanner-bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;background:#fff;border-top:1px solid #e5e7eb;padding:12px 0 16px;z-index:120;height:85px;box-sizing:border-box;gap:70px}.scanner-nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#9ca3af;font-weight:500;padding:0;transition:color .2s}.scanner-nav-item .scanner-nav-icon{font-size:28px}.scanner-nav-item .scanner-nav-label{font-size:13px;font-weight:500}.scanner-nav-item.active,.scanner-nav-item.active .scanner-nav-icon{color:#10b981}.scanner-nav-item.primary{display:flex;flex-direction:column;align-items:center;gap:6px;color:#9ca3af;background:transparent;padding:0}.scanner-nav-item.primary .scanner-nav-icon-wrapper{background:#d1fae5;color:#10b981;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin-top:-30px;box-shadow:none}.scanner-nav-item.primary .scanner-nav-label{font-size:13px;font-weight:500;color:#9ca3af;margin-top:4px}.scanner-nav-item:not(.primary):hover{color:#6b7280}@media (max-width: 768px){.scanner-header{padding:14px 16px}.scanner-title{font-size:20px}.scanner-main{padding:20px 16px 100px}.scanner-events-grid{grid-template-columns:1fr;gap:16px}.scanner-nav-item:not(.primary){padding:8px 16px}}.student-body{background:#fff;min-height:100vh;padding-bottom:80px}.student-header{background:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0000001a;position:sticky;top:0;z-index:100}.student-header-left{display:flex;align-items:center}.student-app-name{font-size:24px;font-weight:700;color:#059669;margin:0}.student-header-right{position:relative}.student-user-menu{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px;border-radius:8px;transition:background .3s}.student-user-menu:hover{background:#f3f4f6}.student-user-icon{font-size:28px;color:#6b7280}.student-dropdown-arrow{font-size:12px;color:#6b7280;transition:transform .3s}.student-user-menu.active .student-dropdown-arrow{transform:rotate(180deg)}.student-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 4px 12px #00000026;min-width:200px;z-index:1000;display:none;overflow:hidden}.student-dropdown-menu.show{display:block}.student-dropdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#374151;text-decoration:none;font-size:14px;transition:background .2s;border-bottom:1px solid #f3f4f6}.student-dropdown-item:last-child{border-bottom:none}.student-dropdown-item:hover{background:#f9fafb}.student-dropdown-item i{font-size:16px;color:#6b7280;width:20px;text-align:center}.student-dropdown-item:last-child{color:#ef4444}.student-dropdown-item:last-child i{color:#ef4444}.student-main{padding:24px 16px}.student-container{max-width:1200px;margin:0 auto}.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;width:100%;box-sizing:border-box}.event-card-student{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000001a;transition:transform .3s,box-shadow .3s;position:relative;cursor:pointer;width:100%;box-sizing:border-box}.event-card-student:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.event-badge{position:absolute;top:12px;right:12px;background:#fff;color:#6b7280;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;z-index:10;box-shadow:0 2px 4px #0000001a}.event-badge.inactive{background:#fff;color:#6b7280}.event-badge.active{background:#10b981;color:#fff}.event-image-student{width:100%;height:200px;overflow:hidden;position:relative}.event-image-student img{width:100%;height:100%;object-fit:cover}.event-icon-placeholder{font-size:64px;color:#059669;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.event-icon-placeholder-text{padding:20px;color:#fff;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.placeholder-text-large{font-size:24px;font-weight:700;margin:4px 0}.placeholder-text-medium{font-size:16px;font-weight:600;margin:4px 0}.placeholder-text-small{font-size:12px;font-weight:400;margin:2px 0}.event-content-student{padding:16px}.event-title-student{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 8px;line-height:1.3}.event-description-student{font-size:14px;color:#6b7280;margin:0 0 12px}.event-details-student{display:flex;flex-direction:column;gap:8px}.event-detail-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7280}.detail-icon{font-size:14px;color:#9ca3af;width:16px}.student-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:center;align-items:flex-end;padding:12px 0 16px;z-index:100;height:85px;box-sizing:border-box;gap:70px}.student-nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#9ca3af;padding:0;transition:color .2s}.student-nav-item.active{color:#10b981}.student-nav-icon{font-size:28px}.student-nav-label{font-size:13px;font-weight:500}.student-nav-item.active .student-nav-icon{color:#10b981}@media (max-width: 768px){.events-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 8px}.event-card-student{border-radius:10px;box-shadow:0 1px 4px #0000001a}.event-image-student{height:160px}.event-card-student:hover{transform:translateY(-2px)}.student-app-name{font-size:20px}}@media (max-width: 480px){.events-grid{grid-template-columns:1fr;gap:12px;padding:0 4px}.event-card-student{border-radius:8px;margin-bottom:8px}.event-image-student{height:140px}.event-content-student{padding:12px}.event-title-student{font-size:16px;line-height:1.3}.event-description-student{font-size:13px;line-height:1.4}}@media (max-width: 480px){.events-grid{grid-template-columns:1fr}.student-main{padding:16px 12px}}.profile-picture-required-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;padding:40px 20px;text-align:center}.profile-picture-placeholder-large{width:200px;height:200px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;margin-bottom:32px}.profile-placeholder-icon{font-size:100px;color:#9ca3af}.required-heading{font-size:28px;font-weight:700;color:#1f2937;margin:0 0 16px}.required-description{font-size:16px;color:#4b5563;line-height:1.6;max-width:500px;margin:0 0 32px}.instruction-box{background:#eff6ff;border:2px solid #059669;border-radius:12px;padding:20px 24px;max-width:500px;width:100%}.instruction-text{font-size:15px;color:#374151;margin:0;line-height:1.6}.instruction-text strong{color:#1f2937;font-weight:700}@media (max-width: 768px){.profile-picture-placeholder-large{width:150px;height:150px;margin-bottom:24px}.profile-placeholder-icon{font-size:80px}.required-heading{font-size:24px}.required-description{font-size:15px}.instruction-box{padding:16px 20px}}.qr-code-display-container{max-width:400px;margin:0 auto;padding:24px 16px}.download-id-button-wrapper{text-align:center;margin-bottom:20px}.btn-download-id-card{padding:12px 24px;background:#059669;color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .3s;box-shadow:0 2px 8px #0596694d}.btn-download-id-card:hover{background:#047857}.digital-id-card{width:100%;max-width:400px;aspect-ratio:2.5 / 4.8;background-image:url(/CARDHOLDER.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:20px;position:relative;overflow:hidden;box-shadow:0 8px 24px #0003;display:flex;flex-direction:column}.id-card-background{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.id-card-circle{position:absolute;aspect-ratio:1 / 1;border-radius:50%;background:#ffffff1a}.circle-1{width:150px;height:150px;top:-50px;left:-50px}.circle-2{width:120px;height:120px;top:60%;right:-40px}.circle-3{width:100px;height:100px;bottom:10%;left:10%}.circle-4{width:80px;height:80px;top:20%;right:20%}.id-card-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:20px 20px 28px}.id-card-top-section{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.id-card-logo-left{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}.logo-circle{width:50px;height:50px;aspect-ratio:1 / 1;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.id-card-logo-img-left{width:70px;height:70px;aspect-ratio:1 / 1;object-fit:cover;border-radius:50%;flex-shrink:0;border:2px solid white;background:#fff}.id-card-logo-img-right{width:65px;height:65px;aspect-ratio:1 / 1;object-fit:cover;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.3);background:#fff}.logo-text-wrapper{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}.logo-text-college{font-size:10px;font-weight:600;font-family:Helvetica,Helvetica Neue,Arial,sans-serif;color:#fff;margin:0;line-height:1.3;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.logo-text-school{font-size:16px;font-weight:800;font-family:Helvetica,Helvetica Neue,Arial,sans-serif;color:#fff;margin:3px 0 0;letter-spacing:1.5px;text-shadow:0 1px 3px rgba(0,0,0,.3)}.id-card-logo-right{display:flex;align-items:center;justify-content:center;flex-shrink:0}.id-card-middle-section{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:10px 0;min-height:0;max-height:fit-content}.id-card-profile-picture{width:150px;height:150px;border-radius:50%;border:5px solid white;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0003;aspect-ratio:1 / 1;flex-shrink:0;position:relative;clip-path:circle(50% at 50% 50%)}.id-profile-img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:cover;object-position:center;border-radius:50%;clip-path:circle(50% at 50% 50%);-webkit-clip-path:circle(50% at 50% 50%)}.id-profile-icon{font-size:50px;color:#059669}.id-card-student-name{font-size:24px;font-weight:800;font-family:Helvetica,Helvetica Neue,Arial,sans-serif;color:#fff;margin:0;text-align:center;letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.2);line-height:1.2;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;padding:0 8px;box-sizing:border-box}.id-card-student-name.long-name{font-size:20px!important}.id-card-student-name.very-long-name{font-size:18px!important}.id-card-student-name.extremely-long-name{font-size:16px!important}.id-card-student-name.ultra-long-name{font-size:14px!important}.id-card-student-id{font-size:11px;font-weight:700;font-family:Helvetica,Helvetica Neue,Arial,sans-serif;color:#ffffffe6;margin:0 0 4px;text-align:center;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.id-card-course-year{font-size:13px;font-weight:600;font-family:Helvetica,Helvetica Neue,Arial,sans-serif;color:#fffffff2;margin:0;text-align:center;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.id-card-bottom-section{margin-top:auto;display:flex;justify-content:center;align-items:center;padding:12px 10px;border-top:2px solid rgba(255,255,255,.3);min-height:fit-content;overflow:visible}.id-card-qr-wrapper{background:#fff;padding:8px;border-radius:8px;display:inline-block;max-width:calc(100% - 16px);box-sizing:border-box;margin:0 auto}.id-card-qrcode{display:block;width:260px;height:260px;max-width:100%;object-fit:contain}@media (max-width: 480px){.qr-code-display-container{padding:16px 12px}.digital-id-card{border-radius:16px}.id-card-content{padding:16px}.id-card-profile-picture{width:130px;height:130px;aspect-ratio:1 / 1}.id-card-student-name{font-size:18px}.id-card-student-name.long-name{font-size:16px!important}.id-card-student-name.very-long-name{font-size:14px!important}.id-card-student-name.extremely-long-name{font-size:12px!important}.id-card-student-name.ultra-long-name{font-size:11px!important}.id-card-course-year{font-size:11px}.id-card-middle-section{gap:6px;margin:8px 0}.id-card-bottom-section{padding:10px 8px!important}.id-card-qr-wrapper{padding:6px!important;max-width:calc(100% - 20px)!important}.id-card-qrcode{width:260px!important;height:260px!important;max-width:100%!important}.id-card-bottom-section{padding:10px 6px}.logo-circle{width:40px;height:40px;aspect-ratio:1 / 1}.logo-text-college{font-size:9px}.id-card-student-id{font-size:10px}.logo-text-school{font-size:12px}}.qr-code-page-header{text-align:center;margin-bottom:32px}.qr-code-page-title{font-size:32px;font-weight:700;color:#1f2937;margin:0 0 8px}.qr-code-page-subtitle{font-size:16px;color:#6b7280;margin:0}.qr-code-card{background:#fff;border:2px solid #e5e7eb;border-radius:16px;padding:32px;box-shadow:0 4px 12px #0000001a}.qr-code-student-info{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding-bottom:24px;border-bottom:2px solid #e5e7eb}.qr-code-profile-picture{width:80px;height:80px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:3px solid #059669;clip-path:circle(50% at 50% 50%)}.qr-profile-img{width:100%;height:100%;object-fit:cover;border-radius:50%;clip-path:circle(50% at 50% 50%)}.qr-profile-icon{font-size:40px;color:#059669}.qr-code-student-details{flex:1}.qr-student-name{font-size:20px;font-weight:700;color:#1f2937;margin:0 0 8px}.qr-student-id{font-size:16px;font-weight:600;color:#374151;margin:0 0 4px}.qr-student-course{font-size:14px;font-weight:500;color:#6b7280;margin:0}.qr-code-display-section{display:flex;flex-direction:column;align-items:center;margin-bottom:32px}.qr-code-wrapper{background:#fff;padding:20px;border-radius:12px;border:2px solid #059669;margin-bottom:16px;box-shadow:0 2px 8px #0596691a}.qrcode-canvas{display:block;max-width:100%;height:auto}.qr-code-instruction{font-size:14px;color:#6b7280;text-align:center;margin:0;line-height:1.5}.qr-code-actions{display:flex;gap:12px;justify-content:center}.btn-download-qr,.btn-refresh-qr{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s}.btn-download-qr{background:#059669;color:#fff}.btn-download-qr:hover{background:#047857}.btn-refresh-qr{background:#fff;color:#059669;border:2px solid #059669}.btn-refresh-qr:hover{background:#eff6ff}@media (max-width: 768px){.qr-code-card{padding:24px 20px}.qr-code-student-info{flex-direction:column;text-align:center;gap:16px}.qr-code-student-details{width:100%}.qr-code-actions{flex-direction:column}.btn-download-qr,.btn-refresh-qr{width:100%;justify-content:center}.qr-code-page-title{font-size:28px}}.success-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.success-modal-content{background:#fff;border-radius:16px;padding:32px;max-width:360px;width:90%;text-align:center;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.success-modal-icon{width:70px;height:70px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}.success-modal-icon i{font-size:36px;color:#fff}.success-modal-title{font-size:22px;font-weight:700;color:#1f2937;margin:0 0 12px}.success-modal-message{font-size:15px;color:#4b5563;margin:0 0 8px;line-height:1.5}.success-modal-hint{font-size:13px;color:#9ca3af;margin:0 0 24px}.success-modal-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:12px 48px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.success-modal-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.success-modal-btn:active{transform:translateY(0)}.profile-page-container{max-width:900px;margin:0 auto;padding:24px 16px}.profile-header-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.profile-page-title{font-size:28px;font-weight:700;color:#1f2937;margin:0}.btn-edit-profile{padding:10px 20px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .3s}.btn-edit-profile:hover{background:#047857}.profile-content-wrapper{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-bottom:40px}.profile-picture-section{display:flex;justify-content:center}.profile-picture-box{position:relative;width:200px;height:200px}.profile-picture-display{width:200px;height:200px;background:#eff6ff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}.profile-picture-icon{font-size:100px;color:#059669}.profile-picture-img{width:100%;height:100%;object-fit:cover}.profile-picture-camera{position:absolute;bottom:8px;right:8px;width:40px;height:40px;background:#059669;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;box-shadow:0 2px 8px #0003;transition:background .3s}.profile-picture-camera:hover{background:#047857}.profile-info-section{display:flex;flex-direction:column;gap:24px}.profile-name{font-size:24px;font-weight:700;color:#1f2937;margin:0}.profile-role{font-size:16px;color:#059669;font-weight:600;margin-top:-8px}.profile-details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.profile-detail-item{background:#f9fafb;border-radius:8px;padding:16px}.profile-detail-label{display:block;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.profile-detail-value{font-size:15px;font-weight:500;color:#1f2937;margin:0;line-height:1.4}.profile-detail-item.status-active{background:#eff6ff;border:1px solid #059669}.profile-detail-item.status-active .profile-detail-label{color:#059669}.profile-detail-item.status-active .profile-detail-value{color:#059669;display:flex;align-items:center;gap:8px}.status-indicator{width:8px;height:8px;background:#10b981;border-radius:50%;display:inline-block}.developer-section{margin-top:48px;padding:24px;background:#f9fafb;border-radius:12px;text-align:center}.developer-title{font-size:16px;font-weight:700;color:#1f2937;margin:0 0 12px}.developer-text{font-size:14px;color:#6b7280;margin:0;line-height:1.6}.developer-name{color:#059669;font-weight:600}@media (max-width: 768px){.profile-content-wrapper{grid-template-columns:1fr;gap:24px}.profile-picture-section{justify-content:center}.profile-details-grid{grid-template-columns:1fr}.profile-header-section{flex-direction:column;align-items:flex-start;gap:16px}.btn-edit-profile{width:100%;justify-content:center}.developer-section{padding:20px 16px}.form-row-edit{grid-template-columns:1fr}.edit-form-actions{flex-direction:column-reverse}.btn-cancel-edit,.btn-save-changes{width:100%;justify-content:center}}.edit-profile-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.btn-cancel-edit-top{width:36px;height:36px;background:#059669;color:#fff;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:background .3s}.btn-cancel-edit-top:hover{background:#047857}.edit-profile-form{display:flex;flex-direction:column;gap:20px}.form-row-edit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.form-group-edit{display:flex;flex-direction:column;gap:8px}.form-label-edit{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.form-input-edit,.form-select-edit{padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:15px;color:#1f2937;background:#fff;transition:border-color .3s;font-family:inherit}.form-input-edit:focus,.form-select-edit:focus{outline:none;border-color:#059669}.form-input-edit.readonly{background:#f9fafb;color:#6b7280;cursor:not-allowed}.form-select-edit{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}.academic-status-edit{margin-top:8px}.status-box-edit{background:#eff6ff;border:1px solid #059669;border-radius:8px;padding:16px;display:flex;justify-content:space-between;align-items:center;margin-top:8px}.status-text-edit{font-size:15px;font-weight:600;color:#059669}.status-indicator-edit{width:10px;height:10px;background:#10b981;border-radius:50%;display:inline-block}.edit-form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid #e5e7eb}.btn-cancel-edit{padding:12px 24px;background:#fff;color:#374151;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.btn-cancel-edit:hover{background:#f9fafb;border-color:#d1d5db}.btn-save-changes{padding:12px 24px;background:#10b981;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .3s}.btn-save-changes:hover{background:#059669}.btn-save-changes i{font-size:14px}.profile-picture-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:2000;align-items:center;justify-content:center;padding:20px}.profile-picture-modal-content{background:#fff;border-radius:12px;width:100%;max-width:500px;box-shadow:0 10px 40px #0003}.profile-picture-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.profile-picture-modal-title{font-size:20px;font-weight:700;color:#1f2937;margin:0}.profile-picture-modal-close{background:transparent;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s}.profile-picture-modal-close:hover{background:#f3f4f6;color:#1f2937}.profile-picture-modal-body{padding:32px 24px}.profile-picture-upload-area{border:2px dashed #d1d5db;border-radius:12px;padding:60px 20px;text-align:center;cursor:pointer;transition:all .3s;background:#f9fafb;position:relative;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}.profile-picture-upload-area:hover{border-color:#059669;background:#eff6ff}.upload-arrow-icon{font-size:48px;color:#9ca3af;margin-bottom:16px}.upload-click-text{font-size:18px;font-weight:600;color:#374151;margin:0 0 8px}.upload-file-info{font-size:14px;color:#6b7280;margin:0}.profile-picture-preview-img{max-width:100%;max-height:300px;border-radius:8px;object-fit:contain}.profile-picture-modal-actions{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.btn-cancel-profile{padding:12px 24px;background:#f3f4f6;color:#374151;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.btn-cancel-profile:hover{background:#e5e7eb}.btn-save-picture{padding:12px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.btn-save-picture:hover{background:#047857}@media (max-width: 768px){.profile-picture-modal-content{max-width:100%;margin:20px}.profile-picture-upload-area{padding:40px 16px;min-height:180px}.upload-arrow-icon{font-size:40px}.profile-picture-modal-actions{flex-direction:column-reverse}.btn-cancel-profile,.btn-save-picture{width:100%}}.crop-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;z-index:3000;align-items:center;justify-content:center;padding:20px;pointer-events:auto}.crop-modal-overlay>*{pointer-events:auto!important}.crop-modal-overlay,.crop-modal-overlay *{pointer-events:auto!important}.crop-modal-content{background:#fff;border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.crop-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb}.crop-modal-title{font-size:20px;font-weight:700;color:#1f2937;margin:0}.crop-modal-actions-header{display:flex;gap:8px;align-items:center}.crop-btn-reset,.crop-btn-confirm,.crop-btn-cancel{width:36px;height:36px;border:none;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s}.crop-btn-reset{background:#f3f4f6;color:#6b7280}.crop-btn-reset:hover{background:#e5e7eb;color:#374151}.crop-btn-confirm{background:#10b981;color:#fff}.crop-btn-confirm:hover{background:#059669}.crop-btn-cancel{background:#f3f4f6;color:#6b7280}.crop-btn-cancel:hover{background:#e5e7eb;color:#374151}.crop-modal-body{padding:24px}.crop-instructions{font-size:14px;color:#6b7280;margin:0 0 20px;line-height:1.5;text-align:center}.crop-container-wrapper{display:flex;justify-content:center;align-items:center;margin-bottom:16px;padding:20px;background:#f9fafb;border-radius:8px}.crop-container{width:100%;max-width:500px;height:400px;background:#f3f4f6;border-radius:8px;overflow:hidden;position:relative;pointer-events:auto!important;z-index:1}.crop-container img{max-width:100%;max-height:100%;display:block;pointer-events:auto!important;user-select:none;-webkit-user-select:none}.crop-container .cropper-view-box{border-radius:0;outline:2px solid rgba(255,255,255,.9);outline-offset:-2px}.crop-container .cropper-face{border-radius:50%;background-color:#0006}.crop-container .cropper-crop-box{border:2px solid rgba(255,255,255,.9)!important;cursor:move!important;pointer-events:auto!important;z-index:10!important;position:relative!important;overflow:visible!important;touch-action:none!important}.crop-container .cropper-line{background-color:#fff6}.crop-container .cropper-point{background-color:#fffffff2!important;border:2px solid rgba(0,0,0,.4)!important;width:14px!important;height:14px!important;border-radius:2px;opacity:1!important;cursor:pointer!important;pointer-events:auto!important;z-index:30!important;position:absolute!important;touch-action:none!important;-webkit-user-select:none!important;user-select:none!important}.crop-container .cropper-point.point-se{cursor:nwse-resize;border-top-left-radius:0}.crop-container .cropper-point.point-sw{cursor:nesw-resize;border-top-right-radius:0}.crop-container .cropper-point.point-nw{cursor:nwse-resize;border-bottom-right-radius:0}.crop-container .cropper-point.point-ne{cursor:nesw-resize;border-bottom-left-radius:0;position:absolute!important;right:-7px!important;top:-7px!important}.crop-container .cropper-point.point-nw{cursor:nwse-resize;border-bottom-right-radius:0;position:absolute!important;left:-7px!important;top:-7px!important}.crop-container .cropper-point.point-se{cursor:nwse-resize;border-top-left-radius:0;position:absolute!important;right:-7px!important;bottom:-7px!important}.crop-container .cropper-point.point-sw{cursor:nesw-resize;border-top-right-radius:0;position:absolute!important;left:-7px!important;bottom:-7px!important}.crop-container .cropper-point.point-n,.crop-container .cropper-point.point-s,.crop-container .cropper-point.point-e,.crop-container .cropper-point.point-w{display:none}.crop-container .cropper-crop-box:hover{cursor:move!important}.crop-container .cropper-container,.crop-container .cropper-canvas,.crop-container .cropper-drag-box,.crop-container .cropper-wrap-box,.crop-container .cropper-view-box{pointer-events:auto!important;touch-action:none}.crop-tip{font-size:13px;color:#9ca3af;margin:0;font-style:italic;text-align:center}@media (max-width: 768px){.crop-modal-content{max-width:100%;max-height:95vh;margin:10px}.crop-container{height:300px}.crop-modal-header,.crop-modal-body{padding:16px}}.preview-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:2000;align-items:center;justify-content:center;padding:20px}.preview-modal-content{background:#fff;border-radius:12px;width:100%;max-width:500px;box-shadow:0 10px 40px #0003}.preview-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.preview-modal-title{font-size:20px;font-weight:700;color:#1f2937;margin:0}.preview-modal-close{background:transparent;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s}.preview-modal-close:hover{background:#f3f4f6;color:#1f2937}.preview-modal-body{padding:24px;text-align:center}.preview-section-title{font-size:16px;font-weight:700;color:#1f2937;margin:0 0 8px}.preview-instruction{font-size:14px;color:#6b7280;margin:0 0 24px;line-height:1.5}.preview-image-container{display:flex;justify-content:center;align-items:center;margin-bottom:24px}.preview-circular-image{width:200px;height:200px;border-radius:50%;object-fit:cover;border:4px solid #059669;box-shadow:0 4px 12px #00000026}.preview-modal-actions{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.btn-cancel-preview{padding:12px 24px;background:#f3f4f6;color:#374151;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.btn-cancel-preview:hover{background:#e5e7eb}.btn-save-preview{padding:12px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .3s}.btn-save-preview:hover{background:#047857}@media (max-width: 768px){.preview-modal-content{max-width:100%;margin:20px}.preview-circular-image{width:150px;height:150px}.confirm-attendance-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:2500;align-items:center;justify-content:center;padding:20px}.confirm-attendance-modal-content{background:#fff;border-radius:16px;width:100%;max-width:400px;box-shadow:0 10px 40px #0003;overflow:hidden}.confirm-attendance-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb}.confirm-attendance-modal-title{font-size:20px;font-weight:700;color:#1f2937;margin:0}.confirm-attendance-modal-close{background:transparent;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s}.confirm-attendance-modal-close:hover{background:#f3f4f6;color:#1f2937}.confirm-attendance-modal-body{padding:32px 24px;text-align:center}.confirm-attendance-profile-picture{margin-bottom:20px;display:flex;justify-content:center}.confirm-attendance-profile-img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #f3f4f6}.confirm-attendance-profile-placeholder{width:120px;height:120px;border-radius:50%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;border:4px solid #e5e7eb}.confirm-attendance-profile-placeholder i{font-size:48px;color:#9ca3af}.confirm-attendance-student-name{font-size:20px;font-weight:700;color:#1f2937;margin:0 0 8px}.confirm-attendance-student-id{font-size:14px;color:#6b7280;margin:0 0 20px}.confirm-attendance-recording-badge{display:inline-block;padding:8px 16px;background:#fef3c7;color:#d97706;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:8px}.confirm-attendance-modal-actions{display:flex;gap:12px;padding:20px 24px;border-top:1px solid #e5e7eb;flex-wrap:wrap}.confirm-attendance-btn-scan-another,.confirm-attendance-btn-cancel,.confirm-attendance-btn-approve{flex:1;min-width:100px;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.confirm-attendance-btn-scan-another{background:#059669;color:#fff}.confirm-attendance-btn-scan-another:hover:not(:disabled){background:#047857}.confirm-attendance-btn-cancel{background:#f3f4f6;color:#374151}.confirm-attendance-btn-cancel:hover:not(:disabled){background:#e5e7eb}.confirm-attendance-btn-approve{background:#f97316;color:#fff}.confirm-attendance-btn-approve:hover:not(:disabled){background:#ea580c}.confirm-attendance-btn-scan-another:disabled,.confirm-attendance-btn-cancel:disabled,.confirm-attendance-btn-approve:disabled{opacity:.6;cursor:not-allowed}.confirm-attendance-modal-content{max-width:100%;margin:20px}.confirm-attendance-modal-actions{flex-direction:column}.confirm-attendance-btn-scan-another,.confirm-attendance-btn-cancel,.confirm-attendance-btn-approve{width:100%}.preview-modal-actions{flex-direction:column-reverse}.btn-cancel-preview,.btn-save-preview{width:100%}}.btn-add-event{padding:10px 20px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .3s}.btn-add-event:hover{background:#047857}.dashboard-main{padding:24px}.dashboard-container{max-width:1400px;margin:0 auto;width:100%;box-sizing:border-box}.events-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.events-title{font-size:32px;font-weight:700;color:#1f2937;margin:0}.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}.event-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;transition:transform .3s,box-shadow .3s}.event-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.event-image-container{position:relative;width:100%;height:200px;overflow:hidden}.event-image{width:100%;height:100%;object-fit:cover}.event-status{position:absolute;top:12px;right:12px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase}.event-status.active{background:#10b981;color:#fff}.event-status.inactive{background:#6b7280;color:#fff}.event-content{padding:20px}.event-title{font-size:20px;font-weight:700;color:#1f2937;margin-bottom:12px;line-height:1.3}.event-description{font-size:14px;color:#6b7280;line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.event-details{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}.event-detail-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#4b5563}.detail-icon{color:#059669;font-size:14px;width:16px}.event-actions{display:flex;gap:12px}.btn-edit{flex:1;padding:10px 16px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .3s}.btn-edit:hover{background:#047857}.btn-delete{flex:1;padding:10px 16px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .3s}.btn-delete:hover{background:#dc2626}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:center;align-items:flex-end;padding:12px 0 16px;z-index:100;height:85px;box-sizing:border-box;gap:70px}.nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#9ca3af;padding:0;transition:color .2s}.nav-item.active{color:#10b981}.nav-icon{font-size:28px}.nav-label{font-size:13px;font-weight:500}@media (max-width: 768px){.dashboard-body{padding-bottom:70px}.dashboard-header{flex-direction:column;gap:12px;align-items:flex-start;padding:16px;position:sticky;top:0}.dashboard-header-left{width:100%;justify-content:space-between}.dashboard-icon,.dashboard-title{font-size:20px}.dashboard-header-right{width:100%;justify-content:flex-end}.user-info{padding:6px 10px}.user-icon{font-size:28px}.user-name{font-size:14px}.user-dropdown{min-width:200px;right:0;left:auto}.dashboard-main{padding:16px}.dashboard-container{max-width:100%;padding:0}.events-header{flex-direction:column;gap:16px;align-items:stretch;margin-bottom:20px}.events-title{font-size:24px;margin:0}.btn-add-event{width:100%;justify-content:center;padding:12px 20px;font-size:16px}.events-grid{grid-template-columns:1fr;gap:16px}.event-card{border-radius:10px}.event-image-container{height:180px}.event-content{padding:16px}.event-title{font-size:18px;margin-bottom:10px}.event-description{font-size:13px;margin-bottom:12px}.event-details{gap:6px;margin-bottom:12px;padding-bottom:12px}.event-detail-item{font-size:13px}.event-actions{flex-direction:column;gap:8px}.btn-edit,.btn-delete{width:100%;padding:12px 16px;font-size:15px}.nav-label{font-size:10px}.nav-item{padding:8px 12px;min-width:0;flex:1}.nav-icon{font-size:20px}.bottom-nav{padding:10px 0;padding-bottom:max(10px,env(safe-area-inset-bottom))}}@media (max-width: 480px){.dashboard-header{padding:12px}.dashboard-title{font-size:18px}.dashboard-main{padding:12px}.events-title{font-size:20px}.event-image-container{height:160px}.event-content{padding:12px}.event-title{font-size:16px}.event-description{font-size:12px}.nav-label{font-size:9px}.nav-item{padding:6px 8px}.nav-icon{font-size:18px}}.qr-scanner-title{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:32px}.qr-scanner-section{background:#fff;border-radius:16px;box-shadow:0 2px 8px #0000001a;padding:32px}.qr-scanner-header{display:flex;align-items:center;gap:16px;margin-bottom:32px;padding-bottom:24px;border-bottom:2px solid #e5e7eb}.qr-icon-large{font-size:48px;color:#059669}.qr-scanner-subtitle{font-size:24px;font-weight:700;color:#1f2937;margin:0 0 4px}.qr-scanner-description{font-size:16px;color:#6b7280;margin:0}.qr-controls-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:32px}.qr-control-group{display:flex;flex-direction:column;gap:12px}.qr-control-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#374151}.control-icon{color:#059669;font-size:16px}.qr-select{padding:12px 40px 12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;color:#1f2937;background:#fff;cursor:pointer;transition:border-color .3s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.qr-select:focus{outline:none;border-color:#059669}.qr-status-text{font-size:12px;color:#6b7280;margin:0}.scan-type-buttons{display:flex;gap:8px}.scan-type-btn{flex:1;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s}.scan-type-btn.active{background:#059669;color:#fff;border-color:#059669}.scan-type-btn:hover:not(.active){background:#f3f4f6;border-color:#059669}.btn-start-scanning{width:100%;padding:14px 24px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s}.btn-start-scanning:hover:not(:disabled){background:#047857}.btn-start-scanning:disabled,.btn-start-scanning.disabled{background:#9ca3af;cursor:not-allowed;opacity:.6}.btn-start-scanning.scanning{background:#ef4444}.btn-start-scanning.scanning:hover{background:#dc2626}.scanner-status-area{text-align:center;padding:48px 24px;background:#f9fafb;border-radius:12px;border:2px dashed #d1d5db}.scanner-icon-container{margin-bottom:24px}.scanner-icon-large{font-size:120px;color:#d1d5db}.scanner-status-text{font-size:24px;font-weight:700;color:#374151;margin:0 0 12px}.scanner-instruction{font-size:16px;color:#6b7280;margin:0 0 32px}.info-box{display:flex;align-items:flex-start;gap:12px;background:#eff6ff;border:2px solid #bfdbfe;border-radius:8px;padding:16px;max-width:600px;margin:0 auto;text-align:left}.info-icon{font-size:24px;color:#059669;flex-shrink:0;margin-top:2px}.info-content{flex:1}.info-text-bold{font-size:14px;font-weight:600;color:#065f46;margin:0 0 4px}.info-text{font-size:14px;color:#065f46;margin:0;line-height:1.5}.qr-reader-container{margin-top:24px;padding:24px;background:#f9fafb;border-radius:12px;text-align:center}#qr-reader{width:100%;max-width:500px;margin:0 auto;min-height:400px;position:relative}#qr-reader video{width:100%!important;height:auto!important;border-radius:12px;object-fit:cover}#qr-reader canvas{display:none}#qr-reader__scan_region{border-radius:12px;overflow:hidden}@media (max-width: 1024px){.qr-controls-grid{grid-template-columns:1fr}}@media (max-width: 768px){.qr-scanner-title{font-size:24px;margin-bottom:20px}.qr-scanner-section{padding:20px 16px;border-radius:12px}.qr-scanner-header{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:24px;padding-bottom:16px}.qr-icon-large{font-size:36px}.qr-scanner-subtitle{font-size:20px}.qr-scanner-description{font-size:14px}.qr-controls-grid{grid-template-columns:1fr;gap:16px;margin-bottom:24px}.qr-control-label{font-size:14px}.qr-control-select,.qr-control-input{font-size:16px!important;padding:12px 14px}.qr-scanner-video-container{margin-bottom:20px}.qr-scanner-actions{flex-direction:column;gap:12px}.btn-start-scanning,.btn-stop-scanning{width:100%;padding:14px 24px;font-size:16px}.scanner-icon-large{font-size:60px}.scanner-status-text{font-size:18px}.info-box{flex-direction:column;text-align:center;gap:12px}#qr-reader{min-height:300px}#qr-reader video{border-radius:8px}}.stats-title{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:24px}.stats-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}.filter-group{display:flex;flex-direction:column;gap:8px}.filter-select{padding:10px 40px 10px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;color:#1f2937;background:#fff;cursor:pointer;transition:border-color .3s;appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px}.filter-select:focus{outline:none;border-color:#059669}.total-students-card{background:linear-gradient(135deg,#d1fae5,#bfdbfe);border-radius:16px;padding:32px;display:flex;align-items:center;gap:24px;margin-bottom:40px;box-shadow:0 4px 12px #05966926}.total-students-icon{width:80px;height:80px;background:#059669;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.total-students-icon i{font-size:40px;color:#fff}.total-students-content{flex:1}.total-students-label{font-size:18px;font-weight:600;color:#065f46;margin:0 0 8px}.total-students-number{font-size:56px;font-weight:700;color:#059669;margin:0 0 4px;line-height:1}.total-students-subtitle{font-size:14px;color:#065f46;margin:0}.stats-by-course-section{margin-top:40px}.section-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.section-icon{font-size:24px;color:#059669}.section-title{font-size:24px;font-weight:700;color:#1f2937;margin:0}.course-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:24px}.course-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:24px;transition:transform .3s,box-shadow .3s}.course-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.course-card-title{font-size:16px;font-weight:700;color:#1f2937;margin:0 0 20px;line-height:1.4}.course-total{display:flex;align-items:baseline;gap:8px;margin-bottom:20px;padding-bottom:20px;border-bottom:2px solid #e5e7eb}.course-number{font-size:36px;font-weight:700;color:#059669}.course-label{font-size:16px;color:#6b7280;font-weight:500}.year-level-breakdown{margin-top:20px}.breakdown-title{font-size:14px;font-weight:600;color:#374151;margin:0 0 12px}.breakdown-list{display:flex;flex-direction:column;gap:10px}.breakdown-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f3f4f6}.breakdown-item:last-child{border-bottom:none}.year-label{font-size:14px;color:#6b7280}.year-count{font-size:16px;font-weight:600;color:#1f2937}@media (max-width: 1200px){.stats-filters,.course-cards-grid{grid-template-columns:1fr}}@media (max-width: 768px){.stats-container{padding:12px;width:100%;max-width:100%;box-sizing:border-box;overflow-x:hidden}.dashboard-container{width:100%;max-width:100%;box-sizing:border-box;padding:0;overflow-x:hidden}.stats-title{font-size:24px;margin-bottom:20px;padding:0 4px}.stats-filters{gap:16px;margin-bottom:24px;width:100%;max-width:100%;box-sizing:border-box;padding:0;margin-left:0;margin-right:0}.filter-group{gap:8px;width:100%;min-width:0}.filter-label{font-size:14px;font-weight:600}.filter-select{font-size:16px!important;padding:12px 44px 12px 14px!important;background-position:right 14px center!important;background-size:18px 18px!important;min-height:48px;width:100%;box-sizing:border-box;border-width:2px}.total-students-card{flex-direction:column;text-align:center;padding:20px}.total-students-number{font-size:40px}.total-students-icon{width:56px;height:56px}.total-students-icon i{font-size:28px}.course-card{padding:16px}.course-number{font-size:28px}.course-label{font-size:14px}.breakdown-title,.year-label{font-size:13px}.year-count{font-size:14px}}@media (max-width: 480px){.stats-container{padding:8px}.stats-title{font-size:20px;padding:0 4px}.stats-filters{gap:14px;padding:0}.filter-select{padding:12px 44px 12px 12px!important;font-size:16px!important;background-position:right 12px center!important;background-size:16px 16px!important;min-height:48px}.total-students-number{font-size:36px}.course-number{font-size:24px}}.event-attendance-section{margin-top:48px;padding-top:32px;border-top:2px solid #e5e7eb}.attendance-cards-grid{display:flex;gap:16px;margin-top:24px}.attendance-card{flex:1;border-radius:12px;padding:32px 24px;text-align:center;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center}.time-in-card,.time-out-card{background:#d1fae5}.attendance-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.time-in-icon{background:#047857}.time-in-icon i{font-size:26px;color:#fff}.time-out-icon{background:#065f46}.time-out-icon i{font-size:26px;color:#fff}.attendance-label{font-size:16px;font-weight:600;color:#374151;margin:0 0 12px}.attendance-number{font-size:52px;font-weight:700;margin:0 0 6px;line-height:1}.time-in-card .attendance-number{color:#047857}.time-out-card .attendance-number{color:#065f46}.attendance-subtitle{font-size:14px;color:#6b7280;margin:2px 0 0;font-weight:400}@media (max-width: 768px){.attendance-cards-grid{grid-template-columns:1fr}.attendance-card{padding:24px}.attendance-number{font-size:40px}.attendance-icon{width:56px;height:56px}.attendance-icon i{font-size:28px}}.attendance-page-container{max-width:900px;margin:0 auto;padding:24px 16px}.attendance-page-header{margin-bottom:32px}.attendance-page-title{font-size:32px;font-weight:700;color:#1f2937;margin:0 0 8px}.attendance-page-subtitle{font-size:16px;color:#6b7280;margin:0}.user-info-card{background:#eff6ff;border:1px solid #059669;border-radius:12px;padding:24px;margin-bottom:24px}.user-info-content{display:flex;flex-direction:column;gap:8px}.user-info-name{font-size:20px;font-weight:700;color:#1f2937;margin:0}.user-info-id{font-size:16px;font-weight:600;color:#1f2937;margin:0}.user-info-course{font-size:15px;font-weight:500;color:#059669;margin:0}.attendance-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}.summary-card{background:#fff;border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.summary-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.summary-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px}.present-icon{background:#d1fae5;color:#10b981}.partial-icon{background:#d1fae5;color:#059669}.absent-icon{background:#fee2e2;color:#ef4444}.summary-content{flex:1}.summary-label{font-size:14px;font-weight:600;color:#6b7280;margin:0 0 4px;text-transform:uppercase;letter-spacing:.5px}.summary-number{font-size:24px;font-weight:700;margin:0}.present-card .summary-number{color:#10b981}.partial-card .summary-number{color:#059669}.absent-card .summary-number{color:#ef4444}.attendance-logs-section{margin-top:32px}.attendance-logs-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.logs-icon{font-size:20px;color:#059669}.attendance-logs-title{font-size:20px;font-weight:700;color:#1f2937;margin:0}.attendance-logs-list{display:flex;flex-direction:column;gap:12px}.attendance-log-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px;transition:all .2s}.attendance-log-item:hover{border-color:#059669;box-shadow:0 2px 8px #0596691a}.log-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.absent-log-icon{background:#fee2e2;color:#ef4444}.present-log-icon{background:#d1fae5;color:#10b981}.partial-log-icon{background:#d1fae5;color:#059669}.log-content{flex:1}.log-event-name{font-size:16px;font-weight:600;color:#1f2937;margin:0 0 4px}.log-event-date{font-size:14px;color:#6b7280;margin:0}.log-badge{padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.absent-badge{background:#fee2e2;color:#dc2626}.present-badge,.partial-badge{background:#d1fae5;color:#059669}@media (max-width: 768px){.attendance-page-title{font-size:28px}.attendance-summary-grid{grid-template-columns:1fr}.summary-card{padding:16px}.user-info-card{padding:20px}.attendance-log-item{padding:14px 16px}}.users-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.users-title{font-size:32px;font-weight:700;color:#1f2937;margin:0}.users-subtitle{font-size:16px;color:#6b7280;margin:0}.users-filters{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}.users-search{flex:1;min-width:300px;position:relative}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px}.users-search-input{width:100%;padding:12px 16px 12px 44px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s}.users-search-input:focus{outline:none;border-color:#059669}.users-role-filter{display:flex;align-items:center;gap:12px}.filter-label{font-size:14px;font-weight:600;color:#374151}.users-filter-select{padding:12px 44px 12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s;appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;min-height:44px}.users-filter-select:focus{outline:none;border-color:#059669}.users-table-container{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.users-table{width:100%;border-collapse:collapse}.users-table thead{background:#f9fafb;border-bottom:2px solid #e5e7eb}.users-table th{padding:16px;text-align:left;font-size:14px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.5px}.users-table tbody tr{border-bottom:1px solid #e5e7eb;transition:background .2s}.users-table tbody tr:hover{background:#f9fafb}.users-table tbody tr:last-child{border-bottom:none}.users-table td{padding:16px;font-size:14px;color:#374151}.user-name-cell{display:flex;align-items:center;gap:12px}.user-avatar-small{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #e5e7eb}.user-avatar-placeholder-small{width:40px;height:40px;border-radius:50%;background:#f3f4f6;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:16px;border:2px solid #e5e7eb}.role-badge{display:inline-block;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.role-badge.role-admin{background:#fee2e2;color:#dc2626}.role-badge.role-student{background:#d1fae5;color:#059669}.role-badge.role-unknown{background:#f3f4f6;color:#6b7280}.users-empty{padding:60px 24px;text-align:center;color:#6b7280}.users-empty i{font-size:64px;color:#d1d5db;margin-bottom:16px}.users-empty p{font-size:18px;margin:0}@media (max-width: 1024px){.users-table-container{overflow-x:auto}.users-table{min-width:800px}}@media (max-width: 768px){.users-container{padding:12px}.users-header{flex-direction:column;align-items:stretch;gap:12px}.users-title{font-size:24px}.users-filters{flex-direction:column;gap:12px}.users-search{width:100%;font-size:16px!important;padding:12px 14px}.users-role-filter{width:100%}.users-filter-select{width:100%;font-size:16px!important;padding:12px 44px 12px 14px!important;background-position:right 14px center!important;background-size:18px 18px!important;min-height:48px;box-sizing:border-box}.users-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px}.users-table{font-size:12px;min-width:700px}.users-table th,.users-table td{padding:10px 6px;white-space:nowrap}.user-name-cell{display:flex;align-items:center;gap:8px;min-width:150px}.user-avatar-small,.user-avatar-placeholder-small{width:32px;height:32px;flex-shrink:0}.user-avatar-placeholder-small i{font-size:14px}.users-pagination{flex-direction:column;gap:12px;align-items:stretch}.users-pagination-info{text-align:center;font-size:14px}.users-pagination-controls{justify-content:center;flex-wrap:wrap;gap:8px}.btn-pagination{min-width:44px;min-height:44px;padding:10px 14px;font-size:14px}}@media (max-width: 480px){.users-table{font-size:11px;min-width:600px}.users-table th,.users-table td{padding:8px 4px}.users-container{padding:8px}.users-title{font-size:20px}.user-name-cell{min-width:120px}.user-avatar-small,.user-avatar-placeholder-small{width:28px;height:28px}.users-filter-select{padding:12px 44px 12px 12px!important;background-size:16px 16px!important;background-position:right 12px center!important}}*{max-width:100%}img,video,iframe,embed,object{max-width:100%;height:auto}@supports (padding: max(0px)){body{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.container{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}@media (max-width: 375px){body{font-size:14px}.container{padding:0 12px}.nav-container{padding:12px;flex-wrap:wrap;gap:8px}.logo-text{font-size:18px}.btn-login,.btn-register{padding:6px 16px;font-size:14px}.hero-section{padding:40px 12px}.hero-title{font-size:32px}.hero-subtitle{font-size:28px}.hero-main-card{padding:24px 16px;margin:24px auto 0}.hero-card-title{font-size:20px}.calendar-wrapper-inline{padding:12px 8px;width:100%;max-width:100%;overflow-x:hidden}.calendar-weekdays{gap:2px;width:100%;max-width:100%}.weekday{font-size:10px;padding:6px 2px}.calendar-days{gap:2px;width:100%;max-width:100%}.calendar-day{font-size:11px;padding:4px;min-height:30px;max-width:100%;box-sizing:border-box}.search-input-wrapper{padding:12px}.search-input{font-size:14px;padding:10px 12px}.btn-search{padding:10px 20px;font-size:14px}}@media (max-width: 480px){body{font-size:15px}.container{padding:0 16px}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}section,div[class*=section],div[class*=card]{max-width:100%;box-sizing:border-box}button,.btn,a[class*=btn]{min-height:44px;touch-action:manipulation}input,select,textarea{font-size:16px!important;min-height:44px}.calendar-wrapper-inline{overflow-x:hidden!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}.calendar-days,.calendar-weekdays{width:100%!important;max-width:100%!important;overflow:hidden!important;box-sizing:border-box!important}.calendar-day{max-width:100%!important;box-sizing:border-box!important;overflow:hidden!important}.hero-main-card{padding-left:12px!important;padding-right:12px!important;overflow-x:hidden!important;max-width:100%!important;box-sizing:border-box!important}.modal-overlay{padding:12px}.modal-content{max-width:calc(100vw - 24px);margin:12px}}@media (min-width: 481px) and (max-width: 768px){.container{padding:0 20px}.hero-main-card{padding:32px 24px}}@media (hover: none) and (pointer: coarse){button,.btn,a[class*=btn],.nav-item{min-height:44px;min-width:44px}button:hover,.btn:hover,.nav-item:hover{transform:none;background:transparent}*{-webkit-tap-highlight-color:rgba(5,150,105,.1);tap-highlight-color:rgba(5,150,105,.1)}button:active,.btn:active,a[class*=btn]:active,.nav-item:active,.event-card-student:active,.stat-card:active,.payment-item:active{transform:scale(.98);transition:transform .1s ease}.form-input:active,.form-select:active,.form-textarea:active{border-color:#10b981;box-shadow:0 0 0 2px #10b98133}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:2px solid #10b981;outline-offset:2px}button:focus-visible,.btn:focus-visible,a[class*=btn]:focus-visible{outline:2px solid #10b981;outline-offset:2px}button,.btn,a[class*=btn],.nav-item{touch-action:manipulation}}@media (max-width: 768px){*,.events-grid,.payment-list,.stats-grid,.officers-grid{-webkit-overflow-scrolling:touch}button,.btn,a[class*=btn],.nav-item,.event-card-student,.payment-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:active,.btn:active,a[class*=btn]:active{transition:all .15s ease}input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],textarea,select{font-size:16px!important;-webkit-text-size-adjust:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none}}@media (max-height: 500px) and (orientation: landscape){.hero-section{padding:24px}.hero-title{font-size:28px;margin-bottom:12px}.hero-main-card{margin-top:24px;padding:24px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@supports (-webkit-appearance: none) and (not (appearance: none)){body{-webkit-overflow-scrolling:touch}input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{font-size:16px!important}}@supports (-webkit-touch-callout: none){body{-webkit-overflow-scrolling:touch;-webkit-user-select:none;user-select:none}input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}.hero-section{min-height:-webkit-fill-available}}@media (hover: none) and (pointer: coarse){button,.btn,a[class*=btn]{touch-action:manipulation}}@supports (padding: env(safe-area-inset-top)){.header,header{padding-top:max(0px,env(safe-area-inset-top))}.bottom-nav,nav[class*=bottom]{padding-bottom:max(12px,env(safe-area-inset-bottom))}}.bottom-nav-5{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:space-around;align-items:flex-end;padding:8px 12px 12px;z-index:1000;height:75px;box-sizing:border-box;box-shadow:0 -2px 10px #0000000d;padding-bottom:max(12px,env(safe-area-inset-bottom));-webkit-touch-callout:none;touch-action:manipulation}.nav-item-5{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;text-decoration:none;color:#9ca3af;padding:8px 12px;min-width:56px;min-height:56px;transition:all .3s ease;cursor:pointer;background:transparent;border:none;border-radius:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(16,185,129,.1);touch-action:manipulation}.nav-item-5:hover{color:#6b7280}.nav-item-5.active{color:#10b981}.nav-icon-5{font-size:22px;transition:transform .2s ease,color .2s ease}.nav-item-5:hover .nav-icon-5{transform:scale(1.1)}.nav-item-5.active .nav-icon-5{color:#10b981;transform:scale(1.05)}.nav-label-5{font-size:11px;font-weight:500;white-space:nowrap;transition:color .2s ease}.nav-item-5.center-btn{position:relative;padding-top:0}.center-btn-circle{width:56px;height:56px;aspect-ratio:1 / 1;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;margin-top:-28px;box-shadow:0 4px 15px #10b98166;transition:all .3s ease;min-width:56px;min-height:56px;-webkit-tap-highlight-color:rgba(255,255,255,.3);touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.nav-item-5.center-btn:hover .center-btn-circle{transform:scale(1.08);box-shadow:0 6px 20px #10b98180}.nav-item-5.center-btn .nav-label-5{margin-top:6px;color:#10b981;font-weight:600}.nav-item-5.center-btn.treasurer .center-btn-circle{background:linear-gradient(135deg,#10b981,#047857);box-shadow:0 4px 15px #10b98166}.nav-item-5.center-btn.treasurer:hover .center-btn-circle{box-shadow:0 6px 20px #10b98180}.nav-item-5.center-btn.treasurer .nav-label-5{color:#10b981}.bottom-nav-3{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:space-around;align-items:flex-end;padding:8px 12px 12px;z-index:1000;height:75px;box-sizing:border-box;box-shadow:0 -2px 10px #0000000d}.nav-item-3{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;text-decoration:none;color:#9ca3af;padding:4px 16px;min-width:80px;transition:all .3s ease;cursor:pointer;background:transparent;border:none}.nav-item-3:hover{color:#6b7280}.nav-item-3.active{color:#10b981}.nav-item-3:hover .nav-icon-3{transform:translateY(-2px)}.nav-item-3.active .nav-icon-3{color:#10b981}.nav-item-3.center-btn{position:relative;margin-top:-20px}.nav-item-3.center-btn .center-btn-circle{width:60px;height:60px;aspect-ratio:1 / 1;background:linear-gradient(135deg,#10b981,#047857);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 4px 15px #10b98166;transition:all .3s ease;margin-bottom:8px}.nav-item-3.center-btn:hover .center-btn-circle{box-shadow:0 6px 20px #10b98180;transform:translateY(-2px)}.nav-item-3.center-btn .nav-label-3{margin-top:6px;color:#10b981;font-weight:600}.admin-tabs{display:flex;background:#fff;border-radius:12px;padding:4px;margin-bottom:24px;box-shadow:0 2px 8px #0000000f;max-width:600px;margin-left:auto;margin-right:auto}.admin-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:transparent;border:none;border-radius:8px;font-size:15px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .3s ease;text-decoration:none}.admin-tab:hover{background:#f3f4f6;color:#374151}.admin-tab.active{background:#10b981;color:#fff;box-shadow:0 2px 8px #10b9814d}.admin-tab i{font-size:16px}@media (max-width: 768px){.admin-tabs{margin-bottom:16px;padding:6px;border-radius:8px}.admin-tab{padding:10px 12px;font-size:14px;gap:6px;min-height:44px}.admin-tab i{font-size:14px}}@media (max-width: 480px){.admin-tabs{margin-bottom:12px;padding:4px;flex-wrap:wrap}.admin-tab{padding:8px 10px;font-size:12px;gap:4px;flex:1 1 45%;justify-content:flex-start}.admin-tab i{font-size:12px}}@media (max-width: 480px){.bottom-nav-5{padding:6px 8px 10px;height:70px}.nav-item-5{min-width:48px;padding:4px}.nav-icon-5{font-size:20px}.nav-label-5{font-size:10px}.center-btn-circle{width:52px;height:52px;aspect-ratio:1 / 1;font-size:22px;margin-top:-26px}}@supports (padding: env(safe-area-inset-bottom)){.bottom-nav-5{padding-bottom:max(12px,env(safe-area-inset-bottom));height:calc(75px + env(safe-area-inset-bottom))}.header{padding-top:max(0px,env(safe-area-inset-top))}.modal-overlay,.modal-content,.full-screen-overlay{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}@supports (-webkit-touch-callout: none){*{-webkit-overflow-scrolling:touch}input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:4px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:8px;-webkit-text-size-adjust:100%}.modal-content{border-radius:12px 12px 0 0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}}@media all and (display-mode: standalone){.header{padding-top:max(8px,env(safe-area-inset-top))}.bottom-nav-5{padding-bottom:max(16px,env(safe-area-inset-bottom))}body{margin:0;height:100vh;height:-webkit-fill-available}#root{height:100vh;height:-webkit-fill-available}}@supports (padding: max(0px)) and (padding: env(safe-area-inset-bottom)){.bottom-nav-5{padding-bottom:max(12px,env(safe-area-inset-bottom))}main{padding-bottom:calc(75px + env(safe-area-inset-bottom))}}.treasurer-body{background:#f9fafb;min-height:100vh;padding-bottom:90px;width:100%;overflow-x:hidden}.treasurer-header{background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:20px;position:sticky;top:0;z-index:100}.treasurer-header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.treasurer-header-left h1{font-size:22px;font-weight:700;margin:0}.treasurer-header-left p{font-size:14px;opacity:.9;margin:4px 0 0}.treasurer-main{padding:20px;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:40px;width:100%}.stat-card{background:linear-gradient(135deg,#fff,#f8fafc);border-radius:16px;padding:24px;box-shadow:0 4px 12px #00000014;border:1px solid #e5e7eb;display:flex;align-items:center;gap:16px;transition:transform .2s,box-shadow .2s;min-width:0}.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.stat-card-icon{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,#10b981,#047857);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;flex-shrink:0}.stat-card-value{font-size:clamp(16px,5vw,28px);font-weight:700;color:#1f2937;margin:0 0 4px;line-height:1.1;word-break:break-all;overflow-wrap:break-word;white-space:normal;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:1.2em}.stat-card-label{font-size:14px;color:#6b7280;margin:0;font-weight:500}.section-card{background:#fff;border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px #0000000f}.section-title{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 16px;display:flex;align-items:center;gap:8px}.section-title i{color:#10b981}.fee-list{display:flex;flex-direction:column;gap:12px}.fee-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#f9fafb;border-radius:12px;transition:background .2s ease;gap:12px}.fee-item:hover{background:#f3f4f6}.fee-item-left{display:flex;align-items:center;gap:12px;min-width:0}.fee-item-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}.fee-item-name{font-weight:600;color:#1f2937;font-size:15px;overflow-wrap:anywhere;word-break:break-word}.fee-item-amount{font-size:16px;font-weight:700;color:#10b981;flex-shrink:0}.payment-list{display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}.payment-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:#f9fafb;border-radius:12px;transition:all .2s ease;gap:12px;min-height:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.payment-item:hover{background:#f3f4f6;transform:translate(4px)}.payment-item-left{display:flex;flex-direction:column;gap:2px;min-width:0}.payment-student-name{font-weight:600;color:#1f2937;font-size:15px;overflow-wrap:anywhere;word-break:break-word}.payment-details{font-size:13px;color:#6b7280;overflow-wrap:anywhere;word-break:break-word}.payment-item-right{text-align:right;flex-shrink:0}@media (max-width: 480px){.fee-item{flex-direction:column;align-items:flex-start}.fee-item-amount{align-self:flex-end}}.payment-amount{font-size:16px;font-weight:700;color:#10b981}.payment-date{font-size:12px;color:#9ca3af}@media (max-width: 768px){.payment-list{gap:8px}.payment-item{padding:12px;min-height:56px;border-radius:8px}.payment-item:hover{transform:none}.payment-student-name{font-size:14px}.payment-details{font-size:12px;line-height:1.3}.payment-amount{font-size:14px}.payment-date{font-size:11px}}@media (max-width: 480px){.payment-item{flex-direction:column;align-items:flex-start;gap:8px;padding:10px}.payment-item-right{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left}.payment-amount{font-size:16px;font-weight:700}}table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a}th,td{padding:12px 16px;text-align:left;border-bottom:1px solid #e5e7eb}th{background:#f9fafb;font-weight:600;color:#374151;font-size:14px}td{color:#1f2937;font-size:14px}@media (max-width: 768px){table{font-size:13px}th,td{padding:10px 12px}@media (max-width: 480px){table,thead,tbody,th,td,tr{display:block}thead tr{position:absolute;top:-9999px;left:-9999px}tr{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;padding:12px;background:#fff}td{border:none;border-bottom:1px solid #f3f4f6;position:relative;padding-left:50%;text-align:left;white-space:normal}td:before{content:attr(data-label);position:absolute;left:12px;width:35%;padding-right:10px;white-space:nowrap;font-weight:600;color:#6b7280;font-size:12px}td:last-child{border-bottom:none}}}.table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}.table-container table{min-width:600px}.quick-action-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none}.quick-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #10b9814d}.quick-action-btn i{font-size:20px}.search-container{position:relative;margin-bottom:20px}.search-input{width:100%;padding:14px 20px 14px 48px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;transition:all .3s ease;background:#fff}.search-input:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 4px #10b9811a}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:18px}.student-payment-card{background:#fff;border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px #0000000f}.student-payment-header{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}.student-payment-avatar{width:60px;height:60px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:24px;color:#9ca3af;overflow:hidden}.student-payment-avatar img{width:100%;height:100%;object-fit:cover}.student-payment-info h3{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 4px}.student-payment-info p{font-size:14px;color:#6b7280;margin:0}.fee-selection{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.fee-option{display:flex;align-items:center;justify-content:space-between;padding:16px;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .2s ease}.fee-option:hover:not(.disabled){border-color:#10b981;background:#f8fafc}.fee-option.selected{border-color:#10b981;background:#eff6ff}.fee-option.disabled{opacity:.6;cursor:not-allowed;background:#f3f4f6}.fee-option-left{display:flex;align-items:center;gap:12px}.fee-radio{width:20px;height:20px;border:2px solid #d1d5db;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.fee-option.selected .fee-radio{border-color:#10b981;background:#10b981}.fee-option.selected .fee-radio:after{content:"";width:8px;height:8px;background:#fff;border-radius:50%}.fee-option-name{font-weight:600;color:#1f2937}.fee-option-right{display:flex;align-items:center;gap:12px}.fee-option-amount{font-weight:700;color:#1f2937}@media (max-width: 768px){.records-right-panel{padding:20px;margin:0}.attendance-statistics-header{margin-bottom:24px;padding-bottom:16px}.attendance-statistics-title{font-size:20px}.statistics-content{gap:20px}.chart-container{width:100%}.chart-wrapper{width:100%;max-width:280px;height:280px;margin:0 auto}.chart-title{font-size:16px;margin-bottom:16px;text-align:center}}@media (max-width: 480px){.records-right-panel{padding:16px;border-radius:8px}.attendance-statistics-header{margin-bottom:20px;padding-bottom:12px}.stats-icon{font-size:24px}.attendance-statistics-title{font-size:18px}.statistics-content{gap:16px}.chart-wrapper{max-width:250px;height:250px}.chart-legend{margin-top:16px}.legend-item{font-size:14px}}@media (max-width: 768px){.treasurer-body{padding-bottom:100px}.student-payment-card{padding:16px;margin-bottom:16px;border-radius:12px}.student-payment-header{gap:12px;margin-bottom:12px;padding-bottom:12px}.student-payment-avatar{width:50px;height:50px;font-size:20px}.student-payment-info h3{font-size:16px}.student-payment-info p{font-size:13px;line-height:1.3}.fee-selection{gap:8px;margin-bottom:16px}.fee-option{padding:12px;border-radius:8px;min-height:60px}.fee-option-left{gap:10px;flex:1;min-width:0}.fee-radio{width:18px;height:18px;flex-shrink:0}.fee-option.selected .fee-radio:after{width:6px;height:6px}.fee-option-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.fee-option-right{gap:8px;flex-shrink:0}.fee-option-amount{font-size:15px;font-weight:600}}@media (max-width: 480px){.treasurer-body{padding-bottom:95px}.student-payment-card{padding:12px;margin-bottom:12px}.student-payment-header{gap:10px;margin-bottom:10px;padding-bottom:10px;flex-direction:column;align-items:flex-start}.student-payment-avatar{width:45px;height:45px;font-size:18px}.student-payment-info h3{font-size:15px;margin-bottom:2px}.student-payment-info p{font-size:12px;line-height:1.2}.fee-option{padding:10px;min-height:56px;flex-direction:column;align-items:flex-start;gap:8px}.fee-option-left{width:100%;gap:8px}.fee-option-right{width:100%;justify-content:space-between;align-items:center}.fee-option-name{font-size:13px;white-space:normal;overflow:visible;text-overflow:clip}.fee-option-amount{font-size:14px}.fee-paid-badge{font-size:11px;padding:4px 8px}.section-card{padding:16px;margin-bottom:16px;border-radius:12px}.section-title{font-size:16px;margin-bottom:12px;gap:6px}.section-title i{font-size:16px}.submit-btn{width:100%;padding:14px 20px;font-size:16px;min-height:50px;border-radius:8px;margin-top:8px}.submit-btn i{margin-right:8px}.form-group{margin-bottom:16px}.form-label{font-size:13px;margin-bottom:4px}.form-input,.form-textarea{font-size:16px;padding:12px 14px;min-height:48px}.form-textarea{min-height:80px;resize:vertical}.search-container{margin-bottom:12px}.search-input{font-size:16px;padding:12px 14px 12px 44px;min-height:48px}.search-icon{left:14px;font-size:16px}.payment-item{padding:12px;min-height:56px;border-radius:8px}.payment-item-left{gap:10px}.payment-student-name{font-size:14px;line-height:1.3}.payment-details{font-size:12px;line-height:1.3}.empty-state{padding:24px 16px;text-align:center}.empty-state i{font-size:36px}.empty-state h3{font-size:16px;margin:12px 0 4px}.empty-state p{font-size:14px}}.fee-paid-badge{background:#d1fae5;color:#059669;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}.form-group{margin-bottom:20px}.form-label{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:8px}.form-input,.form-select,.form-textarea{width:100%;padding:14px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:16px;transition:all .3s ease;background:#fff}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 4px #10b9811a}.submit-btn{width:100%;padding:16px 24px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #10b9814d}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.submit-btn.success{background:linear-gradient(135deg,#10b981,#059669)}.fee-type-card{background:#fff;border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 2px 8px #0000000f;transition:all .3s ease}.fee-type-card:hover{box-shadow:0 8px 24px #0000001a}.fee-type-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.fee-type-info h3{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 4px}.fee-type-info p{font-size:14px;color:#6b7280;margin:0}.fee-type-amount{font-size:24px;font-weight:700;color:#10b981}.fee-type-meta{display:flex;gap:16px;font-size:13px;color:#6b7280}.fee-type-actions{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}.btn-icon{width:40px;height:40px;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .2s ease}.btn-icon.edit{background:#d1fae5;color:#10b981}.btn-icon.edit:hover{background:#bfdbfe}.btn-icon.delete{background:#fee2e2;color:#ef4444}.btn-icon.delete:hover{background:#fecaca}.chart-container{background:#fff;border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px #0000000f}.chart-title{font-size:16px;font-weight:700;color:#1f2937;margin:0 0 16px;display:flex;align-items:center;gap:8px}.chart-wrapper{position:relative;height:250px;width:100%}.bar-chart{display:flex;align-items:flex-end;justify-content:space-around;height:200px;padding:20px 0;border-bottom:2px solid #e5e7eb}.bar-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:60px}.bar{width:40px;background:linear-gradient(to top,#10b981,#34d399);border-radius:6px 6px 0 0;transition:all .3s ease;min-height:4px;position:relative}.bar:hover{background:linear-gradient(to top,#059669,#10b981);transform:scaleY(1.02)}.bar-tooltip{position:absolute;top:-30px;left:50%;transform:translate(-50%);background:#1f2937;color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none}.bar:hover .bar-tooltip{opacity:1}.bar-label{font-size:12px;color:#6b7280;font-weight:500}.pie-chart-container{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}.pie-chart{width:150px;height:150px;border-radius:50%;position:relative}.pie-legend{display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#374151}.legend-color{width:12px;height:12px;border-radius:3px}.download-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;background:#10b981;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.download-btn:hover{background:#059669;transform:translateY(-2px);box-shadow:0 6px 16px #10b9814d}.filter-container{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.filter-select{padding:10px 16px;border:2px solid #e5e7eb;border-radius:10px;font-size:14px;background:#fff;cursor:pointer;transition:all .2s ease;min-width:150px}.filter-select:focus{outline:none;border-color:#10b981}.empty-state{text-align:center;padding:60px 20px;color:#6b7280}.empty-state-icon{font-size:64px;color:#d1d5db;margin-bottom:16px}.empty-state h3{font-size:20px;font-weight:700;color:#374151;margin:0 0 8px}.empty-state p{font-size:15px;color:#6b7280;margin:0}.profile-page{background:#f9fafb;min-height:100vh;padding-bottom:90px}.profile-header{background:linear-gradient(135deg,#10b981,#059669);padding:40px 20px 60px;text-align:center;color:#fff}.profile-avatar-large{width:100px;height:100px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:40px;color:#10b981;overflow:hidden;border:4px solid white;box-shadow:0 4px 12px #00000026}.profile-avatar-large img{width:100%;height:100%;object-fit:cover}.profile-name{font-size:24px;font-weight:700;margin:0 0 4px}.profile-email{font-size:14px;opacity:.9;margin:0 0 8px}.profile-role-badge{display:inline-block;padding:6px 16px;background:#fff3;border-radius:20px;font-size:13px;font-weight:600}.profile-content{padding:20px;margin-top:-30px}.profile-menu{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 8px #0000000f;margin-bottom:20px}.profile-menu-title{padding:16px 20px 8px;font-size:12px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.profile-menu-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;text-decoration:none;color:#1f2937;border-bottom:1px solid #f3f4f6;transition:background .2s ease;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;font-size:15px}.profile-menu-item:hover{background:#f9fafb}.profile-menu-item:last-child{border-bottom:none}.profile-menu-item-left{display:flex;align-items:center;gap:14px}.profile-menu-item-left i{font-size:18px;color:#6b7280;width:24px;text-align:center}.profile-menu-item-left span{font-weight:500}.profile-menu-item i.fa-chevron-right{color:#d1d5db;font-size:14px}.profile-menu-item.logout,.profile-menu-item.logout i{color:#ef4444}.back-header{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}.back-btn{width:40px;height:40px;border:none;background:#f3f4f6;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:#374151;font-size:18px}.back-btn:hover{background:#e5e7eb}.back-header h1{font-size:20px;font-weight:700;color:#1f2937;margin:0}@media (max-width: 768px){.back-header{padding:12px 16px;gap:12px;padding-top:max(12px,env(safe-area-inset-top))}.back-btn{width:44px;height:44px;font-size:16px;border-radius:8px}.back-header h1{font-size:18px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media (max-width: 480px){.back-header{padding:10px 12px;gap:10px}.back-btn{width:40px;height:40px;font-size:14px}.back-header h1{font-size:16px}}.add-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:#10b981;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#059669}@media (max-width: 768px){.chart-wrapper{height:200px}.pie-chart-container{flex-direction:column}.pie-chart{width:120px;height:120px}.bar{width:30px}.stats-grid{grid-template-columns:1fr}}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr;gap:12px}.stat-card{padding:16px}.stat-card-value{font-size:clamp(14px,4vw,20px);word-break:break-all;-webkit-line-clamp:2;line-height:1}.filter-container{flex-direction:column}.filter-select{width:100%}}@media (max-width: 360px){.stat-card-value{font-size:clamp(12px,3.5vw,16px);-webkit-line-clamp:3;line-height:.9}.stat-card{min-height:100px}}.student-payment-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.summary-card{background:#fff;border-radius:16px;padding:20px;text-align:center;box-shadow:0 2px 8px #0000000f}.summary-card.paid{border-left:4px solid #10b981}.summary-card.pending{border-left:4px solid #f59e0b}.summary-card-icon{font-size:28px;margin-bottom:8px}.summary-card.paid .summary-card-icon{color:#10b981}.summary-card.pending .summary-card-icon{color:#f59e0b}.summary-card-value{font-size:24px;font-weight:700;color:#1f2937;margin:0}.summary-card-label{font-size:13px;color:#6b7280;margin:4px 0 0}.payment-status-item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 2px 6px #0000000a}.payment-status-left{display:flex;flex-direction:column;gap:4px}.payment-fee-name{font-weight:600;color:#1f2937;font-size:15px}.payment-fee-amount{font-size:14px;color:#6b7280}.payment-status-badge{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600}.payment-status-badge.paid{background:#d1fae5;color:#059669}.payment-status-badge.pending{background:#fef3c7;color:#d97706}.payment-date-info{font-size:12px;color:#9ca3af;margin-top:4px}@media (max-width: 600px){.student-payment-summary{grid-template-columns:1fr;gap:12px}.summary-card{padding:14px;border-radius:12px}.section-card{padding:16px;margin-bottom:16px;box-sizing:border-box}.payment-status-item{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}.payment-status-badge{align-self:flex-end}.treasurer-main{padding-bottom:140px}}.page-skeleton{min-height:100vh;background:#f9fafb;padding:22px 16px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}.page-skeleton-header{display:flex;align-items:center;gap:12px;padding:6px 4px}.page-skeleton-avatar{width:42px;height:42px;border-radius:999px;background:#e5e7eb}.page-skeleton-lines{display:flex;flex-direction:column;gap:8px}.page-skeleton-line{height:14px;background:#e5e7eb;border-radius:8px}.w-45{width:45%}.w-30{width:30%}.w-55{width:55%}.page-skeleton-content{display:flex;flex-direction:column;gap:14px}.page-skeleton-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.page-skeleton-card{height:92px;border-radius:14px;background:#e5e7eb}.page-skeleton-section{height:112px;border-radius:14px;background:#e5e7eb}.page-skeleton-list{display:flex;flex-direction:column;gap:10px}.page-skeleton-list-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid #f1f5f9}.page-skeleton-avatar-sm{width:36px;height:36px;border-radius:999px;background:#e5e7eb}.page-skeleton-item-lines{flex:1;display:flex;flex-direction:column;gap:8px}.page-skeleton-bottom-nav{position:sticky;bottom:0;margin-top:auto;display:flex;justify-content:space-around;align-items:center;padding:10px 0;background:#f9fafb}.page-skeleton-bottom-nav-item{width:48px;height:24px;border-radius:999px;background:#e5e7eb}.skeleton-shimmer{position:relative;overflow:hidden}.skeleton-shimmer:after{content:"";position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(90deg,#e5e7eb00,#ffffff8c,#e5e7eb00);animation:pageSkeletonShimmer 1.2s infinite}@keyframes pageSkeletonShimmer{0%{transform:translate(0)}to{transform:translate(100%)}}