:root{--primary-maroon: #77171B;--secondary-gold: #EA8C23;--accent-red: #901A25;--light-gray: #f8f9fa;--dark-gray: #343a40;--white: #ffffff;--black: #000000;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--dark-gray);background-color:var(--white);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--base-font-size: clamp(12px, 3vw, 16px);--heading-scale: clamp(1.1, 3vw, 1.6);--spacing-scale: clamp(.25rem, 2vw, 1.25rem);--border-radius: clamp(2px, 1.5vw, 10px);--shadow-blur: clamp(2px, 1.5vw, 12px)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;min-height:100dvh;overflow-x:hidden;font-size:var(--base-font-size);line-height:1.6}html{font-size:var(--base-font-size);line-height:1.6;scroll-behavior:smooth}@media (max-width: 2560px){:root{--base-font-size: clamp(16px, 2vw, 20px)}}@media (max-width: 1920px){:root{--base-font-size: clamp(15px, 2vw, 18px)}}@media (max-width: 1440px){:root{--base-font-size: clamp(14px, 2vw, 17px)}}@media (max-width: 1024px){:root{--base-font-size: clamp(13px, 2.2vw, 16px)}}@media (max-width: 768px){:root{--base-font-size: clamp(12px, 2.5vw, 15px)}}@media (max-width: 480px){:root{--base-font-size: clamp(11px, 3vw, 14px)}}@media (max-width: 360px){:root{--base-font-size: clamp(10px, 3.5vw, 13px)}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){:root{--shadow-blur: calc(var(--shadow-blur) * .8)}}h1{font-size:clamp(1.5rem,5vw,3.2rem);line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.layout{display:flex;min-height:100vh;min-height:100dvh;width:100vw;background-color:var(--light-gray);margin:0;padding:0;overflow-x:hidden;overflow-y:auto}.sidebar-overlay{position:fixed;inset:0;background:#00000080;z-index:999;display:none}.sidebar{width:clamp(220px,18vw,300px);background:linear-gradient(135deg,var(--primary-maroon) 0%,var(--accent-red) 100%);color:var(--white);display:flex;flex-direction:column;position:fixed;height:100vh;height:100dvh;left:0;top:0;z-index:1000;box-shadow:2px 0 var(--shadow-blur) #0000001a;transform:translate(0);transition:transform .4s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.sidebar::-webkit-scrollbar{display:none}.sidebar.mobile-hidden{transform:translate(-100%);box-shadow:none}.sidebar.open{transform:translate(0);box-shadow:2px 0 20px #00000026}.sidebar-header{padding:2rem 2rem 1rem;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:.5rem;text-align:center}.sidebar-logo{margin-bottom:1rem}.school-logo{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--secondary-gold);box-shadow:0 4px 12px #0003}.sidebar-header h2{margin:0 0 .5rem;font-size:1.75rem;font-weight:700;color:var(--secondary-gold);letter-spacing:-.025em}.sidebar-header p{margin:0;font-size:.95rem;opacity:.9;font-weight:500}.sidebar-nav{flex:1;padding:1rem 0}.sidebar-link{display:flex;align-items:center;padding:.5rem 2rem;margin:.0625rem 0;color:#ffffffd9;text-decoration:none;transition:all .3s ease;border-left:4px solid transparent;border-radius:0 8px 8px 0;position:relative}.sidebar-link:hover{background-color:#ffffff1a;color:var(--white);border-left-color:var(--secondary-gold)}.sidebar-link.active{background-color:#ffffff26;color:var(--white);border-left-color:var(--secondary-gold)}.sidebar-icon{font-size:1.2rem;margin-right:1rem;width:24px;text-align:center}.sidebar-label{font-weight:500}.sidebar-footer{padding:1.5rem;border-top:1px solid rgba(255,255,255,.1)}.user-info{display:flex;align-items:center}.user-avatar{width:40px;height:40px;border-radius:50%;background-color:var(--secondary-gold);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-right:1rem}.user-details{flex:1;display:flex;align-items:center;justify-content:space-between}.user-role{margin:0;font-size:.8rem;font-weight:600;color:var(--secondary-gold);text-transform:uppercase;letter-spacing:.5px}.dropdown-arrow{font-size:.8rem;color:var(--secondary-gold);transition:transform .3s ease;margin-left:.5rem}.dropdown-arrow.rotated{transform:rotate(180deg)}.user-menu-dropdown{position:absolute;bottom:80px;left:1rem;right:1rem;background:#fff;border-radius:12px;box-shadow:0 8px 32px #00000026;border:1px solid #e9ecef;z-index:1000;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-menu-dropdown:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid white;filter:drop-shadow(0 -2px 4px rgba(0,0,0,.1))}.user-menu-content{padding:.5rem 0}.user-menu-item{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;color:var(--dark-gray);font-size:.9rem;border:none;background:none;width:100%;text-align:left;cursor:pointer;transition:all .2s ease;border-radius:8px;margin:.125rem}.user-menu-item:hover{background:#f8f9fa;transform:translate(4px)}.user-menu-item.logout-btn{color:#dc3545;font-weight:500}.user-menu-item.logout-btn:hover{background:#dc35451a;transform:translate(4px)}.user-menu-item svg{font-size:1.1rem;flex-shrink:0;width:20px;text-align:center}.user-menu-item span{flex:1;font-weight:500}.user-menu-divider{height:1px;background:#e9ecef;margin:.5rem 1rem}.user-menu-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}.sidebar-user-menu{display:none}.main-content{flex:1;margin-left:clamp(220px,18vw,300px);display:flex;flex-direction:column;transition:margin-left .4s cubic-bezier(.4,0,.2,1)}.main-content.full-width{margin-left:0}.navbar{background:var(--white);border-bottom:1px solid #e9ecef;padding:1.25rem 2.5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 16px #00000014;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;z-index:100}.navbar-left{display:flex;align-items:center;gap:1rem;flex:1}.menu-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:8px;color:var(--dark-gray);transition:all .3s ease}.menu-btn:hover{background:var(--light-gray)}.navbar-title{margin:0;font-size:1.5rem;font-weight:600;color:var(--primary-maroon)}.navbar-right{display:flex;align-items:center;gap:1rem}.navbar-notifications{position:relative}.notification-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:background-color .3s ease}.notification-btn:hover{background-color:var(--light-gray)}.notification-badge{position:absolute;top:0;right:0;background:var(--accent-red);color:var(--white);border-radius:50%;width:18px;height:18px;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:600}.notification-dropdown{position:absolute;top:100%;right:0;background:var(--white);border:1px solid #e9ecef;border-radius:12px;box-shadow:0 8px 32px #0000001f;min-width:320px;max-width:400px;z-index:1000;margin-top:.5rem}.notification-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #e9ecef;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.notification-header h4{margin:0;font-size:1.1rem;font-weight:600;color:var(--primary-maroon)}.mark-all-read{background:none;border:none;color:var(--primary-maroon);font-size:.85rem;cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background-color .3s ease}.mark-all-read:hover{background:#77171b1a}.notification-list{max-height:300px;overflow-y:auto}.notification-item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.5rem;border-bottom:1px solid #f8f9fa;cursor:pointer;transition:background-color .3s ease}.notification-item:hover{background:#f8f9fa}.notification-item:last-child{border-bottom:none}.notification-item.warning{border-left:4px solid #ffc107}.notification-item.info{border-left:4px solid #17a2b8}.notification-item.success{border-left:4px solid #28a745}.notification-icon{font-size:1.2rem;margin-top:.125rem;flex-shrink:0}.notification-icon .warning{color:#ffc107}.notification-icon .info{color:#17a2b8}.notification-icon .success{color:#28a745}.notification-content{flex:1;min-width:0}.notification-title{font-weight:600;color:var(--dark-gray);margin-bottom:.25rem;font-size:.9rem}.notification-message{color:#6c757d;font-size:.85rem;margin-bottom:.25rem;line-height:1.4}.notification-time{color:#adb5bd;font-size:.75rem}.notification-footer{padding:1rem 1.5rem;border-top:1px solid #e9ecef;text-align:center}.view-all-btn{background:var(--primary-maroon);color:var(--white);border:none;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease}.view-all-btn:hover{background:var(--accent-red);transform:translateY(-1px)}.navbar-user{position:relative}.user-menu-btn{display:flex;align-items:center;gap:.5rem;background:none;border:none;cursor:pointer;padding:.5rem;border-radius:8px;transition:background-color .3s ease}.user-menu-btn:hover{background-color:var(--light-gray)}.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-maroon);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:600}.user-name{font-weight:500;color:var(--dark-gray)}.dropdown-arrow{font-size:.8rem;color:var(--dark-gray)}.user-dropdown{position:absolute;top:100%;right:0;background:var(--white);border:1px solid #e9ecef;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:150px;z-index:1000;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease}.user-menu:hover .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{width:100%;padding:.75rem 1rem;background:none;border:none;text-align:left;cursor:pointer;color:var(--dark-gray);transition:background-color .3s ease}.dropdown-item:hover{background-color:var(--light-gray)}.page-content{flex:1;padding:0;background-color:var(--light-gray);overflow-y:auto}.modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}.modal-content{background:var(--white);border-radius:12px;box-shadow:0 20px 60px #0000004d;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:slideIn .3s ease}.profile-modal{max-width:450px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #e9ecef;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.modal-header h3{margin:0;font-size:1.5rem;font-weight:600;color:var(--primary-maroon)}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:.5rem;border-radius:50%;color:#6c757d;transition:all .3s ease}.close-btn:hover{background:#6c757d1a;color:#495057}.profile-form{padding:2rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--dark-gray);font-size:.9rem}.form-group input{width:100%;padding:.75rem 1rem;border:2px solid #e9ecef;border-radius:8px;font-size:1rem;transition:all .3s ease;background:var(--white)}.form-group input:focus{outline:none;border-color:var(--primary-maroon);box-shadow:0 0 0 3px #77171b1a}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e9ecef}.btn-secondary{background:#6c757d;color:var(--white);border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-secondary:hover{background:#5a6268;transform:translateY(-1px)}.btn-primary{background:var(--primary-maroon);color:var(--white);border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-primary:hover{background:var(--accent-red);transform:translateY(-1px);box-shadow:0 4px 12px #77171b4d}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes mobileSlideIn{0%{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 767px){.sidebar-overlay{display:block;opacity:0;visibility:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}.sidebar-overlay.active{opacity:1;visibility:visible}.sidebar{width:280px;transform:translate(-100%);transition:transform .4s cubic-bezier(.4,0,.2,1);-webkit-overflow-scrolling:touch;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:2px}.sidebar.open{transform:translate(0);box-shadow:4px 0 25px #0003}.sidebar-nav{padding:1rem 0;flex:1;min-height:0}.sidebar-footer{flex-shrink:0;border-top:1px solid rgba(255,255,255,.1)}.main-content{margin-left:0;transition:margin-left .4s cubic-bezier(.4,0,.2,1)}.menu-btn{display:flex;transition:transform .3s ease}.menu-btn.active{transform:rotate(90deg)}.navbar{padding:.75rem 1rem;transition:all .3s ease}.navbar-title{font-size:1.1rem}.page-content{padding:.5rem}.modal-content{width:95%;margin:.5rem;animation:mobileSlideIn .4s cubic-bezier(.4,0,.2,1)}.modal-header{padding:1rem 1.25rem}.profile-form{padding:1.25rem}.form-actions{flex-direction:column}.btn-secondary,.btn-primary{width:100%}}@media (min-width: 768px) and (max-width: 1023px){.sidebar{width:clamp(200px,25vw,250px)}.main-content{margin-left:clamp(200px,25vw,250px)}.navbar{padding:1rem 1.5rem}.page-content{padding:1rem}.modal-content{width:90%;max-width:600px}}@media (min-width: 1024px) and (max-width: 1279px){.sidebar{width:clamp(220px,20vw,280px)}.main-content{margin-left:clamp(220px,20vw,280px)}.navbar{padding:1.25rem 2rem}.page-content{padding:1.5rem}}@media (min-width: 1280px){.sidebar{width:clamp(240px,18vw,300px)}.main-content{margin-left:clamp(240px,18vw,300px)}.navbar{padding:1.25rem 2.5rem}.page-content{padding:2rem}}@media (min-width: 1920px){.sidebar{width:clamp(280px,15vw,350px)}.main-content{margin-left:clamp(280px,15vw,350px)}.navbar{padding:1.5rem 3rem}.page-content{padding:2.5rem}}@media (max-height: 915px) and (orientation: landscape){.sidebar{height:100vh;overflow-y:auto}.sidebar-header{padding:1.5rem 2rem .75rem}.sidebar-nav{padding:.75rem 0}.sidebar-footer{padding:1rem}.navbar{padding:.75rem 1rem}.page-content{padding:.5rem}}@media (min-width: 800px) and (max-width: 1280px) and (orientation: portrait){.sidebar{width:clamp(220px,25vw,280px)}.main-content{margin-left:clamp(220px,25vw,280px)}}@media (min-width: 1280px) and (max-width: 1600px) and (orientation: landscape){.sidebar{width:clamp(240px,18vw,300px)}.main-content{margin-left:clamp(240px,18vw,300px)}}@media (hover: none) and (pointer: coarse){.sidebar-link{padding:.75rem 2rem;min-height:48px}.menu-btn,.notification-btn{padding:.75rem;min-width:48px;min-height:48px}.user-menu-btn{padding:.75rem;min-height:48px}.btn-primary,.btn-secondary{min-height:48px;padding:1rem 1.5rem}.close-btn{padding:.75rem;min-width:48px;min-height:48px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.sidebar{box-shadow:2px 0 8px #00000026}.navbar{box-shadow:0 4px 16px #00000014}}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:16px;box-shadow:0 25px 50px #0006;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;animation:modalSlideIn .4s ease-out;position:relative;overflow:hidden}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 16px;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg,#667eeae6,#764ba2e6),url(/images/tehillah_banner.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;border-radius:16px 16px 0 0;position:relative}.modal-header:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#667eead9,#764ba2d9);border-radius:16px 16px 0 0}.modal-header h3{display:flex;align-items:center;gap:12px;margin:0;font-size:1.25rem;font-weight:600}.close-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:6px;transition:background-color .2s}.close-btn:hover{background:#fff3}.modal-body{padding:24px}.info-section{display:flex;gap:16px;padding:20px;background:#f8fafc;border-radius:8px;border-left:4px solid #3b82f6;margin-bottom:24px}.info-icon{color:#3b82f6;font-size:24px;flex-shrink:0;margin-top:2px}.info-text h4{margin:0 0 8px;color:#1f2937;font-size:1.1rem;font-weight:600}.info-text p{margin:0;color:#6b7280;line-height:1.5}.message{display:flex;align-items:center;gap:12px;padding:16px;border-radius:8px;margin-bottom:20px;font-weight:500}.message.success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.message.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.recovery-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:600;color:#374151;font-size:.9rem}.form-group input,.form-group select{padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus,.form-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-group input::placeholder{color:#9ca3af}.help-text{color:#6b7280;font-size:.85rem;margin-top:4px}.notification-info{background:#f9fafb;padding:20px;border-radius:8px;border:1px solid #e5e7eb}.notification-info h5{margin:0 0 16px;color:#374151;font-size:1rem;font-weight:600}.contact-methods{display:flex;flex-direction:column;gap:12px}.contact-method{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border-radius:6px;border:1px solid #e5e7eb}.contact-method svg{color:#3b82f6;font-size:20px}.contact-method span{font-weight:500;color:#374151;font-size:.9rem}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px;padding-top:20px;border-top:1px solid #e5e7eb}.btn-primary,.btn-secondary{padding:12px 24px;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;border:none}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.btn-primary:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background:#e5e7eb}.spinning{animation:spin 1s linear infinite}@media (max-width: 640px){.modal-overlay{padding:10px}.modal-content{max-height:95vh}.modal-header{padding:20px 16px 12px}.modal-header h3{font-size:1.1rem}.modal-body{padding:20px 16px}.info-section{padding:16px;flex-direction:column;text-align:center}.form-actions{flex-direction:column}.btn-primary,.btn-secondary{width:100%;justify-content:center}}@font-face{font-family:Campton;src:url(/font/CamptonBook.otf) format("opentype");font-weight:400;font-style:normal}@font-face{font-family:Campton;src:url(/font/CamptonMedium.otf) format("opentype");font-weight:500;font-style:normal}@font-face{font-family:Campton;src:url(/font/CamptonSemiBold.otf) format("opentype");font-weight:600;font-style:normal}@font-face{font-family:Campton;src:url(/font/CamptonBold.otf) format("opentype");font-weight:700;font-style:normal}@font-face{font-family:Campton;src:url(/font/CamptonExtraBold.otf) format("opentype");font-weight:800;font-style:normal}*{margin:0;padding:0;box-sizing:border-box;font-family:Campton,Poppins,sans-serif}.login-page{background:linear-gradient(#0009,#0009),url(/images/tehillah_banner.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;min-height:100vh;min-height:100dvh;width:100vw;color:#fff;display:flex;flex-direction:column;margin:0;padding:0;overflow-y:auto;overflow-x:hidden}.container{display:flex;justify-content:center;align-items:flex-start;flex-direction:column;padding:clamp(10px,4vw,40px);gap:clamp(20px,8vw,60px);width:100%;min-height:100vh;box-sizing:border-box}.welcome-box,.signin-box{background:#0006;padding:var(--spacing-scale);border-radius:var(--border-radius);width:clamp(300px,35vw,450px);max-width:100%;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px var(--shadow-blur) #0000004d}.welcome-box .brand{font-size:28px;color:var(--secondary-gold);margin-bottom:10px;display:flex;align-items:center;gap:10px}.welcome-box .school-icon{font-size:32px}.welcome-box h2{font-size:32px;font-weight:700;margin-bottom:10px;color:#fff}.welcome-box p{margin-bottom:10px;color:#ffffffe6;line-height:1.6}.socials{margin-top:20px}.socials a{color:#fff;margin-right:15px;font-size:24px;text-decoration:none;transition:transform .3s ease}.socials a:hover{transform:scale(1.2)}.social-icon{display:inline-block;transition:transform .3s ease}.socials a:hover .social-icon{transform:scale(1.2)}.school-info{background:#ffffff1a;padding:15px;border-radius:8px;margin-bottom:20px;border:1px solid rgba(255,255,255,.2)}.school-info h3{color:var(--secondary-gold);margin-bottom:10px;font-size:18px;display:flex;align-items:center;gap:8px}.school-info .info-icon{font-size:16px}.school-info p{margin:5px 0;font-size:14px;color:#ffffffe6}.signin-box h2{font-size:28px;margin-bottom:20px;color:#fff;text-align:center}.signin-box form{display:flex;flex-direction:column}.signin-box label{font-size:14px;margin-top:15px;color:#ffffffe6;font-weight:500}.signin-box input,.signin-box select{padding:12px;margin-top:5px;border:none;border-bottom:2px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;outline:none;border-radius:4px;transition:border-color .3s ease;font-family:Campton,sans-serif}.signin-box input:focus,.signin-box select:focus{border-bottom-color:var(--secondary-gold);background:#ffffff26}.signin-box input::placeholder{color:#fff9}.signin-box select option{background:var(--primary-maroon);color:#fff}.default-credentials{background:#ffffff1a;padding:10px;border-radius:6px;margin-top:10px;font-family:Courier New,monospace;font-size:12px;border:1px solid rgba(255,255,255,.2);color:#ffffffe6}.options{display:flex;justify-content:flex-end;align-items:center;margin-top:15px;font-size:14px}.options a{color:var(--secondary-gold);text-decoration:none;font-weight:500}.options a:hover{text-decoration:underline}.sign-btn{margin-top:25px;padding:14px;background:linear-gradient(135deg,var(--primary-maroon),var(--accent-red));border:none;color:#fff;border-radius:8px;cursor:pointer;font-weight:600;font-size:16px;transition:all .3s ease;font-family:Campton,sans-serif}.sign-btn:hover:not(:disabled){background:linear-gradient(135deg,var(--accent-red),var(--primary-maroon));transform:translateY(-2px);box-shadow:0 4px 15px #77171b66}.sign-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.signup-link{margin-top:20px;font-size:14px;text-align:center;color:#ffffffe6}.signup-link a{color:var(--secondary-gold);text-decoration:underline;font-weight:500}.signup-link a:hover{color:#fff}.error-message{background:#dc3545cc;color:#fff;padding:15px;border-radius:8px;margin-bottom:20px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;text-align:center}@media (max-width: 1280px) and (orientation: landscape){.container{flex-direction:row;padding:20px;gap:20px;align-items:flex-start}.welcome-box,.signin-box{width:calc(50vw - 30px);max-width:400px;padding:25px}.welcome-box h2{font-size:24px}.signin-box h2{font-size:20px}}@media (max-width: 1600px) and (max-height: 800px) and (orientation: landscape){.container{flex-direction:row;padding:15px;gap:15px;align-items:flex-start}.welcome-box,.signin-box{width:calc(50vw - 20px);max-width:350px;padding:20px}.welcome-box h2{font-size:20px}.signin-box h2{font-size:18px}.welcome-box p{font-size:13px}.signin-box input,.signin-box select{padding:10px}.sign-btn{padding:12px;font-size:14px}}@media (max-width: 1024px){.container{padding:30px;gap:30px}.welcome-box,.signin-box{width:350px;padding:35px}.welcome-box h2{font-size:28px}.signin-box h2{font-size:24px}}@media (max-width: 768px){.container{flex-direction:column;padding:20px;gap:20px;align-items:stretch}.welcome-box,.signin-box{width:100%;max-width:100%;padding:30px}.welcome-box h2{font-size:24px}.signin-box h2{font-size:22px}.welcome-box .brand{font-size:24px}}@media (max-width: 480px){.login-page{padding:10px}.container{padding:15px;gap:15px}.welcome-box,.signin-box{padding:20px;margin:0;border-radius:8px}.welcome-box h1.brand,.welcome-box h2{font-size:20px}.signin-box h2{font-size:18px}.welcome-box p{font-size:14px}.school-info p,.signin-box label{font-size:13px}.signin-box input,.signin-box select{padding:10px}.sign-btn{padding:12px;font-size:14px}.signup-link{font-size:12px}.default-credentials{font-size:11px;padding:8px}}@media (max-width: 360px){.welcome-box,.signin-box{padding:15px}.welcome-box h1.brand,.welcome-box h2{font-size:18px}.signin-box h2{font-size:16px}.signin-box input,.signin-box select{padding:8px}.sign-btn{padding:10px;font-size:13px}}@media (max-width: 320px){.container{padding:10px}.welcome-box,.signin-box{padding:12px}.socials a{margin-right:10px;font-size:20px}.school-info{padding:10px}}@media (max-height: 500px) and (orientation: landscape){.container{padding:15px;gap:15px}.welcome-box,.signin-box{padding:20px}.welcome-box h2{font-size:20px;margin-bottom:8px}.signin-box h2{font-size:18px;margin-bottom:15px}}@media (min-width: 1440px){.container{max-width:1400px}.welcome-box,.signin-box{width:450px;padding:50px}.welcome-box h2{font-size:36px}.signin-box h2{font-size:30px}}@media (min-width: 1920px){.container{max-width:1600px}.welcome-box,.signin-box{width:500px;padding:60px}}@media (min-width: 1600px){.container{flex-direction:row;justify-content:center;align-items:stretch;max-width:1400px;margin:0 auto;gap:4rem;padding:3rem 2rem}.welcome-box{flex:1;max-width:600px;min-width:450px;display:flex;flex-direction:column;justify-content:center;padding:3rem;margin:0}.signin-box{flex:0 0 450px;width:450px;max-width:450px;padding:3rem;margin:0;align-self:center}.welcome-box h2{font-size:2.5rem;margin-bottom:1.5rem}.welcome-box p{font-size:1.1rem;line-height:1.6;margin-bottom:1rem}.signin-box h2{font-size:2rem;margin-bottom:2rem}.school-info{padding:1.5rem;margin:2rem 0}.school-info h3{font-size:1.25rem;margin-bottom:1rem}.socials{margin-top:2rem}.developer-contact{margin-top:2rem;padding-top:1.5rem}}@media (min-width: 2000px){.container{max-width:1600px;gap:5rem;padding:4rem 3rem}.welcome-box{max-width:700px;min-width:500px;padding:4rem}.signin-box{flex:0 0 500px;width:500px;max-width:500px;padding:4rem}.welcome-box h2{font-size:3rem;margin-bottom:2rem}.welcome-box .brand{font-size:2.5rem;margin-bottom:1rem}.welcome-box p{font-size:1.2rem;line-height:1.7}.signin-box h2{font-size:2.25rem;margin-bottom:2.5rem}.school-info{padding:2rem;margin:2.5rem 0}.school-info h3{font-size:1.4rem;margin-bottom:1.25rem}.socials{margin-top:2.5rem}.developer-contact{margin-top:2.5rem;padding-top:2rem}}.developer-contact{margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.2)}.developer-info-small{display:flex;flex-direction:column;gap:4px;text-align:center}.developer-text{font-size:.75rem;color:#fffc;font-weight:500}.company-text{font-size:.7rem;color:var(--secondary-gold);font-weight:600;letter-spacing:.5px;text-transform:uppercase}.contact-text{font-size:.65rem;color:#ffffffb3;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:400}.contact-text svg{font-size:12px;color:#fff9}.help-page{min-height:100vh;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.help-header{background:linear-gradient(135deg,var(--primary-maroon) 0%,var(--secondary-maroon) 100%);color:#fff;padding:2rem 0;text-align:center;box-shadow:0 4px 20px #0000001a}.help-header .header-content h1{font-size:2.5rem;margin-bottom:.5rem;display:flex;align-items:center;justify-content:center;gap:1rem}.help-header .header-content p{font-size:1.2rem;opacity:.9;margin:0}.help-content{display:flex;max-width:1400px;margin:0 auto;padding:2rem;gap:2rem}.toc-sidebar{width:300px;flex-shrink:0;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;height:fit-content;position:sticky;top:2rem}.toc-header{padding:1.5rem;border-bottom:2px solid var(--primary-maroon);background:linear-gradient(135deg,var(--primary-maroon) 0%,var(--secondary-maroon) 100%);color:#fff;border-radius:12px 12px 0 0}.toc-header h3{margin:0;font-size:1.2rem;display:flex;align-items:center;gap:.5rem}.toc-nav{padding:1rem}.toc-nav ul{list-style:none;padding:0;margin:0}.toc-nav li{margin-bottom:.25rem}.toc-nav button{width:100%;text-align:left;padding:.75rem 1rem;border:none;background:transparent;color:var(--text-dark);border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:.95rem;display:flex;align-items:center;gap:.5rem}.toc-nav button:hover{background:var(--primary-maroon);color:#fff}.toc-nav button.active{background:var(--primary-maroon);color:#fff;font-weight:600}.toc-submenu{margin-left:1.5rem;margin-top:.5rem}.toc-submenu li{margin-bottom:.125rem}.toc-submenu button{padding:.5rem 1rem;font-size:.85rem;opacity:.8}.toc-submenu button:hover,.toc-submenu button.active{opacity:1}.help-main{flex:1;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;overflow:hidden}.help-section{padding:2rem;border-bottom:1px solid #e9ecef}.help-section:last-child{border-bottom:none}.help-section h2{color:var(--primary-maroon);font-size:1.8rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;border-bottom:2px solid var(--primary-maroon);padding-bottom:.5rem}.help-section h3{color:var(--secondary-maroon);font-size:1.4rem;margin:1.5rem 0 1rem}.help-section h4{color:var(--text-dark);font-size:1.1rem;margin:1rem 0 .5rem}.section-content{line-height:1.6}.section-content p{margin-bottom:1rem;color:var(--text-dark)}.section-content ul,.section-content ol{margin:1rem 0;padding-left:2rem}.section-content li{margin-bottom:.5rem}.section-content li strong{color:var(--primary-maroon)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.feature-card{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:1.5rem;border-radius:12px;text-align:center;border:1px solid #dee2e6;transition:transform .3s ease,box-shadow .3s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.feature-icon{font-size:3rem;color:var(--primary-maroon);margin-bottom:1rem}.feature-card h4{color:var(--primary-maroon);margin-bottom:.5rem;font-size:1.2rem}.feature-card p{color:var(--text-dark);margin:0;font-size:.95rem}.roles-table{margin:1.5rem 0}.role-row{display:flex;padding:1rem;border:1px solid #dee2e6;border-radius:8px;margin-bottom:1rem;background:#f8f9fa}.role-name{font-weight:600;color:var(--primary-maroon);min-width:120px}.role-description{color:var(--text-dark);flex:1}.note-box{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:1px solid #f39c12;border-radius:8px;padding:1rem;margin:1.5rem 0;display:flex;align-items:flex-start;gap:.75rem}.note-box svg{color:#f39c12;flex-shrink:0;margin-top:.125rem}.troubleshooting-item{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1rem;margin:1rem 0}.troubleshooting-item h4{color:var(--primary-maroon);margin:0 0 .5rem}.troubleshooting-item p{margin:0;color:var(--text-dark)}.faq-item{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1rem;margin:1rem 0}.faq-item h4{color:var(--primary-maroon);margin:0 0 .5rem}.faq-item p{margin:0;color:var(--text-dark)}@media (max-width: 1024px){.help-content{flex-direction:column;padding:1rem}.toc-sidebar{width:100%;position:static}.features-grid{grid-template-columns:1fr}}@media (max-width: 768px){.help-header .header-content h1{font-size:2rem;flex-direction:column;gap:.5rem}.help-section{padding:1rem}.help-section h2{font-size:1.5rem}.help-section h3{font-size:1.2rem}.role-row{flex-direction:column;gap:.5rem}.role-name{min-width:auto}}@media (max-width: 480px){.help-content{padding:.5rem}.toc-nav button{padding:.5rem;font-size:.9rem}.toc-submenu{margin-left:1rem}.toc-submenu button{padding:.4rem .75rem;font-size:.8rem}}.messages-container{padding:15px;max-width:650px;margin:0 auto}.messages-header{margin-bottom:30px;display:flex;justify-content:space-between;align-items:flex-start}.header-left h1{font-size:1.8rem;font-weight:600;color:#2c3e50;margin-bottom:6px;display:flex;align-items:center;gap:10px}.header-left h1 svg{color:#3498db}.header-left p{color:#666;font-size:1rem;margin:0}.messages-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:#666}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.messages-form-section{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px;margin-bottom:20px}.message-form{max-width:600px}.form-group{margin-bottom:22px}.form-group label{display:block;font-weight:600;color:#2c3e50;margin-bottom:8px;font-size:.95rem;display:flex;align-items:center;gap:8px}.form-group label svg{color:#3498db;font-size:18px}.form-group select,.form-group input,.form-group textarea{width:100%;padding:8px 10px;border:1px solid #b8bfca;border-radius:4px;font-size:.85rem;transition:border-color .3s ease;background:#fff}.form-group select:focus,.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db1a}.form-group textarea{resize:vertical;font-family:inherit;line-height:1.5;min-height:120px}.form-group small{display:block;color:#666;font-size:.85rem;margin-top:4px}.recipient-info{margin-top:8px;padding:8px 12px;background:#e8f5fe;border-radius:6px;display:flex;align-items:center;gap:8px;font-size:.9rem;color:#0277bd}.recipient-info svg{color:#0277bd}.send-options{display:flex;gap:20px;flex-wrap:wrap}.option{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400;-webkit-user-select:none;user-select:none}.option input[type=checkbox]{width:18px;height:18px;accent-color:#3498db}.option svg{color:#666;font-size:20px}.form-actions{margin-top:25px;padding-top:15px;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end}.send-button{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 4px 15px #3498db4d}.send-button:hover:not(:disabled){background:linear-gradient(135deg,#2980b9,#1f4e79);transform:translateY(-2px);box-shadow:0 6px 20px #3498db66}.send-button:disabled{background:#bdc3c7;cursor:not-allowed;box-shadow:none;transform:none}.send-button .spinning{animation:spin 1s linear infinite}@media (max-width: 768px){.messages-container{padding:15px}.messages-header{flex-direction:column;gap:15px}.header-left h1{font-size:1.6rem}.messages-form-section{padding:20px}.send-options{flex-direction:column;gap:12px}.form-actions{justify-content:center}.send-button{width:100%;justify-content:center}}@media (max-width: 480px){.messages-header,.form-group{margin-bottom:20px}.messages-form-section{padding:15px}}.App{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;min-height:100vh;min-height:100dvh;background-color:var(--light-gray);width:100vw;overflow-x:hidden}.page{background:var(--white);border-radius:var(--border-radius);padding:var(--spacing-scale);box-shadow:0 8px var(--shadow-blur) #00000014;margin:calc(var(--spacing-scale) * .5);min-height:calc(100vh - var(--spacing-scale));min-height:calc(100dvh - var(--spacing-scale));overflow-y:auto;overflow-x:hidden;box-sizing:border-box;width:calc(100vw - var(--spacing-scale));max-width:none}.page h1{margin:0 0 calc(var(--spacing-scale) * .5) 0;font-size:clamp(1.25rem,4vw,2rem);font-weight:700;color:var(--primary-maroon);line-height:1.2}.page p{margin:0 0 calc(var(--spacing-scale) * 1.5) 0;color:var(--dark-gray);font-size:clamp(.9rem,2.5vw,1.1rem);line-height:1.6}.placeholder-content{text-align:center;padding:3rem 2rem;color:#6c757d}.placeholder-content ul{text-align:left;max-width:400px;margin:1.5rem auto;padding-left:1.5rem}.placeholder-content li{margin-bottom:.5rem}.loading{position:fixed;inset:0;background:linear-gradient(#0009,#0009),url(/images/tehillah_banner.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;z-index:9999;min-height:100vh;min-height:100dvh;width:100vw;color:#fff;margin:0;padding:0;overflow-y:auto;overflow-x:hidden}.loading>*{background:#0006;border-radius:20px;padding:3rem;box-shadow:0 20px 60px #0000004d;text-align:center;max-width:400px;width:90%;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;gap:1.5rem}.loading .spinner-icon{font-size:4rem;color:var(--primary-maroon);animation:spin 2s linear infinite}.loading h2{margin:0;font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-.025em;text-shadow:0 2px 4px rgba(0,0,0,.3)}.loading p{margin:0;color:#ffffffe6;font-size:1rem;line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.3)}.loading .progress-bar{width:100%;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 2px #0000001a}.loading .progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-maroon) 0%,var(--accent-red) 100%);border-radius:3px;animation:progress 2s ease-in-out infinite}@media (max-width: 768px){.loading>*{padding:2rem;margin:1rem;border-radius:16px}.loading .spinner-icon{font-size:3rem}.loading h2{font-size:1.25rem}.loading p{font-size:.9rem}}@media (max-width: 480px){.loading>*{padding:1.5rem;margin:.5rem}.loading .spinner-icon{font-size:2.5rem}.loading h2{font-size:1.1rem}.loading p{font-size:.85rem}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes progress{0%{width:0%}50%{width:70%}to{width:100%}}