.modal-overlay{z-index:15;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#11182780;flex-direction:column;animation:.2s ease-out fadeIn;display:flex;position:absolute;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-click-area{flex:1}.modal-container{width:100%;max-height:80%;padding-bottom:calc(3.6rem + env(safe-area-inset-bottom,0px));background-color:#fff;border-top-left-radius:1rem;border-top-right-radius:1rem;flex-direction:column;animation:.3s ease-out slideInBottom;display:flex;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}.header-title-group{align-items:center;column-gap:.5rem;display:flex}.modal-title{font-size:var(--text-lg);color:#111827;font-weight:700}.notification-badge{color:#fff;font-size:var(--text-2xs);background-color:#ef4444;border-radius:9999px;padding:.125rem .5rem;font-weight:700}.modal-bell-icon{color:#374151}.header-actions{align-items:center;column-gap:.5rem;display:flex}.clear-btn{font-size:var(--text-xs);color:#6b7280;margin-right:.5rem;font-weight:600;transition:color .15s}.clear-btn:hover{color:#111827}.close-btn{border-radius:9999px;padding:.25rem;transition:background-color .15s}.close-btn:hover{background-color:#f3f4f6}.modal-close-icon{color:#6b7280}.notification-list{flex:1;padding:0;overflow:hidden auto}.empty-state{color:#9ca3af;flex-direction:column;justify-content:center;align-items:center;padding-top:3rem;padding-bottom:3rem;display:flex}.empty-icon{opacity:.2;margin-bottom:.75rem}.empty-text{font-size:var(--text-sm)}.notification-item{cursor:pointer;border-bottom:1px solid #f3f4f6;align-items:flex-start;column-gap:.75rem;padding:1rem;transition:background-color .15s;display:flex}.notification-item:last-child{border-bottom:none}.notification-item:hover{background-color:#f9fafb}.notification-item.read{background-color:#fff}.notification-item.unread{background-color:#eff6ff}.notification-icon-wrapper{flex-shrink:0;margin-top:.125rem}.notification-content{flex:1;min-width:0}.notification-title{font-size:var(--text-sm);color:#111827;font-weight:600}.notification-title.bold{font-weight:700}.notification-message{font-size:var(--text-xs);color:#6b7280;margin-top:.125rem;line-height:1.625}.notification-timestamp{font-size:var(--text-2xs);color:#9ca3af;margin-top:.5rem;display:block}.unread-dot{background-color:#3b82f6;border-radius:9999px;width:.5rem;height:.5rem;margin-top:.5rem}.icon-success{color:#22c55e}.icon-warning{color:#f59e0b}.icon-error{color:#ef4444}.icon-info{color:#3b82f6}
:root{--text-2xs:.625rem;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem}@media (min-width:768px){:root{--text-2xs:.75rem;--text-xs:.875rem;--text-sm:1rem;--text-base:1.125rem;--text-lg:1.25rem;--text-xl:1.5rem;--text-2xl:1.875rem;--text-3xl:2.25rem;--text-4xl:3rem}}.layout-container{background-color:#f3f4f6;justify-content:center;width:100%;height:100dvh;display:flex;overflow:hidden}.layout-wrapper{background-color:#f9fafb;flex-direction:column;width:100%;max-width:48rem;height:100%;display:flex;position:relative;box-shadow:0 25px 50px -12px #00000040}.layout-wrapper.admin-mode{background-color:#f8fafc;border-width:4px;border-color:#f59e0b}.layout-header{z-index:20;background-color:#fff;border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;padding:.5rem 1.25rem;display:flex;position:sticky;top:0}.layout-header.admin-mode{background-color:#fffbeb}.header-left{flex:1;justify-content:flex-start;display:flex}.admin-exit-btn{color:#b45309;background-color:#fef3c7;border-radius:9999px;align-items:center;column-gap:.25rem;padding:.375rem .75rem;font-weight:700;transition:background-color .15s cubic-bezier(.4,0,.2,1);display:flex}.admin-exit-btn:hover{background-color:#fde68a}.logo-box{background-color:#2563eb;border-radius:.5rem;justify-content:center;align-items:center;width:2rem;height:2rem;display:flex}.logo-text{color:#fff;font-weight:700;font-size:var(--text-sm)}.header-center{flex:4;justify-content:center;display:flex;position:relative}.student-switcher-btn{border-radius:.5rem;align-items:center;column-gap:.375rem;padding:.25rem .75rem;transition:background-color .15s cubic-bezier(.4,0,.2,1);display:flex}.student-switcher-btn.interactive:hover{cursor:pointer;background-color:#f3f4f6}.student-switcher-btn:not(.interactive){cursor:default}.student-info{flex-direction:column;align-items:center;display:flex}.student-switcher-icon{color:#6b7280;margin-left:.5rem}.student-school-info{font-size:var(--text-xs);color:#6b7280;text-align:center;word-break:keep-all;white-space:normal;font-weight:600}.student-name{font-size:var(--text-sm);color:#111827;font-weight:700}.student-dob{color:#9ca3af;margin-left:.25rem;font-weight:400}.dropdown-menu{z-index:50;background-color:#fff;border:1px solid #f3f4f6;border-radius:.75rem;width:12rem;margin-top:.5rem;animation:.1s ease-out fadeInZoom;position:absolute;top:100%;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@keyframes fadeInZoom{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.dropdown-header{background-color:#f9fafb;border-bottom:1px solid #f3f4f6;padding:.5rem 1rem}.dropdown-title{font-size:var(--text-xs);color:#6b7280;text-transform:uppercase;letter-spacing:.05em;font-weight:600}.dropdown-item{text-align:left;justify-content:space-between;align-items:center;width:100%;padding:.75rem 1rem;transition:background-color .15s cubic-bezier(.4,0,.2,1);display:flex}.dropdown-item:hover{background-color:#eff6ff}.dropdown-item-text{font-size:var(--text-sm);color:#374151;font-weight:500}.dropdown-item-text.active,.dropdown-check-icon{color:#2563eb}.header-right{flex:1;justify-content:flex-end;display:flex}.notification-btn{border-radius:9999px;padding:.5rem;transition:background-color .15s cubic-bezier(.4,0,.2,1);position:relative}.notification-btn:hover{background-color:#f3f4f6}.notification-dot{background-color:#ef4444;border-radius:9999px;width:.5rem;height:.5rem;position:absolute;top:.5rem;right:.625rem;box-shadow:0 0 0 1px #fff}.header-bell-icon{color:#374151}.admin-badge{color:#92400e;font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.05em;background-color:#fde68a;border-radius:.25rem;padding:.25rem .5rem;font-weight:700}.layout-main{-ms-overflow-style:none;scrollbar-width:none;scroll-behavior:smooth;flex:1;position:relative;overflow-y:auto}.layout-main::-webkit-scrollbar{display:none}.bottom-nav{z-index:20;padding:.75rem 1.5rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));background-color:#fff;border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;display:flex;position:sticky;bottom:0}.nav-btn{color:#9ca3af;flex-direction:column;align-items:center;row-gap:.1rem;display:flex}.nav-btn.active{color:#2563eb}.nav-btn-text{font-size:var(--text-2xs);font-weight:500}.nav-icon{transition:transform .15s}.nav-icon.active{transform:scale(1.1)}
.login-container{background-color:#fff;justify-content:center;align-items:center;width:100%;height:100vh;padding:1.5rem;display:flex}.login-wrapper{width:100%;max-width:28rem}.login-header{text-align:center;margin-bottom:2.5rem}.login-logo-box{justify-content:center;align-items:center;margin-bottom:1rem;margin-left:auto;margin-right:auto;display:flex}.login-logo-text{color:#fff;font-weight:700;font-size:var(--text-2xl)}.login-title{font-size:var(--text-2xl);color:#111827;letter-spacing:-.025em;font-weight:700}.login-subtitle{color:#6b7280;margin-top:.5rem}.login-form{flex-direction:column;row-gap:1.5rem;display:flex}.form-label{font-size:var(--text-sm);color:#374151;margin-bottom:.25rem;margin-left:.25rem;font-weight:500;display:block}.form-input{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.75rem;outline:none;width:100%;padding:.875rem 1rem;font-weight:500;transition:all .15s}.form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #dbeafe}.login-btn{color:#fff;background-color:#2563eb;border-radius:.75rem;width:100%;padding-top:.875rem;padding-bottom:.875rem;font-weight:600;transition:all .15s;box-shadow:0 10px 15px -3px #bfdbfe80}.login-btn:hover{background-color:#1d4ed8}.login-btn:active{transform:scale(.98)}.login-footer{text-align:center;font-size:var(--text-xs);color:#9ca3af;margin-top:2rem}
.cp-container{justify-content:center;align-items:center;display:flex;position:relative}.cp-svg{transform:rotate(-90deg)}.cp-circle-progress{transition:all 1s ease-out}.cp-inner-content{flex-direction:column;justify-content:center;align-items:center;line-height:1;display:flex;position:absolute;inset:0}.cp-text-value{color:#111827;font-weight:700}.cp-text-lg{font-size:var(--text-lg);line-height:1.75rem}.cp-text-4xl{font-size:var(--text-4xl);line-height:2.5rem}.cp-label{color:#9ca3af;text-transform:uppercase;letter-spacing:.025em;text-align:center;margin-top:.25rem;font-weight:500}.cp-label-micro{font-size:var(--text-2xs)}.cp-label-xs{font-size:var(--text-xs);line-height:1rem}