.app-container{background-color:#f4f7fe;flex-direction:column;width:100%;min-width:320px;min-height:100vh;margin:0 auto;display:flex;position:relative;overflow-x:hidden}.header-bar{background-color:#fff;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;min-height:40px;padding:16px 20px;display:flex}.header-bar .back-arrow{color:#333;cursor:pointer;z-index:2}.header-bar .header-title{color:#333;z-index:1;font-size:20px;font-weight:600;position:absolute;left:50%;transform:translate(-50%)}.primary-button{color:#fff;cursor:pointer;box-sizing:border-box;background-color:#4fb5e6;border:none;border-radius:12px;justify-content:center;align-items:center;width:100%;padding:16px;font-size:16px;font-weight:600;text-decoration:none;display:flex}.primary-button:hover{opacity:.9}.card{background-color:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,.05)}.form-group{margin-bottom:20px}.form-group label{color:#555;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.form-group input{box-sizing:border-box;border:1px solid #e0e0e0;border-radius:12px;width:100%;padding:14px 16px;font-size:16px}.form-group input::placeholder{color:#aaa}.global-header{box-sizing:border-box;background-color:#f4f7fe;width:100%;padding:20px 20px 10px}.header-content{justify-content:space-between;align-items:flex-start;max-width:1200px;margin:0 auto;display:flex}.header-title-section{flex-grow:1}.header-title-main{color:#333;margin:0;font-size:24px;font-weight:600}.header-title-main.page-title{margin-top:5px}.header-subtitle{color:#888;margin:4px 0 0;font-size:14px}.header-actions{align-items:center;gap:15px;margin-top:5px;display:flex}.notification-icon{color:#555;cursor:pointer}.profile-link{color:#555;font-size:16px;font-weight:500;text-decoration:none}.desktop-nav{flex-grow:2;justify-content:center;align-items:center;gap:20px;margin-top:5px;display:none}.desktop-nav-item{color:#555;border-radius:8px;padding:8px 12px;font-size:16px;font-weight:500;text-decoration:none}.desktop-nav-item.active{color:#1fa1e2;background-color:#eaf4fb}.profile-link{display:none}@media (min-width:768px){.global-header{background-color:#fff;border-bottom:1px solid #eee;padding:16px 30px}.desktop-nav{display:flex}.profile-link{display:block}.header-subtitle{display:none}.header-title-main.page-title{margin-top:0}}.bottom-nav{z-index:100;background-color:#fff;border-top-left-radius:20px;border-top-right-radius:20px;justify-content:space-around;align-items:center;max-width:400px;height:65px;margin:0 auto;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -3px 10px rgba(0,0,0,.05)}.bottom-nav-item{color:#aaa;cursor:pointer;justify-content:center;align-items:center;padding:5px;font-size:20px;text-decoration:none;display:flex}.bottom-nav-item.active{color:#394893}@media (min-width:768px){.bottom-nav{display:none}}.welcome-screen{color:#fff;background-position:50%;background-size:cover;flex-direction:column;flex-grow:1;display:flex}.welcome-overlay{background-color:rgba(0,0,0,.2);flex-direction:column;flex-grow:1;padding:30px;display:flex}.welcome-header{padding-top:20px}.logo{align-items:center;gap:8px;font-size:18px;font-weight:600;display:flex}.logo svg{color:#5baad7;background:#fff;border-radius:50%;padding:6px;font-size:16px}.welcome-main{text-align:center;flex-direction:column;flex-grow:1;justify-content:center;margin-top:-50px;display:flex}.welcome-main h1{margin-bottom:15px;font-size:32px;font-weight:700}.welcome-main p{opacity:.9;max-width:300px;margin:0 auto;font-size:16px;line-height:1.5}.welcome-footer{padding-bottom:20px}.welcome-footer .primary-button{background-color:#4fb5e6}.auth-screen{background-color:#fff;flex-direction:column;flex-grow:1;width:100%;display:flex}.auth-main{flex-grow:1;padding:20px 25px}.forgot-password{color:#3b82f6;text-align:right;margin-top:-10px;margin-bottom:25px;font-size:14px;font-weight:500;text-decoration:none;display:block}.signup-link{text-align:center;color:#888;margin-top:25px;font-size:14px}.signup-link a{color:#3b82f6;font-weight:500;text-decoration:none}.divider{text-align:center;color:#aaa;align-items:center;margin:30px 0;font-size:14px;font-weight:500;display:flex}.divider:before,.divider:after{content:"";border-bottom:1px solid #e0e0e0;flex:1}.divider:not(:empty):before{margin-right:1em}.divider:not(:empty):after{margin-left:1em}.social-login{justify-content:center;gap:20px;display:flex}.social-icon{cursor:pointer;background-color:#fff;border:1px solid #e0e0e0;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;display:flex}@media (min-width:768px){.auth-screen{border-radius:20px;flex-grow:0;max-width:450px;margin:40px auto;box-shadow:0 10px 30px rgba(0,0,0,.1)}.auth-main{padding:30px 40px}}.choose-sem-screen{background-color:#fff;flex-direction:column;flex-grow:1;display:flex}.choose-sem-main{flex-grow:1;padding:20px 25px}.choose-sem-main h1{color:#333;margin-top:0;margin-bottom:20px;font-size:28px;font-weight:600}.student-info-card{background-color:#f4f7fe;border:1px solid #e0e0e0;border-radius:15px;margin-bottom:25px;padding:20px}.info-row{align-items:center;gap:15px;display:flex}.info-icon{color:#4fb5e6;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;font-size:20px;display:flex;box-shadow:0 2px 5px rgba(0,0,0,.05)}.info-text{flex-direction:column;display:flex}.info-label{color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-size:12px}.info-value{color:#333;font-size:16px;font-weight:600}.divider-line{background-color:#e0e0e0;height:1px;margin:15px 0}.info-row-group{justify-content:space-between;display:flex}.choose-sem-main .description{color:#888;margin-bottom:20px;font-size:14px;line-height:1.5}.sem-options{flex-direction:column;gap:15px;display:flex}.sem-option{cursor:pointer;background-color:#fff;border:1px solid #e0e0e0;border-radius:15px;align-items:center;padding:15px 20px;transition:all .2s;display:flex;position:relative}.sem-option.selected{background-color:#eaf4fb;border-color:#4fb5e6}.sem-option.locked{cursor:not-allowed;opacity:.7;background-color:#fafafa}.sem-icon{color:#394893;background-color:#f4f7fe;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;margin-right:15px;font-size:18px;display:flex}.sem-option.locked .sem-icon{color:#888;background-color:#eee}.sem-info{flex-direction:column;display:flex}.sem-label{color:#333;font-size:16px;font-weight:500}.sem-option.locked .sem-label{color:#999}.locked-text{color:#e59819;margin-top:2px;font-size:11px}.checkmark{color:#4fb5e6;position:absolute;right:20px}.choose-sem-footer{background-color:#fff;padding:20px 25px}.home-screen{flex-direction:column;flex-grow:1;width:100%;padding-bottom:80px;display:flex}.home-main{box-sizing:border-box;flex-direction:column;flex-grow:1;width:100%;max-width:1200px;margin:0 auto;padding:0 20px;display:flex}.stats-grid{flex-wrap:wrap;gap:15px;margin-top:10px;display:flex}.stat-card{flex-grow:1;flex-basis:150px;min-width:150px}.stat-value{font-size:28px;font-weight:700;display:block}.stat-label{color:#888;margin-top:5px;font-size:14px;display:block}.quick-nav{flex-wrap:wrap;justify-content:space-around;gap:20px;margin:30px 0;display:flex}.nav-item{color:#555;flex-direction:column;flex-grow:1;flex-basis:0;align-items:center;min-width:60px;font-size:12px;font-weight:500;text-decoration:none;display:flex}.nav-icon{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;margin-bottom:8px;font-size:22px;display:flex}.schedule-section{flex-direction:column;flex-grow:1;margin-top:10px;display:flex}.schedule-section h2{margin-bottom:15px;font-size:20px;font-weight:600}.schedule-container{flex-grow:1;padding:15px}.schedule-days{text-align:center;color:#999;grid-template-columns:repeat(6,1fr);margin:0 5px;padding-bottom:10px;font-size:14px;font-weight:500;display:grid}.schedule-grid{grid-template-columns:repeat(6,1fr);gap:5px;min-height:100px;display:grid}.schedule-item{color:#333;border-radius:10px;padding:10px 8px;font-size:12px;font-weight:500}#economy{color:#e59819;background-color:#fef3de;grid-column:1/span 3}#geography{color:#1fa1e2;background-color:#eaf4fb;grid-area:2/3/auto/span 3}#english{color:#5d5fef;background-color:#edebff;grid-area:3/5/auto/span 2}@media (min-width:768px){.home-screen{padding-bottom:20px}.nav-item{flex-grow:0;min-width:80px}}.assignments-screen{background-color:#fff;flex-direction:column;flex-grow:1;padding-bottom:80px;display:flex}.assignments-header{justify-content:space-between;align-items:center;padding:20px;display:flex}.assignments-header h1{margin:0;font-size:24px;font-weight:600}.toggle-btn{cursor:pointer;color:#888;background-color:transparent;border:none;border-radius:20px;padding:8px 12px}.assignments-main{padding:0 20px}.calendar-header h2{margin:0;font-size:20px}.month-nav{color:#888;cursor:pointer;gap:15px;display:flex}.calendar-grid{text-align:center;grid-template-columns:repeat(7,1fr);gap:10px;display:grid}.day-name{color:#aaa;font-size:14px;font-weight:500}.date-cell{color:#333;border-radius:50%;padding:8px 0;font-size:16px;font-weight:500}.date-cell.today{color:#fff;background-color:#394893}.date-cell.other-month{color:#ccc}.task-list-container{background-color:#f4f7fe;border-top-left-radius:30px;border-top-right-radius:30px;flex-grow:1;margin-top:20px;padding:20px}.pull-bar{background-color:#ddd;border-radius:3px;width:40px;height:5px;margin:-10px auto 20px}.task-item{background-color:#fff;border-radius:15px;align-items:center;margin-bottom:15px;padding:15px;display:flex;box-shadow:0 4px 12px rgba(0,0,0,.05)}.task-icon{border-radius:10px;justify-content:center;align-items:center;width:45px;height:45px;margin-right:15px;font-size:20px;display:flex}.task-details{flex-grow:1}.task-title{color:#333;font-size:15px;font-weight:500;display:block}.task-date{color:#888;align-items:center;gap:5px;margin-top:5px;font-size:13px;display:flex}.task-days{color:#888;font-size:13px;font-weight:500}.my-class-screen{flex-grow:1;padding-bottom:20px}.header-bar-placeholder{background-color:#f4f7fe;min-height:70px}@media (min-width:768px){.header-bar-placeholder{display:none}}.class-header{background-color:#fff;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:20px;display:flex}.class-header h2{margin:0;font-size:20px}.view-toggle{background-color:#eaf4fb;border-radius:20px;display:flex}.toggle-btn{cursor:pointer;color:#888;background-color:transparent;border:none;border-radius:20px;align-items:center;padding:8px 12px;font-size:16px;display:flex}.toggle-btn.active{color:#fff;background-color:#4fb5e6;box-shadow:0 2px 4px rgba(0,0,0,.1)}.my-class-main{gap:20px;max-width:1200px;margin:0 auto;padding:20px;display:flex}.my-class-main.grid{flex-flow:wrap}.subject-card{color:inherit;width:100%;padding:0;text-decoration:none;overflow:hidden}.subject-card h3{margin:15px 20px;font-size:18px}.card-image{object-fit:cover;width:100%;height:150px}.teacher-badge{background-color:#fff;border-radius:20px;align-items:center;margin:-15px 0 0 20px;padding:4px;display:inline-flex;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.1)}.teacher-badge img{border-radius:50%;width:25px;height:25px;margin-right:8px}.teacher-badge span{padding-right:10px;font-size:13px;font-weight:500}.card-footer{color:#888;justify-content:space-between;align-items:center;padding:0 20px 15px;font-size:13px;display:flex}.progress-badge{color:#4fb5e6;background-color:#eaf4fb;border-radius:15px;padding:5px 10px;font-size:13px;font-weight:600}.my-class-main.list{flex-direction:column}.subject-list-item{color:inherit;align-items:center;padding:15px;text-decoration:none;display:flex}.list-item-icon{background-color:#f0f0f0;border-radius:10px;justify-content:center;align-items:center;width:45px;height:45px;margin-right:15px;font-size:20px;display:flex}.subject-list-item[href*=math] .list-item-icon{background-color:rgba(217,90,76,.125)}.subject-list-item[href*=bio] .list-item-icon{background-color:rgba(76,184,98,.125)}.subject-list-item[href*=eng] .list-item-icon{background-color:rgba(93,95,239,.125)}.list-item-details{flex-grow:1}.list-item-title-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.list-item-title-row h3{color:#333;margin:0;font-size:18px}.teacher-badge-list{background-color:#f4f7fe;border-radius:20px;align-items:center;padding:4px 8px 4px 4px;display:flex}.teacher-badge-list img{border-radius:50%;width:20px;height:20px;margin-right:6px}.teacher-badge-list span{color:#555;font-size:12px;font-weight:500}.subject-list-item .card-footer{padding:5px 0 0}.subject-list-item .progress-badge{margin-left:auto;padding:8px 12px}@media (min-width:768px){.my-class-main.grid{flex-flow:wrap}.subject-card{width:calc(33.333% - 14px)}}.subjects-screen{background-color:#fff;flex-grow:1}.subjects-main{padding:20px}.subjects-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.subject-grid-item{color:#333;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;padding:20px 10px;font-size:14px;font-weight:500;text-decoration:none;display:flex}.subject-grid-icon{background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin-bottom:10px;font-size:24px;display:flex}.subject-details-screen{background-color:#fff;flex-direction:column;flex-grow:1;display:flex}.subject-details-screen .header-bar{background-color:#f4f7fe;border-bottom:none}.subject-details-main{flex-grow:1;padding-bottom:90px;overflow-y:auto}.subject-hero{text-align:center;background-color:#f4f7fe;padding:0 20px 30px}.subject-hero-icon{background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 15px;font-size:36px;display:flex}.subject-hero h1{margin:0 0 5px;font-size:24px}.subject-hero p{color:#888;margin:0;font-size:14px}.subject-content{padding:20px}.content-block{margin-bottom:25px}.content-block h3{margin-bottom:15px;font-size:18px;font-weight:600}.content-block p{color:#555;margin:0;font-size:14px;line-height:1.6}.teacher-list{flex-direction:column;gap:15px;display:flex}.teacher-item{align-items:center;display:flex}.teacher-avatar{border-radius:50%;width:45px;height:45px;margin-right:12px}.teacher-info span{align-items:center;font-size:15px;font-weight:500;display:flex}.teacher-info small{color:#888;font-size:13px}.verified-check{color:#4fb5e6;margin-left:5px;font-size:14px}.accordion-header{justify-content:space-between;align-items:center;display:flex}.accordion-header span{color:#888;font-size:13px;font-weight:500}.accordion-list{border:1px solid #eee;border-radius:10px;margin-top:15px;overflow:hidden}.accordion-item{border-bottom:1px solid #eee}.accordion-item:last-child{border-bottom:none}.accordion-title{cursor:pointer;justify-content:space-between;align-items:center;padding:15px;font-weight:500;display:flex}.accordion-arrow{transition:transform .3s}.accordion-item.open .accordion-arrow{transform:rotate(180deg)}.accordion-content{color:#555;max-height:0;padding:0 15px;font-size:14px;line-height:1.5;transition:max-height .3s,padding .3s;overflow:hidden}.accordion-item.open .accordion-content{max-height:100px;padding:0 15px 15px}.subject-details-footer{background-color:#fff;border-top:1px solid #eee;max-width:400px;margin:0 auto;padding:15px 20px 20px;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 10px rgba(0,0,0,.05)}.upload-screen{background-color:#f4f7fe;flex-direction:column;flex-grow:1;display:flex}.upload-main{box-sizing:border-box;flex-grow:1;width:100%;max-width:600px;margin:0 auto;padding:20px}.instruction-card{background-color:#fff;border-radius:15px;margin-bottom:25px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.03)}.instruction-card h3{color:#333;margin:0 0 5px}.instruction-card p{color:#888;margin:0;font-size:14px}.upload-section{margin-bottom:30px}.upload-section h4{color:#333;align-items:center;gap:10px;margin:0 0 5px;display:flex}.section-icon{color:#4fb5e6}.sub-text{color:#999;margin:0 0 15px;font-size:12px}.upload-box{cursor:pointer;background-color:#fff;border:2px dashed #d6e4f8;border-radius:15px;justify-content:center;align-items:center;height:120px;transition:all .2s;display:flex}.upload-box:active{background-color:#f0f8ff;border-color:#4fb5e6}.upload-content{color:#888;flex-direction:column;align-items:center;gap:10px;font-size:14px;font-weight:500;display:flex}.file-selected{color:#333;align-items:center;gap:10px;font-weight:600;display:flex}.icon-row{align-items:center;gap:15px;display:flex}.plus{color:#ddd;font-size:20px}.upload-footer{background-color:#fff;border-top:1px solid #eee;padding:20px}.presence-screen{background-color:#f4f7fe;flex-direction:column;flex-grow:1;display:flex}.presence-main{box-sizing:border-box;width:100%;max-width:600px;margin:0 auto;padding:20px}.presence-hero{text-align:center;background-color:#fff;border-radius:20px;justify-content:center;margin-bottom:20px;padding:30px;display:flex;box-shadow:0 4px 12px rgba(0,0,0,.03)}.progress-circle-container h3{color:#555;margin:15px 0 0;font-weight:600}.circular-chart{max-width:120px;max-height:120px;margin:0 auto;display:block}.circle-bg{fill:none;stroke:#eee;stroke-width:3.8px}.circle{fill:none;stroke-width:3.8px;stroke-linecap:round;stroke:#4fb5e6;animation:1s ease-out forwards progress}.percentage{fill:#333;text-anchor:middle;font-family:sans-serif;font-size:.5em;font-weight:700}@keyframes progress{0%{stroke-dasharray:0 100}}.presence-stats-grid{grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:25px;display:grid}.p-stat-card{text-align:center;background-color:#fff;border-radius:15px;padding:15px 10px;box-shadow:0 2px 8px rgba(0,0,0,.03)}.p-label{color:#888;margin-bottom:5px;font-size:12px;display:block}.p-value{color:#333;font-size:18px;font-weight:700}.p-stat-card.present .p-value{color:#4cb862}.p-stat-card.absent .p-value{color:#d95a4c}.presence-calendar-section{background-color:#fff;border-radius:20px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,.03)}.calendar-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.calendar-header h4{margin:0;font-size:18px}.cal-nav button{color:#888;cursor:pointer;background:0 0;border:none;padding:5px;font-size:20px}.presence-calendar{text-align:center;grid-template-columns:repeat(7,1fr);gap:10px;display:grid}.day-name{color:#bbb;margin-bottom:10px;font-size:13px;font-weight:500}.day-slot{border-radius:10px;flex-direction:column;justify-content:center;align-items:center;height:40px;font-size:14px;font-weight:500;display:flex;position:relative}.day-slot.present{color:#333;background-color:#f0fdf4}.day-slot.absent{color:#333;background-color:#fef2f2}.day-slot .dot{border-radius:50%;width:5px;height:5px;margin-top:4px}.dot.green{background-color:#4cb862}.dot.red{background-color:#d95a4c}.calendar-legend{color:#666;justify-content:center;gap:20px;margin-top:20px;font-size:13px;display:flex}.legend-item{align-items:center;gap:8px;display:flex}.profile-screen{background-color:#f4f7fe;flex-direction:column;flex-grow:1;display:flex}.profile-main{box-sizing:border-box;width:100%;max-width:600px;margin:0 auto;padding:20px}.profile-card{background-color:#fff;border-radius:20px;align-items:center;gap:20px;margin-bottom:25px;padding:20px;display:flex;box-shadow:0 4px 12px rgba(0,0,0,.03)}.profile-avatar{color:#4fb5e6;background-color:#eaf4fb;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;font-size:30px;display:flex}.profile-details h2{color:#333;margin:0 0 5px;font-size:20px}.student-id{color:#888;margin:0 0 2px;font-size:13px;font-weight:500}.class-info{color:#4fb5e6;margin:0;font-size:13px;font-weight:600}.analytics-section{margin-bottom:25px}.section-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.section-header h3{color:#444;align-items:center;gap:8px;margin:0;font-size:16px;display:flex}.section-header span{color:#999;font-size:12px}.bar-chart-container.card{background-color:#fff;border-radius:15px;flex-direction:column;justify-content:flex-end;height:220px;padding:20px;display:flex;position:relative}.chart-axis-lines{z-index:0;border-bottom:1px solid #eee;border-left:1px solid #eee;position:absolute;top:20px;bottom:40px;left:40px;right:20px}.axis-label{color:#bbb;text-align:right;width:30px;font-size:10px;position:absolute;left:-35px}.axis-label.top{top:-6px}.axis-label.middle{top:50%;transform:translateY(-50%)}.axis-label.bottom{bottom:-6px}.axis-label.top:after,.axis-label.middle:after{content:"";z-index:-1;border-top:1px dashed #f5f5f5;width:1000%;max-width:50vw;position:absolute;top:50%;left:35px}.chart-bars{z-index:1;justify-content:space-around;align-items:flex-end;height:100%;margin-left:30px;padding-bottom:5px;display:flex}.bar-group{flex-direction:column;justify-content:flex-end;align-items:center;width:100%;height:100%;display:flex}.bar{cursor:pointer;background-color:#4fb5e6;border-radius:5px 5px 0 0;width:14px;min-height:4px;transition:height .8s ease-out,background-color .2s;position:relative}.bar:hover{background-color:#345f85}.tooltip{color:#fff;opacity:0;white-space:nowrap;pointer-events:none;background:#333;border-radius:4px;margin-bottom:5px;padding:4px 6px;font-size:10px;transition:opacity .2s,bottom .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.bar:hover .tooltip{opacity:1;bottom:calc(100% + 5px)}.day-label{color:#999;margin-top:8px;font-size:11px}.subject-list.card{background-color:#fff;border-radius:15px;padding:20px}.subject-time-item{margin-bottom:15px}.subject-time-item:last-child{margin-bottom:0}.sub-info{color:#444;justify-content:space-between;margin-bottom:6px;font-size:14px;font-weight:500;display:flex}.sub-time{color:#888;font-size:12px}.progress-bg{background-color:#f4f7fe;border-radius:4px;height:8px;overflow:hidden}.progress-fill{border-radius:4px;height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f4f7fe;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}