body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: auto;
}

header .user-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

header h1 {
  font-size: 24px;
  color: #11145d;
}

main {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.schedule-section{
  display:flex;
  flex-wrap:wrap;
  gap:40px;                 
  align-items:flex-start;  
  margin-bottom:-90px; 
  justify-content:center;
}

.schedule-title{
  flex: 1 1 100%;          
  text-align:center;       
  font-size:24px;          
  font-weight:700;
  color:#001F70;
  margin:0 0 0px;         
}


.schedule-table{
  position:relative;
  flex:0 0 65%;
  height:220px;
  border-radius:25px;
  overflow:hidden;                    
  margin-top:0px;
}

.schedule-table::before{
  content:"";
  position:absolute;
  inset:0;                            
  background:url("schedule1.png") center/cover no-repeat; 
  filter:blur(4px);
  transform:scale(1.05);              
  z-index:-1;                         
}

.schedule-btn{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:#001056;
  color:#fff;
  padding:14px 40px;
  font-size:18px;
  font-weight:bold;
  border:none;
  border-radius:40px;
  cursor:pointer;
}

.student-card{
 flex:0 0 220px;            
 background:#FFF79A;        
 border-radius:25px;
 padding:24px 18px;         
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;    
 gap:18px;
 box-sizing:border-box;
 min-height:240px;          
}

.student-avatar{
  width:180px;
  height:180px;
  border-radius:50%;
  background:#fff url("avatar-icon.png") center/50% no-repeat;
}
.student-card p{
  margin:0;
  font-weight:bold;
}

.schedule-table button{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  background:#001056;
  color:#fff;
  padding:14px 48px;
  font-size:18px;
  font-weight:bold;
  border:none;
  border-radius:40px;
  cursor:pointer;
  z-index:1;                          
}

.avatar-wrap{
  width:120px;  
  height:120px;
  border-radius:50%;
  background:#FFF;
  display:flex;align-items:center;justify-content:center;
}

.avatar-wrap img{
  width:60%;     
  height:auto;
}

.photo-card {
  background-size: cover;
  background-position: center;
  width: 250px;
  height: 350px;
  border-radius: 25px;
}

.student-label {
  font-weight: bold;
  margin: 5px 0;
}

.calendar-card h2 {
  font-size: 24px;
  color: #444;
  margin-bottom: 10px;
}

.month {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
}

.dim {
  color: #aaa;
}

.rearrangement {
  margin-top: 20px;
}

.rearrangement h3 {
  color: #0a0f68;
}

.cards {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.card {
  background-color: #d6f0ff;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  flex: 1;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.card:hover {
  background-color: #b8e4fc;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f7f7f7; 
  padding: 20px 30px 20px 10px;
  margin: 20px;
  border-radius: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar h2 {
  color: #001F70;
  margin: 0;
  font-size: 24px;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 50px;
}

.navbar-right img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.2s;
}

.navbar-right img:hover {
  transform: scale(1.1);
}

:root{
  --dark-blue:#001F70;
  --card-blue:#c7e6ff;
  --card-yellow:#fff79a;
}

.task-title{
  text-align:center;
  color:var(--dark-blue);
  margin:25px 0 5px;
}
.task-subtitle{
  font-family:"Segoe UI", serif;
  text-align:center;
  margin:-30px 0 12px;
  color:#666;
}

.task-wrapper{
  display:flex;
  gap:40px;
  align-items:flex-start;
}

.task-grid{
  flex: 1 1 0;   
  min-width: 0;  
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px 35px;
}

.task-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:22px 18px 18px 100px;  
  border-radius:18px;
  box-sizing:border-box;
}
.task-card.yellow{ background:var(--card-yellow);}
.task-card.blue  { background:var(--card-blue); }

.task-card h3{
  margin:0 0 6px;
  font-size:17px;
  line-height:1.3;
  color:var(--dark-blue);
}
.task-card h3 span{ font-weight:normal; font-size:85%; }

.task-card ul{
  list-style:none;
  padding:0; margin:0;
  font-size:14px;
  line-height:1.35;
}
.task-card ul li strong{ font-weight:bold; }

.student-card{
  flex:0 0 250px;
  background:var(--card-yellow);
  border-radius:25px;
  padding:30px 20px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}

.avatar-wrap{
  width:160px; height:160px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.avatar-wrap img{ width:80px; height:80px; }

.student-card h4{
  margin:0; font-size:18px; color:var(--dark-blue);
}

.student-section{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.student-section .sec-title{
  margin:0 0 6px;
  font-weight:bold;
  text-align:center;
  color:var(--dark-blue);
}

.student-section ul{
  list-style:none;
  margin:0; padding:0 0 0 5px;
  font-size:14px;
  line-height:1.35;
  border-top:2px solid var(--dark-blue);
}
.student-section ul:first-of-type{ border-top:none; }
.student-section ul li:first-child{ font-weight:bold; }

@media(max-width:900px){
  .task-wrapper{ flex-direction:column; }
  .student-card{ align-self:center; margin-top:20px; }
}

.task-thumb{
  position:absolute;
  left:-20px;             
  top:18px;
  width:110px;           
  height:110px;
  border-radius:25px;    
  background:transparent;
  overflow:hidden;       
  display:flex;
  justify-content:center;
  align-items:center;
}


.task-thumb img{
  width:100%;            
  height:100%;
  object-fit:contain;    
}

.task-card{
  padding:22px 18px 22px 168px;   
}

.nav-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  gap:6px;                        
  color:#001F70;
  font-weight:bold;
  font-size:14px;
  transition:transform .2s;
  width:92px;
}
.nav-item img{
  width:32px;
  height:32px;
  object-fit:contain;
  filter:grayscale(100%);         
}
.nav-item:hover{ transform:scale(1.1); }

.nav-item.active img{ filter:none;  }                

.nav-item.active::before{
  content:"";
  position:absolute;
  top:-8px; left:50%;
  width:48px; height:48px;
  border-radius:50%;
  background:#a6ddff;
  transform:translateX(-50%);
  z-index:-1;
}

.nav-item.active span{
  color:#001F70;
}

.navbar-right{
  display:flex;
  align-items:center;
  gap:45px;                       
}

.logo-right{
  width:30px;height:30px;
  object-fit:contain;
}

.nav-item span{
  white-space: nowrap;    
  text-align: center;     
  line-height: 1.2;       
}

.navbar-right{
  gap: 40px;              
}

@media(max-width:600px){
  .nav-item{ width: 72px; font-size:12px; }
}

#img-viewer{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:.25s;
  z-index:2000;
}
#img-viewer.active      { visibility:visible; opacity:1; }
.viewer-box             { position:relative; max-width:90vw; max-height:90vh;
                          transform:scale(.7); transition:.25s; }
#img-viewer.active .viewer-box{ transform:scale(1); overflow:auto }

#viewer-img             { width:100%; height:auto; border-radius:12px; }
.close-btn              { position:absolute; top:-12px; right:-12px;
                          background:#fff; border:none; border-radius:50%;
                          width:36px; height:36px; font-size:22px; cursor:pointer; }

.schedule-img           { width:100%; height:auto; border-radius:10px;
                          cursor:pointer; }

.view-btn{
  display:block;
  margin:14px auto 0;
  padding:12px 36px;
  border:none;
  border-radius:28px;
  background:#001056;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition:background .2s;
}
.view-btn:hover{ background:#002080; }

.modal{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.7); z-index:999}
.modal-content{max-width:90%;max-height:90%;display:block;margin:auto}
.modal .close{position:absolute;top:30px;right:40px;font-size:40px;color:#fff;cursor:pointer}

.ae-wrapper{padding-top:30px}
.ae-header{text-align:center;margin-bottom:20px}
.ae-header h1{color:#001F70;font-size:32px;margin:0}
.ae-header p{color:#5a6fa8;margin-top:6px}

.card{background:#e7f0ff;border-radius:25px;padding:25px}

.ae-top{
  display:flex;
  gap:40px;
  grid-template-columns: 1fr 340px;   
  align-items:flex-start;                
  flex-wrap:wrap;
}

.ae-bars{
  flex:1 1 0;          
  min-width:320px;
}

.ae-bar{
  display:grid;
  grid-template-columns: 185px 1fr auto;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}

.bar-label{                          
  font-weight:700;
  color:#001F70;
  font-size:14px;
  white-space:normal;
}

.bar-track{
  position:relative;
  height:18px;
  background:#d7dbff;
  border-radius:9px;
  overflow:hidden;          
}

.bar-fill{
  position:absolute;
  inset:0;
  width:0%;                 
  background:linear-gradient(90deg,#4c3ecb,#9e86ff);
  border-radius:9px;
  transition:width .35s;
}

.bar-val{
  position:static;          
  color:#fff;
  font-weight:700;
  font-size:18px;
  white-space:nowrap;
}


.ae-calendar{
  flex:0 0 260px;      
  height:100%;
  display:flex;
  flex-direction:column;   
}

.ae-list{
  
  grid-column:2;
  grid-row:2;
  padding-left:0;
  list-style:none;
}
.ae-list li{
  display:flex;
  align-items:center;
  gap:18px;
  margin:14px 0;
  font-weight:600;
}
.ae-list .num{
  width:32px;height:32px;
  border:2px solid #9cbcff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#001F70;font-weight:700;
}

.cal-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:10px}
.cal-nav{background:none;border:none;font-size:22px;cursor:pointer;color:#5a6fa8}
#cal-title{margin:0;font-size:22px;color:#5a9fff;font-weight:700}
#cal-table{width:100%;border-collapse:collapse;font-size:13px}
#cal-table th{color:#9cb0d7;font-weight:600;padding:3px}
#cal-table td{padding:4px 0;border-radius:50%;cursor:pointer}
#cal-table td.mark{background:#cfe4ff;color:#005ecb;font-weight:700}
#cal-table td.today{background:#a6ddff;color:#001F70;font-weight:700}

.ae-bottom{
  display:flex;
  justify-content:center;   
  align-items:flex-start;
  gap:60px;                 
  margin-top:35px;
  flex-wrap:wrap;
}

.ae-donuts,
.ae-list-wrap{
  flex: 0 0 300px;
  display:flex;
  justify-content:center;   
}

.ae-list-wrap{
  align-items:center;
}

.donut-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:35px;          
}

.ae-donuts{
  display:flex;  
  align-items:center;
  gap: 60px;               
}

.donut{width:120px;height:120px;transform:rotate(-90deg)}
.donut .track{fill:none;stroke:#e9efff;stroke-width:3}
.donut .fill{
  fill:none;
  stroke:#7fb1ff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray: calc(var(--val,0) * 100 / 100) 100;
  transition: stroke-dasharray .4s;
}

.donut-caption{text-align:center;color:#5a9fff;font-weight:600;margin-top:10px}
.donut-caption span{display:block;font-size:26px}

.ae-list{
  list-style:none;
  padding-left:0;
  margin:0;
}

.ae-list li{display:flex;align-items:center;gap:18px;font-weight:600}
.ae-list li .num{width:32px;height:32px;border:2px solid #9cbcff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#001F70}

.ae-list li.empty {
  font-style: bold;
  color: #7a8db8;     
  list-style: none;
  padding-left: 0;    
}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:999}
.overlay.active{display:flex}
#viewer-img{max-width:90%;max-height:90%;border-radius:10px}
.close-btn{position:absolute;top:25px;right:35px;font-size:32px;color:#fff;cursor:pointer}

.site-footer{
  background:#E7F0FF;        
  padding:40px 0 30px;
  margin-top:60px;           
  font-family:"Segoe UI",sans-serif;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  text-align:center;
}

.site-footer .brand{
  color:#001F70;
  font-weight:700;
  font-size:20px;
  margin:0;
}

.footer-links{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}

.footer-links a{
  color:#001F70;
  text-decoration:none;
  font-weight:600;
  transition:opacity .2s;
}
.footer-links a:hover{opacity:.7;}

.site-footer .copyright{
  color:#5A6FA8;            
  font-size:14px;
  margin:0;
}

@media(max-width:600px){
  .footer-links{gap:18px;}
}