:root { --primary: #09314f; --blue: #1268d0; --muted: #6b7280; --line: #eeeeee; }
* { box-sizing: border-box; } body { display: flex; justify-content: center; min-height: 100vh; margin: 0; color: #111; background: #edf4ff; font: 14px Roboto, sans-serif; } button { border: 0; font: inherit; cursor: pointer; } .app-frame { position: relative; width: 500px; height: 900px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); margin: 12px 0; overflow: hidden auto; background: #fff; border: 1px solid #d8dee8; border-radius: 10px; box-shadow: 0 2px 12px #09314f18; }
.login-container { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; } .login-curve { position: absolute; top: -8px; left: 0; width: min(320px, 43vw); pointer-events: none; } .login-card { display: flex; align-items: center; width: min(300px, calc(100% - 32px)); flex-direction: column; } .login-image { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; margin-bottom: 30px; background: #fff; border-radius: 142px; box-shadow: inset 0 -10px 21px #00000021; } .login-image img { max-width: 200px; max-height: 200px; } .login-card > strong { margin-bottom: 28px; color: #3f1e59; font-size: 24px; } .login-card form { width: 100%; } .login-card label { position: relative; display: flex; align-items: center; height: 51px; margin-bottom: 16px; border: 1px solid #adb5bd; border-radius: 6px; } .login-card label > i { width: 39px; color: var(--primary); text-align: center; } .login-card input { width: 100%; height: 100%; padding: 0 35px 0 2px; color: var(--primary); border: 0; outline: 0; font-size: 16px; } .login-card input::placeholder { color: var(--primary); opacity: 1; } .login-card label button { position: absolute; right: 10px; color: var(--primary); background: transparent; font-size: 16px; } .login-submit { width: 100%; padding: 12px; margin-top: 25px; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); border-radius: 4px; font-weight: 600; } .login-error { min-height: 15px; margin: -3px 0; color: #dc3545; font-size: 12px; }
.landing-header { position: absolute; top: 0; left: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 72px; padding: 10px 8px; background: #fff; box-shadow: 0 2px 10px 1px #0000002b; } .landing-logo { width: 50px; height: 50px; object-fit: contain; } .landing-header h1 { position: absolute; left: 50%; margin: 0; color: var(--primary); transform: translateX(-50%); font-size: 20px; font-weight: 700; white-space: nowrap; } .back-button, .menu-button, .notification-button { color: var(--primary); background: transparent; } .back-button { display: none; font-size: 18px; } .header-actions { display: flex; align-items: center; gap: 13px; } .notification-button { position: relative; padding: 8px; color: #333; font-size: 18px; } .notification-button span { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 17px; height: 17px; color: #fff; background: #f00; border: 2px solid #fff; border-radius: 50%; font-size: 9px; font-weight: 700; } .menu-button { padding: 8px; font-size: 22px; }
.page-container { width: min(760px, 100%); min-height: 100%; padding: 93px 16px 30px; margin: auto; } .profile-banner { position: relative; display: flex; align-items: center; min-height: 76px; padding: 10px 13px; overflow: hidden; color: #fff; background: #06395f; border-radius: 4px; } .profile-avatar { z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; margin-right: 10px; background: transparent; border: 3px solid #fff; border-radius: 50%; } .profile-avatar img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .profile-copy { z-index: 1; } .profile-copy h2 { margin: 0 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; } .profile-copy p { margin: 2px 0; font-size: 10px; } .profile-copy strong { font-weight: 700; } .orb { position: absolute; width: 100px; height: 100px; background: rgb(85 123 232 / 20%); border-radius: 50%; } .orb-large { top: -23px; left: -20px; } .orb-top { top: -28px; right: 44px; width: 50px; height: 50px; } .orb-bottom { bottom: -28px; left: 82px; width: 50px; height: 50px; } .orb-right { right: -15px; bottom: -30px; }
.dashboard-title { margin: 8px 0 0; color: #000; font-size: 12px; font-weight: 600; } .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; justify-items: center; gap: 7px 12px; padding-top: 8px; } .dashboard-tile { display: flex; align-items: center; justify-content: center; width: 62px; min-height: 62px; padding: 5px; flex-direction: column; text-align: center; background: #eae9fb; border: 1px solid #d6d4ff; border-radius: 4px; box-shadow: 0 3px 4px #0003; transition: transform .2s, box-shadow .2s; } .dashboard-tile:hover { transform: translateY(-2px); box-shadow: 0 7px 10px #0003; } .dashboard-tile img { width: 29px; height: 29px; margin-bottom: 3px; object-fit: contain; } .dashboard-tile strong { color: #1268d0; font-size: 8px; font-weight: 600; } .tile-homework { background: #ffeff2; border-color: #ffd1d9; } .tile-events { background: #f5f8f5; border-color: #dfffdf; } .tile-feedback { background: #fffbf2; border-color: #fff2d5; } .tile-attendance { background: #f9f0ff; border-color: #f0d9ff; } .tile-leave { background: #eae9fb; border-color: #d6d4ff; } .tile-fees { background: #fff7ed; border-color: #ffe1bd; } .tile-quiz { background: #eae9fb; border-color: #d6d4ff; } .tile-syllabus { background: #fff1f1; border-color: #ffd8d8; }
.bottom-panel { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); } .section-heading { display: flex; align-items: center; justify-content: space-between; } .section-heading h2 { margin: 0 0 8px; font-size: 12px; font-weight: 600; } .section-heading button { margin-bottom: 8px; color: #697684; background: transparent; font-size: 8px; } .no-homework { margin: 29px 0 40px; color: #123e61; font-size: 13px; text-align: center; } .homework-row { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 7px 9px; margin-bottom: 7px; background: #fff1ef; border-left: 4px solid #ffd2c8; border-radius: 4px; } .homework-row div { flex: 1; } .homework-row strong, .homework-row span, .homework-row small { display: block; } .homework-row strong { font-size: 10px; } .homework-row span { margin-top: 4px; color: #7a6f72; font-size: 8px; } .homework-row small { margin-top: 2px; color: #9c9898; font-size: 7px; } .homework-row > i { color: #7d5362; font-size: 9px; }
.events-panel { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); } .event-card { display: flex; gap: 10px; padding: 7px; background: #f0ddff; border-right: 4px solid #a556d8; border-radius: 4px; } .event-card img { width: 68px; height: 74px; object-fit: cover; } .event-card strong { color: #9759c2; font-size: 9px; } .event-card p { margin: 5px 0; font-size: 8px; line-height: 1.4; } .event-card small { color: #70557f; font-size: 7px; }
.route-page { padding-top: 5px; } .route-back { margin-bottom: 20px; color: var(--blue); background: transparent; font-size: 13px; } .route-title { margin: 0 0 5px; color: #000; font-size: 22px; font-weight: 600; } .route-subtitle { margin: 0 0 20px; color: var(--muted); } .route-card, .static-form { padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 3px 10px #00000012; } .static-table { overflow: hidden; border: 1px solid #e5edf2; border-radius: 6px; } .table-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 13px; } .table-row:has(span:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } .table-row:last-child { border-bottom: 0; } .table-row.table-head { color: var(--primary); background: #f3f9ff; font-weight: 600; } .table-row span { min-width: 0; } .static-form { display: grid; gap: 15px; } .static-form label { display: grid; gap: 6px; color: var(--primary); font-weight: 500; } .static-form input, .static-form textarea { width: 100%; padding: 11px; border: 1px solid #adb5bd; border-radius: 5px; font: inherit; } .static-form textarea { min-height: 120px; resize: vertical; } .primary-action { width: fit-content; padding: 10px 18px; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); border-radius: 4px; font-weight: 600; }
.sidebar-overlay, .modal { position: absolute; inset: 0; z-index: 9; visibility: hidden; opacity: 0; transition: .25s; } .sidebar-overlay { background: rgb(0 0 0 / 50%); } .sidebar-overlay.open, .modal.open { visibility: visible; opacity: 1; } .landing-sidebar { position: absolute; top: 0; right: -320px; z-index: 10; width: 300px; height: 100%; overflow-y: auto; background: #effbff; box-shadow: -2px 0 10px #0000001a; transition: right .3s ease; } .landing-sidebar.open { right: 0; } .sidebar-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 24px 12px; } .sidebar-profile { display: flex; align-items: center; gap: 10px; } .sidebar-profile img { width: 60px; height: 60px; border-radius: 50%; } .sidebar-profile strong, .sidebar-profile span { display: block; } .sidebar-profile strong { font-size: 18px; } .sidebar-profile span { margin-bottom: 2px; font-size: 13px; font-weight: 400; } .sidebar-header button { position: absolute; top: 9px; right: 10px; color: #111; background: transparent; font-size: 20px; } .menu-list { margin: 10px; background: #fff; border: 1px solid #ededed; border-radius: 8px; } .menu-list button { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 20px); padding: 20px 2px; margin: 0 10px; color: #111; text-align: left; background: #fff; border-bottom: 1px solid var(--line); } .menu-list button:last-child { border-bottom: 0; } .menu-list span { display: flex; align-items: center; font-size: 16px; font-weight: 600; } .menu-list span i { width: 30px; color: var(--blue); font-size: 20px; }
.modal { display: grid; place-items: center; padding: 20px; background: #0008; } .modal-card { position: relative; width: min(420px, 100%); padding: 24px 18px; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px #09314f47; } .modal-card h2 { margin: 0 0 16px; color: #123e61; font-size: 24px; } .modal-close { position: absolute; top: 12px; right: 12px; color: #333; background: transparent; font-size: 19px; } .notice { padding: 13px 0; border-top: 1px solid var(--line); } .notice strong, .notice span { display: block; } .notice span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.siblings-page { min-height: 100vh; padding: 92px 12px 30px; background: #fff; } .siblings-intro { margin: 34px 0 20px; color: #637387; font-size: 16px; } .sibling-list { display: grid; gap: 34px; } .sibling-card { display: flex; align-items: center; min-height: 84px; padding: 14px; background: #fff; border: 1px solid #e6e9ee; border-radius: 13px; box-shadow: 0 4px 12px #00000012; } .sibling-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; margin-right: 10px; color: #fff; background: #06395f; border-radius: 50%; font-size: 19px; } .sibling-info { min-width: 0; flex: 1; } .sibling-info strong { display: block; overflow: hidden; color: #3f1e59; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .sibling-info span { display: inline-block; padding: 5px 9px; margin: 9px 5px 0 0; color: #637387; background: #f1f4f7; border-radius: 14px; font-size: 12px; } .select-student { padding: 10px 14px; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); border-radius: 4px; font-weight: 600; }
.siblings-sidebar { width: 50%; } .siblings-sidebar .sidebar-header { padding: 16px 10px 14px; } .siblings-sidebar .sidebar-profile { gap: 8px; } .siblings-sidebar .sidebar-profile img { width: 38px; height: 38px; } .siblings-sidebar .sidebar-profile strong { color: #06395f; font-size: 14px; font-weight: 700; } .siblings-sidebar .sidebar-profile span { margin: 0; color: #06395f; font-size: 14px; font-weight: 700; } .siblings-sidebar .sidebar-header button { top: 8px; right: 8px; font-size: 14px; } .siblings-sidebar .menu-list { margin: 10px 8px; } .siblings-sidebar .menu-list button { width: calc(100% - 12px); padding: 17px 0; margin: 0 6px; } .siblings-sidebar .menu-list span { font-size: 12px; } .siblings-sidebar .menu-list span i { width: 22px; font-size: 13px; } .siblings-sidebar .menu-list button > i { color: #777; font-size: 10px; } #logoutButton, #logoutButton span, #logoutButton span i, #logoutButton > i { color: #f0444b !important; }
.profile-page { min-height: 100%; padding-top: 0; } .profile-hero { position: relative; display: flex; align-items: center; height: 230px; padding-top: 34px; flex-direction: column; overflow: hidden; background: #fff; } .profile-curve-art { position: absolute; bottom: 0; left: 50%; z-index: 0; width: 100%; height: auto; transform: translateX(-50%); pointer-events: none; } .profile-page-avatar { position: relative; z-index: 1; display: block; width: 80px; height: 80px; margin-bottom: 10px; background: #06395f; border: 2px solid #09314f; border-radius: 50%; object-fit: cover; } .profile-hero strong { position: relative; z-index: 1; color: #06395f; font-size: 13px; } .profile-details { padding: 23px 33px; } .profile-details div { display: flex; align-items: center; justify-content: space-between; min-height: 39px; border-bottom: 1px solid #eeeeee; color: #06395f; font-size: 12px; } .profile-details b { font-size: 12px; font-weight: 600; } .app-frame.profile-active .landing-header { height: 48px; } .app-frame.profile-active .page-container { padding-top: 48px; }
.homework-page { min-height: 100%; padding: 17px 22px 30px; } .homework-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 8px 5px 13px; } .homework-filters label { position: relative; color: #234565; font-size: 10px; } .homework-filters select, .homework-filters input { display: block; width: 100%; height: 34px; padding: 0 10px; margin-top: 3px; color: #778595; background: #fff; border: 1px solid #d2dbe4; border-radius: 4px; font: 11px Roboto, sans-serif; } .homework-cards { display: grid; gap: 10px; } .homework-card { padding: 12px 10px; background: #fff; border: 1px solid #dce3e9; border-radius: 4px; box-shadow: 0 1px 4px #0000000d; } .homework-meta { display: flex; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; color: #73808c; border-bottom: 1px solid #e5e9ed; font-size: 8px; } .homework-meta b { color: #06395f; } .homework-card > strong { display: block; margin-bottom: 11px; color: #17334d; font-size: 11px; font-weight: 500; } .homework-preview { height: 116px; overflow: hidden; border-radius: 3px; background-color: #d7d7d7; background-image: repeating-linear-gradient(0deg, #0000001a 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, #0000001a 0 1px, transparent 1px 25px); box-shadow: inset 0 0 14px #0000001c; } .preview-one { background-color: #d6d6d6; } .preview-two { background-color: #dbdbdb; } .preview-three { background-color: #d2d2d2; }
.filter-field { position: relative; } .filter-field > span { position: absolute; top: -5px; left: 8px; z-index: 2; padding: 0 4px; color: #123e61; background: #fff; font-size: 10px; } .subject-control, .date-control { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 47px; padding: 0 12px; color: #6a7380; background: #fff; border: 1px solid #9eabb8; border-radius: 7px; text-align: left; font-size: 16px; } .subject-control:focus, .date-control:focus { outline: 4px solid #cad7e1; } .subject-control i { color: #666; font-size: 14px; } .subject-menu, .date-picker { position: absolute; top: 55px; left: 0; z-index: 8; display: none; width: 100%; background: #fff; border: 1px solid #d7dce2; border-radius: 0 0 5px 5px; box-shadow: 0 2px 8px #00000025; } .subject-menu.open, .date-picker.open { display: block; } .subject-option { display: block; width: 100%; padding: 14px 16px; color: #3f1e59; background: #fff; text-align: left; font-size: 16px; } .subject-option:hover, .subject-option.selected { background: #dceaff; } .date-picker { width: 302px; padding-bottom: 8px; } .calendar-heading { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; background: #f4f4f4; border-bottom: 1px solid #cfd3d7; } .calendar-heading button { width: 20px; color: #b7bec4; background: transparent; font-size: 30px; line-height: 20px; } .calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .calendar-week { padding: 11px 9px 7px; } .calendar-week b { font-weight: 400; } .calendar-days { gap: 2px; padding: 4px 9px; } .calendar-days button { display: grid; place-items: center; width: 34px; height: 34px; color: #111; background: #fff; border-radius: 3px; } .calendar-days button:hover, .calendar-days button.today { color: #123e61; background: #c5e2f8; font-weight: 700; } .calendar-days button.muted-day { color: #c5cbd0; }
.app-frame.detail-active .landing-header { height: 40px; } .app-frame.detail-active .page-container { padding-top: 40px; }
.feedback-list { position: relative; min-height: calc(100vh - 40px); padding: 26px 16px; } .feedback-item { min-height: 76px; padding: 10px 12px; border-left: 3px solid #9ed8ff; border-radius: 4px; box-shadow: 0 1px 5px #00000012; color: #123e61; } .feedback-item small { font-size: 9px; } .feedback-item p { margin: 9px 0 8px; font-size: 10px; } .feedback-item > div { display: flex; justify-content: flex-end; gap: 6px; } .feedback-item button { padding: 4px 9px; color: #fff; border-radius: 3px; font-size: 8px; } .feedback-delete { background: #ff3025; } .feedback-edit { background: #06395f; }
.confirm-modal .modal-card { display: flex; align-items: center; width: 190px; min-height: 133px; padding: 11px 14px; flex-direction: column; text-align: center; border-radius: 5px; } .confirm-modal .modal-card h2 { display: none; } .confirm-modal #modalBody { display: flex; align-items: center; width: 100%; flex-direction: column; } .warning-icon { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 0 9px; color: #806300; background: #fff3c9; border-radius: 5px; font-size: 18px; } .confirm-title { color: #60426d; font-size: 11px; } .confirm-actions { display: flex; justify-content: center; gap: 7px; margin-top: 17px; } .confirm-actions button { min-width: 49px; padding: 6px 12px; border: 1px solid #7590a4; border-radius: 3px; font-size: 9px; } .confirm-actions button:first-child { color: #123e61; background: #fff; } .confirm-actions button:last-child { color: #fff; background: #06395f; border-color: #06395f; }
.success-toast { position: absolute; top: 8px; left: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: min(215px, 100%); min-height: 36px; padding: 8px 10px; color: #35634f; background: #d9f2e7; border: 1px solid #c6e8da; border-radius: 0 8px 8px 0; box-shadow: 0 2px 7px #00000018; font-size: 9px; } .success-toast button { padding: 0 1px; color: #789488; background: transparent; font-size: 12px; }
.quiz-page { min-height: calc(100vh - 40px); padding: 25px 25px; } .quiz-page h2 { margin: 0 0 13px; color: #3f1e59; font-size: 12px; } .quiz-card { display: flex; align-items: center; justify-content: space-between; width: 157px; height: 73px; padding: 12px; color: #06395f; background: #fff; border: 1px solid #dce3e9; border-radius: 3px; box-shadow: 0 1px 4px #0000000d; text-align: left; } .quiz-card strong { font-size: 8px; } .quiz-card span { padding: 3px 5px; color: #fff; background: #13bde2; border-radius: 3px; font-size: 7px; font-weight: 700; } .quiz-modal .modal-card { width: min(380px, calc(100% - 30px)); padding: 0 15px; border-radius: 4px; } .quiz-modal .modal-card h2 { padding: 13px 0 10px; margin: 0; border-bottom: 1px solid #eee; color: #60426d; font-size: 14px; } .quiz-question { padding: 31px 7px 36px; color: #60426d; font-size: 9px; } .quiz-question > strong { display: block; margin-bottom: 3px; } .quiz-question p { margin: 0 0 14px; } .quiz-question label { display: block; margin: 10px 0; } .quiz-question input { accent-color: #0b547e; margin-right: 8px; } .quiz-question label b { margin-right: 9px; font-weight: 400; } .quiz-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 0; border-top: 1px solid #eee; } .quiz-actions button { padding: 7px 10px; border-radius: 3px; font-size: 9px; font-weight: 600; } .quiz-submit { color: #fff; background: #5c88a6; } .quiz-submit:disabled { cursor: not-allowed; opacity: .8; } .quiz-cancel { color: #fff; background: #ff641e; }
.result-modal .modal-card { position: relative; display: flex; align-items: center; width: min(320px, calc(100% - 30px)); min-height: 312px; padding: 31px 20px 18px; flex-direction: column; overflow: hidden; border-radius: 5px; text-align: center; } .result-modal .modal-card h2 { display: none; } .result-modal #modalBody { display: flex; align-items: center; width: 100%; flex-direction: column; } .result-trophy { margin: 2px 0 10px; font-size: 54px; line-height: 1; } .result-congrats { margin-bottom: 13px; color: #123e61; font-size: 14px; } .result-score-label { color: #555; font-size: 10px; } .result-score { margin-top: 3px; color: #3657b1; font-size: 14px; } .result-score small { color: #333; font-size: 12px; } .result-actions { display: grid; width: 100%; gap: 12px; margin-top: 20px; } .result-actions button { width: 100%; height: 30px; color: #fff; border-radius: 3px; font-size: 10px; font-weight: 600; } .answers-button { background: #08b54b; } .dashboard-button { background: #06395f; } .result-confetti { position: absolute; width: 9px; height: 42px; border-radius: 4px; transform: rotate(29deg); } .confetti-left { top: 8px; left: 15px; background: #5843ba; box-shadow: 17px 13px #27caef, 4px 42px #fe675d; } .confetti-right { right: 15px; bottom: 4px; background: #5843ba; box-shadow: -17px -13px #27caef, -4px -42px #ffc20e; }
.events-page { display: grid; gap: 14px; padding: 22px 26px; } .event-list-card { position: relative; display: flex; align-items: stretch; min-height: 101px; padding: 7px; gap: 10px; border-radius: 6px; border-right: 4px solid; } .event-kargil { background: #f0ddff; border-color: #a556d8; } .event-yellow { background: #e8faff; border-color: #16c4ed; } .event-yoga { background: #fff0f0; border-color: #ff5252; } .event-thumb { width: 85px; flex: 0 0 85px; background-color: #c8c8c8; background-image: repeating-linear-gradient(0deg, #0000001a 0 1px, transparent 1px 17px), repeating-linear-gradient(90deg, #0000001a 0 1px, transparent 1px 18px); } .event-thumb-one { background-color: #b7b7b7; } .event-thumb-two { background-color: #b8d2a5; } .event-thumb-three { background-color: #a5a5a5; } .event-list-copy { min-width: 0; flex: 1; } .event-list-copy strong { display: block; margin: 2px 0 5px; color: #a15ac6; font-size: 10px; } .event-yellow .event-list-copy strong { color: #17bce5; } .event-yoga .event-list-copy strong { color: #f04c55; } .event-list-copy p { margin: 0 0 4px; color: #493d52; font-size: 8px; line-height: 1.35; } .event-list-copy small { color: #786580; font-size: 7px; } .event-list-card > button { align-self: flex-end; padding: 0 3px 2px; color: #0875d1; background: transparent; font-size: 7px; white-space: nowrap; } .modal.event-modal { background: #0008; } .event-modal .modal-card { width: min(380px, calc(100% - 30px)); padding: 0 14px 16px; border-radius: 4px; } .event-modal .modal-card h2 { padding: 12px 0 8px; margin: 0; border-bottom: 1px solid #eee; font-size: 14px; } .event-modal .event-detail-image { height: 370px; margin: 22px 16px 13px; background-color: #b7b7b7; background-image: repeating-linear-gradient(0deg, #0000001a 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, #0000001a 0 1px, transparent 1px 24px); } .event-modal .event-detail-copy { padding: 0 2px; color: #333; font-size: 9px; line-height: 1.5; } .event-detail-copy strong, .event-detail-copy b { display: block; margin-bottom: 8px; } .event-detail-copy p { margin: 0; } .event-modal-controls { position: absolute; top: 47%; left: -2px; display: flex; justify-content: space-between; width: calc(100% + 4px); } .event-modal-controls button { width: 26px; height: 40px; color: #333; background: #fff; font-size: 20px; }
.feedback-empty { position: relative; min-height: calc(100vh - 40px); padding-top: 54px; text-align: center; } .feedback-empty p { color: #3f1e59; font-size: 14px; } .feedback-plus { position: absolute; right: 12px; bottom: 18px; display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: #06395f; border-radius: 50%; box-shadow: 0 2px 6px #0004; font-size: 18px; } .feedback-form-card { margin: 4px 0; background: #fff; border: 1px solid #dce3e9; border-radius: 3px; box-shadow: 0 2px 5px #0002; } .feedback-form-card h2 { padding: 11px 8px; margin: 0; color: #3f1e59; background: #e8f3ff; border-left: 3px solid #0784d8; font-size: 13px; } .feedback-form-card label { display: block; padding: 17px 10px 0; color: #123e61; font-size: 10px; } .feedback-form-card textarea { display: block; width: 100%; height: 51px; padding: 8px; margin-top: 6px; resize: none; border: 1px solid #d0d8df; border-radius: 5px; font: 10px Roboto, sans-serif; } .feedback-submit { display: block; width: calc(100% - 30px); margin: 28px 15px 18px; padding: 8px; font-size: 10px; } .feedback-success-modal .modal-card { display: flex; align-items: center; width: 190px; min-height: 143px; padding: 14px; flex-direction: column; text-align: center; border-radius: 5px; } .feedback-success-modal .modal-card h2 { display: none; } .feedback-success-modal #modalBody { display: flex; align-items: center; width: 100%; flex-direction: column; } .success-check { display: grid; place-items: center; width: 21px; height: 21px; margin: 1px 0 10px; color: #fff; background: #198f5b; border-radius: 50%; font-size: 12px; } .success-title { display: block; color: #60426d; font-size: 11px; line-height: 1.4; text-align: center; } .success-close { margin-top: 16px; padding: 7px 10px; font-size: 9px; }
@media (max-width: 520px) { body { padding: 12px 0; background: #edf4ff; } .app-frame { width: calc(100vw - 24px); height: calc(100vh - 24px); border: 1px solid #d8dee8; border-radius: 10px; box-shadow: 0 2px 12px #09314f18; } .landing-header { height: 64px; } .landing-logo { width: 44px; height: 44px; } .landing-header h1 { font-size: 16px; } .page-container { padding: 82px 10px 24px; } .profile-banner { min-height: 76px; padding: 10px 13px; } .profile-avatar { width: 52px; height: 52px; flex-basis: 52px; margin-right: 10px; } .profile-avatar img { width: 40px; height: 40px; } .profile-copy h2 { font-size: 12px; } .profile-copy p { font-size: 10px; } }

/* Typography aligned with the main institute project. */
.login-card input { font-size: 18px; }
.profile-copy h2 { font-size: 20px; }
.profile-copy p { font-size: 18px; }
.dashboard-title { font-size: 18px; }
.dashboard-tile strong { font-size: 14px; }
.homework-row strong { font-size: 16px; }
.homework-row span { font-size: 14px; }
.homework-row small { font-size: 12px; }
.siblings-intro { font-size: 14px; }
.sibling-info strong { font-size: 17px; }
.sibling-info span { font-size: 13px; }
.profile-hero strong { font-size: 18px; }
.profile-details div, .profile-details b { font-size: 16px; }
.homework-filters label { font-size: 14px; }
.homework-filters select, .homework-filters input { font-size: 14px; }
.event-card strong { font-size: 16px; }
.event-card p { font-size: 14px; }
.event-card small { font-size: 12px; }
.app-frame.leave-active .landing-header { height: 64px; }
.app-frame.leave-active .page-container { padding-top: 64px; }
.app-frame.fee-active .landing-header { height: 64px; }
.app-frame.fee-active .page-container { padding-top: 64px; }
.fee-details-page { min-height: calc(100vh - 64px); padding: 47px 26px 30px; background: #fff; }
.fee-table-card { width: 100%; padding: 16px 16px 14px; background: #fff; border: 1px solid #d1d5d8; border-radius: 7px; box-shadow: 0 2px 4px #0000001a; }
.fee-table-scroll { width: 100%; overflow-x: auto; padding-bottom: 13px; scrollbar-color: #d2d6d8 #f6f7f7; scrollbar-width: auto; }
.fee-table-scroll::-webkit-scrollbar { height: 8px; }
.fee-table-scroll::-webkit-scrollbar-track { background: #f6f7f7; border-radius: 8px; }
.fee-table-scroll::-webkit-scrollbar-thumb { background: #d2d6d8; border-radius: 8px; }
.fee-table-scroll table { width: 680px; border-collapse: collapse; color: #050505; background: #fff; font-size: 16px; }
.fee-table-scroll th, .fee-table-scroll td { height: 41px; padding: 9px 10px; border: 1px solid #dde2e6; white-space: nowrap; }
.fee-table-scroll th { text-align: left; font-weight: 700; }
.fee-table-scroll th:first-child { width: 140px; }
.fee-table-scroll th:not(:first-child) { width: 108px; }
.fee-table-scroll td { text-align: center; font-weight: 400; }
.app-frame.attendance-active .landing-header { height: 64px; }
.app-frame.attendance-active .page-container { padding-top: 64px; }
.student-attendance-page { min-height: calc(100vh - 64px); padding: 8px 2px 30px; color: #101820; background: #fff; }
.student-attendance-page > h2 { margin: 7px 0 14px; font-size: 21px; font-weight: 500; }
.attendance-calendar-card, .absence-card { padding: 11px 12px 13px; background: #fff; border: 1px solid #dfe3e5; border-radius: 8px; box-shadow: 0 2px 5px #00000012; }
.attendance-month { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.attendance-month button { display: grid; place-items: center; width: 33px; height: 34px; color: #111; background: #fff; border: 1px solid #d9dde0; border-radius: 5px; font-size: 13px; }
.attendance-month strong { font-size: 16px; }
.attendance-week, .attendance-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.attendance-week { margin-bottom: 6px; color: #334554; text-align: center; font-size: 12px; }
.attendance-days span { display: grid; place-items: center; height: 34px; border-radius: 5px; font-size: 12px; }
.attendance-days .empty-day { background: transparent; border: 0; }
.attendance-days .present { color: #277b4c; background: #e9f8ef; border: 1px solid #a9e2bf; }
.attendance-days .absent { color: #e23737; background: #fff0f0; border: 1px solid #ffb8b8; }
.attendance-legend { display: flex; gap: 14px; margin-top: 12px; color: #41505d; font-size: 12px; }
.attendance-legend span { display: flex; align-items: center; gap: 5px; }
.attendance-legend i { width: 11px; height: 11px; border-radius: 50%; }
.present-dot { background: #16ad5b; }
.absent-dot { background: #dc2626; }
.absence-card { margin-top: 16px; padding: 12px; }
.absence-card h3 { padding: 6px 5px; margin: 0 0 12px; background: #f8f9fa; border-radius: 3px; font-size: 17px; font-weight: 500; }
.absence-rows { display: grid; gap: 11px; }
.absence-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 27px; align-items: center; gap: 10px; color: #3b5063; font-size: 12px; }
.absence-row b { color: #172435; text-align: right; font-weight: 500; }
.absence-track { height: 10px; overflow: hidden; background: #fde0e0; border-radius: 10px; }
.absence-track i { display: block; height: 100%; background: #f04444; border-radius: inherit; }
.leave-page { position: relative; min-height: calc(100vh - 64px); padding: 34px 12px 30px; background: #fff; }
.leave-empty { display: grid; place-items: center; min-height: 76px; padding: 16px; color: #09314f; background: #fff; border: 1px solid #d7d7d7; border-radius: 6px; box-shadow: 0 2px 5px #00000012; font-size: 20px; }
.leave-add { position: absolute; right: 28px; bottom: 50px; display: grid; place-items: center; width: 56px; height: 56px; color: #fff; background: #06395f; border-radius: 50%; box-shadow: 0 3px 8px #0004; font-size: 25px; }
.dashboard-tile { display: flex; align-items: center; background: #eae9fb; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2); border: 1px solid #d6d4ff; border-radius: 6px; max-width: 100px; padding: 8px; flex-direction: column; max-height: 100px; min-width: 100px; margin-top: 0; min-height: 100px; justify-content: center; text-align: center; box-sizing: border-box; }
.tile-grid { column-gap: 12px; row-gap: 14px; padding-top: 14px; }
.dashboard-tile img { width: 50px; height: 50px; margin-bottom: 3px; }
.section-heading h2 { font-size: 18px; }
.dashboard-tile.tile-homework { background: #ffeff2; border: 1px solid #ffd1d9; }
.dashboard-tile.tile-events { background: #f5f8f5; border: 1px solid #dfffdf; }
.leave-form-page { min-height: calc(100vh - 64px); padding: 22px 12px 30px; background: #fff; }
.leave-form-card { overflow: visible; background: #fff; border: 1px solid #d7d7d7; border-radius: 6px; box-shadow: 0 2px 5px #00000012; }
.leave-form-card > h2 { padding: 12px 16px; margin: 0; color: #3f1e59; background: #e8f3ff; border-left: 4px solid #0784d8; font-size: 18px; font-weight: 500; }
.leave-form-body { display: grid; gap: 18px; padding: 27px 16px 20px; }
.leave-field { position: relative; display: grid; gap: 5px; color: #123e61; font-size: 14px; }
.leave-field > span { position: absolute; top: -8px; left: 10px; z-index: 1; padding: 0 4px; background: #fff; font-weight: 500; }
.leave-select, .leave-field input, .leave-field textarea { width: 100%; padding: 11px 13px; color: #778595; background: #fff; border: 1px solid #b8c2cc; border-radius: 5px; font: inherit; }
.leave-select { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; text-align: left; }
.leave-select i { color: #c7cdd2; transition: transform .15s ease; }
.leave-select[aria-expanded="true"] i { transform: rotate(180deg); }
.leave-type-menu { position: absolute; top: 47px; left: 0; z-index: 3; display: none; width: 100%; overflow: hidden; background: #fff; border: 1px solid #d7d7d7; border-radius: 0 0 5px 5px; box-shadow: 0 2px 6px #00000025; }
.leave-type-menu.open { display: block; }
.leave-type-menu button { display: block; width: 100%; padding: 11px 12px; color: #222; background: #fff; text-align: left; font-size: 16px; }
.leave-type-menu button:hover, .leave-type-menu button:focus, .leave-type-menu button[aria-selected="true"] { background: #dceaff; }
.leave-field textarea { min-height: 130px; resize: vertical; }
.leave-field small { display: none; color: #ff3025; font-size: 13px; }
.leave-field.invalid .leave-select, .leave-field.invalid input, .leave-field.invalid textarea { border-color: #ff5252; }
.leave-field.invalid small { display: block; }
.leave-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.leave-date-picker { position: absolute; top: 55px; left: 0; z-index: 10; display: none; width: 240px; padding-bottom: 8px; color: #111; background: #fff; border: 1px solid #c9cdd1; border-radius: 5px; box-shadow: 0 2px 4px #00000018; }
.leave-date-picker::before { position: absolute; top: -8px; left: 52px; width: 14px; height: 14px; content: ""; background: #fff; border-top: 1px solid #c9cdd1; border-left: 1px solid #c9cdd1; transform: rotate(45deg); }
.leave-date-picker-to { right: 0; left: auto; }
.leave-date-picker-to::before { right: 52px; left: auto; }
.leave-date-picker.open { display: block; }
.leave-date-picker > strong { position: relative; z-index: 1; display: block; padding: 11px 8px 8px; background: #fff; text-align: center; font-size: 16px; }
.leave-calendar-week, .leave-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.leave-calendar-week { padding: 9px 7px 8px; border-bottom: 1px solid #d6d6d6; font-size: 14px; }
.leave-calendar-days { row-gap: 2px; padding: 6px 7px 0; }
.leave-calendar-days button { display: grid; place-items: center; width: 30px; height: 30px; color: #111; background: #fff; border-radius: 4px; font-size: 14px; }
.leave-calendar-days button:disabled { color: #c7ccd1; cursor: default; }
.leave-calendar-days button:not(:disabled):hover, .leave-calendar-days button.today { color: #123e61; background: #c5e2f8; font-weight: 700; }
.leave-academic .leave-select { background: #f1f1f1; border-color: #e5e5e5; }
.leave-create-submit, .leave-back { width: 100%; min-height: 40px; border-radius: 5px; font-size: 16px; }
.leave-create-submit { margin-top: 16px; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); }
.leave-back { color: #06395f; background: #fff; border: 1px solid #06395f; }
.staff-dashboard .profile-banner { min-height: 110px; padding: 12px 18px; }
.staff-dashboard .profile-avatar { width: 82px; height: 82px; flex-basis: 82px; color: #fff; border-width: 4px; border-radius: 50%; }
.staff-dashboard .profile-avatar i { font-size: 48px; }
.staff-dashboard .profile-copy h2 { font-size: 18px; }
.staff-dashboard .profile-copy p { font-size: 16px; }
.staff-dashboard .dashboard-title { margin: 8px 0 0; }
.staff-dashboard .tile-grid { grid-template-columns: repeat(3, 1fr); column-gap: 12px; row-gap: 14px; padding: 14px 0 0; }
.staff-dashboard .dashboard-tile.staff-tile { width: 100%; min-width: 0; max-width: 100px; min-height: 100px; max-height: 100px; padding: 7px; }
.staff-dashboard .staff-tile strong { color: #1268d0; font-size: 14px; line-height: 1.2; }
.staff-dashboard .staff-tile:nth-child(2) { background: #ffeff2; border-color: #ffd1d9; }
.staff-dashboard .staff-tile:nth-child(3) { background: #f5f8f5; border-color: #dfffdf; }
.staff-dashboard .staff-tile:nth-child(8), .staff-dashboard .staff-tile:nth-child(9) { background: #f9f0ff; border-color: #f0d9ff; }
#contentPanel .section-heading h2 { font-size: 18px; }
#contentPanel .section-heading button { font-size: 14px; }
.events-panel .section-heading button { font-size: 14px; }
.staff-profile-page .profile-hero { height: 272px; padding-top: 40px; }
.staff-profile-page .profile-page-avatar { width: 100px; height: 100px; margin-bottom: 8px; filter: none; }
.staff-profile-page .profile-hero strong { color: #073b62; font-size: 18px; font-weight: 600; }
.staff-profile-page .profile-curve-art { width: 100%; }
.staff-profile-page .profile-details { padding: 34px 12px; }
.staff-profile-page .profile-details div { min-height: 49px; color: #424242; font-size: 16px; }
.staff-profile-page .profile-details b { color: #073b62; font-size: 16px; font-weight: 600; }
.staff-profile-page { width: 100%; min-height: calc(100% - 60px); }
.app-frame.profile-active .page-container { padding-right: 0; padding-left: 0; }
.staff-profile-page .profile-hero { width: 100%; }
.app-frame.student-dashboard #tileGrid .tile-fees,
.app-frame.student-dashboard #tileGrid .tile-attendance,
.app-frame.student-dashboard #tileGrid .tile-marks { display: none; }
.app-frame.student-profile-header .landing-header { height: 60px; }
.app-frame.student-profile-header .page-container { padding-top: 60px; }
.app-frame.student-dashboard .feedback-empty,
.app-frame.student-dashboard .feedback-list { min-height: calc(100vh - 64px); }
.app-frame.student-dashboard .feedback-plus { right: 28px; bottom: 50px; width: 56px; height: 56px; font-size: 25px; }
.app-frame.notifications-active .notification-button span { display: none; }
.app-frame.notifications-active .landing-header { height: 60px; }
.app-frame.notifications-active .page-container { padding-top: 60px; }
.notifications-page { min-height: calc(100vh - 60px); padding: 34px 10px 24px; background: #fff; }
.notification-list-shell { padding: 10px; border: 1px solid #d7dce1; border-radius: 8px; box-shadow: 0 1px 3px #00000012; }
.notification-card { display: flex; gap: 12px; min-height: 132px; padding: 16px 18px; margin: 16px 0 32px; color: #111; background: #f8fbf8; border-left: 3px solid #4caf59; border-radius: 10px; }
.notification-card:last-child { margin-bottom: 14px; }
.notification-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: #24a849; background: #e1f3e4; border-radius: 50%; font-size: 19px; }
.notification-card strong, .notification-card time { display: block; font-size: 14px; font-weight: 400; }
.notification-card time { margin-top: 5px; }
.notification-card p { margin: 7px 0 0; font-size: 14px; line-height: 1.5; }
.notification-video { display: grid; place-items: center; width: 33px; height: 33px; padding: 0; margin-top: 10px; color: #fff; background: #f00; border-radius: 50%; font-size: 20px; }
.profile-page-avatar { background: transparent; border: 0; border-radius: 0; object-fit: contain; }
.staff-profile-page .profile-details { padding-right: 27px; padding-left: 27px; }
.staff-profile-page .profile-details { width: 100%; max-width: 100%; }
@media (max-width: 380px) {
  .staff-profile-page .profile-hero { height: 258px; padding-top: 34px; }
  .staff-profile-page .profile-page-avatar { width: 88px; height: 88px; margin-bottom: 8px; }
  .staff-profile-page .profile-hero strong { font-size: 16px; }
  .staff-profile-page .profile-details { padding: 28px 12px; }
  .staff-profile-page .profile-details div { min-height: 46px; font-size: 15px; }
  .staff-profile-page .profile-details b { font-size: 15px; }
}
.app-frame.staff-quiz-active .landing-header { height: 60px; }
.app-frame.staff-quiz-active .page-container { padding-top: 60px; }
.staff-quiz-page { position: relative; min-height: calc(100vh - 100px); padding: 34px 12px 40px; background: #fff; }
.staff-quiz-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.staff-quiz-filters label { position: relative; display: block; color: #163c5d; font-size: 14px; }
.staff-quiz-filters label > span { position: absolute; top: -8px; left: 10px; z-index: 1; padding: 0 4px; background: #fff; font-size: 14px; }
.staff-quiz-filters select { display: block; width: 100%; height: 47px; padding: 0 56px 0 13px; color: #34495e; appearance: none; background: #fff; border: 1px solid #c4ced8; border-radius: 5px; font: inherit; }
.app-frame select option { color: #34495e; background: #fff; }
.app-frame select option:hover:not(:checked) { color: #34495e; background: #dbeafe; }
.app-frame select option:checked { color: #fff; background: #2782f7; }
.app-select-widget { position: relative; display: block; width: 100%; }
.app-select-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.app-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 47px; padding: 0 13px; color: #34495e; text-align: left; background: #fff; border: 1px solid #c4ced8; border-radius: 5px; font: inherit; }
.app-select-trigger:focus-visible { outline: 3px solid #d5dde3; border-color: #aebdc7; }
.app-select-trigger:disabled { color: #8794a2; background: #fff; cursor: not-allowed; }
.app-select-trigger > i { margin-left: 12px; color: #9aa3ac; font-size: 13px; }
.app-select-options { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; display: none; width: 100%; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #d7dfe7; border-radius: 4px; box-shadow: 0 4px 10px #00000020; }
.app-select-widget.open .app-select-options { display: block; }
.app-select-option { display: block; width: 100%; min-height: 42px; padding: 10px 13px; color: #34495e; text-align: left; background: #fff; font-size: 15px; }
.app-select-option:hover:not(:disabled):not([aria-selected="true"]) { color: #34495e; background: #dbeafe; }
.app-select-option[aria-selected="true"] { color: #fff; background: #2782f7; }
.app-select-option:disabled { color: #9ca3af; cursor: not-allowed; }
.staff-quiz-filters .app-select-trigger { padding-right: 54px; }
.staff-quiz-filters .app-select-trigger > i { display: none; }
.staff-quiz-filters .app-select-widget.open { z-index: 25; }
.staff-quiz-filters label:first-child { z-index: 2; }
.staff-quiz-filters select:focus { outline: 3px solid #d5dde3; border-color: #aebdc7; }
.staff-quiz-filter-clear { position: absolute; top: 13px; right: 30px; z-index: 1; height: 21px; padding: 0 8px 0 4px; color: #c5c9cc; background: #fff; border-right: 1px solid #d4d7da; font-size: 14px; }
.staff-quiz-filter-chevron { position: absolute; top: 17px; right: 12px; color: #9aa3ac; pointer-events: none; font-size: 13px; }
.staff-quiz-filters label:nth-child(2) .app-select-trigger { box-shadow: 0 0 0 3px #d5dde3; border-color: #aebdc7; }
.staff-quiz-card { padding: 15px 16px 0; margin-top: 38px; overflow: hidden; background: #fff; border: 1px solid #dedede; border-top: 9px solid #acd5ff; border-radius: 12px; box-shadow: 0 2px 5px #00000012; }
.staff-quiz-card-main { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.staff-quiz-card-main > i { display: grid; place-items: center; width: 31px; height: 31px; color: #0754ed; background: #e9f2ff; border-radius: 6px; font-size: 17px; }
.staff-quiz-card-main > strong { color: #111; font-size: 16px; }
.staff-quiz-year { margin-left: auto; color: #73808c; font-size: 12px; }
.staff-quiz-tags { display: flex; gap: 8px; padding: 11px 0 22px 42px; }
.staff-quiz-tags span { padding: 4px 10px; color: #697684; border: 1px solid #e5e9ed; border-radius: 12px; font-size: 11px; }
.staff-quiz-tags b { color: #22384b; font-weight: 600; }
.staff-quiz-card-footer { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-top: 1px solid #eeeeee; }
.staff-quiz-card-footer > span { color: #85909b; font-size: 12px; }
.staff-quiz-card-footer .staff-quiz-view { padding: 0; color: #85909b; background: transparent; text-align: left; font-size: 12px; }
.staff-quiz-card-footer > div { display: flex; gap: 9px; }
.staff-quiz-card-footer button { min-width: 49px; padding: 7px 12px; color: #fff; background: #06395f; border-radius: 4px; font-size: 14px; }
.staff-quiz-card-footer .staff-quiz-delete { background: #ff3025; }
.staff-quiz-add { position: absolute; right: 16px; bottom: 44px; display: grid; place-items: center; width: 56px; height: 56px; color: #fff; background: #06395f; border-radius: 50%; box-shadow: 0 3px 8px #0004; font-size: 24px; }
.staff-quiz-create-page { position: relative; min-height: calc(100vh - 60px); padding: 34px 12px 36px; background: #fff; }
.staff-quiz-create-form { overflow: hidden; background: #fff; border: 1px solid #d9e1e9; border-radius: 6px; }
.staff-quiz-create-heading { padding: 12px 16px; color: #3f1e59; background: #eaf4ff; border-left: 4px solid #0784d8; font-size: 18px; }
.staff-quiz-create-fields { display: grid; gap: 12px; padding: 26px 16px 34px; }
.staff-quiz-floating-field { position: relative; display: block; }
.staff-quiz-floating-field > span { position: absolute; top: -8px; left: 10px; z-index: 1; padding: 0 4px; color: #173d5c; background: #fff; font-size: 14px; }
.staff-quiz-floating-field select, .staff-quiz-topic, .staff-quiz-question-fields input, .staff-quiz-correct-answer select { width: 100%; height: 47px; padding: 0 13px; color: #728092; background: #fff; border: 1px solid #d7dfe7; border-radius: 6px; font: inherit; font-size: 16px; }
.staff-quiz-topic { margin: 3px 0; }
.staff-quiz-topic::placeholder, .staff-quiz-question-fields input::placeholder { color: #758395; opacity: 1; }
.staff-quiz-create-fields > h2 { margin: 22px 0 7px; color: #172b3e; font-size: 20px; font-weight: 500; }
.staff-quiz-question { overflow: hidden; border: 1px solid #dce3e9; border-radius: 6px; }
.staff-quiz-question > h3 { padding: 17px 18px; margin: 0; color: #111; background: #e6f2ff; font-size: 16px; font-weight: 600; }
.staff-quiz-question-fields { display: grid; gap: 14px; padding: 16px 20px 22px; }
.staff-quiz-question-fields input { height: 46px; border-color: #dce3e9; }
.staff-quiz-correct-answer { position: relative; display: grid; gap: 5px; padding-top: 4px; color: #173d5c; font-size: 14px; }
.staff-quiz-correct-answer select { height: 58px; color: #26394c; }
.staff-quiz-create-submit, .staff-quiz-create-back { width: 100%; height: 38px; border-radius: 5px; font-size: 15px; }
.staff-quiz-create-submit { margin-top: 28px; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); }
.staff-quiz-create-back { color: #06395f; background: #fff; border: 1px solid #547594; }
.staff-quiz-add-question { position: fixed; right: max(68px, calc((100vw - 500px) / 2 + 52px)); bottom: 80px; z-index: 12; }
.staff-quiz-detail-modal .modal-card { width: min(420px, 100%); max-height: calc(100% - 26px); padding: 0; overflow: hidden auto; background: #fff; border-radius: 8px; }
.staff-quiz-detail-modal .modal-card h2 { padding: 15px 16px 5px; margin: 0; color: #111; background: #e1efff; font-size: 20px; }
.staff-quiz-detail-modal .modal-close { top: 9px; right: 10px; z-index: 1; color: #111; font-size: 18px; }
.staff-quiz-detail-modal #modalBody { padding-bottom: 16px; background: #e1efff; }
.staff-quiz-detail-meta { display: flex; align-items: center; gap: 10px; padding: 5px 16px 16px; background: #e1efff; }
.staff-quiz-detail-meta span { padding: 4px 10px; color: #6b7280; background: #fff; border-radius: 12px; font-size: 10px; }
.staff-quiz-detail-meta b { color: #26384b; }
.staff-quiz-detail-meta small { margin-left: auto; color: #728092; font-size: 12px; }
.staff-quiz-question-result { display: flex; gap: 14px; min-height: 326px; padding: 20px; margin: 20px 16px 0; background: #fff; border: 1px solid #e5e9ed; border-radius: 7px; }
.staff-quiz-question-number { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; color: #1680ed; background: #eef6ff; border-radius: 50%; font-size: 16px; font-weight: 700; }
.staff-quiz-question-result-body { min-width: 0; flex: 1; }
.staff-quiz-question-result-body > strong { display: block; padding: 3px 0 12px; color: #111; border-bottom: 1px solid #eeeeee; font-size: 14px; }
.staff-quiz-answer-options { padding: 11px 17px 17px; margin-top: 20px; border: 1px solid #f0f0f0; border-radius: 6px; }
.staff-quiz-answer-options p { display: flex; gap: 14px; margin: 0; min-height: 33px; align-items: center; color: #111; font-size: 14px; }
.staff-quiz-answer-options p b { width: 15px; }
.staff-quiz-correct-result { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; margin-top: 7px; color: #23a948; background: #e1ffe5; border-radius: 6px; font-size: 14px; }
.staff-quiz-correct-result b { color: #111; }
.app-frame.staff-homework-active .landing-header { height: 60px; }
.app-frame.staff-homework-active .page-container { padding-top: 60px; }
.staff-homework-page, .staff-homework-create-page { position: relative; min-height: calc(100vh - 60px); padding: 34px 12px 40px; background: #fff; }
.staff-homework-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.staff-homework-filters label, .staff-homework-floating-field { position: relative; display: block; color: #163c5d; font-size: 14px; }
.staff-homework-filters label > span, .staff-homework-floating-field > span { position: absolute; top: -8px; left: 10px; z-index: 1; padding: 0 4px; color: #163c5d; background: #fff; font-size: 14px; }
.staff-homework-filters .app-select-trigger { padding-right: 38px; }
.staff-homework-filters .app-select-trigger > i { display: none; }
.staff-homework-filters label > i { position: absolute; top: 17px; right: 12px; color: #9aa3ac; pointer-events: none; font-size: 13px; }
.staff-homework-date-field > button { display: block; width: 100%; height: 47px; padding: 0 13px; color: #778595; text-align: left; background: #fff; border: 1px solid #c4ced8; border-radius: 5px; font: inherit; }
.staff-homework-date-field > i { position: absolute; top: 17px; right: 12px; color: #9aa3ac; pointer-events: none; }
.staff-homework-date-field input { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.staff-homework-empty { display: grid; place-items: center; min-height: 132px; padding: 18px; margin-top: 15px; color: #06395f; background: #fff; border: 1px solid #d7d7d7; border-radius: 6px; box-shadow: 0 2px 5px #00000012; font-size: 20px; }
.staff-homework-add { position: absolute; right: 16px; bottom: 45px; display: grid; place-items: center; width: 56px; height: 56px; color: #fff; background: #06395f; border-radius: 50%; box-shadow: 0 3px 8px #0004; font-size: 24px; }
.staff-homework-results { display: grid; gap: 15px; margin-top: 15px; padding-bottom: 80px; }
.staff-homework-card { padding: 17px 14px 12px; background: #fff; border: 1px solid #d7d7d7; border-radius: 7px; box-shadow: 0 2px 5px #00000012; }
.staff-homework-card-meta { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 14px; color: #68798a; border-bottom: 1px solid #e5e8eb; font-size: 12px; }
.staff-homework-card-meta b { color: #123e61; font-weight: 500; }
.staff-homework-card-description { min-height: 28px; margin: 15px 0 7px; color: #25374a; font-size: 13px; }
.staff-homework-card-image { display: block; width: 100%; height: 160px; object-fit: contain; border: 1px solid #d8e0e7; border-radius: 6px; }
.staff-homework-image-placeholder { background: #fff; }
.staff-homework-card-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 13px; }
.staff-homework-card-actions button { min-width: 66px; height: 32px; color: #fff; border-radius: 5px; font-size: 13px; }
.staff-homework-delete { background: #ff302b; }
.staff-homework-edit { background: #06395f; }
.staff-homework-create-form { overflow: hidden; background: #fff; border: 1px solid #d9e1e9; border-radius: 6px; }
.staff-homework-create-heading { padding: 12px 16px; color: #3f1e59; background: #eaf4ff; border-left: 4px solid #0784d8; font-size: 18px; }
.staff-homework-create-fields { display: grid; gap: 12px; padding: 27px 16px 30px; }
.staff-homework-floating-field .app-select-trigger { height: 47px; }
.staff-homework-description, .staff-homework-image-field { position: relative; display: grid; gap: 7px; padding-top: 4px; color: #163c5d; font-size: 14px; }
.staff-homework-description > span, .staff-homework-image-field > span { position: absolute; top: -3px; left: 10px; z-index: 1; padding: 0 4px; color: #163c5d; background: #fff; font-size: 14px; }
.staff-homework-description textarea { width: 100%; height: 86px; padding: 13px; margin-top: 3px; resize: vertical; color: #34495e; border: 1px solid #d7dfe7; border-radius: 6px; font: inherit; font-size: 16px; }
.staff-homework-description textarea::placeholder { color: #758395; opacity: 1; }
.staff-homework-image-field input[type="file"] { width: 100%; padding: 10px; margin-top: 4px; color: #34495e; background: #f8f9fa; border: 1px solid #e1e5e9; border-radius: 6px; font: inherit; font-size: 14px; }
.staff-homework-image-field small { min-height: 17px; color: #238454; font-size: 13px; }
.staff-homework-create-submit { width: 100%; height: 38px; margin-top: 13px; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); border-radius: 5px; font-size: 15px; }
.staff-homework-create-back { width: 100%; height: 38px; margin-top: 7px; color: #06395f; background: #fff; border: 1px solid #7893a8; border-radius: 5px; font-size: 15px; }
.staff-homework-image-field input[type="file"] { min-height: 46px; padding: 8px 10px; margin-top: 4px; }
.modal.staff-homework-success-modal { padding: 0 9px; }
.staff-homework-success-modal .modal-card { display: flex; align-items: center; width: min(384px, 100%); min-height: 220px; padding: 22px 0 0; flex-direction: column; border-radius: 7px; }
.staff-homework-success-modal .modal-card h2, .staff-homework-success-modal .modal-close { display: none; }
.staff-homework-success-modal #modalBody { display: flex; align-items: center; width: 100%; flex-direction: column; }
.staff-homework-success-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: #198f5b; border-radius: 50%; font-size: 18px; }
.staff-homework-success-title { margin-top: 12px; color: #3f3f46; font-size: 20px; line-height: 1.4; text-align: center; }
.staff-homework-success-actions { display: flex; justify-content: center; width: 100%; padding: 15px 0; margin-top: auto; border-top: 1px solid #e5e7eb; }
.staff-homework-success-actions button { padding: 8px 12px; color: #fff; background: #06395f; border-radius: 5px; font-size: 15px; }
.app-frame.staff-timetable-active .landing-header, .app-frame.staff-attendance-active .landing-header { height: 62px; }
.app-frame.staff-timetable-active .page-container, .app-frame.staff-attendance-active .page-container { padding-top: 62px; }
.staff-timetable-page { min-height: calc(100vh - 62px); padding: 34px 10px 30px; color: #073b62; background: #fff; }
.staff-timetable-heading { display: flex; align-items: center; justify-content: space-between; }
.staff-timetable-heading h2, .staff-timetable-details-heading { margin: 0; color: #073b62; font-size: 18px; font-weight: 600; }
.staff-timetable-heading button { padding: 8px 13px; color: #3972ed; background: #fff; border: 1px solid #e2e5ea; border-radius: 9px; font-size: 14px; }
.staff-timetable-empty, .staff-timetable-details-empty { margin: 44px 0 34px; color: #16212b; font-size: 19px; text-align: center; }
.staff-timetable-details-heading { margin-top: 33px; color: #333; font-weight: 500; }
.staff-timetable-details-empty { margin-top: 42px; color: #073b62; }
.staff-timetable-page { padding: 34px 12px 30px; }
.staff-timetable-heading h2 { color: #073b62; font-size: 18px; }
.staff-timetable-heading button { min-width: 72px; height: 34px; padding: 0 13px; color: #2861d8; font-size: 12px; }
.staff-timetable-periods { display: grid; gap: 22px; margin-top: 15px; }
.staff-timetable-period { position: relative; display: flex; width: 100%; min-height: 307px; padding: 13px 13px 10px; flex-direction: column; align-items: stretch; color: #171c25; background: #fff; border: 1px solid #e8e8e8; border-left: 2px solid #2458ff; border-radius: 13px; box-shadow: 0 3px 8px #0000000c; text-align: left; }
.staff-timetable-period.selected { border-left-color: #2458ff; }
.staff-period-title { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 7px; }
.staff-period-title b { display: grid; place-items: center; width: 40px; height: 40px; color: #2870f0; background: #e7f0ff; border-radius: 11px; font-size: 16px; }
.staff-period-title strong { color: #532b61; font-size: 13px; font-weight: 600; }
.staff-period-row { display: flex; align-items: center; gap: 12px; min-height: 60px; font-size: 14px; white-space: normal; }
.staff-period-row > i { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: #1553da; background: #dceaff; border-radius: 50%; font-size: 16px; }
.staff-period-row:nth-child(3) > i { color: #13864c; background: #dcfbe8; }
.staff-period-row:nth-child(4) > i { color: #8545fa; background: #eee7ff; }
.staff-period-row:nth-child(5) > i { color: #f3650e; background: #ffedd7; }
.staff-period-row b { color: #073b62; font-weight: 600; }
.staff-timetable-details-heading { margin-top: 47px; color: #532b61; font-size: 16px; }
.staff-timetable-details-empty { margin: 43px 0 0; color: #073b62; font-size: 16px; font-weight: 500; }
.event-carousel { position: relative; }
.event-carousel .event-card { align-items: center; min-height: 158px; height: 158px; gap: 10px; padding: 10px; overflow: hidden; border-right-width: 5px; border-radius: 9px; }
.event-carousel .event-card.event-violet { background: #f1e0ff; border-color: #a75bdd; }
.event-carousel .event-card.event-cyan { background: #e5faff; border-color: #12c2eb; }
.event-carousel .event-card.event-rose { background: #fff0f0; border-color: #ff555b; }
.event-carousel .event-card img { width: 42%; height: 137px; flex: 0 0 42%; border-radius: 4px; object-fit: cover; }
.event-carousel .event-card > div { min-width: 0; flex: 1; }
.event-carousel .event-card strong { display: block; color: #a15ac6; font-size: 16px; }
.event-carousel .event-card.event-cyan strong { color: #17bce5; }
.event-carousel .event-card.event-rose strong { color: #f04c55; }
.event-carousel .event-card p { display: -webkit-box; overflow: hidden; margin: 7px 0; color: #493d52; font-size: 14px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.event-carousel .event-card small { color: #665d69; font-size: 12px; }
.event-carousel-arrow { position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 24px; height: 31px; padding: 0; color: #fff; background: #59636d80; transform: translateY(-50%); }
.event-carousel-previous { left: 0; border-radius: 0 5px 5px 0; }
.event-carousel-next { right: 0; border-radius: 5px 0 0 5px; }
.event-list-card.event-violet { background: #f1e0ff; border-color: #a75bdd; }
.event-list-card.event-cyan { background: #e5faff; border-color: #12c2eb; }
.event-list-card.event-rose { background: #fff0f0; border-color: #ff555b; }
.event-list-card .event-thumb { display: block; object-fit: cover; }
.staff-event-card .event-thumb { object-fit: cover; }
.event-modal .event-detail-image { display: block; width: calc(100% - 32px); object-fit: contain; background: #f7f8fa; border-radius: 7px; }
.staff-event-large-image { overflow: hidden; }
.staff-event-photo { display: block; width: 100%; height: 100%; object-fit: contain; }
.app-frame.student-marks-active .landing-header { height: 62px; }
.app-frame.student-marks-active .page-container { padding-top: 62px; }
.student-marks-page { padding: 52px 4px 36px; color: #111; }
.student-marks-page > h2 { margin: 0; color: #553164; font-size: 18px; font-weight: 600; line-height: 1.2; }
.student-marks-assessment { padding: 36px 16px 32px; margin-top: 51px; background: #fff; border: 1px solid #f0f1f2; border-radius: 8px; box-shadow: 0 1px 4px #00000008; }
.student-marks-assessment-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 18px; color: #111; background: #e5f2ff; border-bottom: 1px solid #d5dce4; border-radius: 3px; font-size: 14px; text-align: left; }
.student-marks-assessment-toggle i { color: #263746; font-size: 15px; }
.student-marks-assessment-content[hidden] { display: none; }
.student-marks-table, .student-marks-total-table { width: calc(100% - 40px); margin: 16px 20px 0; border-collapse: collapse; table-layout: fixed; }
.student-marks-table th, .student-marks-table td, .student-marks-total-table th, .student-marks-total-table td { height: 38px; padding: 7px 8px; border: 1px solid #d9dee4; font-size: 14px; text-align: left; }
.student-marks-table th { font-weight: 700; }
.student-marks-table th:first-child { width: 36%; }
.student-marks-table th:nth-child(2) { width: 31%; }
.student-marks-total-table { margin-top: 15px; }
.student-marks-total-table th { width: 68%; font-weight: 700; }
.app-frame.subject-wise-marks-active .landing-header { height: 62px; }
.app-frame.subject-wise-marks-active .page-container { padding-top: 62px; }
.subject-wise-marks-page { padding: 54px 4px 32px; }
.subject-wise-marks-scroll { overflow-x: auto; overscroll-behavior-x: contain; background: #fff; border: 1px solid #f1f2f3; border-radius: 5px; box-shadow: 0 1px 5px #00000008; scrollbar-width: none; }
.subject-wise-marks-scroll::-webkit-scrollbar { display: none; }
.subject-wise-marks-table { width: max-content; min-width: 760px; margin: 15px 16px 16px; border-collapse: collapse; table-layout: fixed; }
.subject-wise-marks-table th, .subject-wise-marks-table td { width: 110px; min-width: 110px; height: 44px; padding: 8px; border: 1px solid #d8dee5; color: #171717; font-size: 14px; text-align: left; vertical-align: top; }
.subject-wise-marks-table thead th { height: 38px; font-weight: 700; }
.subject-wise-marks-table th:first-child { width: 140px; min-width: 140px; }
.subject-wise-marks-table tbody th { font-weight: 700; line-height: 1.45; }
.subject-wise-scroll-track { position: relative; height: 8px; margin: 0 16px 16px; background: #f4f5f6; border-radius: 8px; }
.subject-wise-scroll-track span { position: absolute; top: 0; height: 8px; min-width: 22px; background: #d9dcde; border-radius: 8px; transition: left .08s linear; }
.app-frame.student-change-password-active .landing-header { height: 62px; }
.app-frame.student-change-password-active .page-container { padding-top: 62px; }
.student-change-password-page { padding: 34px 5px 24px; }
.student-change-password-fields { gap: 14px; padding: 27px 16px 24px; }
.student-change-password-fields > label > span { display: none; }
.student-change-password-fields > label > input { height: 44px; padding-left: 12px; }
.student-change-password-fields > label > input::placeholder { color: #143a5b; opacity: 1; }
.student-change-password-fields > label > button { top: 12px; }
.student-change-password-submit { min-height: 42px; margin-top: 2px; }
.student-change-password-page .staff-password-instructions { gap: 2px; margin-top: 3px; }
.student-change-password-page .staff-password-instructions > strong { margin-bottom: 3px; }
.student-change-password-page .staff-password-instructions > div { gap: 10px; line-height: 1.35; }
.student-change-password-page .staff-password-instructions > div > i { padding: 0; color: #888; font-size: 14px; font-style: normal; }
@media (max-width: 380px) {
  .subject-wise-marks-page { padding: 44px 4px 28px; }
  .subject-wise-marks-table { margin-right: 14px; margin-left: 14px; }
  .subject-wise-scroll-track { margin-right: 14px; margin-left: 14px; }
  .student-marks-page { padding: 42px 4px 30px; }
  .student-marks-page > h2 { font-size: 17px; }
  .student-marks-assessment { padding: 28px 12px 26px; margin-top: 40px; }
  .student-marks-table, .student-marks-total-table { width: calc(100% - 24px); margin-right: 12px; margin-left: 12px; }
}
.staff-attendance-page { min-height: calc(100vh - 62px); padding: 32px 11px 24px; color: #111; background: #fff; }
.staff-attendance-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.staff-attendance-filters > label { position: relative; min-width: 0; }
.staff-attendance-filters > label > span { position: absolute; top: -7px; left: 10px; z-index: 2; padding: 0 4px; color: #123e61; background: #fff; font-size: 13px; }
.staff-attendance-filters .app-select-widget { width: 100%; }
.staff-attendance-filters .app-select-trigger { height: 46px; padding: 0 39px 0 12px; }
.staff-attendance-clear { position: absolute; top: 12px; right: 29px; z-index: 3; display: none; color: #c0c5ca; background: transparent; font-size: 16px; }
.staff-attendance-filters > label.has-value .staff-attendance-clear { display: block; }
.staff-attendance-summary { display: flex; justify-content: center; gap: 14px; margin: 15px 0 23px; }
.staff-attendance-summary > div { display: flex; align-items: center; justify-content: center; width: 100px; min-height: 69px; flex-direction: column; border: 1px solid #dedede; border-radius: 5px; }
.staff-attendance-summary b { color: #149b4b; font-size: 20px; }
.staff-attendance-summary > div:nth-child(2) b { color: #e52b3e; }
.staff-attendance-summary span { margin-top: 3px; color: #75808a; font-size: 13px; }
.staff-attendance-search { width: 100%; height: 39px; padding: 0 12px; color: #26394c; border: 1px solid #d9dfe5; border-radius: 5px; font: inherit; font-size: 14px; }
.staff-attendance-search::placeholder { color: #7b8793; opacity: 1; }
.staff-attendance-table { margin-top: 15px; overflow-x: auto; }
.staff-attendance-table-heading, .staff-attendance-row { display: grid; grid-template-columns: minmax(115px, 1fr) 60px 72px 145px; align-items: center; gap: 8px; min-width: 430px; }
.staff-attendance-table-heading { min-height: 38px; padding: 0 12px; color: #193c84; background: #dfe5ff; border-radius: 4px; font-size: 14px; }
.staff-attendance-row { min-height: 71px; padding: 0 12px; border-bottom: 1px dashed #e1e5eb; }
.staff-attendance-row[hidden] { display: none; }
.staff-attendance-row > strong { font-size: 12px; font-weight: 500; }
.staff-attendance-roll { justify-self: start; padding: 5px 8px; color: #1676ee; background: #e1efff; border-radius: 3px; font-size: 11px; }
.staff-attendance-toggle { position: relative; width: 47px; height: 24px; padding: 0; background: #f06b6f; border-radius: 14px; }
.staff-attendance-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #d84b53; border-radius: 50%; transition: transform .15s ease; }
.staff-attendance-toggle.is-present { background: #20bf69; }
.staff-attendance-toggle.is-present i { background: #fff; transform: translateX(23px); }
.staff-attendance-day-select { min-width: 0; }
.staff-attendance-day-select .app-select-trigger { height: 43px; padding-left: 12px; font-size: 12px; }
.staff-attendance-day-select .app-select-options { z-index: 20; }
.staff-attendance-submit { position: sticky; bottom: 7px; z-index: 5; width: 100%; height: 43px; margin-top: 16px; color: #fff; background: linear-gradient(180deg, #073451, #00548f); border-radius: 5px; font-size: 15px; }
.modal.staff-attendance-success-modal { padding: 0 9px; }
.staff-attendance-success-modal .modal-card { display: flex; align-items: center; width: min(540px, 100%); min-height: 193px; padding: 24px 0 0; flex-direction: column; border-radius: 7px; }
.staff-attendance-success-modal .modal-card h2, .staff-attendance-success-modal .modal-close { display: none; }
.staff-attendance-success-modal #modalBody { display: flex; align-items: center; width: 100%; flex-direction: column; }
.staff-attendance-success-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: #198f5b; border-radius: 50%; font-size: 18px; }
.staff-attendance-success-title { margin-top: 13px; padding: 0 15px; color: #3f3f46; font-size: 20px; line-height: 1.4; text-align: center; }
.staff-attendance-success-actions { display: flex; justify-content: center; width: 100%; padding: 15px 0; margin-top: auto; border-top: 1px solid #e5e7eb; }
.staff-attendance-success-actions button { padding: 8px 12px; color: #fff; background: #06395f; border-radius: 5px; font-size: 15px; }
.app-frame.staff-leave-active .landing-header { height: 60px; }
.app-frame.staff-leave-active .page-container { padding-top: 60px; }
.staff-leave-list-page { position: relative; min-height: calc(100vh - 60px); padding: 34px 12px 35px; background: #fff; }
.staff-leave-empty { display: grid; place-items: center; min-height: 76px; color: #073b62; background: #fff; border: 1px solid #d7d7d7; border-radius: 6px; box-shadow: 0 2px 5px #00000012; font-size: 20px; }
.staff-leave-list { display: grid; gap: 14px; padding-bottom: 80px; }
.staff-leave-card { padding: 27px 17px 28px; color: #172b3d; background: #fff; border: 1px solid #d7d7d7; border-radius: 7px; box-shadow: 0 2px 5px #00000012; }
.staff-leave-card-title { display: flex; align-items: center; gap: 11px; }
.staff-leave-card-title > i, .staff-leave-card-dates > i { color: #073b62; font-size: 16px; }
.staff-leave-card-title strong { font-size: 15px; }
.staff-leave-card-title > span { padding: 4px 9px; margin-left: auto; color: #ed9700; border: 1px solid #ffae27; border-radius: 16px; font-size: 12px; }
.staff-leave-card > p { margin: 18px 0 11px; color: #4d5963; font-size: 14px; }
.staff-leave-card-dates { display: flex; align-items: center; gap: 10px; color: #273a4a; font-size: 14px; }
.staff-leave-card-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.staff-leave-card-actions button { min-width: 43px; padding: 6px 9px; color: #fff; background: #06395f; border-radius: 4px; font-size: 13px; }
.staff-leave-card-actions button:last-child { background: #ff302b; }
.staff-leave-add { position: absolute; right: 25px; bottom: 49px; display: grid; place-items: center; width: 56px; height: 56px; color: #fff; background: #06395f; border-radius: 50%; box-shadow: 0 3px 8px #0004; font-size: 24px; }
.staff-leave-form-page { min-height: calc(100vh - 60px); padding: 44px 12px 30px; background: #fff; }
.staff-leave-form { overflow: visible; background: #fff; border: 1px solid #d7dfe7; border-radius: 6px; box-shadow: 0 2px 5px #0000000d; }
.staff-leave-form-heading { padding: 12px 16px; color: #3f1e59; background: #eaf4ff; border-bottom: 1px solid #cbd7e1; border-left: 4px solid #0784d8; font-size: 18px; }
.staff-leave-form-fields { display: grid; gap: 22px; padding: 24px 16px 25px; }
.staff-leave-type, .staff-leave-description, .staff-leave-date-row label { position: relative; display: block; min-width: 0; }
.staff-leave-type > span, .staff-leave-description > span, .staff-leave-date-row label > span { position: absolute; top: -8px; left: 10px; z-index: 2; padding: 0 4px; color: #143a5b; background: #fff; font-size: 13px; }
.staff-leave-type .app-select-trigger { height: 47px; }
.staff-leave-description textarea { display: block; width: 100%; height: 129px; padding: 12px; margin-top: 3px; resize: vertical; color: #35485a; border: 1px solid #d7dfe7; border-radius: 6px; font: inherit; font-size: 15px; }
.staff-leave-description textarea::placeholder { color: #7a8794; opacity: 1; }
.staff-leave-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.staff-leave-date-row input { width: 100%; height: 47px; padding: 0 12px; color: #4b5c6b; background: #fff; border: 1px solid #c4ced8; border-radius: 5px; font: inherit; font-size: 15px; }
.staff-leave-date-row label > button { position: absolute; top: 15px; right: 9px; color: #2677a9; background: transparent; font-size: 15px; }
.staff-leave-date-row label:has(button) input { padding-right: 34px; }
.staff-leave-submit, .staff-leave-back { width: 100%; height: 40px; border-radius: 5px; font-size: 15px; }
.staff-leave-submit { margin-top: 0; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); }
.staff-leave-back { margin-top: -4px; color: #06395f; background: #fff; border: 1px solid #7893a8; }
.modal.staff-leave-success-modal, .modal.staff-leave-delete-confirm { padding: 0 9px; }
.staff-leave-success-modal .modal-card { display: flex; align-items: center; width: min(384px, 100%); min-height: 193px; padding: 24px 0 0; flex-direction: column; border-radius: 7px; }
.staff-leave-success-modal .modal-card h2, .staff-leave-success-modal .modal-close { display: none; }
.staff-leave-success-modal #modalBody { display: flex; align-items: center; width: 100%; flex-direction: column; }
.staff-leave-success-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: #198f5b; border-radius: 50%; font-size: 18px; }
.staff-leave-success-title { margin-top: 13px; padding: 0 12px; color: #3f3f46; font-size: 20px; text-align: center; }
.staff-leave-success-actions { display: flex; justify-content: center; width: 100%; padding: 15px 0; margin-top: auto; border-top: 1px solid #e5e7eb; }
.staff-leave-success-actions button { padding: 8px 12px; color: #fff; background: #06395f; border-radius: 5px; font-size: 15px; }
.confirm-modal.staff-leave-delete-confirm .modal-card { width: min(384px, 100%); min-height: 202px; padding: 16px 0 0; border-radius: 7px; }
.staff-leave-delete-confirm .modal-card h2, .staff-leave-delete-confirm .modal-close { display: none; }
.staff-leave-delete-confirm .warning-icon { width: 50px; height: 50px; margin-bottom: 12px; font-size: 30px; }
.staff-leave-delete-confirm .confirm-title { color: #333; font-size: 20px; }
.staff-leave-delete-confirm .confirm-actions { width: 100%; gap: 8px; padding: 15px 0 16px; margin-top: 25px; border-top: 1px solid #e5e7eb; }
.staff-leave-delete-confirm .confirm-actions button { width: 76px; height: 38px; padding: 0; border-radius: 5px; font-size: 16px; }
.app-frame.staff-homework-notification-active .landing-header { height: 60px; }
.app-frame.staff-homework-notification-active .page-container { padding-top: 60px; }
.staff-homework-notification-page { min-height: calc(100vh - 60px); padding: 34px 12px 30px; background: #fff; }
.staff-homework-notification-form { overflow: visible; background: #fff; border: 1px solid #d9e1e9; border-radius: 6px; }
.staff-homework-notification-heading { padding: 12px 16px; color: #3f1e59; background: #eaf4ff; border-bottom: 1px solid #cbd7e1; border-left: 4px solid #0784d8; font-size: 18px; }
.staff-homework-notification-fields { display: grid; gap: 12px; padding: 27px 16px 30px; }
.staff-notification-select, .staff-notification-date, .staff-notification-homework, .staff-notification-message { position: relative; display: block; min-width: 0; }
.staff-notification-select > span, .staff-notification-date > span, .staff-notification-homework > span, .staff-notification-message > span { position: absolute; top: -8px; left: 10px; z-index: 2; padding: 0 4px; color: #143a5b; background: #fff; font-size: 13px; }
.staff-notification-select .app-select-trigger, .staff-notification-date input { width: 100%; height: 46px; }
.staff-notification-select .app-select-trigger { padding: 0 13px; }
.staff-notification-select .app-select-trigger:disabled { color: #7e8790; background: #f1f1f1; cursor: not-allowed; }
.staff-notification-select .app-select-trigger:disabled > i { color: #b5bbc0; }
.staff-notification-date input { padding: 0 12px; color: #27394a; border: 1px solid #c4ced8; border-radius: 5px; font: inherit; font-size: 15px; }
.staff-notification-homework div { min-height: 46px; padding: 11px 12px; color: #26394b; background: #f8f9fa; border: 1px solid #dce2e7; border-radius: 5px; font-size: 15px; }
.staff-notification-message textarea { width: 100%; min-height: 110px; padding: 12px; margin-top: 3px; resize: vertical; color: #34495e; border: 1px solid #d7dfe7; border-radius: 6px; font: inherit; font-size: 15px; }
.staff-notification-message textarea::placeholder { color: #788695; opacity: 1; }
.staff-homework-notification-submit { width: 100%; height: 40px; margin-top: 5px; color: #fff; background: linear-gradient(180deg, #09314f 0%, #004b84 86.25%); border-radius: 5px; font-size: 15px; }
.app-frame.staff-subject-syllabus-active .landing-header, .app-frame.staff-change-password-active .landing-header { height: 60px; }
.app-frame.staff-subject-syllabus-active .page-container, .app-frame.staff-change-password-active .page-container { padding-top: 60px; }
.staff-subject-syllabus-page { min-height: calc(100vh - 60px); padding: 34px 10px 30px; background: #fff; }
.staff-subject-syllabus-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.staff-subject-syllabus-filters label { position: relative; min-width: 0; }
.staff-subject-syllabus-filters label > span { position: absolute; top: -8px; left: 10px; z-index: 2; padding: 0 4px; color: #143a5b; background: #fff; font-size: 13px; }
.staff-subject-syllabus-filters .app-select-trigger { height: 47px; padding: 0 13px; }
.staff-subject-syllabus-empty { display: grid; place-items: center; min-height: 132px; margin-top: 15px; color: #073b62; background: #fff; border: 1px solid #d7d7d7; border-radius: 6px; box-shadow: 0 2px 5px #00000012; font-size: 20px; }
.staff-change-password-page { min-height: calc(100vh - 60px); padding: 34px 12px 30px; background: #fff; }
.staff-change-password-form { overflow: hidden; background: #fff; border: 1px solid #d9e1e9; border-radius: 6px; }
.staff-change-password-heading { padding: 12px 16px; color: #3f1e59; background: #eaf4ff; border-bottom: 1px solid #cbd7e1; border-left: 4px solid #0784d8; font-size: 18px; }
.staff-change-password-fields { display: grid; gap: 13px; padding: 27px 16px 24px; }
.staff-change-password-fields > label { position: relative; display: block; }
.staff-change-password-fields > label > span { position: absolute; top: -8px; left: 10px; z-index: 1; padding: 0 4px; color: #143a5b; background: #fff; font-size: 13px; }
.staff-change-password-fields > label > input { width: 100%; height: 46px; padding: 0 38px 0 12px; color: #34495e; border: 1px solid #d7dfe7; border-radius: 6px; font: inherit; font-size: 15px; }
.staff-change-password-fields > label > button { position: absolute; top: 13px; right: 10px; color: #303c45; background: transparent; font-size: 14px; }
.staff-change-password-submit { min-height: 38px; justify-self: start; padding: 0 13px; color: #fff; background: #06395f; border-radius: 5px; font-size: 15px; }
.staff-password-instructions { display: grid; gap: 6px; color: #153c5d; font-size: 14px; }
.staff-password-instructions > strong { margin-bottom: 1px; font-size: 15px; }
.staff-password-instructions > div { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; }
.staff-password-instructions > div > i { padding-top: 2px; color: #14945a; font-size: 14px; }
.app-frame.staff-events-active .landing-header { height: 60px; }
.app-frame.staff-events-active .page-container { padding-top: 60px; }
.staff-events-page { gap: 14px; padding: 34px 10px 25px; }
.staff-event-card { min-height: 158px; padding: 10px 12px; border-right-width: 5px; border-radius: 9px; }
.staff-event-card.event-violet { background: #f1e0ff; border-color: #a75bdd; }
.staff-event-card.event-cyan { background: #e5faff; border-color: #12c2eb; }
.staff-event-card.event-rose { background: #fff0f0; border-color: #ff555b; }
.staff-event-copy { min-width: 0; margin-left: 145px; flex: 1; }
.staff-event-copy strong { display: block; margin: 2px 0 8px; color: #a15ac6; font-size: 15px; }
.event-cyan .staff-event-copy strong { color: #17bce5; }
.event-rose .staff-event-copy strong { color: #f04c55; }
.staff-event-copy p { margin: 0; color: #493d52; font-size: 13px; }
.staff-event-copy small { position: absolute; right: 48px; bottom: 12px; color: #665d69; font-size: 12px; }
.staff-event-card > button { position: absolute; right: 14px; bottom: 10px; color: #0875d1; background: transparent; font-size: 12px; }
.staff-event-paper { position: absolute; top: 10px; left: 32px; display: flex; align-items: center; width: 106px; height: 136px; padding: 8px; flex-direction: column; gap: 7px; overflow: hidden; color: #35475a; background: #fff; box-shadow: 0 1px 2px #0002; }
.staff-event-paper b { margin-bottom: 3px; font-size: 4px; text-align: center; }
.staff-event-paper i { width: 100%; height: 10px; border: 1px solid #e4e7eb; background: linear-gradient(90deg, #eef1f4 50%, #fff 50%); }
.staff-event-brand { position: absolute; top: 72px; left: 14px; color: #d1ad18; font-family: cursive; font-size: 16px; white-space: nowrap; }
.staff-event-brand span:first-child { color: #1b6ab2; }
.staff-event-brand span:last-child { color: #35a344; }
.modal.staff-event-modal { padding: 8px; background: #0008; }
.staff-event-modal .modal-card { width: min(370px, 100%); max-height: calc(100% - 12px); padding: 0 14px 18px; overflow: hidden auto; border-radius: 8px; }
.staff-event-modal .modal-card h2 { padding: 16px 2px 13px; margin: 0; color: #333; border-bottom: 1px solid #e5e7eb; font-size: 20px; }
.staff-event-modal .modal-close { top: 15px; right: 12px; color: #777; font-size: 21px; }
.staff-event-viewer { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 0 13px; }
.staff-event-viewer > button { display: grid; place-items: center; width: 26px; height: 42px; flex: 0 0 26px; color: #333; background: transparent; font-size: 24px; }
.staff-event-large-image { position: relative; display: grid; place-items: center; width: min(236px, calc(100% - 70px)); height: min(420px, 56vh); min-height: 260px; color: #66a4ff; background: #f7f8fa; border-radius: 7px; }
.staff-event-large-image > i { color: #69a5ff; font-size: 54px; transform: rotate(-35deg); filter: drop-shadow(2px 3px 0 #ffab44); }
.staff-event-large-image > button { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 29px; height: 29px; color: #fff; background: #62676b; border-radius: 50%; font-size: 13px; }
.staff-event-detail-copy { padding: 0 2px; color: #4b4b4b; font-size: 15px; }
.staff-event-detail-copy strong, .staff-event-detail-copy b { display: block; margin-bottom: 12px; }
.staff-event-detail-copy strong span { font-weight: 400; }
.staff-event-detail-copy p { margin: 0; }
.staff-events-page { gap: 22px; padding: 27px 12px 25px; }
.staff-event-card { min-height: 158px; padding: 10px 12px; }
.staff-event-card .event-thumb { position: absolute; top: 10px; left: 28px; width: 113px; height: 137px; }
.staff-event-copy { margin: 0 0 0 158px; }
.staff-event-copy strong { margin: 2px 0 8px; font-size: 15px; }
.staff-event-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: 14px; line-height: 1.5; }
.staff-event-copy small { right: 206px; left: auto; bottom: 12px; font-size: 12px; }
.staff-event-card > button { right: 14px; bottom: 10px; font-size: 12px; }
.event-thumb-one { background: linear-gradient(180deg, #b6d0d2 0 24%, #fff 24% 39%, #ed6934 39% 58%, #244b32 58% 100%); }
.event-thumb-two { background: radial-gradient(circle at 24% 62%, #f4d32f 0 11%, transparent 12%), radial-gradient(circle at 68% 60%, #f4d32f 0 12%, transparent 13%), linear-gradient(180deg, #f9f1cb 0 46%, #70b56e 46% 100%); }
.event-thumb-three { background: linear-gradient(180deg, #9dc8cd 0 38%, #285837 38% 100%); }
.staff-event-modal .modal-card { width: min(370px, calc(100% - 18px)); max-height: calc(100% - 12px); padding: 0 14px 18px; border-radius: 8px; }
.staff-event-modal { padding: 0 8px; }
.staff-event-modal .modal-card { width: min(370px, calc(100% - 18px)); max-height: calc(100% - 8px); padding: 0 0 18px; border-radius: 8px; }
.staff-event-modal .modal-card h2 { display: block; padding: 17px 42px 17px 14px; margin: 0; color: #573364; border-bottom: 1px solid #e4e4e4; font-size: 20px; font-weight: 600; }
.staff-event-modal .modal-close { top: 13px; right: 12px; z-index: 2; color: #888; font-size: 23px; }
.staff-event-viewer { position: relative; gap: 0; padding: 16px 0 18px; }
.staff-event-viewer > button { position: absolute; z-index: 1; top: 50%; width: 34px; height: 48px; flex-basis: 34px; color: #333; background: #fff; font-size: 27px; transform: translateY(-50%); }
.staff-event-viewer > button:first-child { left: 8px; }
.staff-event-viewer > button:last-child { right: 8px; }
.staff-event-large-image { width: min(236px, calc(100% - 76px)); height: min(420px, 56vh); min-height: 300px; background-color: #f7f8fa; background-size: 100% auto; background-repeat: no-repeat; background-position: center; }
.staff-event-large-image > i { display: none; }
.staff-event-detail-copy { font-size: 15px; line-height: 1.55; }
.staff-event-detail-copy strong, .staff-event-detail-copy b { margin-bottom: 12px; }
@media (max-width: 420px) {
  .staff-events-page { gap: 22px; padding: 27px 12px 25px; }
  .staff-event-card { min-height: 158px; }
  .staff-event-card .event-thumb { left: 28px; width: 113px; height: 137px; }
  .staff-event-copy { margin-left: 158px; }
  .staff-event-copy p { font-size: 14px; line-height: 1.5; }
}
.app-frame.profile-active .landing-header { height: 60px; }
.app-frame.profile-active .page-container { padding-top: 60px; }
.app-frame.staff-leave-approval-active .landing-header { height: 60px; }
.app-frame.staff-leave-approval-active .page-container { padding-top: 60px; }
.staff-leave-approval-page { min-height: calc(100vh - 60px); padding: 34px 12px 28px; background: #fff; }
.staff-leave-approval-intro { display: flex; align-items: center; gap: 12px; margin: 0 0 48px; }
.staff-leave-approval-intro > span { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; color: #1768e9; background: #e6f0ff; border-radius: 6px; font-size: 17px; }
.staff-leave-approval-intro h2 { margin: 0 0 3px; color: #39204f; font-size: 21px; font-weight: 600; }
.staff-leave-approval-intro p { margin: 0; color: #748292; font-size: 12px; }
.staff-leave-approval-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.staff-leave-approval-filters label { position: relative; min-width: 0; }
.staff-leave-approval-filters label > span { position: absolute; top: -8px; left: 10px; z-index: 2; padding: 0 4px; color: #143a5b; background: #fff; font-size: 13px; }
.staff-leave-approval-filters .app-select-trigger { height: 47px; padding: 0 13px; }
.staff-leave-approval-filters .app-select-trigger:disabled { color: #7e8790; background: #f1f1f1; }
.staff-leave-approval-results { display: grid; gap: 24px; margin-top: 36px; padding-bottom: 22px; }
.staff-leave-approval-results[hidden] { display: none; }
.staff-leave-approval-card { overflow: hidden; background: #fff; border: 1px solid #d9e0e5; border-top: 4px solid #54a9d2; border-radius: 7px; box-shadow: 0 2px 5px #00000012; }
.staff-leave-approval-card > header { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 12px 19px; background: #f1f8ff; }
.staff-leave-student-avatar { display: grid; place-items: center; width: 49px; height: 49px; flex: 0 0 49px; color: #a9d4ff; background: #fff; border: 1px solid #e4edf4; border-radius: 50%; font-size: 21px; }
.staff-leave-approval-card > header div { min-width: 0; }
.staff-leave-approval-card > header strong { display: block; color: #111; font-size: 15px; line-height: 1.3; }
.staff-leave-approval-card > header small { display: block; margin-top: 4px; color: #667788; font-size: 12px; }
.staff-leave-approval-detail { display: flex; gap: 14px; min-height: 80px; padding: 16px 32px; color: #735187; }
.staff-leave-approval-detail > i { width: 20px; flex: 0 0 20px; padding-top: 2px; font-size: 16px; }
.staff-leave-approval-detail > div { display: grid; align-content: start; gap: 8px; }
.staff-leave-approval-detail strong { color: #073b62; font-size: 15px; font-weight: 500; }
.staff-leave-approval-detail span { color: #66717e; font-size: 14px; line-height: 1.4; }
.staff-leave-reason { min-height: 112px; }
.staff-leave-approval-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 19px 16px; }
.staff-leave-approval-actions button { min-width: 100px; height: 37px; color: #fff; border-radius: 4px; font-size: 13px; font-weight: 600; }
.staff-leave-approval-actions button:first-child { background: #ff3028; }
.staff-leave-approval-actions button:last-child { background: #168b58; }
.staff-leave-approval-status { display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; min-height: 36px; padding: 0 15px; margin: 0 19px 16px auto; border-radius: 5px; font-size: 13px; font-weight: 600; }
.staff-leave-approval-status.approved { color: #138657; background: #d7fae8; border: 1px solid #a4edca; }
.staff-leave-approval-status.rejected { color: #d52d32; background: #ffe1e1; border: 1px solid #ffc3c3; }
.modal.staff-quiz-delete-confirm { padding: 0 8px; }
.modal.staff-homework-delete-confirm { padding: 0 8px; }
.confirm-modal.staff-homework-delete-confirm .modal-card { width: min(384px, 100%); min-height: 202px; padding: 16px 0 0; border-radius: 7px; }
.staff-homework-delete-confirm .modal-card h2, .staff-homework-delete-confirm .modal-close { display: none; }
.staff-homework-delete-confirm .warning-icon { width: 50px; height: 50px; margin-bottom: 12px; font-size: 30px; }
.staff-homework-delete-confirm .confirm-title { color: #333; font-size: 20px; }
.staff-homework-delete-confirm .confirm-actions { width: 100%; gap: 8px; padding: 15px 0 16px; margin-top: 25px; border-top: 1px solid #e5e7eb; }
.staff-homework-delete-confirm .confirm-actions button { width: 76px; height: 38px; padding: 0; border-radius: 5px; font-size: 16px; }
.confirm-modal.staff-quiz-delete-confirm .modal-card { width: min(384px, 100%); min-height: 202px; padding: 16px 0 0; border-radius: 7px; }
.staff-quiz-delete-confirm .modal-card h2, .staff-quiz-delete-confirm .modal-close { display: none; }
.staff-quiz-delete-confirm .warning-icon { width: 50px; height: 50px; margin-bottom: 12px; font-size: 30px; }
.staff-quiz-delete-confirm .confirm-title { color: #333; font-size: 20px; }
.staff-quiz-delete-confirm .confirm-actions { width: 100%; gap: 8px; padding: 15px 0 16px; margin-top: 25px; border-top: 1px solid #e5e7eb; }
.staff-quiz-delete-confirm .confirm-actions button { width: 76px; height: 38px; padding: 0; border-radius: 5px; font-size: 16px; }