@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100vh;background:#eef4fc;font-family:system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.container{width:100%;min-height:100vh;background:#eef4fc}.header{background:#fff;box-shadow:0 1px 3px #00000014;position:fixed;top:0;left:0;right:0;z-index:1000;height:56px}.header-content{max-width:896px;margin:0 auto;padding:0 16px;height:100%;display:flex;align-items:center;gap:10px}.header-logo{height:32px;flex-shrink:0}.header-title{font-size:20px;font-weight:700;color:#1f2937;margin:0}.main-content{max-width:896px;margin:0 auto;padding:72px 16px 80px}.content-gap{display:flex;flex-direction:column;gap:16px}.nav{background:#fff;box-shadow:0 -1px 3px #00000014;position:fixed;bottom:0;left:0;right:0;z-index:1000;height:64px}.nav-content{max-width:896px;margin:0 auto;padding:6px 16px;display:flex;justify-content:space-around;align-items:center;height:100%}.nav-button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border-radius:8px;border:none;background:transparent;color:#6b7280;cursor:pointer;transition:all .2s;flex:1;max-width:80px}.nav-button.active{background:#e8f1fb;color:#1b6db8}.nav-button:hover:not(.active){background:#f3f4f6}.nav-label{font-size:11px;font-weight:500}.loading-container{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background:#eef4fc}.loading-text{color:#1b6db8}.loading-spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.loading-spinner-lg{width:40px;height:40px;border:4px solid #BAD3F2;border-top-color:#1b6db8;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.welcome-modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.welcome-modal-content{background:#fff;border-radius:24px;max-width:480px;width:100%;overflow:hidden;box-shadow:0 25px 50px -12px #00000040;animation:modalSlideIn .4s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.welcome-modal-header{background:linear-gradient(135deg,#1b6db8,#0f4a82);padding:32px 24px;text-align:center;color:#fff;position:relative;overflow:hidden}.welcome-modal-header:before{content:"";position:absolute;top:-50%;right:-10%;width:200px;height:200px;background:#ffffff1a;border-radius:50%}.welcome-modal-header:after{content:"";position:absolute;bottom:-30%;left:-5%;width:150px;height:150px;background:#ffffff1a;border-radius:50%}.welcome-modal-icon{width:80px;height:80px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border:3px solid rgba(255,255,255,.3);position:relative;z-index:1}.welcome-modal-title{font-size:24px;font-weight:700;margin:0 0 8px;position:relative;z-index:1}.welcome-modal-subtitle{font-size:14px;opacity:.9;margin:0;position:relative;z-index:1}.welcome-modal-body{padding:28px 24px}.welcome-message{text-align:center;margin-bottom:24px}.welcome-message h3{font-size:18px;font-weight:700;color:#1f2937;margin:0 0 8px}.welcome-message p{font-size:14px;color:#6b7280;line-height:1.6;margin:0}.permission-info-box{background:linear-gradient(135deg,#e8f1fb,#bad3f2);border-radius:16px;padding:20px;margin-bottom:24px;border:2px solid #BAD3F2}.permission-info-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#0f4a82;margin:0 0 12px}.permission-info-list{list-style:none;padding:0;margin:0}.permission-info-list li{display:flex;align-items:start;gap:10px;margin-bottom:10px;font-size:13px;color:#374151;line-height:1.5}.permission-info-list li:last-child{margin-bottom:0}.permission-check-icon{width:20px;height:20px;min-width:20px;background:#10b981;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px}.permission-denied-warning{background:linear-gradient(135deg,#fee2e2,#fecaca);border-radius:16px;padding:20px;margin-bottom:24px;border:2px solid #fca5a5}.permission-denied-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#991b1b;margin:0 0 12px}.permission-denied-text{font-size:13px;color:#7f1d1d;line-height:1.6;margin:0 0 12px}.permission-denied-steps{background:#fff;border-radius:10px;padding:12px;font-size:12px;color:#374151;line-height:1.6}.permission-denied-steps ol{margin:0;padding-left:20px}.permission-denied-steps li{margin-bottom:6px}.permission-denied-steps li:last-child{margin-bottom:0}.welcome-modal-actions{display:flex;flex-direction:column;gap:12px}.welcome-modal-button{width:100%;padding:14px 20px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s}.welcome-modal-button.primary{background:linear-gradient(135deg,#1b6db8,#0f4a82);color:#fff;box-shadow:0 4px 14px #1b6db866}.welcome-modal-button.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #1b6db880}.welcome-modal-button.primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.welcome-modal-button.secondary{background:#f3f4f6;color:#6b7280}.welcome-modal-button.secondary:hover{background:#e5e7eb}.welcome-modal-footer{text-align:center;padding:0 24px 24px;font-size:12px;color:#9ca3af}.profile-card{background:linear-gradient(135deg,#1b6db8,#0f4a82);border-radius:14px;box-shadow:0 4px 6px -1px #0000001a;padding:20px;color:#fff;position:relative;overflow:hidden}.profile-decor-top-right{position:absolute;top:0;right:0;width:100px;height:100px;background:#fff;opacity:.1;border-radius:50%;margin-right:-50px;margin-top:-50px}.profile-decor-bottom-left{position:absolute;bottom:0;left:0;width:80px;height:80px;background:#fff;opacity:.1;border-radius:50%;margin-left:-40px;margin-bottom:-40px}.profile-content{position:relative;z-index:10}.profile-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}.profile-avatar{width:60px;height:60px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;border:2px solid rgba(255,255,255,.3);box-shadow:0 4px 6px #0000001a}.profile-name{font-size:19px;font-weight:700;margin:0 0 3px}.profile-class{color:#ffffffbf;font-size:13px;font-weight:500;margin:0}.profile-nisn{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;padding:10px 16px;border-radius:10px;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3)}.profile-nisn-label{color:#ffffffbf;font-weight:500}.profile-nisn-value{font-weight:700;letter-spacing:.05em}.quick-menu-card{background:#fff;border-radius:14px;padding:16px;box-shadow:0 2px 4px #00000014}.quick-menu-title{font-size:16px;font-weight:700;color:#1f2937;margin:0 0 12px}.menu-search-wrapper{position:relative;margin-bottom:12px}.menu-search-input{width:100%;padding:10px 36px 10px 14px;border:2px solid #e5e7eb;border-radius:10px;font-size:13px;transition:all .2s;background:#f9fafb;box-sizing:border-box}.menu-search-input:focus{outline:none;border-color:#1b6db8;background:#fff;box-shadow:0 0 0 3px #1b6db81a}.menu-search-input::-moz-placeholder{color:#9ca3af}.menu-search-input::placeholder{color:#9ca3af}.menu-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:#e5e7eb;border:none;width:24px;height:24px;border-radius:50%;color:#6b7280;cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1}.menu-search-clear:hover{background:#d1d5db;color:#374151}.menu-search-empty{grid-column:1 / -1;text-align:center;padding:30px 16px;color:#6b7280;font-size:13px}.quick-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-menu-item{background:#f9fafb;border:2px solid #f3f4f6;border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .3s;min-width:0}.quick-menu-item:hover{transform:translateY(-3px);box-shadow:0 6px 12px #0000001a;border-color:#e5e7eb}.quick-menu-item:active{transform:translateY(-1px)}.quick-menu-icon{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}.quick-menu-qr .quick-menu-icon,.quick-menu-schedule .quick-menu-icon{background:linear-gradient(135deg,#e8f1fb,#bad3f2);color:#1b6db8}.quick-menu-info .quick-menu-icon{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#10b981}.quick-menu-feedback .quick-menu-icon{background:linear-gradient(135deg,#fce7f3,#fbcfe8);color:#ec4899}.quick-menu-piket .quick-menu-icon{background:linear-gradient(135deg,#e8f1fb,#bad3f2);color:#1b6db8}.quick-menu-label{font-size:11px;font-weight:600;color:#1f2937;text-align:center;word-wrap:break-word;overflow-wrap:break-word;line-height:1.3}.ktl-card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 2px 12px #00000012;border:1.5px solid #f0f0f5;display:flex;flex-direction:column;gap:16px;transition:box-shadow .3s}.ktl-card:hover{box-shadow:0 6px 24px #0000001c}.ktl-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.ktl-header-left{display:flex;align-items:center;gap:11px}.ktl-icon-wrap{width:40px;height:40px;border-radius:12px;flex-shrink:0;background:#e8f1fb;display:flex;align-items:center;justify-content:center;color:#1b6db8;box-shadow:0 4px 10px #1b6db826}.ktl-title{font-size:16px;font-weight:700;color:#1a1a2e;margin:0 0 2px}.ktl-subtitle{font-size:12px;color:#9ca3af;margin:0}.ktl-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:99px;white-space:nowrap}.ktl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.ktl-badge-safe{background:#dcfce7;color:#16a34a}.ktl-badge-warning{background:#fef9c3;color:#ca8a04}.ktl-badge-danger{background:#fee2e2;color:#dc2626}.ktl-badge-safe .ktl-dot{background:#16a34a;animation:pulse-g 2s infinite}.ktl-badge-warning .ktl-dot{background:#ca8a04;animation:pulse-y 2s infinite}.ktl-badge-danger .ktl-dot{background:#dc2626;animation:pulse-r 2s infinite}@keyframes pulse-g{0%,to{box-shadow:0 0 #16a34a66}50%{box-shadow:0 0 0 4px #16a34a00}}@keyframes pulse-y{0%,to{box-shadow:0 0 #ca8a0466}50%{box-shadow:0 0 0 4px #ca8a0400}}@keyframes pulse-r{0%,to{box-shadow:0 0 #dc262666}50%{box-shadow:0 0 0 4px #dc262600}}.ktl-body{display:flex;align-items:center;justify-content:center}.ktl-num-wrap{text-align:center}.ktl-num{font-size:56px;font-weight:800;line-height:1;letter-spacing:-2px;margin-bottom:4px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}.ktl-num-in{opacity:1;transform:translateY(0)}.ktl-num-safe{color:#16a34a}.ktl-num-warning{color:#ca8a04}.ktl-num-danger{color:#dc2626}.ktl-num-lbl{font-size:13px;color:#6b7280;font-weight:500;margin:4px 0 0}.ktl-motivasi{font-size:13px;font-weight:500;padding:11px 14px;border-radius:12px;text-align:center;line-height:1.5}.ktl-motivasi-safe{background:linear-gradient(135deg,#dcfce7,#d1fae5);color:#166534;border:1px solid #bbf7d0}.ktl-motivasi-warning{background:linear-gradient(135deg,#fef9c3,#fef3c7);color:#92400e;border:1px solid #fde68a}.ktl-motivasi-danger{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;border:1px solid #fca5a5}.ktl-skeleton-wrap{display:flex;flex-direction:column;gap:12px}.ktl-skeleton{border-radius:10px;background:linear-gradient(90deg,#f0f0f5 25%,#e8e8ef,#f0f0f5 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}.ktl-skeleton-lg{height:110px;width:100%}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.schedule-card{background:#fff;border-radius:14px;box-shadow:0 2px 4px #00000014;padding:16px}.qr-container{background:#fff;border-radius:14px;box-shadow:0 4px 6px #0000001a;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center}.qr-title{font-size:22px;font-weight:700;color:#1f2937;margin:0 0 6px}.qr-description{color:#6b7280;margin:0 0 24px;font-size:14px}.qr-wrapper{background:linear-gradient(135deg,#1b6db8,#0f4a82);padding:20px;border-radius:16px;box-shadow:0 8px 20px #1b6db859;margin-bottom:24px;position:relative;overflow:hidden}.qr-decor-top-right{position:absolute;top:-15px;right:-15px;width:70px;height:70px;background:#fff;opacity:.1;border-radius:50%}.qr-decor-bottom-left{position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;background:#fff;opacity:.1;border-radius:50%}.qr-code{background:#fff;padding:16px;border-radius:14px;position:relative;z-index:1}.qr-label{margin-top:12px;color:#fff;font-size:12px;opacity:.9}.qr-info{text-align:left;width:100%;max-width:380px;background:#f9fafb;padding:16px;border-radius:10px}.qr-info-item{padding:10px 0;border-bottom:2px solid #e5e7eb}.qr-info-item-last{padding:10px 0}.qr-info-label{font-size:12px;color:#6b7280;margin:0 0 3px;font-weight:600}.qr-info-value{font-weight:700;color:#1f2937;margin:0;font-size:15px}.qr-info-value-nisn{letter-spacing:.05em}.profil-container{display:flex;flex-direction:column;gap:16px}.profil-card{background:#fff;border-radius:14px;box-shadow:0 2px 4px #00000014;overflow:hidden}.profil-header{background:linear-gradient(135deg,#1b6db8,#0f4a82);padding:30px 20px;text-align:center;color:#fff}.profil-avatar-large{width:80px;height:80px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;border:3px solid rgba(255,255,255,.3);margin:0 auto 12px}.profil-name{font-size:20px;font-weight:700;margin:0 0 3px}.profil-role{font-size:13px;color:#ffffffbf;margin:0}.profil-info-section,.profil-actions-section{padding:18px}.profil-section-title{font-size:15px;font-weight:700;color:#1f2937;margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid #f3f4f6}.profil-info-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f9fafb;border-radius:10px;margin-bottom:10px}.profil-info-item:last-child{margin-bottom:0}.profil-info-label{display:flex;align-items:center;gap:7px;color:#6b7280;font-size:13px;font-weight:600}.profil-info-value{font-weight:700;color:#1f2937;font-size:14px}.profil-email{font-size:13px;word-break:break-all}.profil-action-button{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:10px}.profil-password-button{background:#e8f1fb;color:#1b6db8}.profil-password-button:hover{background:#bad3f2}.profil-logout-button{background:#fee2e2;color:#dc2626}.profil-logout-button:hover{background:#fecaca}.change-password-section{background:#f9fafb;border-radius:10px;padding:16px;margin-bottom:12px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.password-alert{display:flex;align-items:center;gap:7px;padding:10px;border-radius:8px;margin-bottom:12px;font-size:13px;font-weight:500}.password-alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.password-alert-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.password-input-group{margin-bottom:12px}.password-input-group label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:5px}.password-field-wrapper{position:relative}.password-input-field{width:100%;padding:9px 36px 9px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;transition:all .2s}.password-input-field:focus{outline:none;border-color:#1b6db8;box-shadow:0 0 0 3px #1b6db81a}.password-toggle-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#6b7280;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:color .2s}.password-toggle-icon:hover{color:#374151}.password-actions{display:flex;gap:10px;margin-top:16px}.password-cancel-button,.password-submit-button{flex:1;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.password-cancel-button{background:#f3f4f6;color:#6b7280}.password-cancel-button:hover:not(:disabled){background:#e5e7eb}.password-submit-button{background:#1b6db8;color:#fff}.password-submit-button:hover:not(:disabled){background:#0f4a82}.password-cancel-button:disabled,.password-submit-button:disabled{opacity:.6;cursor:not-allowed}.settings-card{background:#fff;padding:20px;border-radius:14px;box-shadow:0 2px 4px #00000014}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #f3f4f6}.setting-item:last-child{border-bottom:none}.logout-button{display:flex;align-items:center;gap:7px;background:#fee2e2;color:#dc2626;border:none;padding:7px 11px;border-radius:8px;cursor:pointer;transition:all .2s;font-weight:600;font-size:14px}.logout-button:hover{background:#fecaca}.feedback-container{display:flex;flex-direction:column;gap:16px}.feedback-form-card,.feedback-list-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 4px #00000014}.feedback-title{font-size:20px;font-weight:700;color:#1f2937;margin:0 0 3px}.feedback-subtitle{color:#6b7280;margin:0 0 16px;font-size:13px}.feedback-alert{display:flex;align-items:center;gap:7px;padding:10px;border-radius:8px;margin-bottom:12px;font-size:13px;font-weight:500}.feedback-alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.feedback-alert-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.feedback-rating-section{margin-bottom:16px}.feedback-label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:7px}.star-rating{display:flex;gap:6px}.star-button{background:none;border:none;cursor:pointer;padding:3px;transition:transform .2s}.star-button:hover{transform:scale(1.1)}.feedback-input-section{margin-bottom:16px}.feedback-textarea{width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;resize:vertical;transition:all .2s}.feedback-textarea:focus{outline:none;border-color:#ec4899;box-shadow:0 0 0 3px #ec48991a}.feedback-submit-button{width:100%;padding:12px;background:linear-gradient(135deg,#ec4899,#db2777);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s}.feedback-submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #ec48994d}.feedback-submit-button:disabled{opacity:.6;cursor:not-allowed}.feedback-list-title{font-size:16px;font-weight:700;color:#1f2937;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #f3f4f6}.feedback-loading,.feedback-empty{text-align:center;color:#6b7280;padding:30px}.feedback-list{display:flex;flex-direction:column;gap:12px}.feedback-item{background:#f9fafb;border-radius:10px;padding:12px;border:1px solid #e5e7eb;overflow:hidden;word-wrap:break-word}.feedback-item-user-info{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e5e7eb}.feedback-user-avatar{width:36px;height:36px;min-width:36px;border-radius:50%;background:linear-gradient(135deg,#1b6db8,#0f4a82);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.feedback-user-details{flex:1;min-width:0}.feedback-user-name{font-size:14px;font-weight:700;color:#1f2937;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feedback-user-class{font-size:12px;color:#6b7280;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feedback-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px;flex-wrap:wrap}.feedback-item-stars{display:flex;gap:3px}.feedback-item-footer{margin-top:10px;padding-top:10px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end}.feedback-item-date{font-size:11px;color:#6b7280;white-space:nowrap}.feedback-item-text{color:#1f2937;line-height:1.5;margin:0 0 10px;word-wrap:break-word;overflow-wrap:break-word;font-size:13px}.feedback-response{background:#fff;border-left:3px solid #1B6DB8;padding:10px;border-radius:8px;margin-top:10px;overflow:hidden}.feedback-response-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;color:#1f2937;gap:7px;flex-wrap:wrap}.feedback-response-date{font-size:11px;color:#6b7280;font-weight:400;white-space:nowrap}.feedback-response-text{color:#374151;line-height:1.5;margin:0;font-size:13px;word-wrap:break-word;overflow-wrap:break-word}@media(max-width:400px){.ktl-num{font-size:44px}}@media(max-width:640px){.welcome-modal-content{max-width:100%}.welcome-modal-header{padding:24px 20px}.welcome-modal-icon{width:70px;height:70px}.welcome-modal-title{font-size:20px}.welcome-modal-body{padding:20px 16px}.quick-menu-grid{gap:8px}.quick-menu-item{padding:10px 6px}.quick-menu-icon{width:36px;height:36px;min-width:36px;min-height:36px}.quick-menu-label{font-size:10px}}@media(min-width:640px){.ktl-num{font-size:64px}}@media(min-width:768px){.feedback-container{display:grid;grid-template-columns:1fr 1fr;gap:20px}.feedback-form-card{align-self:start}}@supports (padding: max(0px)){.main-content{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.nav{padding-bottom:env(safe-area-inset-bottom)}}.jadwal-container{background:#fff;padding:24px;border-radius:16px;box-shadow:0 10px 25px #0f172a14}.jadwal-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.jadwal-header h2{margin:0;font-size:20px;font-weight:700}.jadwal-header p{margin:0;font-size:14px;color:#64748b}.jadwal-filter-box{display:flex;gap:12px;background:#f8fafc;padding:12px;border-radius:12px;margin-bottom:24px;border:1px solid #e2e8f0}.jadwal-search-wrap{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #cbd5e1;padding:8px 12px;border-radius:8px;flex:1}.jadwal-search-wrap input{border:none;outline:none;width:100%;font-size:14px}.jadwal-filter-box select{padding:8px 12px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;font-size:14px}.jadwal-hari{margin-bottom:24px}.jadwal-hari h3{margin-bottom:8px;font-size:16px;font-weight:700;color:#0f172a}.jadwal-kosong{font-size:14px;color:#94a3b8;padding-left:4px}.jadwal-card{background:#fff;border-left:5px solid #1B6DB8;padding:12px 14px;border-radius:10px;margin-bottom:10px;box-shadow:0 6px 16px #0f172a0f}.jadwal-mapel{font-weight:700;font-size:14px}.jadwal-jam{font-size:13px;color:#475569}.jadwal-guru{font-size:13px;color:#64748b}.jadwal-loading{text-align:center;padding:32px;color:#64748b}@media(max-width:640px){.jadwal-filter-box{flex-direction:column}}.sp-wrap *{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;box-sizing:border-box}.sp-wrap{display:flex;flex-direction:column;gap:20px;padding-bottom:30px}.sp-banner{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:12px;color:#1e3a8a}.sp-banner svg{flex-shrink:0;margin-top:2px;color:#3b82f6}.sp-banner-text{font-size:13px;line-height:1.5;color:#1e3a8a}.sp-banner-text strong{display:block;font-weight:700;margin-bottom:2px;color:#1e3a8a}.sp-status{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:12.5px;font-weight:600;justify-content:center;margin-bottom:-6px}.sp-status.active{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.sp-status.limited{background:#fefce8;color:#a16207;border:1px solid #fde68a}.sp-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 4px 15px #0000000d;border:1px solid #f1f5f9}.sp-card-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:10px}.sp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.sp-field label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#334155}.sp-field label svg{color:#3b82f6;width:16px;height:16px}.sp-field select,.sp-field textarea{width:100%;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;background:#f8fafc;color:#0f172a;transition:all .2s}.sp-field select:focus,.sp-field textarea:focus{outline:none;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a}.sp-field textarea{resize:vertical;min-height:80px}.sp-consent{margin-bottom:20px;background:#f0fdf4;border:1px solid #bbf7d0;padding:12px 16px;border-radius:10px}.sp-consent-header{display:flex;justify-content:space-between;align-items:center}.sp-consent-header span{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#166534}.sp-consent-header input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#166534}.sp-submit{width:100%;padding:14px;background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;box-shadow:0 4px 12px #3b82f64d}.sp-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px #3b82f666}.sp-submit:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none;background:#94a3b8}.sp-history{display:flex;flex-direction:column;gap:12px;margin-top:20px}.sp-history h3{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 4px}.sp-history-item{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 2px 6px #00000005;transition:all .2s}.sp-history-item:hover{border-color:#cbd5e1;box-shadow:0 4px 12px #0000000d;transform:translateY(-1px)}.sp-history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;border-bottom:1px solid #f1f5f9;padding-bottom:12px;flex-wrap:wrap;gap:8px}.sp-history-header>span{font-weight:700;color:#1e3a8a;font-size:14.5px}.status-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid}.btn-lihat-surat{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#eff6ff;color:#2563eb;padding:10px;border:1px solid #bfdbfe;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.btn-lihat-surat:hover{background:#dbeafe}.sp-history-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.sp-meta-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#475569}.sp-meta-row svg{color:#64748b}.ss-wrap{position:relative;width:100%}.ss-trigger{width:100%;min-height:52px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:12px;background:#f8fafc;cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;color:#0f172a;transition:border-color .2s,box-shadow .2s,background .2s}.ss-trigger:hover:not(:disabled){border-color:#93c5fd;background:#f1f8ff}.ss-trigger.open{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ss-trigger:disabled{opacity:.6;cursor:not-allowed}.ss-avatar-placeholder{width:34px;height:34px;border-radius:50%;background:#f1f5f9;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#94a3b8}.ss-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.5px}.ss-val-wrap{flex:1;min-width:0}.ss-val-name{font-size:13.5px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss-val-sub{font-size:11.5px;color:#64748b;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss-placeholder{font-size:13.5px;color:#94a3b8}.ss-chevron{color:#94a3b8;flex-shrink:0;transition:transform .2s}.ss-chevron.open{transform:rotate(180deg)}.ss-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 16px 40px #00000024;z-index:1000;display:flex;flex-direction:column;max-height:340px;animation:ssIn .15s ease-out;overflow:hidden}@keyframes ssIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.ss-search{padding:10px 12px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:8px;background:#f8fafc;flex-shrink:0}.ss-search-icon{color:#94a3b8;flex-shrink:0}.ss-search-input{flex:1;border:none;outline:none;font-size:13.5px;background:transparent;color:#0f172a;font-family:Inter,sans-serif}.ss-search-input::-moz-placeholder{color:#cbd5e1}.ss-search-input::placeholder{color:#cbd5e1}.ss-count-badge{font-size:11px;font-weight:600;padding:3px 9px;background:#eff6ff;color:#3b82f6;border-radius:999px;flex-shrink:0;white-space:nowrap}.ss-options{overflow-y:auto;flex:1}.ss-subject-group{display:flex;flex-direction:column}.ss-group-label{padding:7px 14px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#64748b;background:#f8fafc;border-bottom:1px solid #f1f5f9;border-top:1px solid #f1f5f9;position:sticky;top:0;z-index:1}.ss-option{padding:9px 14px;cursor:pointer;width:100%;display:flex;align-items:center;gap:11px;border:none;border-bottom:1px solid #f1f5f9;background:#fff;text-align:left;transition:background .12s}.ss-option:last-child{border-bottom:none}.ss-option:hover{background:#f8fafc}.ss-option.selected{background:#eff6ff}.ss-opt-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px;font-weight:700;color:#fff!important;line-height:1;font-family:Inter,-apple-system,sans-serif!important;letter-spacing:.3px;text-align:center;overflow:hidden}.ss-opt-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ss-opt-name{font-size:13px;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.ss-opt-sub{font-size:11px;color:#64748b;display:block;font-weight:500}.ss-check{color:#3b82f6;flex-shrink:0}.ss-empty{padding:32px;text-align:center;color:#94a3b8;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px}.ss-empty svg{color:#cbd5e1}.location-permission-overlay{position:fixed;inset:0;background:#0f172acc;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.location-permission-modal{background:#fff;border-radius:20px;max-width:400px;width:100%;padding:24px;box-shadow:0 25px 50px #00000040;text-align:center}.location-permission-icon{width:64px;height:64px;background:#eff6ff;color:#3b82f6;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.location-permission-modal h2{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 8px}.location-permission-modal p{font-size:13.5px;color:#475569;line-height:1.5;margin:0 0 20px}.location-permission-features{text-align:left;display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.permission-feature{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;background:#f8fafc;border-radius:10px;font-size:13px}.permission-feature svg{color:#3b82f6;flex-shrink:0;margin-top:1px}.permission-feature strong{display:block;font-weight:600;color:#0f172a;margin-bottom:2px}.permission-feature p{margin:0;color:#64748b;font-size:12px}.location-permission-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.location-allow-button{width:100%;padding:12px;background:#2563eb;color:#fff;border:none;border-radius:10px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.2s;font-size:14px}.location-allow-button:hover:not(:disabled){background:#1d4ed8}.location-allow-button:disabled{opacity:.6;cursor:not-allowed}.location-deny-button{width:100%;padding:12px;background:#f1f5f9;color:#475569;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:.2s;font-size:14px}.location-deny-button:hover:not(:disabled){background:#e2e8f0}.location-permission-note{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;color:#94a3b8;text-align:left;line-height:1.4}.surat-modal-overlay{position:fixed;inset:0;background:#000000bf;display:flex;justify-content:center;padding:24px;z-index:9999;overflow-y:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.surat-modal-content{background:#fff;max-width:800px;width:100%;border-radius:12px;position:relative;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 40px #0000004d;height:-moz-fit-content;height:fit-content}.surat-modal-close{position:absolute;top:16px;right:16px;background:#f1f5f9;border:none;width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569;transition:.2s;z-index:10}.surat-modal-close:hover{background:#e2e8f0;color:#0f172a}.surat-izin-document{padding:40px 48px;background:#fff;font-family:Times New Roman,Times,serif!important;color:#000}.surat-izin-document *{font-family:Times New Roman,Times,serif!important}.surat-header{display:flex;align-items:center;border-bottom:3px solid #000;padding-bottom:16px;margin-bottom:24px;gap:20px}.surat-logo{width:90px;height:90px;-o-object-fit:contain;object-fit:contain}.surat-school-info{flex:1;text-align:center}.surat-school-name{font-size:26px;font-weight:700;margin:0 0 6px;letter-spacing:.5px}.surat-school-address{font-size:14px;margin:0;line-height:1.5}.surat-divider{display:none}.surat-title{text-align:center;font-size:18px;font-weight:700;text-decoration:underline;margin:0 0 24px;letter-spacing:1px}.surat-intro{font-size:15px;margin:0 0 12px}.surat-table{width:100%;margin-bottom:20px;border-collapse:collapse}.surat-table td{padding:6px 0;font-size:15px;vertical-align:top}.surat-table .surat-label{width:140px}.surat-table .surat-colon{width:20px;text-align:center}.surat-table .surat-value{font-weight:700}.surat-statement,.surat-closing{font-size:15px;line-height:1.8;margin:16px 0;text-align:justify;text-indent:40px}.surat-signatures{display:flex;justify-content:space-between;margin-top:50px;gap:30px}.surat-signature-section{flex:1;text-align:center}.surat-signature-label{font-size:14px;margin:0 0 6px}.surat-signature-title{font-size:14px;font-weight:700;margin:0 0 10px}.surat-signature-image-container{height:90px;display:flex;align-items:center;justify-content:center;margin:12px 0}.surat-signature-image{max-width:100%;max-height:90px;-o-object-fit:contain;object-fit:contain}.surat-signature-name{font-size:14px;font-weight:700;text-decoration:underline;margin:0}.surat-footer-note{text-align:center;margin-top:24px;font-size:12px;color:#64748b}.surat-footer-note p{margin:2px 0}.surat-modal-actions{padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end}.surat-print-button{padding:12px 24px;background:#1e40af;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.2s;font-family:Inter,sans-serif!important}.surat-print-button:hover{background:#1e3a8a}@media print{body *{visibility:hidden}.surat-modal-content,.surat-modal-content *{visibility:visible}.surat-modal-content{position:absolute;left:0;top:0;width:100%;margin:0;padding:0;box-shadow:none;border-radius:0}.surat-modal-overlay{background:transparent;padding:0;position:static}.surat-modal-close,.surat-modal-actions{display:none!important}.surat-izin-document{padding:10mm}}@media(max-width:640px){.surat-modal-overlay{padding:12px}.surat-header{flex-direction:column;text-align:center}.surat-signatures{flex-direction:column;gap:40px}.surat-izin-document{padding:24px 20px}.ss-dropdown{max-height:280px}}:root{--primary: #3B82F6;--primary-dark: #2563EB;--primary-light: #60A5FA;--secondary: #6366F1;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--info: #0EA5E9;--dark: #0f172a;--light: #f8fafc;--border: #e2e8f0;--text: #1e293b;--text-light: #64748b;--sidebar-bg: linear-gradient(160deg, #0f172a 0%, #1e3a5f 45%, #1e40af 100%);--sidebar-width: 272px;--topbar-height: 64px;--card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(59,130,246,.06);--card-shadow-hover: 0 8px 32px rgba(59,130,246,.18), 0 2px 8px rgba(0,0,0,.08);--glow-blue: 0 0 24px rgba(59,130,246,.25)}body{font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f0f5ff;color:var(--text)}.admin-layout{position:fixed;inset:0;display:flex;overflow:hidden;width:100vw;height:100vh}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--sidebar-bg);color:#fff;height:100%;position:relative;z-index:1000;box-shadow:4px 0 32px #0000002e;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;flex-shrink:0;transition:width .3s cubic-bezier(.4,0,.2,1),min-width .3s cubic-bezier(.4,0,.2,1)}.sidebar.closed{width:0;min-width:0}.sidebar:before{content:"";position:absolute;top:0;left:0;right:0;height:100%;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.sidebar-header{padding:20px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;position:relative}.sidebar-logo{width:42px;height:42px;border-radius:12px;overflow:hidden;flex-shrink:0;border:2px solid rgba(255,255,255,.15);box-shadow:0 0 16px #3b82f666}.sidebar-logo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.logo-text{font-size:17px;font-weight:700;letter-spacing:-.3px;font-family:Syne,sans-serif;white-space:nowrap;background:linear-gradient(90deg,#fff,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar-menu{padding:12px 10px;flex:1}.menu-section-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.8px;color:#ffffff4d;padding:14px 14px 5px;display:block;font-family:DM Sans,sans-serif}.menu-item{width:100%;padding:10px 14px;border:none;background:transparent;color:#ffffffb3;text-align:left;cursor:pointer;border-radius:10px;margin-bottom:2px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:10px;transition:all .2s ease;position:relative;overflow:hidden;white-space:nowrap;font-family:DM Sans,sans-serif}.menu-item-indent{padding-left:18px;font-size:13px;color:#ffffff9e}.menu-item:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:#60a5fa;transform:scaleY(0);border-radius:0 2px 2px 0;transition:transform .2s ease}.menu-item:hover{background:#ffffff17;color:#fff;transform:translate(3px)}.menu-item.active{background:#3b82f638;color:#fff;font-weight:600;box-shadow:inset 0 1px #ffffff14,0 0 12px #3b82f626}.menu-item.active:before{transform:scaleY(1)}.logout-menu-item{color:#ffffff80;margin-top:8px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px}.logout-menu-item:hover{background:#ef44442e;color:#fca5a5;transform:translate(3px)}.main-content{display:flex;flex-direction:column;overflow:hidden}.top-bar{height:var(--topbar-height);min-height:var(--topbar-height);background:#fff;width:100%;display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid var(--border);box-shadow:0 1px #0000000a,0 2px 12px #0000000a;flex-shrink:0;z-index:100}.menu-toggle{background:#eff6ff;border:1px solid #BFDBFE;padding:8px;border-radius:10px;cursor:pointer;transition:all .2s ease;color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-toggle:hover{background:#dbeafe;transform:scale(1.06);box-shadow:0 0 0 3px #3b82f61f}.page-title{font-size:18px;font-weight:700;color:var(--dark);font-family:Syne,sans-serif;letter-spacing:.5px;flex:1}.admin-layout .content-area{flex:1!important;padding:24px!important;overflow-y:auto!important;overflow-x:hidden!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important}.content-area::-webkit-scrollbar{width:5px}.content-area::-webkit-scrollbar-track{background:#f0f5ff}.content-area::-webkit-scrollbar-thumb{background:#93c5fd;border-radius:4px}.content-area::-webkit-scrollbar-thumb:hover{background:#60a5fa}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpBar{0%{transform:translate(-50%,100px);opacity:0}60%{transform:translate(-50%,-5px)}to{transform:translate(-50%);opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes countUp{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-banner{background:linear-gradient(135deg,#1e3a8a,#2563eb 45%,#3b82f6 75%,#60a5fa);border-radius:20px;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 32px #2563eb59,0 2px 8px #0000001a;animation:fadeIn .5s ease}.welcome-banner:before{content:"";position:absolute;top:-60px;right:-40px;width:240px;height:240px;background:#ffffff12;border-radius:50%;pointer-events:none}.welcome-banner:after{content:"";position:absolute;bottom:-80px;right:12%;width:180px;height:180px;background:#ffffff0d;border-radius:50%;pointer-events:none}.welcome-banner-left{position:relative;z-index:1}.welcome-banner-right{position:relative;z-index:1;display:flex;gap:12px}.banner-date{font-size:12px;opacity:.75;font-weight:500;margin-bottom:6px;letter-spacing:.3px}.banner-title{font-size:22px;font-weight:700;font-family:Syne,sans-serif;margin-bottom:5px;letter-spacing:-.3px}.banner-subtitle{font-size:13px;opacity:.8}.banner-stat-box{background:#ffffff21;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px;padding:14px 18px;text-align:center;border:1px solid rgba(255,255,255,.18);min-width:86px;transition:transform .2s}.banner-stat-box:hover{transform:translateY(-2px)}.banner-stat-num{font-size:28px;font-weight:700;font-family:Syne,sans-serif;line-height:1;margin-bottom:5px;animation:countUp .5s ease}.banner-stat-label{font-size:10.5px;opacity:.85;font-weight:600;letter-spacing:.2px;line-height:1.3}.overview-container{display:flex;flex-direction:column;gap:22px;width:100%;max-width:100%;box-sizing:border-box}.chart-canvas-container{overflow:hidden;min-height:0}.chart-canvas-container canvas{display:block;max-width:100%}.chart-card{overflow:hidden}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;animation:slideUp .4s ease;width:100%}.stat-card{background:#fff;padding:20px 22px;border-radius:16px;box-shadow:var(--card-shadow);display:flex;align-items:center;gap:16px;transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid rgba(226,232,240,.8);border-top:3px solid var(--primary);width:100%;box-sizing:border-box;position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;opacity:.04;background:var(--primary);transform:translate(30%,-30%);transition:all .3s ease}.stat-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover)}.stat-card:hover:after{transform:translate(10%,-10%) scale(1.5);opacity:.08}.stat-icon{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--primary),var(--primary-dark));box-shadow:0 4px 12px #3b82f64d}.stat-info h3{font-size:30px;font-weight:700;color:var(--dark);margin-bottom:2px;font-family:Syne,sans-serif;animation:countUp .4s ease}.stat-info .stat-label{font-size:11.5px;color:var(--text-light);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.stat-info .stat-sub{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px;width:100%}.chart-card{background:#fff;padding:22px 24px;border-radius:16px;box-shadow:var(--card-shadow);border:1px solid rgba(226,232,240,.8);border-top:3px solid var(--primary);width:100%;box-sizing:border-box}.chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.chart-title{font-size:16px;font-weight:700;color:var(--dark);font-family:Syne,sans-serif;letter-spacing:-.2px}.week-badge{display:inline-flex;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;padding:4px 12px;font-size:11.5px;font-weight:700;color:#1d4ed8}.content-card{background:#fff;border-radius:16px;box-shadow:var(--card-shadow);border:1px solid rgba(226,232,240,.8);width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.card-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:#fff;flex-shrink:0}.card-header h2{font-size:18px;font-weight:700;color:var(--dark);font-family:Syne,sans-serif;letter-spacing:-.2px}.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.search-box{position:relative;display:flex;align-items:center}.search-box svg{position:absolute;left:11px;color:var(--text-light)}.search-box input{padding:9px 12px 9px 36px;border:1.5px solid #BFDBFE;border-radius:10px;font-size:13px;width:240px;transition:all .2s ease;font-family:DM Sans,sans-serif;outline:none;background:#f8faff}.search-box input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #3b82f61f}.add-button{padding:9px 18px;background:var(--primary);color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease;font-size:13px;font-family:DM Sans,sans-serif}.add-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 16px #3b82f64d}.table-responsive{overflow-x:auto;overflow-y:auto;flex:1;width:100%}.table-responsive::-webkit-scrollbar{width:5px;height:5px}.table-responsive::-webkit-scrollbar-track{background:#f8fafc}.table-responsive::-webkit-scrollbar-thumb{background:#93c5fd;border-radius:4px}.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:600px}.data-table thead{position:sticky;top:0;z-index:5}.data-table thead tr{background:linear-gradient(90deg,#1e40af,#3b82f6)}.data-table th{padding:14px 18px;text-align:left;font-weight:600;color:#ffffffeb;font-size:11px;text-transform:uppercase;letter-spacing:.8px;border-bottom:2px solid #2563eb;font-family:DM Sans,sans-serif}.data-table td{padding:14px 18px;border-bottom:1px solid #f1f5f9;font-size:13px;color:var(--text);font-family:DM Sans,sans-serif}.data-table tbody tr{transition:background .15s ease}.data-table tbody tr:hover{background:#f0f7ff}.data-table tbody tr.suspended-row{background:#fef2f2;opacity:.75}.data-table tbody tr.selected-row{background:#eff6ff}.action-buttons{display:flex;gap:5px;flex-wrap:wrap}.action-btn{padding:6px 9px;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.action-btn.edit{background:#dbeafe;color:#1d4ed8}.action-btn.edit:hover{background:#3b82f6;color:#fff;transform:scale(1.1)}.action-btn.password{background:#d1fae5;color:#065f46}.action-btn.password:hover{background:#10b981;color:#fff;transform:scale(1.1)}.action-btn.suspend{background:#fee2e2;color:#991b1b}.action-btn.suspend:hover{background:#ef4444;color:#fff;transform:scale(1.1)}.action-btn.activate{background:#d1fae5;color:#065f46}.action-btn.activate:hover{background:#10b981;color:#fff;transform:scale(1.1)}.action-btn.delete{background:#fee2e2;color:#991b1b}.action-btn.delete:hover{background:#dc2626;color:#fff;transform:scale(1.1)}.status-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.2px}.status-badge.active{background:linear-gradient(90deg,#2563eb,#3b82f6)}.status-badge.suspended{background:linear-gradient(90deg,#dc2626,#ef4444)}.modal-overlay{position:fixed;inset:0;background:#0f172a99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease;padding:20px}.modal-container{background:#fff;border-radius:20px;max-width:580px;width:100%;max-height:90vh;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1);box-shadow:0 32px 64px -16px #00000038,0 0 0 1px #0000000a}.modal-header{padding:22px 26px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#1e3a8a,#2563eb 60%,#3b82f6)}.modal-title{font-size:18px;font-weight:700;color:#fff;font-family:Syne,sans-serif;letter-spacing:-.2px}.close-btn{background:#ffffff26;border:none;width:34px;height:34px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:#fff}.close-btn:hover{background:#ef4444a6;transform:rotate(90deg)}.modal-content{padding:26px;overflow-y:auto;max-height:calc(90vh - 180px)}.form-group{margin-bottom:18px}.form-label{display:block;margin-bottom:6px;font-weight:600;color:var(--dark);font-size:12.5px;letter-spacing:.2px;font-family:DM Sans,sans-serif}.form-input{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;transition:all .2s ease;font-family:DM Sans,sans-serif;outline:none;background:#fafbff;color:var(--text)}.form-input:focus{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61f}.modal-footer{padding:18px 26px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:#f8fafc}.btn{padding:10px 22px;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:13px;display:flex;align-items:center;gap:6px;font-family:DM Sans,sans-serif}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:0 6px 16px #3b82f64d}.btn-secondary{background:#fff;color:var(--text);border:1.5px solid var(--border)}.btn-secondary:hover{background:#f1f5f9}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.loading-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0f172a,#1e3a8a,#3b82f6)}.loading-text{color:#fff;font-size:18px;font-weight:600;font-family:Syne,sans-serif;animation:pulse 1.5s ease-in-out infinite}.wizard-modal{border-radius:20px;overflow:hidden}.wizard-back-btn{background:#ffffff26;border:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:all .2s}.wizard-back-btn:hover{background:#ffffff40}.wizard-stepper{display:flex;justify-content:space-between;padding:20px 40px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.wizard-step{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1;flex:1}.step-number{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#94a3b8;transition:all .3s}.step-label{font-size:11.5px;font-weight:600;color:#94a3b8;transition:all .3s}.wizard-step.active .step-number{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 3px #3b82f61f}.wizard-step.active .step-label{color:var(--primary)}.wizard-step.completed .step-number{background:var(--primary);border-color:var(--primary);color:#fff}.step-line{position:absolute;top:13px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:#cbd5e1;z-index:-1}.wizard-step.completed .step-line{background:var(--primary)}.wizard-container{animation:fadeIn .3s ease-out}.wizard-subtitle{font-size:15px;font-weight:700;color:#1e293b;margin-bottom:18px;font-family:Syne,sans-serif}.wizard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}.wizard-card{background:#fff;border:2px solid #f1f5f9;border-radius:14px;padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.wizard-card:hover{transform:translateY(-3px);border-color:#e2e8f0;box-shadow:0 8px 16px #0000000d}.wizard-card.active{border-color:var(--primary);background:#f0f7ff;box-shadow:0 0 0 3px #3b82f61a}.card-label{font-weight:700;color:#475569;font-size:13px;font-family:Syne,sans-serif}.wizard-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.wizard-button{background:#fff;border:1.5px solid #e2e8f0;padding:10px;border-radius:10px;font-weight:600;color:#475569;font-size:12.5px;cursor:pointer;transition:all .2s;font-family:DM Sans,sans-serif}.wizard-button:hover{border-color:var(--primary);color:var(--primary);background:#eff6ff}.wizard-button.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 10px #3b82f638}.wizard-textarea{border:1.5px solid #e2e8f0;border-radius:12px;padding:14px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12.5px;background:#f8fafc;transition:all .2s;margin-top:8px}.wizard-textarea:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.import-reminder{margin-top:14px;background:#eff6ff;border:1px solid #bfdbfe;padding:10px 14px;border-radius:10px;display:flex;align-items:center;gap:8px;color:#1e40af;font-size:12px;font-weight:500}.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;width:100%}.summary-item{background:#fff;padding:18px;border-radius:14px;display:flex;align-items:center;gap:12px;box-shadow:var(--card-shadow);border:1px solid rgba(226,232,240,.8);border-left:4px solid var(--primary-light);transition:all .3s ease;width:100%;box-sizing:border-box}.summary-item:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}.summary-icon{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff}.summary-details h4{font-size:24px;font-weight:700;color:var(--dark);font-family:Syne,sans-serif}.summary-details p{font-size:12px;color:var(--text-light);font-weight:500}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in{animation:slideInRight .3s ease-out}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.sidebar{position:fixed;height:100%;width:0;min-width:0;z-index:1000}.sidebar.open{width:var(--sidebar-width);min-width:var(--sidebar-width)}.stats-grid,.charts-grid{grid-template-columns:1fr}.search-box input{width:170px}.card-header{flex-direction:column;align-items:flex-start}.modal-container{max-width:95%;margin:10px}.content-area{padding:14px!important}.welcome-banner{flex-direction:column;gap:16px}.welcome-banner-right{width:100%;justify-content:center}}@media(max-width:480px){.stats-grid{grid-template-columns:1fr}}.w-full{width:100%}.overflow-auto{overflow:auto}.min-h-screen{min-height:100vh}.admin-layout .main-content{max-width:100%!important;width:0!important;min-width:0!important;flex:1!important;margin:0!important;padding:0!important;height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}@media(max-width:768px){.chart-card{padding:12px!important;overflow:hidden!important;width:100%!important;box-sizing:border-box!important}.chart-controls{flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin-bottom:10px!important}.chart-ctrl-row{flex-direction:column!important;align-items:stretch!important;width:100%!important;gap:6px!important}.period-seg{width:100%!important;display:flex!important}.period-btn{flex:1!important;text-align:center!important;font-size:11px!important;padding:7px 4px!important}.compare-btn{width:100%!important;justify-content:center!important;padding:8px 12px!important}.chart-nav{width:100%!important;justify-content:space-between!important}.chart-nav-label{flex:1!important;text-align:center!important;font-size:11px!important;min-width:0!important}.chart-stats-row{grid-template-columns:1fr 1fr!important;gap:6px!important}.chart-stats-row.three,.chart-stats-row.four{grid-template-columns:1fr 1fr!important}.chart-stat-card{padding:8px 10px!important;border-radius:8px!important}.cs-val{font-size:18px!important}.cs-lbl,.cs-diff{font-size:10px!important}.chart-legend{flex-wrap:wrap!important;gap:8px!important;font-size:11px!important;margin-bottom:8px!important}.chart-canvas-container{height:200px!important;width:100%!important;position:relative!important}}@media(max-width:380px){.chart-stats-row,.chart-stats-row.three,.chart-stats-row.four{grid-template-columns:1fr 1fr!important}.cs-val{font-size:15px!important}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100vh;overflow-x:hidden}