#modal-grade-edit .grade-popover-circle-input:focus,
#modal-grade-edit .grade-popover-circle-input:focus-visible{outline:none !important;box-shadow:none !important;}

#login-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--primary-blue);
z-index:2000;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}.login-card{
background:white;
padding:40px;
border-radius:30px;
width:400px;
text-align:center;
}.login-logo{
font-size:32px;
font-weight:bold;
font-style:italic;
color:var(--primary-blue);
margin-bottom:10px;
}.login-input{
width:100%;
padding:14px;
border:2px solid #e5e7eb;
border-radius:12px;
margin-top:20px;
font-size:16px;
outline:none;
}.login-input:focus{
border-color:var(--primary-blue);
}.login-btn{
width:100%;
padding:14px;
background:var(--primary-blue);
color:white;
border:none;
border-radius:12px;
margin-top:20px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:0.2s;
}.login-btn:hover{
background:var(--primary-dark);
}.hint{
margin-top:20px;
font-size:12px;
color:#888;
background:#f9f9f9;
padding:10px;
border-radius:8px;
}@supports not selector(::-webkit-scrollbar){
html,
body,
.sidebar-scroll,
.main-content{
scrollbar-width:thin;
scrollbar-color:rgba(15, 104, 248, 0.45) rgba(15, 23, 42, 0.08);
}}html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar,
.main-content::-webkit-scrollbar{
width:12px;
height:12px;
}html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track{
background:rgba(15, 23, 42, 0.08);
border-radius:999px;
}html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar-scroll::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb{
background:rgba(15, 104, 248, 0.45);
border-radius:999px;
border:3px solid rgba(15, 23, 42, 0.08);
}.main-content::-webkit-scrollbar-track,
#mobile-day-strip::-webkit-scrollbar-track,
#login-screen::-webkit-scrollbar-track,
#idgov-screen::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.18);
border-radius:999px;
}.main-content::-webkit-scrollbar-thumb,
#mobile-day-strip::-webkit-scrollbar-thumb,
#login-screen::-webkit-scrollbar-thumb,
#idgov-screen::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.9);
border-radius:999px;
border:3px solid rgba(255, 255, 255, 0.18);
}.main-content::-webkit-scrollbar-thumb:hover,
#mobile-day-strip::-webkit-scrollbar-thumb:hover,
#login-screen::-webkit-scrollbar-thumb:hover,
#idgov-screen::-webkit-scrollbar-thumb:hover{
background:#ffffff;
}@supports not selector(::-webkit-scrollbar){
.main-content,
#mobile-day-strip,
#login-screen,
#idgov-screen{
scrollbar-color:rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.18);
}}html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner,
html::-webkit-resizer,
body::-webkit-resizer,
*::-webkit-resizer{
background:transparent !important;
display:none !important;
}*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button{
display:none !important;
width:0 !important;
height:0 !important;
background:transparent !important;
background-image:none !important;
border:0 !important;
opacity:0 !important;
-webkit-appearance:none !important;
}*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button:increment,
*::-webkit-scrollbar-button:decrement{
display:none !important;
width:0 !important;
height:0 !important;
background:transparent !important;
background-image:none !important;
border:0 !important;
opacity:0 !important;
-webkit-appearance:none !important;
}#mobile-topbar,
#mobile-day-strip,
#mobile-bottom-nav,
#mobile-sidebar-backdrop{
display:none;
}.sidebar{
width:234px;
background-color:var(--sidebar-bg);
min-height:100vh;
height:100vh;
display:flex;
flex-direction:column;
padding:20px 12px 0 12px;
border-radius:0;
overflow:hidden;
flex-shrink:0;
z-index:10020;
}@media (min-width:901px){
.sidebar{
--sidebar-ui-scale:0.97;
}.sidebar > .logo-area,
.sidebar > .sidebar-scroll,
.sidebar > .user-profile{
zoom:var(--sidebar-ui-scale);
}.sidebar > .user-profile{
margin-bottom:-6px;
}}@supports (height:100dvh){
.sidebar{
min-height:100dvh;
height:auto;
}}.sidebar-scroll{
overflow-y:auto;
overflow-x:hidden;
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
margin-top:0px;
padding-bottom:12px;
margin-right:-7px;
padding-right:12px;
}.sidebar-scroll::-webkit-scrollbar{
width:9.5px;
height:9.5px;
}.sidebar-scroll::-webkit-scrollbar-thumb{
border:1px solid rgba(15, 23, 42, 0.08);
}.sidebar .logo-area .top-controls-oval{
background:transparent;
border-radius:0;
padding:0;
display:flex;
gap:16px;
align-items:center;
margin-left:32px !important;
}.oval-btn{
background:transparent;
border:none;
cursor:pointer;
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:4px;
color:var(--primary-blue);
transition:
background 0.15s,
transform 0.08s;
}.oval-btn:hover{
background-color:rgba(28, 119, 255, 0.06);
}.oval-btn i{
font-size:12px;
width:12px;
height:12px;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}#fullscreen-btn i,
#pin-toggle i{
font-size:12px;
}.control-divider{
display:none;
}.pin-icon{
position:relative;
display:inline-block;
width:22px;
height:20px;
border:2px solid currentColor;
border-radius:5px;
box-sizing:border-box;
}.pin-icon::before{
content:"";
position:absolute;
left:4px;
top:-1px;
width:2px;
height:20px;
border-radius:1px;
background-color:currentColor;
transform:none;
display:block;
pointer-events:none;
}.oval-btn[aria-pressed="false"] .pin-icon::before{
left:10px;
}#fullscreen-btn{
position:relative;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 10 14M14 10 21 3M3 21h8M3 21v-8M21 3h-8M21 3v8' fill='none' stroke='%231a69f3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-position:center;
background-repeat:no-repeat;
background-size:21px 21px;
}#fullscreen-btn svg,
#pin-toggle .pin-icon svg{
display:none;
}button,
.action-btn{
border-radius:999px !important;
}
#pin-toggle{
width:36px;
height:36px;
}
.action-btn{
border-radius:999px !important;
}#journals .action-btn,
#journals .btn,
#journals .gb-subbar > button,
#journals .journal-link,
#journals .journal-tab-button,
#journals .journal-controls button,
#gradebook-view .action-btn,
#gradebook-view .btn,
#gradebook-view .nav-zoom-box .nav-btn{
border-radius:6px !important;
}.journal-tab,
.journal-sub-tab{
border-radius:12px !important;
}.journal-admin-btn{
border-radius:14px !important;
}#class-admin-panel{
width:auto !important;
position:relative;
padding:12px 0;
margin-right:-36px !important;
}#class-admin-panel .class-admin-card{
background:linear-gradient(180deg, #2b9bff 0%, #1c77ff 100%) !important;
border-radius:20px !important;
padding:30px 36px 30px 30px !important;
display:grid !important;
grid-template-columns:240px 1fr !important;
align-items:end !important;
gap:20px !important;
min-height:180px !important;
position:relative !important;
border:none !important;
}#class-admin-panel .class-admin-kicker{
position:absolute !important;
top:30px !important;
left:30px !important;
font-size:13px !important;
color:rgba(255, 255, 255, 0.8) !important;
font-weight:600 !important;
margin:0 !important;
}#class-admin-panel .class-admin-left-side{
display:flex !important;
flex-direction:column !important;
gap:15px !important;
align-items:flex-start !important;
padding-bottom:5px !important;
min-width:0 !important;
}#class-admin-panel .class-admin-bubble{
height:28px !important;
padding:0 10px !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-weight:900 !important;
font-size:14px !important;
width:fit-content !important;
max-width:160px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
border:none !important;
margin-top:6px !important;
margin-bottom:0 !important;
}#class-admin-panel .class-admin-title{
font-size:20px !important;
font-weight:900 !important;
color:#ffffff !important;
line-height:1 !important;
margin:0 !important;
max-width:none !important;
}.gb-admin-journal-subtitle{
margin:4px 0 10px 5px;
padding:0 8px;
font-size:22px;
font-weight:800;
color:#ffffff;
line-height:1.15;
}#gb-crumb-class,
#gb-crumb-subject{
font-size:18px !important;
font-weight:700 !important;
color:#ffffff !important;
}#class-admin-panel .class-admin-actions-scroll{
display:flex !important;
gap:15px !important;
justify-content:flex-start !important;
overflow-x:auto !important;
padding:10px 0 !important;
align-items:end !important;
width:100% !important;
-webkit-overflow-scrolling:touch !important;
}#class-admin-panel .class-admin-actions-scroll::-webkit-scrollbar{
height:6px !important;
}#class-admin-panel .class-admin-actions-scroll::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.3) !important;
border-radius:3px !important;
}#class-admin-panel .class-admin-actions-scroll::-webkit-scrollbar-track{
background:transparent !important;
}#class-admin-panel .journal-admin-btn{
width:140px !important;
min-width:140px !important;
height:120px !important;
background:#ffffff !important;
border-radius:20px !important;
padding:15px !important;
display:flex !important;
flex-direction:column !important;
justify-content:space-between !important;
align-items:flex-start !important;
border:none !important;
cursor:pointer !important;
transition:transform 0.2s !important;
}#class-admin-panel .journal-admin-btn:hover{
}#class-admin-panel .class-admin-icon-box{
width:36px !important;
height:36px !important;
border-radius:12px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}#class-admin-panel .class-admin-icon-box i{
font-size:22px !important;
width:22px !important;
height:22px !important;
}#class-admin-panel .class-admin-btn-label{
font-size:14px !important;
font-weight:700 !important;
color:#111 !important;
line-height:1.2 !important;
text-align:left !important;
}@media (max-width:820px){
#class-admin-panel{
margin-right:-36px !important;
}#class-admin-panel .class-admin-card{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:15px !important;
padding:20px 36px 20px 20px !important;
min-height:auto !important;
}#class-admin-panel .class-admin-kicker{
position:static !important;
margin-bottom:5px !important;
left:auto !important;
top:auto !important;
}#class-admin-panel .class-admin-left-side{
padding-bottom:0 !important;
}#class-admin-panel .class-admin-actions-scroll{
width:100% !important;
overflow-x:auto !important;
padding-bottom:10px !important;
}}.lesson-day-header-flex .header-comma{
color:#ffffff;
}.header-comma{
color:#ffffff;
}.sidebar{
transition:width 0.25s ease;
width:234px;
}.sidebar.collapsed{
width:72px;
}.sidebar.collapsed .logo img{
width:36px;
height:36px;
}.sidebar.collapsed .nav-item{
font-size:0;
padding-left:0;
padding-right:0;
margin-left:0;
width:48px;
min-height:44px;
margin:2px auto;
border-radius:12px;
justify-content:center;
align-self:unset;
}.sidebar.collapsed .nav-item i{
margin-right:0;
font-size:18px;
}.sidebar.collapsed .nav-item .nav-icon{
margin-right:0;
width:20px;
height:20px;
}.sidebar.collapsed .nav-item .arrow{
display:none;
}.sidebar.collapsed .submenu{
display:none !important;
}.sidebar.collapsed .logo-area{
justify-content:center;
padding-left:0;
padding-right:0;
margin-left:0;
margin-right:0;
}.sidebar.collapsed .top-controls-oval{
display:none;
}.sidebar.collapsed .user-profile{
  display:none !important;
width:72px;
padding:0 8px 10px;
}.sidebar.collapsed .user-card-inner{
margin:0;
padding:8px 4px;
min-height:0;
align-items:center;
gap:8px;
border-radius:14px;
}.sidebar.collapsed .user-card-top{
justify-content:center;
}.sidebar.collapsed .user-card-top .user-name,
.sidebar.collapsed .user-logout-full span{
display:none;
}.sidebar.collapsed .user-logout-full{
width:36px;
height:36px;
padding:0;
border-radius:10px;
gap:0;
font-size:0;
}.sidebar.collapsed .user-logout-full i{
margin:0;
font-size:26px;
}.sidebar.collapsed .avatar{
width:36px;
height:36px;
font-size:12px;
}@media (min-width:901px){
.sidebar.collapsed:hover{
width:234px;
}.sidebar.collapsed:hover .nav-item{
font-size:14px;
padding-left:10px;
padding-right:10px;
width:100%;
margin:0;
border-radius:10px;
justify-content:flex-start;
}.sidebar.collapsed:hover .nav-item i{
margin-right:8px;
}.sidebar.collapsed:hover .nav-item .nav-icon{
margin-right:8px;
}.sidebar.collapsed:hover .submenu{
display:block !important;
}.sidebar.collapsed:hover .logo-area{
justify-content:space-between;
padding-left:8px;
padding-right:8px;
}.sidebar.collapsed:hover .top-controls-oval{
display:flex;
}.sidebar.collapsed:hover .user-profile{
  display:block !important;
width:100%;
padding:0 0 12px;
}.sidebar.collapsed:hover .user-card-inner{
margin:0;
padding:4px 8px 12px;
min-height:62px;
align-items:stretch;
}.sidebar.collapsed:hover .user-card-top{
justify-content:flex-start;
}.sidebar.collapsed:hover .user-card-top .user-name,
.sidebar.collapsed:hover .user-logout-full span{
display:block;
}.sidebar.collapsed:hover .user-logout-full{
width:100%;
height:auto;
padding:10px;
border-radius:8px;
gap:8px;
font-size:13px;
}.sidebar.collapsed:hover .user-logout-full i{
margin-right:8px;
font-size:inherit;
}.sidebar.collapsed:hover .avatar{
width:42px;
height:42px;
font-size:14px;
}
}.logo-area{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:24px;
padding:0 8px;
}.logo{
margin-left:0px;
}.logo{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
height:auto;
background:transparent;
border-radius:0;
}.logo img{
display:block;
width:40.33px;
height:40.33px;
object-fit:contain;
}.year-display{
padding:10px 16px;
background:#f9fafb;
border-radius:12px;
margin-bottom:15px;
font-size:13px;
font-weight:600;
color:var(--text-dark);
display:flex;
justify-content:space-between;
align-items:center;
border:1px solid #eee;
}.school-year-btn{
padding:5px 10px;
border-radius:10px !important;
background:var(--primary-blue);
color:#ffffff;
border:2px solid #ffffff;
font-weight:700;
font-size:13px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
height:40px;
min-height:40px;
box-sizing:border-box;
}.school-year-btn .school-year-icon{
color:#ffffff;
font-size:14px;
}.nav-section{
display:flex;
flex-direction:column;
gap:0;
margin-bottom:19px;
}.sidebar-scroll > nav.nav-section:nth-of-type(2){
margin-bottom:4px;
}.nav-section > .nav-item{
margin-top:10px;
}.nav-section > .nav-item:first-child{
margin-top:0;
}body.admin-role .sidebar-scroll .nav-section > .nav-item{
margin-top:10px;
}body.admin-role .sidebar-scroll .nav-section > .nav-item:first-child{
margin-top:0;
}.nav-item{
display:flex;
align-items:center;
padding:10px 12px;
margin-top:10px;
margin-left:12px;
margin-right:-12px;
border-radius:12px;
color:var(--text-dark);
text-decoration:none;
font-weight:600;
font-size:13.5px;
transition:
background-color 0.2s,
color 0.2s;
cursor:pointer;
user-select:none;
box-sizing:border-box;
width:100%;
align-self:flex-start;
}.nav-item.collapsed,
.nav-item.expanded{
margin-top:2px;
margin-right:6px;
width:calc(100% - 6px);
padding-right:0;
}.nav-item[onclick*="sub-extracurricular"]{
align-items:baseline;
}.nav-item[onclick*="sub-extracurricular"].collapsed,
.nav-item[onclick*="sub-extracurricular"].expanded{
padding-top:10px;
padding-bottom:12px;
padding-right:0;
}.sidebar .nav-item{
font-size:12.5px;
}.nav-item:hover{
background-color:#f3f4f6;
}.nav-item.active{
background-color:var(--light-blue-bg);
color:var(--primary-blue);
}.nav-item .nav-icon{
transform:translateY(0);
}.nav-item i{
transform:translateY(0);
}.nav-item i{
width:20px;
margin-right:20px;
text-align:center;
font-size:18px;
}.nav-item .nav-icon{
width:18px;
height:18px;
margin-right:20px;
flex:0 0 auto;
color:currentColor;
}.sidebar .nav-item i{
line-height:1;
}.sidebar .nav-item .nav-icon{
display:block;
}.sidebar.collapsed .nav-section > .nav-item,
.sidebar.collapsed .nav-item{
  margin:10px auto 0 !important;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:48px !important;
height:44px;
min-height:44px;
margin:10px auto 0 !important;
padding:0 !important;
}.sidebar.collapsed .nav-item i,
.sidebar.collapsed .nav-item .nav-icon{
width:20px !important;
height:20px !important;
margin:0 !important;
flex:0 0 20px;
line-height:1;
transform:none;
}.sidebar.collapsed .feedback-item{
display:flex;
align-items:center;
justify-content:center;
width:48px !important;
height:44px;
min-height:44px;
margin:2px auto !important;
padding:0 !important;
}.sidebar.collapsed .feedback-item > div{
display:flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:20px !important;
font-size:0;
position:relative;
left:16px;
}.sidebar.collapsed .feedback-item > div > span{
display:none;
}.sidebar.collapsed .feedback-item > div > i{
width:20px !important;
height:20px !important;
margin:0 !important;
font-size:14px !important;
}@media (min-width:901px){
.sidebar.collapsed:hover .nav-section > .nav-item,
.sidebar.collapsed:hover .nav-item{
width:100% !important;
height:auto;
min-height:0;
margin:0 !important;
padding:10px !important;
justify-content:flex-start;
}.sidebar.collapsed:hover .nav-item i,
.sidebar.collapsed:hover .nav-item .nav-icon{
margin-right:8px !important;
}
.sidebar.collapsed:hover .feedback-item{
  width:100% !important;
  height:auto;
  min-height:0;
  margin:0 !important;
  padding:10px !important;
  justify-content:flex-start;
}
.sidebar.collapsed:hover .feedback-item > div{
  width:auto;
  height:auto;
  justify-content:flex-start;
font-size:13px;
left:0;
}
.sidebar.collapsed:hover .feedback-item > div > span{
  display:block;
}
.sidebar.collapsed:hover .feedback-item > div > i{
  margin-right:8px !important;
font-size:13px !important;
}
}.nav-item .nav-icon *{
fill:currentColor;
}.submenu{
padding-left:0;
flex-direction:column;
gap:0;
margin-top:0;
box-sizing:border-box;
width:calc(100% - 6px);
margin-left:12px;
margin-right:6px;
align-self:flex-start;
display:flex;
max-height:0;
overflow:hidden;
opacity:0;
transition:
max-height 0.32s cubic-bezier(0.2, 0.9, 0.3, 1),
opacity 0.18s ease;
}.submenu.open{
max-height:800px;
opacity:1;
}.nav-item + .submenu.open{
margin-top:0;
padding-top:0;
}.submenu .nav-item{
font-size:13.5px;
padding:8px 16px;
margin-top:0;
margin-left:12px;
margin-right:20px;
color:var(--text-grey);
width:calc(100% - 32px);
align-self:flex-start;
}.sidebar .submenu .nav-item{
font-size:13.5px;
}.submenu .nav-item:hover{
color:var(--text-dark);
}.sidebar-divider{
display:block;
height:0;
border:none;
border-top:1px solid #c5d9eb !important;
background:transparent;

margin:20px -19px;
width:calc(100% + 32px);
position:relative;
z-index:6;
opacity:1;
border-radius:1px;
transform:translateZ(0);
flex:0 0 auto;
}.sidebar-scroll > nav.nav-section + .sidebar-spacer + .sidebar-divider{
margin-top:5px;
}body.teacher-role
.sidebar-scroll
> nav.nav-section
+ .sidebar-spacer
+ .sidebar-divider{
margin-top:2px;
}.sidebar-divider:focus,
.sidebar-divider:hover{
border-top-color:rgba(15, 23, 42, 0.28);
}.spacer{
flex-grow:1;
}.sidebar-spacer{
height:10px;
flex:0 0 auto;
}@media (min-width:901px) and (max-height:1000px){

:root{
--sidebar-divider_gap:clamp(10px, 2.2vh, 22px);
}body.teacher-role{
--sidebar-divider_gap:clamp(8px, 1.6vh, 16px);
}body.role-superadmin,
body.role-platform-admin,
body.role-deputy,
body.role-director{
--sidebar-divider_gap:clamp(12px, 2.8vh, 30px);
}.sidebar-scroll > .sidebar-spacer{
height:var(--sidebar-divider_gap) !important;
}.nav-section > .nav-item{
margin-top:8px;
}body.teacher-role .nav-section > .nav-item{
margin-top:7px;
}}body.admin-role
.sidebar-scroll
> nav.nav-section:first-of-type
+ .sidebar-spacer{
height:14px;
}@media (min-width:901px){
}#app-sidebar.sidebar .nav-section{
margin-bottom:0 !important;
}#app-sidebar.sidebar .nav-section > .nav-item{
margin-top:8px !important;
}#app-sidebar.sidebar .nav-section > .nav-item:first-child{
margin-top:0 !important;
}
#app-sidebar.sidebar .sidebar-scroll > .sidebar-spacer{
height:14px !important;
}#app-sidebar.sidebar .sidebar-divider{
margin-top:20.5px !important;
margin-bottom:20.5px !important;
#app-sidebar.sidebar .nav-item.expanded > .arrow{
border-bottom-color:currentColor !important;
}#app-sidebar.sidebar .nav-item.active > .arrow{
border-bottom-color:currentColor !important;
}.sidebar.collapsed .nav-section > .nav-item,
.sidebar.collapsed .nav-section > .nav-item:first-child,
.sidebar.collapsed .feedback-item{
margin-top:8px !important;
}
}body.admin-role
.sidebar-scroll
> nav.nav-section:first-of-type
+ .sidebar-spacer
+ .sidebar-divider
+ .sidebar-spacer{
height:14px;
}body.admin-role
.sidebar-scroll
> nav.nav-section:nth-of-type(2)
+ .sidebar-spacer{
height:0px;
}.user-profile{
padding:0 0 12px 0;
margin-top:auto;
border-top:none;
position:relative;
bottom:auto;
left:auto;
width:100%;
background:var(--sidebar-bg);
z-index:9999;
box-sizing:border-box;
flex:0 0 auto;
}.sidebar:not(.collapsed) .user-profile{
margin-left:-6px;
margin-right:-6px;
width:calc(100% + 12px);
}.sidebar.collapsed .user-profile{
width:64px;
margin-left:0;
margin-right:0;
padding:0 12px 12px 12px;
overflow:hidden;
}.avatar{
width:42px;
height:42px;
background-color:var(--light-blue-bg);
color:var(--primary-blue);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size:14px;
}.user-profile .user-name{
color:#111;
font-weight:700;
font-size:13px;
margin-top:3px;
line-height:1.15;
white-space:normal;
overflow:visible;
text-overflow:clip;
}.user-profile .user-role{
display:none !important;
}.user-card-inner{
background:#ffffff;
border-radius:16px;
border:1px solid #e1ebf5;
padding:4px 8px 12px;
display:flex;
flex-direction:column;
gap:6px;
margin:0;
box-sizing:border-box;
justify-content:center;
min-height:62px;
font-size:13px;
}.sidebar.collapsed .user-card-inner{
margin:0 -12px;
padding:4px 8px 12px;
min-height:62px;
}.user-card-top{
display:flex;
align-items:center;
gap:8px;
}.user-card-top .avatar{
flex:0 0 auto;
}.user-card-top .user-name{
flex:1 1 auto;
}.user-logout-full{
width:100%;
background:#ffffff;
color:#111;
border:1px solid #e1ebf5;
padding:10px;
border-radius:8px;
font-weight:700;
text-align:center;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}.user-logout-full i{
color:#111;
}.logout-left{
color:#111 !important;
}.user-profile .nav-item.user-logout{
padding:12px;
}.main-content{
border-radius:10px;
flex-grow:1;
padding:20px 36px;
color:white;
font-size:14px;
overflow-y:auto;
position:relative;
display:none;
}.page-section{
display:none;
animation:fadeIn 0.36s cubic-bezier(0.2, 0.9, 0.3, 1);
}.page-section.active{
display:block;
}@keyframes fadeIn{
0%{
opacity:0;
transform:translateY(8px) scale(0.995);
}60%{
opacity:0.98;
transform:translateY(-4px) scale(1.002);
}100%{
opacity:1;
transform:translateY(0) scale(1);
}}.main-content .header,
.main-content .page-section,
.main-content > section,
.main-content > div:not(.header){
}.header{
margin-left:-15px;
margin-top:-4px;
}.header h1{
font-size:28px;
font-weight:500;
margin-bottom:4px;
line-height:1.15;
}.header p{
font-size:14px;
opacity:0.8;
margin-bottom:30px;
}#header-bottom{
opacity:1 !important;
color:#ffffff !important;
font-size:12px !important;
}.header.reduced-header #header-top{
display:flex;
align-items:flex-start;
gap:1.8px;
}.header.reduced-header #header-bottom{
margin-bottom:0 !important;
}.header .header-page-icon,
.header.reduced-header .header-page-icon{
display:inline-flex;
align-items:center;
justify-content:center;
color:#e5e7eb;
font-size:inherit;
}.header .header-page-icon svg,
.header .header-page-icon i,
.header.reduced-header .header-page-icon svg,
.header.reduced-header .header-page-icon i{
height:1em;
width:auto;
color:inherit;
font-size:1em;
line-height:1;
vertical-align:-0.08em;
}.header.reduced-header .header-crumb-sep{
margin:0 12px;
}.header #header-top:has(.header-page-icon){
padding-left:4px;
}.header #header-top:has(.header-page-icon),
.header #header-top:has(.header-page-icon) > span{
font-weight:450 !important;
}.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}.subject-journal-toggle{
background:#0b84ff;
border:none;
width:30px;
height:30px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;

position:relative;
top:-6px;
}.subject-journal-toggle svg{width:14px;height:14px;display:block}.subject-journal-menu{
position:absolute;
background:#0b84ff;
color:#fff;
border-radius:10px;
padding:6px;
display:none;
min-width:240px;
max-height:320px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
z-index:60000;
}.subject-journal-menu::-webkit-scrollbar{width:10px}.subject-journal-menu::-webkit-scrollbar-track{background:transparent}.subject-journal-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:999px}.subject-journal-menu-item{
display:block;
background:transparent;
border:none;
outline:none;
color:#fff;
text-align:left;
width:100%;
padding:8px 10px;
font-size:14px;
cursor:pointer;
}.subject-journal-menu-item:hover{background:rgba(255,255,255,0.06)}.subject-journal-menu-item:focus{background:rgba(255,255,255,0.08)}.subject-journal-menu-admin-item{font-weight:700}.subject-journal-menu-empty{padding:8px 10px;color:rgba(255,255,255,0.95);opacity:0.95}#header-top > span{
display:inline-block;
max-width:100%;
}.header.reduced-header #header-top{
font-size:15.1px !important;
line-height:1 !important;
}.header.reduced-header #header-bottom{
font-size:10px !important;
line-height:1 !important;
}#header-top:has(span[onclick="calendarShowMonth()"]){
height:28px !important;
}.header.reduced-header .header-page-icon{
font-size:0.85em;
transform:translateY(1.8px);
}button,
.btn,
.btn-primary,
.action-btn,
.nav-btn{
transition:
transform 0.12s ease,
background 0.18s ease,
opacity 0.18s ease;
}#journals button,
#journals .btn,
#journals .btn-primary,
#journals .action-btn,
#journals .nav-btn,
#schedule button,
#schedule .btn,
#schedule .btn-primary,
#schedule .action-btn,
#schedule .nav-btn{
}button:hover,
.btn:hover,
.btn-primary:hover,
.action-btn:hover,
.nav-btn:hover{
}#journals button:hover,
#journals .btn:hover,
#journals .btn-primary:hover,
#journals .action-btn:hover,
#journals .nav-btn:hover,
#schedule button:hover,
#schedule .btn:hover,
#schedule .btn-primary:hover,
#schedule .action-btn:hover,
#schedule .nav-btn:hover{
}button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.action-btn:focus-visible,
.nav-btn:focus-visible{
outline:none;
}#journals button:focus-visible,
#journals .btn:focus-visible,
#journals .btn-primary:focus-visible,
#journals .action-btn:focus-visible,
#journals .nav-btn:focus-visible,
#schedule button:focus-visible,
#schedule .btn:focus-visible,
#schedule .btn-primary:focus-visible,
#schedule .action-btn:focus-visible,
#schedule .nav-btn:focus-visible{
}.btn-primary{
background-color:var(--primary-blue);
color:white;
border:none;
padding:12px 24px;
border-radius:12px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:8px;
transition:
transform 0.1s,
background-color 0.2s;
}.btn-primary:hover{
background-color:var(--primary-dark);
}.btn-primary:active{
transform:scale(0.98);
}.card{
background-color:var(--card-glass);
border-radius:var(--border-radius);
padding:24px;
margin-bottom:20px;
border:1px solid rgba(255, 255, 255, 0.1);
}@supports not selector(::-webkit-scrollbar){
*{
scrollbar-width:thin;
scrollbar-color:rgba(147, 197, 253, 0.9) rgba(0, 0, 0, 0.04);
}}::-webkit-scrollbar{
width:8px;
height:8px;
}::-webkit-scrollbar-track{
background:transparent;
border-radius:999px;
}::-webkit-scrollbar-thumb{
background:rgba(147, 197, 253, 0.9);
border-radius:999px;
border:2px solid rgba(255, 255, 255, 0.6);
background-clip:padding-box;
}::-webkit-scrollbar-thumb:hover{
background:rgba(147, 197, 253, 1);
}::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement{
display:none !important;
width:0 !important;
height:0 !important;
}::-webkit-scrollbar-corner{
background:transparent !important;
}@supports not selector(::-webkit-scrollbar){
.sidebar,
.main-content,
.conversations-list,
.chat-messages,
.modal-window,
.storage-stats-grid,
.home-lesson-item{
scrollbar-color:rgba(147, 197, 253, 0.9) rgba(0, 0, 0, 0.04);
}#mobile-day-strip,
#modal-subjects-list{
scrollbar-width:thin;
}}.white-card{
background:white;
color:var(--text-dark);
border-radius:16px;
overflow:hidden;
padding:0;
}.home-side-widgets{
display:flex;
flex-direction:column;
gap:12px;
width:280px;
}.home-widget{
background:var(--light-blue-bg);
border-radius:14px;
padding:16px 8px;
color:#0f172a;
min-height:34px;
}.home-widget .widget-title{
font-size:13px;
font-weight:700;
color:#0f172a;
margin-bottom:8px;
}.home-class-name{
font-size:20px;
font-weight:800;
color:#0f172a;
}.home-class-meta{
color:#475569;
margin-top:8px;
font-size:13px;
}#home .home-shell{
display:flex;
gap:24px;
}#home .home-main{
flex:1;
min-width:0;
margin-right:10px;
}#home .home-toprow{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}#home .home-title{
font-size:24px;
font-weight:600;
color:white;
margin:0;
margin-left:-12px;
}#home .home-full-schedule-btn{
display:inline-flex;
align-items:center;
gap:8px;
background:rgba(255, 255, 255, 0.14);
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.06);
color:white;
cursor:pointer;
font-weight:700;
transition:0.15s;
padding:12px 18px;
font-size:16px;
white-space:nowrap;
flex-shrink:0;
margin-left:auto;
margin-right:0;
transform:translateX(0);
}#home .home-full-schedule-btn:hover{
background:rgba(255, 255, 255, 0.1);
}#home .home-schedule{
display:flex;
flex-direction:column;
gap:16px;
min-height:420px;
}#home .home-right{
--home-right-width:clamp(300px, 19vw, 350px);
width:var(--home-right-width);
min-width:var(--home-right-width);
max-width:var(--home-right-width);
display:flex;
flex-direction:column;
gap:3px;
margin-left:auto;
margin-right:-24px;
transform:translateX(-18px);
margin-top:-10px;
border-left:0;
}@media (min-width:1700px){
.home-my-class-card{
height:clamp(108px, 7.1vw, 130px);
}}@media (max-width:900px){
#home .home-right{
width:100%;
min-width:0;
max-width:100%;
margin-right:0;
transform:none;
}}#home .home-right-frame{
position:relative;
isolation:isolate;
border-radius:28px;
padding:15px 10px 10px 10px;
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.92) 0%,
rgba(28, 119, 255, 0.78) 100%
);
border:1px solid rgba(255, 255, 255, 0.14);
backdrop-filter:none;
overflow:visible;
}#home #home-my-class-widget{
position:relative;
z-index:0;
}#home .home-widget-title{
font-size:14.5px;
font-weight:800;
color:rgba(255, 255, 255, 0.92);
margin:0;
text-transform:none;
letter-spacing:0;
}#home .home-right-widgets-divider{
display:none;
border:none;
border-top:1px solid rgba(255, 255, 255, 0.38);
height:0;
margin:-8px 0 -2px 0;
width:100%;
max-width:100%;
box-sizing:border-box;
padding:0;
transform:translateY(14px);
position:relative;
z-index:0;
pointer-events:none;
opacity:1;
}#home
#home-my-class-widget[style*="display:flex"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:flex"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:block"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:block"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:inline-flex"]
~ .home-right-widgets-divider,
#home
#home-my-class-widget[style*="display:inline-flex"]
~ .home-right-widgets-divider{
display:block;
}#home .home-right-widgets-divider + div{
position:relative;
z-index:2;
padding-top:22px;
}#home
#home-my-class-widget[style*="display:none"]
~ .home-right-widgets-divider
+ div,
#home
#home-my-class-widget[style*="display:none"]
~ .home-right-widgets-divider
+ div{
padding-top:6px;
}#home .home-empty{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:14px;
min-height:320px;
color:rgba(255, 255, 255, 0.92);
font-weight:700;
}#home .home-empty-icon{
width:78px;
height:78px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255, 255, 255, 0.18);
border:1px solid rgba(255, 255, 255, 0.22);
backdrop-filter:blur(10px);
}#home .home-empty-icon i{
font-size:34px;
color:rgba(255, 255, 255, 0.95);
}#home .home-empty-text{
font-size:18px;
font-weight:700;
color:rgba(255, 255, 255, 0.98);
}#home .home-empty-img{
width:815px;
max-width:90%;
height:auto;
object-fit:contain;
}.home-journals-card{
background:linear-gradient(90deg, #eff6ff, #f0f9ff);
border-radius:14px;
padding:12px 8px;
min-height:120px;
border:1px solid rgba(28, 119, 255, 0.06);
}.home-journals-list{
display:flex;
flex-direction:column;
gap:8px;
}.home-journal-btn{
display:flex;
align-items:center;
gap:12px;
padding:12px 8px;
border-radius:8px !important;
background:#5c9bfc;
color:white;
font-weight:800;
cursor:pointer;
border:1px solid rgba(0, 0, 0, 0.06);
width:100%;
}.home-journal-btn:hover{
background:#4f8ff7;
}.home-journal-badge{
background:#ffb6c1 !important;
color:#000 !important;
padding:7px 12px;
border-radius:999px;
font-size:14.5px;
font-weight:800;
white-space:nowrap;
display:inline-flex;
align-items:center;
justify-content:center;
max-width:240px;
overflow:hidden;
text-overflow:ellipsis;
}#home-my-journals > .home-journal-btn:nth-child(-n + 5),
#home-my-journals > *:nth-child(-n + 5){
border-radius:22px !important;
overflow:hidden;
}.home-journal-subject{
font-size:15.5px;
line-height:1.2;
color:rgba(255, 255, 255, 0.92);
font-weight:700;
text-align:left;
flex:1;
}#home-my-journals > .home-journal-btn:nth-child(-n + 5) .home-journal-subject{
font-size:17px;
font-weight:600;
}.home-all-journals{
margin-top:10px;
display:flex;
justify-content:center;
}.home-all-journals .btn{
padding:10px 8px;
border-radius:999px !important;
background:transparent;
color:white;
font-weight:550;
border:1px solid rgba(255, 255, 255, 0.55);
cursor:pointer;
width:100%;
text-align:center;
font-size:16px;
height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
}.home-all-journals .btn:hover{
background:rgba(255, 255, 255, 0.1);
}.home-journals-frame{
background:transparent;
border-radius:14px;
padding:12px 8px;
color:inherit;
border:none;
}.home-my-class-card{
background:white;
color:#0f172a;
border-radius:18px;
padding:18px 10px;
height:108px;
transform-origin:top left;
position:relative;
}.home-class-arrow{
position:absolute;
right:12px;
bottom:12px;
width:30px;
height:30px;
border-radius:50%;
background:#ffffff;
border:3px solid var(--primary-blue);
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--primary-blue);
cursor:pointer;
transition:
transform 0.12s ease,
;
padding:0;
}.home-class-arrow i{
font-size:12px;
color:var(--primary-blue);
}.home-class-arrow-icon{
width:14px;
height:14px;
display:block;
}.home-class-arrow:hover{
transform:translateY(-2px);
}.home-my-class-card .home-my-class-text{
display:block;
width:calc(100% - 60px);
box-sizing:border-box;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
position:relative;
top:-2px;
left:6px;
}#home-my-class{
font-size:22px !important;
font-weight:500 !important;
}#home-my-journals .journal-class-badge{
color:#000 !important;
max-width:240px;
}.home-widget-dark{
background:transparent;
border-radius:0;
padding:0;
color:white;
border:none;
backdrop-filter:none;
}.home-widget-dark .home-my-class-text{
font-size:18px;
font-weight:800;
color:white;
text-align:left;
}.data-table{
width:100%;
border-collapse:collapse;
}.gb-sticky-col{
width:20px;
min-width:20px;
max-width:20px;
position:static;
left:0;
z-index:50;
}.gb-sticky-col-2{

width:200px;
min-width:160px;
max-width:320px;
position:static;
left:auto;
z-index:49;
}.gb-sticky-avg{
position:static;
left:auto;
z-index:48;
min-width:60px;
max-width:160px;
width:80px;
}th.gb-sticky-col-2 > div,
td.gb-sticky-col-2 > div{
padding-left:10px;
padding-right:8px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.data-table th{
text-align:left;
padding:16px;
background:#f9fafb;
color:#6b7280;
font-size:12px;
text-transform:uppercase;
font-weight:600;
}.data-table td{
padding:16px;
border-bottom:1px solid #e5e7eb;
font-size:14px;
vertical-align:middle;
}.role-badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
}.role-admin{
background:#fee2e2;
color:#991b1b;
}.role-teacher{
background:#dbeafe;
color:#1e40af;
}.status-active{
background:var(--success-bg);
color:var(--success-green);
}.teachers-table-shell{
margin-left:0;
margin-right:0;
}#learning-rooms .white-card{
margin-left:-12px;
margin-right:-12px;
width:calc(100% + 24px);
}#learning-rooms .teachers-table-shell{
margin-left:0;
margin-right:0;
}#learning-rooms .teachers-card-head{
padding:10px 12px 8px 12px !important;
}#learning-rooms .teachers-search{
max-width:420px !important;
}#learning-rooms .data-table th{
padding:12px 12px;
font-size:11px;
}#learning-rooms .data-table td{
padding:12px 12px;
font-size:13px;
}.teachers-card{
border-radius:18px;
overflow:hidden;
border:1px solid rgba(255, 255, 255, 0.14);
display:flex;
flex-direction:column;
height:calc(108.69565vh - 118px);
min-height:420px;
}.teachers-card-head{
padding:16px;
display:flex;
align-items:center;
justify-content:flex-start;
gap:12px;
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.92) 0%,
rgba(28, 119, 255, 0.78) 100%
);
border-bottom:1px solid rgba(255, 255, 255, 0.18);
color:#fff;
}.teachers-card-title{
font-size:18px;
font-weight:900;
}.teachers-toolbar{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}.teachers-toolbar .tbtn{
height:32px;
padding:0 10px;
border-radius:9px;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
font-weight:800;
font-size:13px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
}.teachers-toolbar .tbtn:hover{
background:rgba(255, 255, 255, 0.16);
}.teachers-toolbar .tselect{
height:32px;
border-radius:9px;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
font-weight:800;
font-size:13px;
padding:0 8px;
outline:none;
}.teachers-toolbar .tselect option{
color:#111;
}.teachers-search{
height:32px;
display:inline-flex;
align-items:center;
gap:8px;
padding:0 10px;
border-radius:9px;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
}.teachers-search input{
border:none;
outline:none;
background:transparent;
color:#fff;
font-weight:700;
font-size:13px;
width:210px;
max-width:55vw;
}.teachers-search input::placeholder{
color:rgba(255, 255, 255, 0.82);
}.teachers-table-wrap{
background:#fff;
color:#0f172a;
font-weight:800;
font-size:12px;
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
}.teachers-table-scroll{
flex:1 1 auto;
min-height:0;
overflow:auto;
}.teachers-table-wrap .data-table th{
background:#ffffff;
color:#6b7280;
border-bottom:1px solid #e5e7eb;
font-weight:900;
padding:10px;
font-size:11px;
}.teachers-table-wrap .data-table td{
background:#ffffff;
padding:10px;
font-size:12px;
font-weight:800;
}.teachers-table-wrap .data-table tr:hover td{
background:#f8fbff;
}.teachers-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 12px;
border-top:1px solid #e5e7eb;
color:#475569;
font-weight:800;
font-size:11px;
}.teachers-pager{
display:flex;
align-items:center;
gap:8px;
}.teachers-pager .pbtn{
width:30px;
height:30px;
border-radius:9px;
border:1px solid #e5e7eb;
background:#fff;
color:#0f172a;
font-weight:900;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}.teachers-pager .pbtn.active{
background:var(--primary-blue);
border-color:var(--primary-blue);
color:#fff;
}.teachers-pager .pbtn:disabled{
opacity:0.45;
cursor:not-allowed;
}.teachers-perpage{
height:30px;
border-radius:9px;
border:1px solid #e5e7eb;
background:#f8fafc;
color:#0f172a;
font-weight:800;
font-size:11px;
padding:0 8px;
outline:none;
}#teachers .section-header{
margin-bottom:10px;
}.action-btn{
background:none;
border:none;
cursor:pointer;
color:var(--text-grey);
padding:5px;
font-size:16px;
transition:color 0.2s;
}.action-btn:hover{
color:var(--primary-blue);
}.action-btn.delete:hover{
color:var(--danger-red);
}.logout-btn{
display:inline-flex;
align-items:center;
gap:8px;
background:transparent;
border:none;
color:var(--text-grey);
padding:6px 8px;
border-radius:8px;
cursor:pointer;
font-weight:600;
font-size:13px;
}.logout-btn i{
font-size:14px;
}.logout-btn:hover{
color:var(--primary-blue);
background:rgba(28, 119, 255, 0.06);
}.journal-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:16px;

}#journals-list-view{
padding-right:62px;
}@media (min-width:1100px){
.journal-grid{
grid-template-columns:repeat(4, minmax(220px, 1fr));
}}@media (min-width:1700px) and (max-width:1800px){
.journal-grid{
grid-template-columns:repeat(5, minmax(220px, 1fr));
}}@media (min-width:1801px) and (max-width:1920px){
.journal-grid{
grid-template-columns:repeat(6, minmax(220px, 1fr));
}}@media (min-width:2200px) and (max-width:2500px){
.journal-grid{
grid-template-columns:repeat(5, minmax(220px, 1fr));
}}@media (min-width:2501px) and (max-width:2800px){
.journal-grid{
grid-template-columns:repeat(6, minmax(220px, 1fr));
}}@media (min-width:2801px) and (max-width:3200px){
.journal-grid{
grid-template-columns:repeat(7, minmax(220px, 1fr));
}}@media (min-width:3201px) and (max-width:3800px){
.journal-grid{
grid-template-columns:repeat(8, minmax(220px, 1fr));
}}@media (min-width:3801px){
.journal-grid{
grid-template-columns:repeat(10, minmax(220px, 1fr));
}}.teachers-grid{
display:grid;
grid-template-columns:repeat(4, minmax(220px, 1fr));
gap:16px;
}.journal-card{
background:white;
border-radius:18px;
padding:16px;
color:var(--text-dark);
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:140px;
cursor:pointer;
position:relative;
}body:not(.admin-role) .journal-card .journal-subject{
margin-top:auto;
}body.admin-role .journal-card .journal-subject{
margin-top:auto;
}.journal-top{
display:flex;
flex-direction:column;
gap:12px;
align-items:flex-start;
}.journal-card:hover{
transform:none;
}.journal-subject{
font-size:16.7px;
font-weight:590;
margin-bottom:4px;
color:var(--primary-blue);
margin-left:0;
}.journal-card.hide-teacher-field .journal-teacher{
display:none;
}.journal-card.hide-teacher-field .journal-bottom{
flex:1 1 auto;
width:100%;
}.journal-card.hide-teacher-field .journal-bottom .journal-subject{
margin-top:auto;
}.subst-wrap{
background:linear-gradient(
180deg,
rgba(28, 119, 255, 0.92) 0%,
rgba(28, 119, 255, 0.78) 100%
);
border-radius:18px;
padding:14px;
border:1px solid rgba(255, 255, 255, 0.14);
}.subst-strip-title{
font-weight:900;
color:rgba(255, 255, 255, 0.92);
margin:2px 0 10px;
}.subst-strip{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(220px, 1fr);
gap:16px;
overflow-x:auto;
padding-bottom:8px;
scroll-snap-type:x mandatory;
}.subst-strip::-webkit-scrollbar{
height:8px;
}.subst-strip::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.18);
border-radius:999px;
}.subst-strip::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.06);
border-radius:999px;
}.journal-card.subst-card{
background:rgba(255, 255, 255, 0.98);
border:1px solid rgba(0, 0, 0, 0.05);
scroll-snap-align:start;
}.journal-card.subst-card:hover{
}.journal-class-badge{
display:inline-flex;
align-items:center;
justify-content:center;
background:#fee2e2;
color:#991b1b;
padding:4.5px 10px;
border-radius:999px;
font-size:14px;
font-weight:600;
margin-bottom:8px;
min-width:0;
text-align:center;
border:1px solid rgba(0, 0, 0, 0.04);
margin-left:0;
max-width:180px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.journal-badges-row{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}.journal-group-badge{
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(56, 189, 248, 0.18);
color:#111;
padding:4.5px 10px;
border-radius:999px;
font-size:14px;
font-weight:600;
margin-bottom:8px;
min-width:0;
text-align:center;
border:1px solid rgba(2, 132, 199, 0.25);
max-width:180px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.journal-teacher{
font-size:11.5px;
color:#666;
display:flex;
align-items:center;
gap:8px;
font-weight:600;
margin-left:0;
margin-top:auto;
}.journal-bottom{
margin-top:auto;
display:flex;
flex-direction:column;
justify-content:flex-end;
gap:6px;
padding-bottom:0 !important;
}.journal-bottom > .journal-subject{
height:auto !important;
line-height:normal !important;
display:block !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
white-space:normal !important;
text-overflow:unset !important;
word-break:break-word !important;
}.journal-bottom > .journal-teacher{
height:auto !important;
line-height:18px !important;
margin:0 !important;
padding:0 !important;
align-self:stretch !important;
font-size:12px !important;
}.classes-parallel-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
gap:16px;
align-items:start;
}@media (min-width:1100px){
.classes-parallel-grid{
grid-template-columns:repeat(6, minmax(100px, 1fr));
}}.class-card{
background:#fff;
border-radius:18px;
padding:14px;
color:var(--text-dark);
display:flex;
flex-direction:column;
justify-content:space-between;
height:200px;
cursor:pointer;
border:1px solid rgba(0, 0, 0, 0.05);
}.class-card:hover{
}.class-card__top{
display:flex;
flex-direction:column;
gap:10px;
align-items:flex-start;
}.class-card__teacher{
font-size:16px;
font-weight:900;
line-height:1.15;
color:#0f172a;
margin-top:4px;
}.class-card__divider{
height:1px;
background:rgba(2, 6, 23, 0.1);
margin-top:10px;
margin-bottom:10px;
}.class-card__footer{
display:flex;
align-items:center;
gap:8px;
color:#6b7280;
font-size:14px;
font-weight:800;
margin-top:0;
}.class-card__footer svg{
width:16px;
height:16px;
color:#6b7280;
flex:0 0 auto;
}#journals-list-view{
display:flex;
flex-direction:column;
height:calc(108.69565vh - 118px);
min-height:0;
overflow:hidden;
}#journals-grid-body{
flex:1 1 auto;
min-height:0;
overflow:auto;
padding-right:6px;
}#journals-list-view{
height:calc(108.69565vh - 118px);
min-height:0;
overflow:visible;
}#journals-grid-body{
overflow:visible;
padding-right:0;
}#journals-grid-body::after{
content:"";
grid-column:1 / -1;
height:10px;
margin-top:-16px;
}.gb-wrapper{
background:transparent;
border-radius:24px;
display:flex;
flex-direction:column;
height:calc(108.69565vh - 118px);
overflow:hidden;
}#gradebook-view .gb-header-top,
#gradebook-view .gb-controls-top{
display:none !important;
}.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .white-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .reports-shell,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .teachers-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .stats-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .big-card,
.page-section:not(#settings):not(#schedule):not(#calendar):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .teachers-table-shell{
height:calc(108.69565vh - 118px) !important;
max-height:calc(108.69565vh - 118px) !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}#summary-performance-view{
height:calc(108.69565vh - 58px) !important;
max-height:calc(108.69565vh - 58px) !important;
box-sizing:border-box !important;
}#summary-performance-view .summary-page-wrapper,
.summary-page-wrapper{
height:calc(108.69565vh - 58px) !important;
max-height:calc(108.69565vh - 58px) !important;
overflow:hidden !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
}.modal-overlay .modal-window[id^="modal-summary-"]{
max-height:calc(100vh - 75px);
overflow:auto;
}.summary-page-wrapper{
padding-bottom:0px !important;
}.summary-page-wrapper table{
margin-bottom:0px;
}.modal-overlay .modal-window[id^="modal-summary-"]{
padding-bottom:0px !important;
}#gradebook-view{
background:transparent;
border-radius:0;
padding:0;
overflow:visible;
margin-left:-17px;
margin-right:-17px;
margin-top:-4px;

border:none;
}.white-card{
height:calc(108.69565vh - 118px) !important;
max-height:calc(108.69565vh - 118px) !important;
overflow-y:auto !important;
box-sizing:border-box !important;
}#gradebook-view .gb-wrapper{

height:calc(108.69565vh - 118px);
max-height:calc(108.69565vh - 118px);
min-height:0;
overflow:hidden;
display:flex;
flex-direction:column;
}#gradebook-view.has-admin-subtitle .gb-wrapper{

height:calc(108.69565vh - 162px);
max-height:calc(108.69565vh - 162px);
}#gradebook-view.no-tabs .gb-wrapper{

height:calc(108.69565vh - 58px);
max-height:calc(108.69565vh - 58px);
}#gradebook-view.no-tabs.has-admin-subtitle .gb-wrapper{
height:calc(108.69565vh - 118px);
max-height:calc(108.69565vh - 118px);
}#gradebook-view .gb-tabs-row{
padding:4px 0 2px;
margin-left:-5px;
margin-top:0;
margin-bottom:4px;
position:relative;
top:-5px;
}#gradebook-view .gb-tabs-row{
overflow:visible;
}#gradebook-view .gb-tabs{
margin-top:0px !important;
}#gradebook-view .gb-tab{
line-height:1;
padding-top:10px;
padding-bottom:10px;
padding-left:12px;
padding-right:12px;
font-size:18px;
}#gradebook-view .gb-header-content-wrap{
border:none;
border-radius:14px;
overflow:hidden;
background:#ffffff;
display:flex;
flex-direction:column;
min-height:0;
}#gradebook-view .gb-header-area{
padding-top:0;
}#gradebook-view .gb-subbar-header{

}#gradebook-view .gb-content{
border:none;
margin:0;
padding:8px;
border-radius:0;
flex:1 1 auto;
min-height:0;

overflow:auto;
}#gradebook-view #tab-attendance.gb-content,
#gradebook-view #tab-grades.gb-content,
#gradebook-view #tab-remarks.gb-content{
padding:0;
}#gradebook-view #tab-attendance,
#gradebook-view #tab-grades,
#gradebook-view #tab-remarks{
padding-top:0;
}#gradebook-view #gb-zoom-grades,
#gradebook-view #gb-zoom-attendance{
width:max-content;
}#gradebook-view #gb-table,
#gradebook-view #att-table{
width:max-content;
}#gradebook-view .gb-header-area{
flex:0 0 auto;
}#gradebook-view .gb-wrapper,
#gradebook-view .gb-header-content-wrap{
overscroll-behavior:none;
}#gradebook-view .gb-header-area{
background:#1a67e6;
}#gradebook-view .gb-subbar-header{
padding:8px 4px 8px 12px;
background:#377eff;
}#gradebook-view .gb-subbar{
align-items:center;
gap:12px;
min-height:48px;
background:transparent;
display:flex;
}#gradebook-view .gb-controls{
gap:8px;
justify-content:flex-end;
}#gradebook-view .school-year-btn{
height:40px;
padding:0 12px;
border-radius:10px !important;
background:rgba(255, 255, 255, 0.16);
border:1px solid rgba(255, 255, 255, 0.22);
color:#fff;
font-weight:700;
font-size:12px;
line-height:1;
display:inline-flex;
align-items:center;
box-sizing:border-box;
}#gradebook-view .school-year-btn .school-year-icon{
font-size:12px;
opacity:0.95;
}#gradebook-view .gb-subbar .btn-add-column{
height:32px;
padding:0 10px;
border-radius:10px;
background:transparent;
border:none;
color:#fff;
font-weight:600;
gap:8px;
}#gradebook-view .gb-subbar .btn-add-column:hover{
background:rgba(255, 255, 255, 0.12);
}#gradebook-view .gb-subbar .btn-add-column .plus-circle{
width:18px;
height:18px;
background:#ffffff;
border:1px solid rgba(255, 255, 255, 0.85);
}#gradebook-view .gb-subbar .btn-add-column .plus-circle span{
font-size:14px;
line-height:1;
color:var(--primary-blue);
}#gradebook-view .scale-pill,
.schedule-zoom .scale-pill,
.schc-zoom,
.scale-pill{
height:38px !important;
padding:3px 4px !important;
background:rgba(255, 255, 255, 0.1) !important;
border:1px solid rgba(255, 255, 255, 0.22) !important;
border-radius:999px !important;
gap:2px !important;
display:inline-flex !important;
align-items:center !important;
box-sizing:border-box !important;
}#gradebook-view .scale-option,
.schedule-zoom .scale-option,
.schedule-zoom .zoom-option,
.schc-zoom button,
.scale-option,
.zoom-option{
height:32px !important;
min-width:44px !important;
padding:0 10px !important;
font-size:12px !important;
font-weight:700 !important;
border-radius:999px !important;
transform:none !important;
background:transparent !important;
border:none !important;
color:rgba(255, 255, 255, 0.92) !important;
cursor:pointer !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
transition:background 0.15s ease, color 0.15s ease;
}#gradebook-view .scale-option:hover:not(.active),
.schedule-zoom .scale-option:hover:not(.active),
.schedule-zoom .zoom-option:hover:not(.active),
.schc-zoom button:hover:not(.active),
.scale-option:hover:not(.active),
.zoom-option:hover:not(.active){
background:rgba(255, 255, 255, 0.18) !important;
color:#ffffff !important;
}#gradebook-view .scale-option.active,
.schedule-zoom .scale-option.active,
.schedule-zoom .zoom-option.active,
.schc-zoom button.active,
.scale-option.active,
.zoom-option.active{
background:rgba(255, 255, 255, 0.95) !important;
color:#1c77ff !important;
border-radius:999px !important;
font-weight:800 !important;
}#gradebook-view .nav-zoom-box{
background:transparent;
border:none;
padding:0;
gap:6px;
height:44px;
}#gradebook-view .nav-zoom-box .nav-btn{
width:40px;
height:40px;
min-width:40px;
border-radius:14px !important;
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
color:#fff;
font-size:18px;
}#gradebook-view .nav-zoom-box .nav-btn:hover{
background:rgba(255, 255, 255, 0.18);
transform:none;
}#gradebook-view .three-dot-btn{
width:32px;
height:32px;
border-radius:999px;
background:rgba(255, 255, 255, 0.12);
border:1px solid rgba(255, 255, 255, 0.22);
font-size:18px;
}#gradebook-view .gb-controls-top{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
position:relative;
min-height:32px;
}#gradebook-view .gb-controls-top .export-menu{
right:0;
top:calc(100% + 10px);
}#gradebook-view .gb-zoom-surface{
width:max-content;
}#gradebook-view #tab-attendance.gb-content,
#gradebook-view #tab-grades.gb-content,
#gradebook-view #tab-planning.gb-content{
margin:0;
border-radius:0;
}#gradebook-view #tab-attendance,
#gradebook-view #tab-grades{
padding-top:10px;
}#gradebook-view .lesson-day-shell{
max-width:none;
.nav-item{
padding:8px 10px;
font-size:14px;
}.modal-window,
.modal{
width:100% !important;
height:100% !important;
max-width:none !important;
border-radius:0 !important;
top:0 !important;
left:0 !important;
transform:none !important;
}.modal-content{
height:100%;
overflow:auto;
}body{
display:block;
height:auto;
overflow:auto;
}#app-sidebar{
display:none;
}#mobile-topbar,
#mobile-day-strip,
#mobile-bottom-nav{
display:block;
}#mobile-sidebar-backdrop.active{
display:block;
}#mobile-topbar{
position:fixed;
top:0;
left:0;
right:0;
height:62px;
padding:0 14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
background:rgba(28, 119, 255, 0.92);
backdrop-filter:blur(14px);
z-index:2000;
}#mobile-topbar .mobile-icon{
width:44px;
height:44px;
border-radius:14px;
display:inline-flex;
align-items:center;
justify-content:center;
color:white;
background:rgba(255, 255, 255, 0.14);
border:1px solid rgba(255, 255, 255, 0.22);
cursor:pointer;
}#mobile-bell-btn{
position:fixed;
top:9px;
right:14px;
z-index:2001;
}#mobile-bell-btn.has-unread::after{
content:"";
position:absolute;
width:10px;
height:10px;
border-radius:999px;
background:#ef4444;
right:6px;
bottom:6px;
}#mobile-topbar .mobile-title{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
color:white;
font-weight:800;
line-height:1.1;
font-size:14px;
}#mobile-topbar .mobile-title div{
line-height:1.2;
}#mobile-topbar .mobile-day-nav{
width:36px;
height:36px;
border-radius:12px;
background:rgba(255, 255, 255, 0.14);
border:1px solid rgba(255, 255, 255, 0.22);
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:white;
}#mobile-topbar .mobile-day-nav:hover{
background:rgba(255, 255, 255, 0.2);
}.header{
display:none;
}.home-toprow{
display:none;
}.home-shell{
padding:0 12px 16px;
}#home-schedule-container{
padding-bottom:16px;
}#home-schedule-container .home-lesson-item{
margin-bottom:12px;
}#home-schedule-container .home-lesson-card{
border-radius:18px;
padding:24px 20px;
}#home-schedule-container .home-lesson-icon{
display:flex;
}#home-schedule-container .home-room-number{
display:none;
}#mobile-day-strip{
position:fixed;
top:62px;
left:0;
right:0;
padding:8px 12px 10px;
display:flex;
gap:8px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
background:rgba(28, 119, 255, 0.92);
z-index:2000;
}#mobile-day-strip button{
flex:0 0 auto;
padding:8px 10px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.25);
background:rgba(255, 255, 255, 0.12);
color:rgba(255, 255, 255, 0.92);
font-weight:700;
font-size:12px;
cursor:pointer;
white-space:nowrap;
}#mobile-day-strip button.active{
background:rgba(255, 255, 255, 0.95);
color:var(--primary-blue);
border-color:rgba(255, 255, 255, 0.7);
}body:not(.mobile-home) #mobile-day-strip{
display:none !important;
}body:not(.mobile-home) #mobile-topbar .mobile-day-nav,
body:not(.mobile-home) #mobile-topbar #mobile-date,
body:not(.mobile-home) #mobile-topbar #mobile-day{
display:none !important;
}body:not(.mobile-home) #mobile-topbar #mobile-page-title{
display:block !important;
}body.mobile-home #mobile-topbar #mobile-page-title{
display:none !important;
}#mobile-bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
height:66px;
padding:6px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:4px;
background:rgba(255, 255, 255, 0.94);
border-top:1px solid rgba(0, 0, 0, 0.08);
z-index:2000;
}#mobile-bottom-nav button{
flex:1;
height:54px;
border-radius:14px;
background:transparent;
border:none;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
color:rgba(17, 24, 39, 0.7);
font-size:11px;
font-weight:700;
cursor:pointer;
transition:background 0.15s;
}#mobile-bottom-nav button.active{
color:var(--primary-blue);
background:rgba(28, 119, 255, 0.1);
}#mobile-bottom-nav button:hover{
background:rgba(28, 119, 255, 0.12);
}#mobile-bottom-nav button i{
font-size:18px;
}#mobile-sidebar-backdrop{
position:fixed;
inset:0;
background:rgba(0, 0, 0, 0.4);
z-index:1950;
}#app-sidebar.mobile-open{
display:flex !important;
position:fixed;
top:0;
left:0;
bottom:0;
width:280px;
max-width:80%;
padding-top:64px;
z-index:2000;
}.main-content{
padding-top:124px;
padding-bottom:90px;
}.home-shell{
flex-direction:column;
gap:14px;
}.home-right{
display:none;
}}#schedule-view-mode,
#schedule-view-value{
color:white;
background:transparent;
border:1px solid rgba(255, 255, 255, 0.12);
-webkit-appearance:none;
appearance:none;
}#schedule-view-mode{
min-width:110px;
width:110px;
}#schedule-view-value{
min-width:120px;
width:120px;
}#schedule-view-mode option,
#schedule-view-value option{
color:#000;
background:#fff;
}.gb-header-content-wrap{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
border-radius:12px 12px 0 0;
border:1px solid rgba(0, 0, 0, 0.18);
}#gradebook-view.lesson-day-mode .gb-header-content-wrap{
border:0;
border-radius:0;
overflow:visible;
background:transparent;
}#gradebook-view.lesson-day-mode{
padding:0;
border-radius:24px;
overflow:hidden;
margin-left:-15px;
margin-right:-15px;
width:calc(100% + 30px);
box-sizing:border-box;
}#gradebook-view.lesson-day-mode .gb-wrapper{
height:auto;
overflow:visible;
}#gradebook-view.lesson-day-mode .lesson-day-view{
padding:0;
}#gradebook-view.lesson-day-mode .lesson-day-topbar{
border-radius:18px;
}.gb-header-area{
display:flex;
flex-direction:column;
justify-content:flex-start;
align-items:stretch;
gap:0;
background:#f5f5f5;
color:var(--text-dark);
flex-shrink:0;
}.gb-subbar-header{
padding:0;
border-bottom:none;
background:transparent;
color:var(--text-dark);
}.gb-breadcrumbs{
font-size:20px;
font-weight:600;
color:var(--text-dark);
display:flex;
align-items:center;
gap:10px;
}.gb-breadcrumbs span{
cursor:pointer;
opacity:0.8;
transition:opacity 0.2s;
}.gb-breadcrumbs span:hover{
opacity:1;
}.gb-breadcrumbs .sep{
color:rgba(0, 0, 0, 0.35);
font-size:14px;
}.gb-breadcrumbs .current{
color:var(--text-dark);
opacity:1;
cursor:default;
font-weight:700;
}.subject-journal-toggle{
background:var(--primary-blue);
border:none;
width:28px;
height:28px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
cursor:pointer;
}.subject-journal-toggle svg{width:14px;height:14px;display:block}.subject-journal-menu{
position:absolute;
background:var(--primary-blue);
color:#fff;
border-radius:10px;
padding:6px;
display:none;
min-width:220px;
z-index:60000;
}.subject-journal-menu-item{
display:block;
background:transparent;
border:none;
color:#fff;
text-align:left;
width:100%;
padding:8px 10px;
font-size:14px;
cursor:pointer;
border-radius:8px;
}.subject-journal-menu-item:hover{background:rgba(255,255,255,0.06)}.subject-journal-menu-empty{padding:8px 10px;color:rgba(255,255,255,0.95);opacity:0.95}.gb-tabs{
display:inline-flex;
gap:0;
padding:0;
background:transparent;
margin:0;
border:none;
border-radius:0;
overflow:visible;
align-items:center;
justify-content:flex-start;
flex:none;
margin-top:2px;
margin-bottom:2px;
align-self:flex-start;
}.gb-tabs-row{
background:transparent;
padding:8px 0;
display:flex;
justify-content:flex-start;
flex-shrink:0;
}.gb-tabs-row .gb-tabs{
margin-top:0;
background:transparent;
border:none;
padding:0;
padding-left:10px;
display:inline-flex;
gap:0;
overflow:visible;
white-space:nowrap;
flex-wrap:nowrap;
}.gb-subbar{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:6px;
padding:0;
}.gb-subbar .gb-controls{
margin-left:auto;
margin-right:0;
padding-right:0;
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
}.gb-subbar > button:not(.school-year-gap),
.gb-subbar #school-year-block:not(.school-year-gap){
margin:0;
}.gb-subbar .gb-controls > *:first-child{
margin-left:0;
}.gb-subbar .gb-controls > *:last-child{
margin-right:0;
}.gb-subbar-header .gb-subbar{
align-items:center;
}#gradebook-view .gb-header-content-wrap,
#gradebook-view .gb-header-area,
#gradebook-view .gb-subbar-header,
#gradebook-view .gb-subbar{
padding-left:0 !important;
padding-right:0 !important;
margin:0 !important;
}#gradebook-view .nav-zoom-box{
padding-right:0 !important;
padding-left:0 !important;
}#gradebook-view .scale-pill{
padding-left:4px !important;
padding-right:4px !important;
}#gradebook-view #school-year-block:not(.school-year-gap),
#gradebook-view #btn-add-column,
#gradebook-view .nav-zoom-box .nav-btn{
margin:0 !important;
}.gb-header-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:6px;
}.gb-left-top{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:1px;
}.gb-controls{
display:flex;
align-items:center;
gap:4px;
}.btn-add-column{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--primary-blue);
color:#fff;
border:0;
padding:6px 10px;
border-radius:8px;
cursor:pointer;
}.btn-add-column .plus-circle{
width:22px;
height:22px;
border-radius:50%;
background:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--primary-blue);
font-weight:700;
}.nav-zoom-box{
display:inline-flex;
gap:6px;
padding:4px 6px;
background:rgba(0, 0, 0, 0.02);
border-radius:12px;
border:1px solid rgba(0, 0, 0, 0.04);
height:34px;
align-items:center;
}.nav-zoom-box .nav-btn{
padding:6px 8px;
height:30px;
min-width:36px;
background:transparent;
color:var(--primary-blue);
border:1px solid rgba(15, 104, 248, 0.08);
border-radius:8px;
cursor:pointer;
font-weight:600;
font-size:14px;
display:inline-flex;
align-items:center;
justify-content:center;
transition:
background 0.12s,
color 0.12s,
transform 0.06s;
}.nav-zoom-box .nav-btn:hover{
background:rgba(15, 104, 248, 0.06);
color:var(--primary-blue);
}.school-year{
background:var(--primary-blue);
color:#fff;
border:2px solid var(--primary-blue);
padding:4px 8px;
border-radius:8px;
font-weight:700;
font-size:13px;
line-height:1;
}.school-year-btn.school-year-gap{
margin-left:10px !important;
}.gb-subbar .btn-add-column{
display:inline-flex;
align-items:center;
gap:8px;
background:#1c77ff00;
color:#fff;
border:0;
padding:6px 10px;
border-radius:8px;
cursor:pointer;
}.gb-subbar .btn-add-column span{
font-weight:600;
}.school-year-icon{
color:#fff;
margin-left:8px;
font-size:14px;
vertical-align:middle;
}.three-dot-btn{
width:36px;
height:36px;
border-radius:50%;
background:var(--primary-blue);
display:inline-flex;
align-items:center;
justify-content:center;
color:white;
cursor:pointer;
border:none;
}.three-dot-btn i{
font-size:18px;
}.nav-zoom-box .nav-btn > .mriia-local-icon,
.three-dot-btn > .mriia-local-icon,
.three-dot-btn-circle > .mriia-local-icon{
width:18px !important;
height:18px !important;
margin:0 !important;
}.export-menu{
position:absolute;
right:24px;
top:64px;
background:white;
color:var(--text-dark);
border-radius:12px;
padding:8px;
display:none;
min-width:160px;
z-index:9999;
}.export-menu.open{
display:block;
}.export-menu button{
width:100%;
background:transparent;
border:none;
text-align:left;
padding:8px 12px;
font-size:14px;
cursor:pointer;
color:var(--text-dark);
border-radius:8px;
}.export-menu button:hover{
background:#f3f4f6;
color:var(--primary-blue);
}.zoom-wrapper{
position:relative;
display:inline-block;
}.zoom-toggle{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
background:white;
color:var(--primary-blue);
border-radius:999px;
height:36px;
border:1px solid rgba(28, 119, 255, 0.08);
font-weight:700;
cursor:pointer;
}.zoom-toggle i{
font-size:14px;
}.zoom-popup{
position:absolute;
right:0;
top:calc(100% + 10px);
background:white;
color:var(--text-dark);
border-radius:12px;
padding:12px;
min-width:320px;
display:none;
z-index:9999;
}.zoom-popup.open{
display:block;
}.zoom-controls{
display:flex;
align-items:center;
gap:10px;
}.zoom-btn{
background:var(--primary-blue);
color:white;
border:none;
width:33px;
height:33px;
border-radius:8px;
font-weight:700;
cursor:pointer;
}.zoom-range{
flex:1;
}.zoom-range input[type="range"]{
width:100%;
height:6px;
appearance:none;
background:linear-gradient(90deg, var(--primary-blue), #3b82f6);
border-radius:6px;
outline:none;
}.zoom-option{
background:transparent;
color:var(--primary-blue);
padding:6px 10px;
border-radius:8px;
font-weight:700;
cursor:pointer;
font-size:13px;
border:1px solid transparent;
}.zoom-option.active{
background:#ffffff;
color:var(--primary-blue);
border-color:rgba(0, 0, 0, 0.04);
}.zoom-reset{
background:transparent;
border:1px solid rgba(0, 0, 0, 0.06);
padding:6px 8px;
border-radius:8px;
cursor:pointer;
}.scale-pill{
display:inline-flex;
gap:2px;
padding:3px 4px;
background:rgba(255, 255, 255, 0.1);
border-radius:999px;
align-items:center;
border:1px solid rgba(255, 255, 255, 0.22);
height:38px;
box-sizing:border-box;
}.scale-option, .zoom-option{
padding:0 10px;
height:32px;
min-width:44px;
border-radius:999px;
background:transparent;
color:rgba(255, 255, 255, 0.92);
font-weight:700;
font-size:12px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:none;
transition:background 0.15s ease, color 0.15s ease;
box-sizing:border-box;
}.scale-option:hover:not(.active), .zoom-option:hover:not(.active){
background:rgba(255, 255, 255, 0.18);
color:#ffffff;
}.scale-option.active, .zoom-option.active{
background:rgba(255, 255, 255, 0.95);
color:var(--primary-blue, #1c77ff);
border-radius:999px !important;
font-weight:800;
}@media (max-width:700px){
.zoom-popup{
right:8px;
left:8px;
min-width:auto;
}}.gb-actions-wrap{
position:relative;
display:flex;
align-items:center;
gap:10px;
}.gb-tab{
padding:8px 10px;
height:34px;
min-height:34px;
min-width:0;
background:transparent;
color:white;
border-radius:0;
font-size:16px;
font-weight:600;
cursor:pointer;
border:none;
transition:
background 0.2s,
color 0.2s,
transform 0.1s;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}.gb-tab.active{
background:transparent;
color:white;
transform:none;
font-weight:600;
text-decoration:underline;
text-underline-offset:8px;
text-decoration-thickness:2px;
}.gb-tab:not(.active),
.filter-btn:not(.active),
.journal-tab:not(.active),
#journals .journal-tab-button:not(.active),
#journals .gb-subbar > button:not(.active){
text-decoration-color:#d1d5db !important;
}.filter-btn:not(.active),
.gb-tab:not(.active),
.journal-tab:not(.active){
color:#bdc9de;
}.gb-tab:hover:not(.active){
background:transparent;
color:#bdc9de;
}.filter-btn:hover:not(.active){
background:transparent;
color:#bdc9de;
}#gradebook-view .gb-tab[data-gb="planning"]{
margin-left:4px;
}.gb-content{
flex-grow:1;
overflow:auto;
background:#ffffff;
position:relative;
padding:12px;
border-radius:12px;
margin:8px;
}#tab-attendance.gb-content,
#tab-grades.gb-content{
margin:0 8px 8px 8px;
border-radius:0 0 12px 12px;
}.gb-table{
border-collapse:separate;
border-spacing:0;
width:max-content;
table-layout:auto;
background:transparent;
border-radius:0;
overflow:visible;
border:none;
}#gradebook-view .gb-table th{
border-color:rgba(28, 119, 255, 0.16) !important;
padding:6px 6px !important;
height:34px !important;
font-size:11px !important;
letter-spacing:0.2px !important;
text-transform:none !important;
}#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg,
#gradebook-view .gb-table thead th.gb-avg-col{
position:sticky !important;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col{
top:0 !important;
z-index:40;
}#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col{
top:var(--gb-thead-row1-h, 14px) !important;
z-index:35;
}#gradebook-view .gb-table td{
border-color:rgba(28, 119, 255, 0.14) !important;
height:36px !important;
font-size:13px !important;
background:#ffffff;
}#gradebook-view .gb-table tbody tr:nth-child(even) td{
background:#ffffff !important;
}#gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-col,
#gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-col-2,
#gradebook-view .gb-table tbody tr:nth-child(even) td.gb-sticky-avg{
background:#ffffff !important;
}#gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-col,
#gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-col-2,
#gradebook-view .gb-table tbody tr:nth-child(odd) td.gb-sticky-avg{
background:#ffffff !important;
}#gradebook-view .gb-table tbody td:hover{
background:rgba(28, 119, 255, 0.08) !important;
}#gradebook-view .gb-table th.gb-sticky-avg,
#gradebook-view .gb-table td.gb-sticky-avg{
background-clip:padding-box;
}#gradebook-view #gb-table th.gb-sticky-col,
#gradebook-view #gb-table td.gb-sticky-col{
border-right:0 !important;
}#gradebook-view #gb-table th.gb-sticky-col-2,
#gradebook-view #gb-table td.gb-sticky-col-2{
border-left:0 !important;
border-right:0 !important;
}#gradebook-view #gb-table th.gb-sticky-avg,
#gradebook-view #gb-table td.gb-sticky-avg{
border-left:0 !important;
}#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-col-2{
background-clip:padding-box;
}#gradebook-view #att-table thead tr:nth-child(2){
display:none;
}#gradebook-view #att-table thead th{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table{
--gb-sticky-col-1-w:25px;
--gb-sticky-col-2-w:200px;
--gb-sticky-avg-w:60px;
--gb-thead-row1-h:26px;
--gb-thead-row2-h:26px;
}#gradebook-view .gb-table .gb-sticky-col{
width:var(--gb-sticky-col-1-w) !important;
min-width:var(--gb-sticky-col-1-w) !important;
max-width:var(--gb-sticky-col-1-w) !important;
}#gradebook-view .gb-table td.gb-sticky-col{
font-size:11px !important;
}#gradebook-view .gb-table .gb-sticky-col-2{
width:var(--gb-sticky-col-2-w) !important;
min-width:160px !important;
max-width:var(--gb-sticky-col-2-w) !important;
}#gradebook-view .gb-table .gb-sticky-avg{
width:var(--gb-sticky-avg-w) !important;
min-width:40px !important;
max-width:var(--gb-sticky-avg-w) !important;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col{
height:var(--gb-thead-row1-h) !important;
top:0 !important;
z-index:60;
line-height:1 !important;
}#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col{
height:var(--gb-thead-row2-h) !important;
top:var(--gb-thead-row1-h) !important;
z-index:55;
line-height:1 !important;
}#gradebook-view
#gb-table
thead
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view #gb-table thead th.date-clickable,
#gradebook-view #gb-table thead th.gb-subtype-header{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table thead th.date-clickable,
#gradebook-view .gb-table thead th.gb-subtype-header{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col{
position:sticky !important;
left:0 !important;
}#gradebook-view .gb-table th.gb-sticky-col-2,
#gradebook-view .gb-table td.gb-sticky-col-2{
position:sticky !important;
left:var(--gb-sticky-col-1-w) !important;
}#gradebook-view .gb-table th.gb-sticky-avg,
#gradebook-view .gb-table td.gb-sticky-avg{
position:sticky !important;
left:calc(var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)) !important;
}#gradebook-view #gb-table th.gb-sticky-col,
#gradebook-view #gb-table td.gb-sticky-col,
#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col{
position:sticky !important;
left:0 !important;
}#gradebook-view #gb-table th.gb-sticky-col-2,
#gradebook-view #gb-table td.gb-sticky-col-2,
#gradebook-view #gb-table div.gb-sticky-col-2,
#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-col-2,
#gradebook-view #att-table div.gb-sticky-col-2{
position:sticky !important;
left:var(--gb-sticky-col-1-w) !important;
}#gradebook-view #gb-table th.gb-sticky-avg,
#gradebook-view #gb-table td.gb-sticky-avg,
#gradebook-view #gb-table div.gb-sticky-avg,
#gradebook-view #gb-table th.gb-avg-col,
#gradebook-view #gb-table td.gb-avg-col,
#gradebook-view #gb-table div.gb-avg-col{
position:sticky !important;
left:calc(var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)) !important;
}#gradebook-view .gb-table td.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col-2,
#gradebook-view .gb-table td.gb-sticky-avg,
#gradebook-view .gb-table div.gb-sticky-col-2,
#gradebook-view .gb-table div.gb-sticky-avg{
z-index:500 !important;
background:#ffffff !important;
}#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col{
background-clip:padding-box;
}#gradebook-view .gb-table td.gb-sticky-col,
#gradebook-view .gb-table td.gb-sticky-col-2,
#gradebook-view .gb-table td.gb-sticky-avg,
#gradebook-view .gb-table td.gb-avg-col,
#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table th.gb-sticky-col-2,
#gradebook-view .gb-table th.gb-sticky-avg,
#gradebook-view .gb-table th.gb-avg-col{
-webkit-transform:translateZ(0);
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;
}#gradebook-view #tab-attendance.gb-content,
#gradebook-view #tab-grades.gb-content{
isolation:isolate;
position:relative;
}#gradebook-view .gb-table thead th{

z-index:500;
background:#ffffff !important;
}#gradebook-view
.gb-table
thead
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
z-index:500 !important;
}#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg{
z-index:2000;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg{
z-index:2100;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table thead th.gb-sticky-avg,
#gradebook-view #att-table thead th.gb-avg-col{
position:sticky !important;
z-index:2000 !important;
background:#ffffff !important;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-avg{
top:0 !important;
z-index:2100 !important;
}#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-avg{
top:var(--gb-thead-row1-h, 14px) !important;
z-index:2050 !important;
}#gradebook-view #att-table td.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-avg,
#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table th.gb-sticky-avg{
-webkit-transform:translateZ(0);
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;
}#gradebook-view #att-table thead th{
z-index:500 !important;
background:#ffffff !important;
}.gb-sticky-col{

width:50px;
min-width:50px;
max-width:50px;
}.gb-sticky-col-2{

width:240px;
min-width:180px;
max-width:420px;

}th.gb-sticky-col-2 > div,
td.gb-sticky-col-2 > div{
padding-left:10px;
padding-right:8px;
justify-content:flex-start;
}.gb-table th{
background:white;
border:1px solid rgba(0, 0, 0, 0.08);
padding:12px 8px;
height:50px;
font-size:13px;
text-align:center;
vertical-align:middle;
color:var(--text-dark);
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}#gradebook-view .gb-table{
table-layout:fixed;
}.gb-table
thead
tr:nth-child(1)
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
top:0;
z-index:40;
}.gb-table
thead
tr:nth-child(2)
th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(
.gb-avg-col
){
top:26px;
z-index:35;
}.gb-table th.gb-header-clickable{
height:26px;
padding-top:6px;
padding-bottom:6px;
}.gb-table td{
border:1px solid rgba(0, 0, 0, 0.06);
height:45px;
padding:0;
text-align:center;
font-size:14px;
color:var(--text-dark);
background:white;
transition:background-color 0.2s;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-sizing:border-box;
}.gb-table th:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg),
.gb-table td:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg){
min-width:62px;
}.gb-table th.gb-sticky-col,
.gb-table td.gb-sticky-col,
.gb-table th.gb-sticky-col-2,
.gb-table td.gb-sticky-col-2,
.gb-table th.gb-sticky-avg,
.gb-table td.gb-sticky-avg{
padding:0;
background:white !important;
color:var(--text-dark) !important;
border:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
}.gb-table th.gb-sticky-col > div,
.gb-table td.gb-sticky-col > div,
.gb-table th.gb-sticky-col-2 > div,
.gb-table td.gb-sticky-col-2 > div{
box-sizing:border-box;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:flex-start;
padding:0 12px;

overflow:visible;
white-space:normal;
text-overflow:clip;
line-height:1.2;
padding-top:6px;
padding-bottom:6px;
}.gb-table th.gb-sticky-col.fixed,
.gb-table th.gb-sticky-col-2.fixed,
.gb-table th.gb-sticky-avg.fixed{

position:sticky;
z-index:70;
}.gb-table thead tr:nth-child(1) th.fixed{
top:0 !important;
z-index:80;
}.gb-table thead tr:nth-child(2) th.fixed{
top:26px !important;
z-index:75;
}.gb-table thead tr:nth-child(1) th.gb-sticky-col.fixed,
.gb-table thead tr:nth-child(1) th.gb-sticky-col-2.fixed,
.gb-table thead tr:nth-child(1) th.gb-sticky-avg.fixed{
z-index:90;
}.gb-table td.gb-sticky-col.fixed,
.gb-table td.gb-sticky-col-2.fixed,
.gb-table td.gb-sticky-avg.fixed{
position:sticky;
top:auto !important;
}.gb-table th.gb-sticky-col,
.gb-table th.gb-sticky-col-2,
.gb-table th.gb-sticky-avg{
vertical-align:bottom;
}.gb-table th.gb-sticky-col > div,
.gb-table th.gb-sticky-col-2 > div,
.gb-table th.gb-sticky-avg > div{
flex-direction:column;
justify-content:flex-end;
align-items:flex-start;
}.gb-table td > div,
.gb-table th > div{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
padding:0;
color:var(--text-dark);
}.student-cell{
display:inline-flex;
align-items:center;
gap:8px;
}.student-avatar{
width:28px;
height:28px;
border-radius:6px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:12px;

margin-left:-8px;
flex-shrink:0;
}.student-name-text{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
line-clamp:2;
overflow:hidden;
font-weight:590;
line-height:1.15;

font-size:12px;
}.gb-table th.gb-sticky-col,
.gb-table th.gb-sticky-col-2{
background:white !important;
color:var(--text-dark) !important;
border:1px solid rgba(0, 0, 0, 0.06) !important;
}th.gb-sticky-col{
position:sticky;
top:0;
width:50px !important;
min-width:50px !important;
max-width:50px !important;
background:white !important;
z-index:20;
border-right:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
}th.gb-sticky-col-2{
position:sticky;
top:0;

width:200px !important;
min-width:160px !important;
max-width:200px !important;
background:white !important;
z-index:20;
border-right:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
}.gb-table td.gb-sticky-col{
color:#1c77ff !important;
font-weight:800 !important;
}.gb-table th.gb-sticky-col,
.gb-table td.gb-sticky-col{
border-right:1px solid transparent !important;
}.gb-table th.gb-sticky-col-2,
.gb-table td.gb-sticky-col-2{
border-left:1px solid transparent !important;
}.gb-table th.gb-sticky-col-2 > div{
justify-content:flex-start !important;
padding-top:3px !important;
padding-bottom:3px !important;
}.gb-table thead tr:nth-child(1) th{
top:0 !important;
z-index:12;
padding-top:2px !important;
padding-bottom:2px !important;
height:14px !important;
line-height:1 !important;
}.gb-table thead tr:nth-child(2) th{
top:14px !important;
z-index:11;
padding-top:2px !important;
padding-bottom:2px !important;
height:13px !important;
line-height:1 !important;
}.gb-table thead tr:nth-child(2) th.gb-subtype-header{
padding-top:2px !important;
padding-bottom:2px !important;
}.gb-table thead tr:nth-child(1) th.gb-sticky-col-2{
padding-left:0px !important;
}#gradebook-view #gb-table thead th.gb-sticky-col-2 > div{
padding-left:2px;
}#gradebook-view #gb-table thead th.gb-num-header{
border-color:transparent !important;
background:#ffffff !important;
}#gradebook-view #gb-table thead th.gb-num-header > div{
display:none;
}.gb-students-title{
font-size:11px;
font-weight:700;
color:#000;
text-transform:none;
letter-spacing:0.5px;
line-height:1.1;
}.gb-students-subtitle{
font-size:11px;
font-weight:700;
color:#000;
text-transform:none;
letter-spacing:0;
line-height:1.1;
margin-top:1px;
}th.gb-sticky-avg{

position:sticky;
top:0;
width:40px !important;
min-width:40px !important;
max-width:60px !important;
background:white !important;
z-index:25;
border-right:1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter:none !important;
transform:translateZ(0);
}td.gb-sticky-col,
td.gb-sticky-col-2,
td.gb-sticky-avg{
position:sticky !important;
left:0;
transform:none !important;
background:white !important;
z-index:22 !important;
}th.gb-sticky-col,
th.gb-sticky-col-2,
th.gb-sticky-avg{
z-index:30;
background:white !important;
backdrop-filter:none !important;
color:var(--text-dark) !important;
}.gb-cell{
width:25px;
min-width:25px;
max-width:25px;
cursor:pointer;
transition:background-color 0.1s ease, opacity 0.1s ease;
user-select:none;
font-weight:500;
}.gb-placeholder{
background-color:#f8fafc !important;
cursor:default !important;
border:1px dashed #e2e8f0 !important;
}.gb-subtype-header{
width:12px;
min-width:12px;
max-width:12px;
padding-left:0;
padding-right:0;
position:relative;
}.gb-cell:hover{

background:#f3f4f6;
}.gb-cell.is-active{
background:#ffffff;
border-radius:6px;
z-index:3;
}.gb-cell.is-active:hover{
background:#ffffff;
}#gradebook-view #gb-table td.gb-cell{
position:relative;
}#gradebook-view #gb-table td.gb-cell .grade-badge{
position:absolute;
top:2px;
right:2px;
left:auto;
transform:none;
min-width:16px;
height:16px;
padding:0 4px;
border-radius:999px;
background:#1c77ff;
color:#fff;
font-size:9px;
font-weight:800;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:4;
}#gradebook-view .gb-table th.gb-col-tint,
#gradebook-view .gb-table td.gb-col-tint{
background:#edf4ff !important;
}#gradebook-view #gb-table td.gb-cell-plain{
font-weight:700 !important;
color:#0f172a !important;
}.gb-cell input{
width:100%;
height:100%;
border:none;
outline:none;
background:transparent;
text-align:center;
font-size:14px;
color:var(--text-dark);
}.gb-cell input:focus{
background:rgba(0, 0, 0, 0.04);
}.gb-avg-col{
background:rgba(28, 119, 255, 0.2);
color:white;
font-weight:bold;
width:30px;
font-size:15px;
}.gb-avg-label{

display:inline-block;
font-size:10px;
line-height:1.1;
white-space:normal;
color:#000000;
font-weight:600;
}#gradebook-view #gb-table td.gb-sticky-avg,
#gradebook-view #gb-table td.gb-avg-col{
font-weight:700;
color:#0f172a;
}.gb-header-clickable{
cursor:pointer;
transition:background-color 0.2s;
}.gb-header-clickable:hover{
background:rgba(255, 255, 255, 0.2);
}.col-type-label{
display:block;
font-size:10px;
color:rgba(255, 255, 255, 0.7);
margin-top:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:25px;
font-weight:500;
}.att-cell.absent{
background-color:rgba(239, 68, 68, 0.2);
color:#fee2e2;
font-weight:bold;
}.att-cell.late{
background-color:rgba(245, 158, 11, 0.2);
color:#fef3c7;
font-weight:bold;
}.gb-content-planning{
background:#ffffff !important;
padding:0 !important;
margin:0 8px 8px 8px !important;
border-radius:0 0 12px 12px !important;
}.planning-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
padding:12px 16px;
background:#fff;
border-radius:12px;
}.planning-toolbar-left{
display:flex;
align-items:center;
gap:12px;
}.planning-count{
font-size:13px;
color:#64748b;
font-weight:500;
background:#f1f5f9;
padding:6px 12px;
border-radius:8px;
}.btn-planning-add{
display:inline-flex;
align-items:center;
gap:8px;
background:#1c77ff;
color:#fff;
border:none;
padding:10px 18px;
border-radius:10px;
font-weight:600;
font-size:14px;
cursor:pointer;
transition:
background 0.2s,
transform 0.1s;
}.btn-planning-add:hover{
background:#1565d8;
}.btn-planning-export{
display:inline-flex;
align-items:center;
gap:6px;
background:#fff;
color:#475569;
border:1px solid #e2e8f0;
padding:8px 14px;
border-radius:8px;
font-size:13px;
cursor:pointer;
transition:all 0.2s;
}.btn-planning-export:hover{
background:#f1f5f9;
color:#1c77ff;
border-color:#1c77ff;
}.planning-export-wrap{
position:relative;
}.planning-export-menu{
position:absolute;
right:0;
top:calc(100% + 6px);
background:#fff;
border-radius:10px;
padding:6px;
min-width:140px;
z-index:1000;
display:none;
border:1px solid #e2e8f0;
}.planning-export-menu.open{
display:block;
}.planning-export-menu button{
width:100%;
background:transparent;
border:none;
text-align:left;
padding:10px 14px;
font-size:14px;
cursor:pointer;
color:#334155;
border-radius:8px;
display:flex;
align-items:center;
gap:10px;
}.planning-export-menu button:hover{
background:#f1f5f9;
color:#1c77ff;
}.planning-table-wrap{
background:#fff;
border-radius:12px;
overflow:hidden;
border:none;
display:flex;
flex-direction:column;
flex:1;
min-height:0;
}.planning-grid-head{
display:grid;
grid-template-columns:56px 160px 1.2fr 1fr 56px;
gap:12px;
padding:12px 12px;
align-items:center;
color:#334155;
font-size:12px;
font-weight:700;
letter-spacing:0.2px;
border-bottom:1px solid #e2e8f0;
}.planning-grid-head > div{
min-width:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.planning-grid-scroll{
overflow:auto;
min-height:0;
flex:1;
scrollbar-gutter:stable;
}.planning-grid-body{
display:flex;
flex-direction:column;
gap:12px;
padding:12px 12px;
}.planning-row{
display:grid;
grid-template-columns:56px 160px 1.2fr 1fr 56px;
gap:12px;
align-items:center;
}.planning-num{
font-weight:700;
color:#475569;
text-align:center;
}.planning-datecell{
color:#475569;
font-weight:600;
line-height:1.15;
cursor:pointer;
}.planning-datecell .date-top{
font-size:13px;
}.planning-datecell .date-sub{
font-size:12px;
color:#94a3b8;
margin-top:2px;
}.planning-box{
background:#ffffff;
border:1px solid #e2e8f0;
border-radius:10px;
padding:12px 12px;
min-height:44px;
display:flex;
align-items:center;
color:#0f172a;
}.planning-box.placeholder{
border-style:dashed;
color:#94a3b8;
background:#fbfdff;
}.planning-arrow{
width:44px;
height:44px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#ffffff;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
color:#334155;
transition:
background 0.15s,
border-color 0.15s,
transform 0.05s;
}.planning-arrow:hover{
background:#f8fafc;
border-color:#cbd5e1;
}.planning-arrow:active{
transform:translateY(1px);
}.plan-empty{
text-align:center;
padding:48px 24px !important;
color:#94a3b8 !important;
}.plan-empty i{
font-size:40px;
display:block;
margin-bottom:12px;
opacity:0.5;
}.plan-empty span{
font-size:16px;
font-weight:600;
display:block;
margin-bottom:6px;
}.plan-empty p{
font-size:13px;
margin:0;
opacity:0.8;
}.planning-sidepanel{
position:fixed;
top:0;
right:0;
bottom:0;
width:380px;
max-width:85vw;
background:#ffffff;
z-index:100050;
display:flex;
flex-direction:column;
transform:translateX(110%);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.planning-sidepanel.open{
transform:translateX(0);
opacity:1;
visibility:visible;
pointer-events:auto;
}.planning-sidepanel.closing{
transform:translateX(110%);
opacity:0;
visibility:visible;
pointer-events:none;
}.planning-sidepanel-header{
padding:16px 16px;
border-bottom:1px solid #eef2f7;
display:flex;


#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table thead th.gb-sticky-avg{
position:sticky !important;
top:0 !important;
left:auto !important;
z-index:500 !important;
background:#ffffff !important;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-avg{
top:0 !important;
z-index:60 !important;
}#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view #att-table thead tr:nth-child(2) th.gb-sticky-avg{
top:var(--gb-thead-row1-h, 14px) !important;
z-index:55 !important;
}#gradebook-view #att-table td.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-avg,
#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table th.gb-sticky-avg{
z-index:500 !important;
background:#ffffff !important;
-webkit-transform:translateZ(0);
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;
}#gradebook-view #att-table{
--gb-sticky-col-1-w:25px;
--gb-sticky-col-2-w:200px;
--gb-sticky-avg-w:60px;
table-layout:fixed;
}#gradebook-view #att-table th.gb-sticky-col,
#gradebook-view #att-table td.gb-sticky-col{
position:sticky !important;
left:0 !important;
z-index:600 !important;
background:#ffffff !important;
}#gradebook-view #att-table th.gb-sticky-col-2,
#gradebook-view #att-table td.gb-sticky-col-2{
position:sticky !important;
left:var(--gb-sticky-col-1-w) !important;
z-index:600 !important;
background:#ffffff !important;
}#gradebook-view #att-table th.gb-sticky-avg,
#gradebook-view #att-table td.gb-sticky-avg{
position:sticky !important;
left:calc(
var(--gb-sticky-col-1-w) + var(--gb-sticky-col-2-w)
) !important;
z-index:600 !important;
background:#ffffff !important;
}align-items:center;
justify-content:space-between;
}.planning-sidepanel-title{
font-weight:800;
color:#0f172a;
}.planning-sidepanel-close{
border:1px solid #e2e8f0;
background:#fff;
width:36px;
height:36px;
border-radius:10px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
color:#334155;
}.planning-sidepanel-body{
padding:12px 16px;
overflow:auto;
flex:1;
min-height:0;
}.planning-sidepanel-section-title{
font-size:12px;
font-weight:800;
color:#64748b;
margin:8px 0 10px;
}.planning-sidepanel-item{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
padding:10px 12px;
border:1px solid #eef2f7;
border-radius:12px;
background:#fff;
margin-bottom:10px;
}.planning-sidepanel-item-text{
font-size:13px;
color:#0f172a;
line-height:1.3;
flex:1;
}.planning-sidepanel-item-actions{
display:flex;
gap:6px;
flex:0 0 auto;
}.planning-sidepanel-iconbtn{
width:34px;
height:34px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#fff;
cursor:pointer;
color:#1c77ff;
display:inline-flex;
align-items:center;
justify-content:center;
}.planning-sidepanel-footer{
padding:12px 16px 16px;
border-top:1px solid #eef2f7;
}.planning-sidepanel-input{
width:100%;
border:1px solid #e2e8f0;
border-radius:12px;
padding:12px 12px;
outline:none;
font-size:14px;
background:#f8fafc;
}.planning-sidepanel-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:12px;
}.planning-sidepanel-save{
border:none;
background:#1c77ff;
color:#fff;
border-radius:12px;
padding:10px 16px;
font-weight:800;
cursor:pointer;
opacity:0.95;
}.planning-sidepanel-save:hover{
opacity:1;
}.lesson-topic-empty{
background:#f8fafc;
border:1px solid #e2e8f0;
border-radius:16px;
padding:22px 16px;
text-align:center;
color:#64748b;
}.lesson-topic-empty-icon{
width:56px;
height:56px;
border-radius:18px;
margin:0 auto 12px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(28, 119, 255, 0.12);
color:#1c77ff;
font-size:22px;
}.lesson-topic-empty-title{
font-size:13px;
font-weight:800;
color:#475569;
}.lesson-topic-muted{
color:#94a3b8;
font-size:13px;
padding:8px 0;
font-weight:700;
}.lesson-topic-item{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid #eef2f7;
border-radius:14px;
background:#fff;
margin-bottom:10px;
cursor:pointer;
}.lesson-topic-item:hover{
background:#f8fafc;
}.lesson-topic-item-selected{
cursor:default;
}.lesson-topic-item-selected:hover{
background:#fff;
}.lesson-topic-check{
width:18px;
height:18px;
border-radius:999px;
background:rgba(28, 119, 255, 0.12);
border:1px solid rgba(28, 119, 255, 0.22);
color:#1c77ff;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
flex:0 0 auto;
}.lesson-topic-check.is-empty{
background:#fff;
border:1px solid #cbd5e1;
color:transparent;
}.lesson-topic-text{
font-size:13px;
font-weight:700;
color:#0f172a;
line-height:1.25;
flex:1;
min-width:0;
}.lesson-topic-actions{
flex:0 0 auto;
}.planning-sidepanel-backdrop{
position:fixed;
inset:0;
background:rgba(2, 6, 23, 0.35);
z-index:100040;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity 0.22s ease;
}.planning-sidepanel-backdrop.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}.planning-sidepanel-backdrop.closing{
opacity:0;
visibility:visible;
pointer-events:none;
}.plan-table,
#plan-table{
width:100%;
border-collapse:collapse;
background:#fff;
}.plan-table th,
#plan-table th{
background:#f1f5f9;
color:#334155;
text-transform:uppercase;
font-size:11px;
font-weight:700;
letter-spacing:0.5px;
padding:14px 16px;
text-align:left;
border-bottom:2px solid #e2e8f0;
}.plan-table td,
#plan-table td{
color:#1e293b;
padding:14px 16px;
border-bottom:1px solid #f1f5f9;
font-size:14px;
vertical-align:middle;
}.plan-table tr:last-child td,
#plan-table tr:last-child td{
border-bottom:none;
}.plan-table tr:hover td,
#plan-table tr:hover td{
background:#f8fafc;
}.plan-num{
width:48px;
color:#64748b;
font-weight:600;
}.plan-date{
width:100px;
font-weight:600;
color:#1c77ff;
cursor:pointer;
}.plan-date:hover{
text-decoration:underline;
}.plan-topic{
font-weight:500;
}.plan-hw{
color:#64748b;
font-size:13px;
max-width:280px;
}.plan-actions{
width:90px;
}.plan-actions .action-btn{
margin-right:4px;
}.gb-header-content-wrap #gb-actions{
background:#1c77ff;
flex-shrink:0;
}.gb-wrapper.planning-tab-active #tab-planning{
display:flex !important;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
}.gb-wrapper.planning-tab-active .gb-subbar-header{
display:none !important;
}.gb-wrapper.planning-tab-active .gb-subbar-header #school-year-block,
.gb-wrapper.planning-tab-active .gb-subbar-header .btn-add-column,
.gb-wrapper.planning-tab-active .gb-subbar-header .zoom-wrapper,
.gb-wrapper.planning-tab-active .gb-subbar-header .nav-zoom-box{
display:none !important;
}#gb-actions .btn-primary{
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.2);
color:white;
}#gb-actions .btn-primary:hover{
background:rgba(255, 255, 255, 0.2);
}.gb-content::-webkit-scrollbar{
width:8px;
height:8px;
}.gb-content::-webkit-scrollbar-track{
background:rgba(255, 255, 255, 0.05);
border-radius:4px;
}.gb-content::-webkit-scrollbar-thumb{
background:rgba(255, 255, 255, 0.2);
border-radius:4px;
}.gb-content::-webkit-scrollbar-thumb:hover{
background:rgba(255, 255, 255, 0.3);
}.group-badge{
display:inline-block;
background:rgba(56, 189, 248, 0.2);
color:#7dd3fc;
font-size:9px;
padding:1px 5px;
border-radius:4px;
margin-top:3px;
font-weight:600;
}.grade-with-comment{
position:relative;
background:rgba(59, 130, 246, 0.15) !important;
}.grade-with-comment::after{
content:"рџ’¬";
position:absolute;
top:2px;
right:2px;
font-size:8px;
color:#93c5fd;
}.day-selector{
display:flex;
gap:10px;
margin-bottom:20px;
}.day-pill{
padding:8px 20px;
background:rgba(255, 255, 255, 0.2);
color:white;
border-radius:20px;
font-size:14px;
font-weight:600;
cursor:pointer;
border:1px solid rgba(255, 255, 255, 0.1);
transition:0.2s;
}.day-pill:hover{
background:rgba(255, 255, 255, 0.3);
}.day-pill.active{
background:white;
color:var(--primary-blue);
}.schedule-item{
display:flex;
align-items:flex-start;
gap:20px;
margin-bottom:20px;
position:relative;
}.time-col{
width:100px;
padding-top:24px;
font-size:15px;
font-weight:500;
color:rgba(255, 255, 255, 0.9);
flex-shrink:0;
}.schedule-card{
flex-grow:1;
padding:20px;
border-radius:24px;
border:1px solid rgba(255, 255, 255, 0.1);
transition:transform 0.2s;
position:relative;
min-height:120px;
}.schedule-card.clickable{
cursor:pointer;
position:relative;
}.schedule-card.clickable:hover::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255, 255, 255, 0.1);
border-radius:24px;
}.schedule-card:hover{
transform:translateY(-2px);
}.schedule-card.blue{
background:rgba(255, 255, 255, 0.2);
color:white;
}.schedule-card.white{
background:white;
color:var(--text-dark);
}.schedule-delete{
position:absolute;
top:15px;
right:15px;
color:inherit;
opacity:0.5;
cursor:pointer;
transition:0.2s;
z-index:5;
}.schedule-delete:hover{
opacity:1;
color:var(--danger-red);
}.schedule-edit{
position:absolute;
top:15px;
right:45px;
color:inherit;
opacity:0.5;
cursor:pointer;
transition:0.2s;
z-index:5;
}.schedule-edit:hover{
opacity:1;
color:var(--primary-blue);
}.subst-badge{
position:absolute;
top:10px;
right:45px;
background:var(--warning-yellow);
color:#333;
font-size:10px;
padding:3px 8px;
border-radius:10px;
font-weight:bold;
z-index:5;
}.subst-info{
font-size:11px;
color:var(--warning-yellow);
margin-top:5px;
font-weight:600;
display:flex;
align-items:center;
gap:5px;
}.news-item{
border-left:4px solid var(--primary-blue);
padding-left:16px;
margin-bottom:24px;
}.news-date{
font-size:12px;
color:#888;
margin-bottom:4px;
font-weight:600;
text-transform:uppercase;
}.news-title{
font-size:18px;
font-weight:700;
margin-bottom:8px;
color:#111;
}.news-content{
font-size:14px;
line-height:1.5;
color:#4b5563;
}.settings-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}body.modal-open{
overflow:hidden;
}.modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.4);

z-index:6000;
display:none;
justify-content:center;
align-items:center;
opacity:0;
transition:opacity 0.3s;
pointer-events:none;
}.modal-overlay.open{
display:flex;
opacity:1;
pointer-events:auto;
}.modal-overlay.closing{
display:flex;
opacity:0;
pointer-events:none;
}.modal-window{
background:#ffffff;
width:500px;
max-width:90%;
max-height:90vh;
overflow-y:auto;
border-radius:18px;
padding:26px;
position:relative;
border:1px solid rgba(15, 23, 42, 0.08);
color:var(--text-dark);
transform:translateY(-24px);
opacity:0;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.modal-overlay.open .modal-window{
transform:translateY(0);
opacity:1;
}.modal-overlay.closing .modal-window{
transform:translateY(-24px);
opacity:0;
}#gradebook-view .gb-table thead th.gb-sticky-col,
#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table thead th.gb-sticky-avg,
#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg{
background:#ffffff !important;
background-clip:padding-box;
}#gradebook-view .gb-table thead tr th.gb-sticky-col:first-of-type{
border-radius:8px 0 0 8px;
border:1px solid rgba(229, 231, 235, 0.95) !important;
border-right:none !important;
}#gradebook-view .gb-table tbody tr td.gb-sticky-col:first-of-type{
border-left:1px solid rgba(229, 231, 235, 0.95) !important;
border-right:none !important;
}#gradebook-view .gb-table thead tr th.gb-sticky-avg:last-of-type{
border-radius:0 8px 8px 0;
border:1px solid rgba(229, 231, 235, 0.95) !important;
border-left:none !important;
}#gradebook-view .gb-table tbody tr td.gb-sticky-avg:last-of-type{
border-right:1px solid rgba(229, 231, 235, 0.95) !important;
border-left:none !important;
}#gradebook-view .gb-table thead th.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-col-2{
border-left:none !important;
border-right:1px solid rgba(229, 231, 235, 0.6) !important;
}#gradebook-view .gb-table th.gb-sticky-col,
#gradebook-view .gb-table th.gb-sticky-col-2,
#gradebook-view .gb-table th.gb-sticky-avg{
background-clip:padding-box;
}.modal-overlay.open .grade-popover-win,
.modal-overlay.open .schedule-popover-win{
transform:translateY(0);
opacity:1;
transition:
transform 0.22s ease,
opacity 0.22s ease;
}.modal-overlay .grade-popover-win,
.modal-overlay .schedule-popover-win{
transform:translateY(-18px);
opacity:0;
}.modal-overlay.closing .grade-popover-win,
.modal-overlay.closing .schedule-popover-win{
transform:translateY(-18px);
opacity:0;
}.modal-overlay .modal{
transform:translateY(-24px);
opacity:0;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.modal-overlay.open .modal{
transform:translateY(0);
opacity:1;
}.modal-overlay.closing .modal{
transform:translateY(-24px);
opacity:0;
}.modal-overlay .progress-modal{
transform:translateY(-24px);
opacity:0;
transition:
transform 0.28s ease,
opacity 0.28s ease;
}.modal-overlay.open .progress-modal{
transform:translateY(0);
opacity:1;
}.modal-overlay.closing .progress-modal{
transform:translateY(-24px);
opacity:0;
}.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
margin-bottom:18px;
}.modal-title{
font-size:20px;
font-weight:800;
letter-spacing:-0.01em;
color:#0f172a;
}.close-btn{
background:rgba(15, 23, 42, 0.04);
border:none;
font-size:22px;
cursor:pointer;
color:rgba(15, 23, 42, 0.55);
transition:
background 0.2s,
color 0.2s;
width:36px;
height:36px;
border-radius:999px;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
}.close-btn:hover{
background:rgba(15, 23, 42, 0.08);
color:rgba(15, 23, 42, 0.75);
}.modal-actions{
display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(15, 23, 42, 0.08);
}.modal-window .btn-cancel,
.modal-window .btn-submit{
appearance:none;
border:none;
border-radius:999px;
padding:10px 16px;
font-size:14px;
font-weight:800;
cursor:pointer;
transition:
transform 0.12s ease,
background 0.18s ease,
opacity 0.18s ease;
user-select:none;
}.modal-window .btn-cancel{
background:#f1f5f9;
color:#0f172a;
}.mriia-hw-modal{
width:560px;
max-width:92vw;
}.mriia-hw-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}@media (max-width:560px){
.mriia-hw-grid{
grid-template-columns:1fr;
}}.mriia-hw-filebox{
border:1px dashed rgba(15, 23, 42, 0.18);
background:rgba(28, 119, 255, 0.06);
border-radius:14px;
padding:16px;
width:140px;
min-height:120px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
cursor:pointer;
transition:
background 0.18s ease,
border-color 0.18s ease,
transform 0.12s ease;
user-select:none;
}.mriia-hw-filebox:hover{
background:rgba(28, 119, 255, 0.09);
border-color:rgba(28, 119, 255, 0.35);
transform:translateY(-1px);
}.mriia-hw-fileicon{
width:38px;
height:38px;
border-radius:12px;
background:#ffffff;
border:1px solid rgba(15, 23, 42, 0.08);
display:flex;
align-items:center;
justify-content:center;
color:#1c77ff;
}.mriia-hw-filelabel{
font-size:12px;
font-weight:800;
color:#1c77ff;
text-align:center;
line-height:1.2;
}.modal-window .btn-cancel:hover{
background:#e9eef6;
}.modal-window .btn-submit{
background:var(--primary-blue);
color:#ffffff;
}.modal-window .btn-submit:hover{
}.modal-window .btn-cancel:active,
.modal-window .btn-submit:active{
transform:translateY(1px);
}.modal-window .btn-cancel:focus-visible,
.modal-window .btn-submit:focus-visible{
outline:none;
}.modal-window .btn-submit:disabled,
.modal-window .btn-cancel:disabled{
opacity:0.55;
cursor:not-allowed;
}#toast-container{
position:fixed;
right:18px;
bottom:18px;
z-index:250000;
display:flex;
flex-direction:column;
gap:10px;
pointer-events:none;
}#toast-container .toast{
min-width:280px;
max-width:min(460px, calc(100vw - 40px));
background:#ffffff;
color:#111827;
border-radius:999px;
padding:14px 16px;
border:1px solid rgba(17, 24, 39, 0.1);
transform:translateY(10px);
opacity:0;
visibility:visible;
transition:
transform 0.22s ease,
opacity 0.22s ease;
pointer-events:auto;
}#toast-container .toast.open{
transform:translateY(0);
opacity:1;
}#toast-container .toast-icon{
width:28px;
height:28px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}#toast-container .toast-icon svg{
width:16px;
height:16px;
display:block;
}#toast-container .toast.success .toast-icon{
background:#16a34a;
}#toast-container .toast.error .toast-icon{
background:#111827;
}#toast-container .toast.success .toast-icon svg,
#toast-container .toast.error .toast-icon svg{
color:#ffffff;
}#toast-container .toast-close{
appearance:none;
border:none;
background:transparent;
color:rgba(17, 24, 39, 0.55);
font-size:20px;
line-height:1;
cursor:pointer;
padding:0;
margin-left:6px;
}#toast-container .toast-row{
display:flex;
align-items:flex-start;
gap:10px;
}#toast-container .toast-text{
font-size:16px;
line-height:1.3;
font-weight:600;
flex:1;
white-space:pre-wrap;
word-break:break-word;
}.form-group{
margin-bottom:16px;
}.form-label{
display:block;
font-size:14px;
font-weight:600;
margin-bottom:6px;
color:#374151;
}.form-input,
.form-select,
.form-textarea{
width:100%;
padding:12px;
border:1px solid #e5e7eb;
border-radius:12px;
font-size:14px;
outline:none;
transition:border-color 0.2s;
background:white;
}#notfound-screen{
position:fixed;
inset:0;
background:var(--primary-blue);
color:#fff;
display:none;
z-index:3000;
align-items:center;
justify-content:center;
flex-direction:column;
gap:12px;
}#notfound-screen.open{
display:flex;
}#notfound-screen h2{
font-size:28px;
font-weight:800;
}#notfound-screen p{
font-size:16px;
opacity:0.95;
}#notfound-screen .nf-btn{
margin-top:18px;
padding:12px 20px;
border-radius:12px;
background:#fff;
color:var(--primary-blue);
font-weight:700;
border:none;
cursor:pointer;
}.form-textarea{
resize:vertical;
min-height:80px;
}.form-input:focus,
.form-select:focus{
border-color:var(--primary-blue);
}.grade-circle-wrapper{
width:120px;
height:120px;
border-radius:999px;
border:3px solid var(--primary-blue);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
margin-top:4px;
background:#f9fafb;
}.grade-circle-input{
width:80px;
height:80px;
border-radius:999px;
border:none;
text-align:center;
font-size:32px;
font-weight:700;
outline:none;
background:white;
}.grade-circle-input::placeholder{
font-size:12px;
font-weight:500;
}#modal-grade-edit.modal-overlay{
z-index:200000;
}#modal-grade-edit.open{
background:transparent !important;
backdrop-filter:none !important;
}#modal-grade-edit .grade-popover-win{
border-radius:20px;
overflow:hidden;
border:none;
border-left:4px solid #1c77ff;
padding:0;
display:flex;
flex-direction:column;
max-height:70vh;
}#modal-grade-edit .grade-popover-top{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px 6px 14px;
background:#ffffff;
}#modal-grade-edit .grade-popover-top-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1 1 auto;
}#modal-grade-edit .grade-popover-date{
background:#1c77ff;
color:#ffffff;
font-weight:900;
font-size:12px;
padding:5px 9px;
border-radius:12px;
}#modal-grade-edit .grade-popover-title{
font-weight:900;
font-size:14px;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}#modal-grade-edit .grade-popover-trash{
width:30px;
height:30px;
border-radius:12px;
border:1px solid #fecaca;
background:#ffffff;
color:#ef4444;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}#modal-grade-edit .grade-popover-trash:hover{
background:#fef2f2;
}#modal-grade-edit .grade-popover-close{
width:32px;
height:32px;
border-radius:12px;
border:none;
background:transparent;
color:#0f172a;
font-size:0;
cursor:pointer;
line-height:1;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
}#modal-grade-edit .grade-popover-close::before,
#modal-grade-edit .grade-popover-close::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
border-radius:999px;
background:currentColor;
transform-origin:center;
}#modal-grade-edit .grade-popover-close::before{
transform:translate(-50%, -50%) rotate(45deg);
}#modal-grade-edit .grade-popover-close::after{
transform:translate(-50%, -50%) rotate(-45deg);
}#modal-grade-edit .grade-popover-body{
padding:8px 14px 12px 14px;
background:#f8fafc;
flex:1 1 auto;
overflow-y:auto;
overflow-x:hidden;
}#modal-grade-edit .grade-popover-student{
display:flex;
align-items:center;
gap:12px;
margin-top:6px;
}#modal-grade-edit .grade-popover-avatar{
width:42px;
height:42px;
border-radius:9px;
background:#e5e7eb;
color:#0f172a;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
}#modal-grade-edit .grade-popover-student-name{
font-weight:900;
font-size:15px;
color:#0f172a;
}#modal-grade-edit .grade-popover-gr{
margin-left:auto;
background:#eef2ff;
border:1px solid #d7e5ff;
color:#1c77ff;
font-weight:900;
font-size:12px;
padding:6px 10px;
border-radius:999px;
display:none;
}#modal-grade-edit .grade-popover-circle-wrap{
display:flex;
justify-content:center;
margin:10px 0 8px 0;
}#modal-grade-edit .grade-popover-circle{
width:90px;
height:90px;
border-radius:999px;
background:#f1f5ff;
border:3px solid #d7e5ff;
display:flex;
align-items:center;
justify-content:center;
}#modal-grade-edit .grade-popover-circle-input{
width:52px;
height:82px;
border:none;
outline:none;
background:transparent;
text-align:center;
font-weight:900;
font-size:40px;
color:#0f172a;
}#modal-grade-edit .grade-popover-toggle-row{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin-bottom:12px;
}#modal-grade-edit .grade-popover-toggle-text{
font-weight:800;
color:#334155;
font-size:13px;
}#modal-grade-edit .grade-popover-switch{
position:relative;
display:inline-flex;
width:48px;
height:28px;
}#modal-grade-edit .grade-popover-switch input{
opacity:0;
width:0;
height:0;
}#modal-grade-edit .grade-popover-slider{
position:absolute;
inset:0;
background:#e2e8f0;
border-radius:999px;
transition:all 0.2s;
}#modal-grade-edit .grade-popover-slider:before{
content:"";
position:absolute;
height:22px;
width:22px;
left:3px;
top:3px;
background:white;
border-radius:999px;
transition:all 0.2s;
}#modal-grade-edit .grade-popover-switch input:checked + .grade-popover-slider{
background:#1c77ff;
}#modal-grade-edit
.grade-popover-switch
input:checked
+ .grade-popover-slider:before{
transform:translateX(20px);
}#modal-grade-edit .grade-popover-pills{
display:flex;
justify-content:space-between;
flex-wrap:nowrap;
gap:4px;
align-items:center;
}#modal-grade-edit .grade-popover-pill{
border:1px solid #e2e8f0;
background:#f8fafc;
color:#0f172a;
border-radius:8px;
font-weight:900;
font-size:11px;
height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex:1 1 0;
min-width:0;
padding:0 4px;
box-sizing:border-box;
white-space:nowrap;
}#modal-grade-edit .grade-popover-pill.active{
background:#eaf2ff;
border-color:#bbd7ff;
color:#1c77ff;
}#modal-grade-edit .grade-popover-divider{
height:1px;
background:#e2e8f0;
margin:12px 0;
}#modal-grade-edit .grade-popover-section-title{
font-weight:900;
color:#0f172a;
font-size:13px;
margin-bottom:8px;
text-align:left;
}#modal-grade-edit .grade-popover-work{
display:flex;
justify-content:center;
gap:12px;
}#modal-grade-edit .grade-popover-work-dot{
width:48px;
height:48px;
border-radius:16px;
border:2px solid #d7e5ff;
background:#eef4ff;
cursor:pointer;
}#modal-grade-edit .grade-popover-work-dot.active{
background:#dcebff;
border-color:#9fc2ff;
}#modal-grade-edit .grade-popover-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:7px 4px;
cursor:pointer;
color:#0f172a;
}#modal-grade-edit .grade-popover-row-title{
font-weight:900;
font-size:13px;
}#modal-grade-edit .grade-popover-row-chevron{
font-weight:900;
color:#64748b;
}#modal-grade-edit .grade-popover-textarea{
width:100%;
border-radius:16px;
border:1px solid #e2e8f0;
padding:9px 10px;
font-weight:700;
color:#0f172a;
resize:none;
background:#ffffff;
}#modal-grade-edit .grade-popover-actions{
background:#f8fafc;
padding:8px 12px 12px 12px;
flex:0 0 auto;
}#modal-grade-edit .grade-popover-submit{
width:100%;
height:36px;
border:none;
border-radius:999px;
background:#1c77ff;
color:#fff;
font-weight:900;
font-size:13px;
cursor:pointer;
}#modal-grade-edit .grade-popover-submit.enabled{
filter:none;
opacity:1;
}#modal-grade-edit .grade-popover-submit:not(.enabled){
opacity:0.55;
}#modal-grade-edit .grade-popover-hidden{
display:none;
}#modal-grade-edit .grade-gr-menu{
display:none;
margin-top:10px;
padding:10px;
border-radius:16px;
border:1px solid #e2e8f0;
background:#ffffff;
}#modal-grade-edit .grade-gr-menu.open{
display:block;
}#modal-grade-edit .grade-gr-menu-items{
display:flex;
gap:8px;
flex-wrap:wrap;
}#modal-grade-edit .grade-gr-item{
border:1px solid #e2e8f0;
background:#f8fafc;
color:#0f172a;
padding:7px 11px;
border-radius:999px;
font-weight:900;
font-size:12px;
cursor:pointer;
}#modal-grade-edit #grade-type-select.form-select{
height:28px;
padding-top:4px;
padding-bottom:4px;
font-size:12px;
}#modal-grade-edit .grade-gr-item.active{
background:#eaf2ff;
border-color:#bbd7ff;
color:#1c77ff;
}#modal-schedule-lesson.modal-overlay{
z-index:200000;
}#modal-role-edit.modal-overlay{
z-index:200000;
}#modal-schedule-lesson.open{
background:transparent !important;
backdrop-filter:none !important;
}#modal-schedule-lesson .schedule-popover-win{
border-radius:20px;
overflow:hidden;
border:none;
padding:0;
display:flex;
flex-direction:column;
max-height:70vh;
}#modal-schedule-lesson .schedule-popover-top{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 14px 6px 14px;
background:#ffffff;
}#modal-schedule-lesson .schedule-popover-top-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1 1 auto;
}#modal-schedule-lesson .schedule-popover-date{
background:#1c77ff;
color:#ffffff;
font-weight:900;
font-size:12px;
padding:5px 9px;
border-radius:12px;
}#modal-schedule-lesson .schedule-popover-title{
font-weight:900;
font-size:14px;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}#modal-schedule-lesson .schedule-popover-close{
width:32px;
height:32px;
border-radius:12px;
border:none;
background:transparent;
color:#0f172a;
font-size:0;
cursor:pointer;
line-height:1;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
}#modal-schedule-lesson .schedule-popover-close::before,
#modal-schedule-lesson .schedule-popover-close::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:14px;
height:2px;
border-radius:999px;
background:currentColor;
transform-origin:center;
}#modal-schedule-lesson .schedule-popover-close::before{
transform:translate(-50%, -50%) rotate(45deg);
}#modal-schedule-lesson .schedule-popover-close::after{
transform:translate(-50%, -50%) rotate(-45deg);
}#modal-schedule-lesson .schedule-popover-body{
padding:10px 14px 12px 14px;
background:#ffffff;
flex:1 1 auto;
overflow-y:auto;
}#modal-schedule-lesson .schedule-popover-classline{
font-weight:900;
font-size:18px;
color:#0f172a;
margin-top:2px;
}#modal-schedule-lesson .schedule-popover-subjectline{
font-weight:800;
font-size:14px;
color:#0f172a;
margin-top:8px;
}#modal-schedule-lesson .schedule-popover-linkrow{
display:flex;
align-items:center;
gap:10px;
margin-top:12px;
font-weight:800;
color:#1c77ff;
cursor:pointer;
user-select:none;
}#modal-schedule-lesson .schedule-popover-linkrow i{
width:18px;
min-width:18px;
text-align:center;
}#modal-schedule-lesson .schedule-popover-divider{
height:1px;
border-top:1px dashed #e2e8f0;
margin:14px 0;
}#modal-schedule-lesson .schedule-popover-section-title{
font-weight:900;
color:#0f172a;
font-size:14px;
margin-bottom:8px;
text-align:left;
}#modal-schedule-lesson .schedule-popover-topic{
font-weight:700;
color:#0f172a;
font-size:13px;
line-height:1.25;
}#modal-schedule-lesson .schedule-popover-topic::before{
content:"\2022";
margin-right:8px;
color:#1c77ff;
}#modal-schedule-lesson .schedule-popover-chipwrap{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}#modal-schedule-lesson .schedule-popover-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#0f172a;
font-weight:800;
font-size:12px;
max-width:100%;
}#modal-schedule-lesson .schedule-popover-chip i{
color:#64748b;
}#modal-schedule-lesson .schedule-popover-chip span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}#modal-schedule-lesson .schedule-popover-actions{
background:#ffffff;
padding:10px 14px 14px 14px;
flex:0 0 auto;
}#modal-schedule-lesson .schedule-popover-submit{
width:100%;
height:44px;
border:none;
border-radius:16px;
background:#1c77ff;
color:#fff;
font-weight:900;
font-size:14px;
cursor:pointer;
}#modal-schedule-lesson .schedule-popover-submit:hover{
filter:brightness(0.98);
}@media (max-width:1100px){
.home-shell{
grid-template-columns:1fr;
}.home-side-widgets{
width:100%;
}}.grade-group-pill{
border-radius:999px;
padding:6px 10px;
font-size:12px;
border:1px solid #e5e7eb;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
background:#f9fafb;
}.grade-group-pill input{
margin:0;
}.grade-group-pill.active{
border-color:var(--primary-blue);
background:#eff6ff;
color:var(--primary-blue);
}.auto-star-wrapper{
position:relative;
display:inline-block;
}.auto-star-btn{
position:absolute;
top:2px;
right:2px;
width:18px;
height:18px;
border-radius:6px;
border:1px solid #bfdbfe;
background:#eff6ff;
color:#2563eb;
font-size:11px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}.gb-tall-assessment{
vertical-align:middle;
}.gb-tall-assessment .gb-tall-name{
position:absolute;
top:0;
left:0;
right:0;
bottom:20px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
line-height:1.15;
font-weight:700;
overflow-wrap:anywhere;
padding:2px 3px;
box-sizing:border-box;
}.gb-tall-assessment .auto-star-btn.gb-tall-star{
position:absolute !important;
top:auto !important;
right:auto !important;
bottom:2px !important;
left:50% !important;
transform:translateX(-50%) !important;
}.schedule-view-label{
font-weight:600;
font-size:14px;
}.journal-filters{
margin-bottom:20px;
display:inline-flex;
gap:0;
align-items:center;
padding:0;
padding-left:10px;
background:transparent;
border:none;
border-radius:0;
overflow:visible;
width:auto;
white-space:nowrap;
flex-wrap:nowrap;
}.journal-tab{
font-size:18px;
font-weight:700;
cursor:pointer;
padding:8px 12px;
}.filter-btn{
padding:8px 12px;
height:34px;
min-height:34px;
border-radius:0;
border:none;
background:transparent;
color:white;
cursor:pointer;
font-weight:600;
font-size:18px;
transition:all 0.15s;
outline:none;
display:inline-flex;
align-items:center;
justify-content:center;
}.filter-btn:hover{
background:transparent;
transform:none;
}.filter-btn.active{
background:transparent;
color:white;
text-decoration:underline;
text-underline-offset:8px;
text-decoration-thickness:2px;
}#journals-tabs-wrap{
padding:0 !important;
margin:0 !important;
}.journal-subfilters{
margin-top:0px;
margin-bottom:10px;
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.14);
border-radius:16px;
padding:12px;
display:none;
align-items:center;
gap:12px;
flex-wrap:wrap;
}.journal-subfilters.open{
display:flex;
}.journal-subfilters .jsf-select{
height:40px;
min-width:220px;
padding:0 14px;
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.18);
background:rgba(255, 255, 255, 0.16);
color:#ffffff;
font-weight:800;
outline:none;
appearance:none;
}.journal-subfilters .jsf-select option{
color:#0f172a;
}#journals-class-subfilters{
flex-wrap:nowrap;
width:100%;
background:rgba(255, 255, 255, 0.08);
border:1px solid rgba(255, 255, 255, 0.12);
border-radius:16px;
padding:10px 12px;
gap:12px;
justify-content:flex-start;
}#journals-class-subfilters .jsf-select{
flex:0 0 220px;
width:220px;
max-width:220px;
min-width:220px;
padding:0 12px;
height:34px;
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.12);
font-size:12.5px;
font-weight:800;
}@media (max-width:520px){
#journals-class-subfilters{
flex-wrap:wrap;
}#journals-class-subfilters .jsf-select{
flex:1 1 100%;
width:100%;
max-width:100%;
min-width:0;
}}.parallel-header{
font-size:18px;
font-weight:bold;
margin-top:20px;
margin-bottom:10px;
color:white;
}@keyframes slideIn{
0%{
opacity:0;
transform:translateX(18px) scale(0.995);
}60%{
opacity:0.98;
transform:translateX(-6px) scale(1.002);
}100%{
opacity:1;
transform:translateX(0) scale(1);
}}#sync-indicator{
transition:
background-color 0.3s,
transform 0.3s;
cursor:pointer;
}#sync-indicator:hover{
}.key-status{
display:flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:8px;
font-size:13px;
margin-top:10px;
}.key-status.connected{
background:#d1fae5;
color:#065f46;
border:1px solid #a7f3d0;
}.key-status.disconnected{
background:#fee2e2;
color:#991b1b;
border:1px solid #fecaca;
}.key-status.local{
background:#fef3c7;
color:#92400e;
border:1px solid #fde68a;
}.sync-indicator{
position:fixed;
bottom:20px;
right:20px;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:999;
transition:background-color 0.3s ease, transform 0.3s ease;
}.sync-indicator.connected{
background:#10b981;
color:white;
}.sync-indicator.disconnected{
background:#ef4444;
color:white;
}.sync-indicator.local{
background:#f59e0b;
color:white;
}.sync-indicator.syncing{
background:#3b82f6;
color:white;
animation:pulse 3s ease-in-out infinite;
transform-origin:center center;
will-change:transform, opacity;
}.sync-indicator.raised-for-modal{
bottom:120px;
z-index:16000;
}@keyframes pulse{
0%, 100% {
transform:scale(1);
opacity:1;
}
35% {
transform:scale(1.015);
opacity:1;
}
70% {
transform:scale(1.02);
opacity:1;
}
}.sync-status-message{
position:fixed;
top:20px;
right:20px;
max-width:300px;
z-index:10000;
animation:slideIn 0.3s ease;
}.sync-status-message > div{
background:#3b82f6;
color:white;
padding:12px 16px;
border-radius:8px;
margin-bottom:8px;
display:flex;
justify-content:space-between;
align-items:center;
}.sync-status-message .success{
background:#10b981;
}.sync-status-message .warning{
background:#f59e0b;
}.sync-status-message .error{
background:#ef4444;
}.sync-status-message .info{
background:#3b82f6;
}.bin-test-success{
background:#d1fae5;
color:#065f46;
padding:8px;
border-radius:6px;
margin-top:5px;
font-size:12px;
}.bin-test-warning{
background:#fef3c7;
color:#92400e;
padding:8px;
border-radius:6px;
margin-top:5px;
font-size:12px;
}.bin-test-error{
background:#fee2e2;
color:#991b1b;
padding:8px;
border-radius:6px;
margin-top:5px;
font-size:12px;
}.copy-btn{
background:#f3f4f6;
border:none;
padding:5px 10px;
border-radius:6px;
cursor:pointer;
font-size:12px;
transition:background-color 0.2s;
}.copy-btn:hover{
background:#e5e7eb;
}.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:20px;
margin-top:20px;
}.stats-card{
background:white;
border-radius:16px;
padding:20px;
}.stats-title{
font-size:16px;
font-weight:600;
margin-bottom:15px;
color:#374151;
}.stats-value{
font-size:32px;
font-weight:700;
color:var(--primary-blue);
}.stats-subvalue{
font-size:14px;
color:#6b7280;
margin-top:5px;
}.stats-chart{
height:200px;
margin-top:15px;
}.dash-wrap{
padding:22px;
}.dash-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
flex-wrap:wrap;
padding:18px 22px;
border-bottom:1px solid #e5e7eb;
}.dash-title{
display:flex;
flex-direction:column;
gap:6px;
}.dash-title h3{
margin:0;
font-size:18px;
font-weight:900;
color:#0f172a;
}.dash-title .dash-sub{
font-size:13px;
font-weight:700;
color:#64748b;
}.dash-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}.dash-pill{
padding:8px 12px;
border-radius:999px;
font-size:12px;
font-weight:900;
background:#eff6ff;
color:#1d4ed8;
border:1px solid #dbeafe;
}.dash-grid{
display:grid;
grid-template-columns:repeat(12, 1fr);
gap:16px;
padding:18px 22px 22px;
}.dash-col-12{
grid-column:span 12;
}.dash-col-8{
grid-column:span 8;
}.dash-col-6{
grid-column:span 6;
}.dash-col-4{
grid-column:span 4;
}.dash-col-3{
grid-column:span 3;
}@media (max-width:1100px){
.dash-col-8{
grid-column:span 12;
}.dash-col-6{
grid-column:span 12;
}.dash-col-4{
grid-column:span 12;
}.dash-col-3{
grid-column:span 6;
}}@media (max-width:640px){
.dash-col-3{
grid-column:span 12;
}}.kpi-card{
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
border:1px solid #e5e7eb;
border-radius:18px;
padding:16px;
}.kpi-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}.kpi-label{
font-size:12px;
font-weight:900;
color:#64748b;
text-transform:uppercase;
letter-spacing:0.04em;
}.kpi-icon{
width:34px;
height:34px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:#eff6ff;
color:#1d4ed8;
border:1px solid #dbeafe;
}.kpi-value{
margin-top:10px;
font-size:28px;
font-weight:950;
color:#0f172a;
line-height:1.1;
}.kpi-meta{
margin-top:6px;
font-size:12px;
font-weight:800;
color:#64748b;
display:flex;
gap:10px;
flex-wrap:wrap;
}.kpi-good{
color:#047857;
background:#d1fae5;
border:1px solid #a7f3d0;
padding:4px 10px;
border-radius:999px;
}.kpi-warn{
color:#92400e;
background:#fef3c7;
border:1px solid #fde68a;
padding:4px 10px;
border-radius:999px;
}.kpi-bad{
color:#991b1b;
background:#fee2e2;
border:1px solid #fecaca;
padding:4px 10px;
border-radius:999px;
}.dash-card{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:18px;
overflow:hidden;
}.dash-card-head{
padding:14px 16px;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
border-bottom:1px solid #eef2f7;
background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}.dash-card-title{
font-size:14px;
font-weight:950;
color:#0f172a;
margin:0;
}.dash-card-sub{
font-size:12px;
font-weight:800;
color:#64748b;
margin-top:4px;
}.dash-card-body{
padding:14px 16px;
}.dash-search{
width:min(360px, 100%);
padding:9px 12px;
border-radius:12px;
border:1px solid #e5e7eb;
background:#ffffff;
color:#0f172a;
font-size:13px;
font-weight:800;
outline:none;
}.dash-search:focus{
border-color:#93c5fd;
}.dash-search::placeholder{
color:#94a3b8;
font-weight:800;
}.dash-table-wrap{
overflow:auto;
}.dash-table{
width:100%;
border-collapse:collapse;
min-width:620px;
}.dash-table th{
text-align:left;
padding:12px 12px;
background:#f8fafc;
color:#64748b;
font-size:11px;
text-transform:uppercase;
font-weight:950;
border-bottom:1px solid #e5e7eb;
letter-spacing:0.06em;
position:sticky;
top:0;
z-index:1;
}.dash-table td{
padding:12px 12px;
border-bottom:1px solid #eef2f7;
font-size:13px;
font-weight:800;
color:#0f172a;
}.dash-table tr:hover td{
background:#f8fbff;
}.mini-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 10px;
border-radius:999px;
font-size:12px;
font-weight:900;
border:1px solid #e5e7eb;
background:#ffffff;
color:#0f172a;
white-space:nowrap;
}.mini-dot{
width:8px;
height:8px;
border-radius:999px;
background:#94a3b8;
}.mini-dot.good{
background:#10b981;
}.mini-dot.warn{
background:#f59e0b;
}.mini-dot.bad{
background:#ef4444;
}.svg-chart{
width:100%;
height:auto;
display:block;
}.chart-legend{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:10px;
}.chart-legend .mini-badge{
background:#f8fafc;
}.problem-item{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
padding:12px 12px;
border-radius:14px;
border:1px solid #eef2f7;
background:#ffffff;
}.problem-item + .problem-item{
margin-top:10px;
}.problem-left{
display:flex;
flex-direction:column;
gap:6px;
}.problem-title{
font-size:13px;
font-weight:950;
color:#0f172a;
}.problem-desc{
font-size:12px;
font-weight:800;
color:#64748b;
line-height:1.35;
}.problem-right{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}.problem-priority{
font-size:12px;
font-weight:950;
}.dash-spark{
margin-top:10px;
width:100%;
height:40px;
}.calendar-add-btn{
display:inline-flex;
align-items:center;
gap:8px;
height:34px;
padding:0 16px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.28);
background:rgba(255, 255, 255, 0.16);
color:#fff;
font-weight:700;
font-size:13px;
cursor:pointer;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space:nowrap;
}.calendar-add-btn:hover{
background:rgba(255, 255, 255, 0.26);
border-color:rgba(255, 255, 255, 0.4);
}.calendar-add-btn i{
font-size:12px;
}.calendar-month-header{
display:grid;
grid-template-columns:repeat(7, minmax(150px, 1fr));
gap:0;
margin:0 auto;
max-width:1800px;
padding:0 10px;
border-left:1px solid transparent;
border-right:1px solid transparent;
box-sizing:border-box;
}.calendar-month-header .schedule-header-cell:first-child,
.calendar-month-header .schedule-header-cell:last-child{
border-right:1px solid rgba(15, 23, 42, 0.06);
}.calendar-table-body{
overflow:auto;
max-height:calc(100vh - 195px);
min-height:470px;
}.calendar-month-grid{
display:grid;
grid-template-columns:repeat(7, minmax(150px, 1fr));
grid-auto-rows:minmax(140px, 1fr);
gap:8px;
padding:16px 10px;
background:#fff;
box-sizing:border-box;
}.cal-m-day{
background:#f8fafc;
border:1px solid rgba(15, 23, 42, 0.06);
border-radius:12px;
padding:8px;
min-height:140px;
display:flex;
flex-direction:column;
gap:6px;
cursor:pointer;
position:relative;
box-sizing:border-box;
transition:border-color 0.15s ease;
}.cal-m-day:hover{
border-color:rgba(28, 119, 255, 0.45);
}.cal-m-day.is-empty{
background:transparent;
border-color:transparent;
cursor:default;
}.cal-m-day.is-weekend{
background:#f1f5f9;
}.cal-m-day.is-today{
background:#f0f6ff;
border-color:#1c77ff;
}.cal-m-day-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
}.cal-m-date-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:26px;
height:26px;
padding:0 8px;
border-radius:999px;
font-size:13px;
font-weight:800;
color:#0f172a;
background:transparent;
box-sizing:border-box;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}.cal-m-day.is-today .cal-m-date-pill{
background:#1c77ff;
color:#fff;
}.cal-m-day.is-empty .cal-m-date-pill{
color:rgba(15, 23, 42, 0.3);
}.cal-m-day.is-weekend .cal-m-date-pill{
color:rgba(15, 23, 42, 0.55);
}.cal-m-events{
display:flex;
flex-direction:column;
gap:4px;
overflow:hidden;
flex:1;
min-height:0;
}.cal-m-event{
display:flex;
align-items:center;
gap:6px;
padding:5px 8px;
border-radius:6px;
border-left:3px solid transparent;
font-size:12px;
font-weight:700;
line-height:1.2;
overflow:hidden;
transition:filter 0.15s ease;
flex-shrink:0;
}.cal-m-event:hover{
filter:brightness(0.96);
}.cal-m-event i{
font-size:10px;
flex-shrink:0;
}.cal-m-event-title{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}.cal-m-event.holiday{
background:rgba(16, 185, 129, 0.12);
border-left-color:#10b981;
color:#047857;
}.cal-m-event.meeting{
background:rgba(28, 119, 255, 0.1);
border-left-color:#1c77ff;
color:#1d4ed8;
}.cal-m-event.excursion{
background:rgba(139, 92, 246, 0.12);
border-left-color:#8b5cf6;
color:#6d28d9;
}.cal-m-event.other{
background:rgba(245, 158, 11, 0.14);
border-left-color:#f59e0b;
color:#b45309;
}.cal-m-more{
align-self:flex-start;
font-size:11px;
font-weight:700;
color:rgba(15, 23, 42, 0.55);
padding:2px 8px;
border-radius:999px;
background:rgba(15, 23, 42, 0.05);
cursor:pointer;
transition:background 0.15s ease;
flex-shrink:0;
}.cal-m-more:hover{
background:rgba(28, 119, 255, 0.12);
color:#1c77ff;
}.home-lesson-header{
display:flex;
align-items:center;
gap:12px;
}.home-class-pill{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:22px;
flex:0 0 auto;
}.home-class-pill,
.home-class-pill *{
line-height:22px;
}.home-subject{
.home-group-pill{
background:#e8f1ff;
color:#000;
}
display:block;
line-height:22px;
margin:0;
padding:0;
flex:1 1 auto;
min-width:0;
}@media (max-width:520px){
.home-lesson-header{
gap:8px;
}}@media (max-width:768px){
.calendar-month-header,
.calendar-month-grid{
grid-template-columns:repeat(7, 120px);
}.calendar-table-body{
min-height:300px;
}}.calendar-day-title{
color:#fff;
font-size:28px;
font-weight:500;
line-height:1.15;
padding:4px 6px 12px;
}.calendar-day-controls{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
flex-wrap:wrap;
gap:10px;
}.calendar-day-nav{
display:inline-flex;
gap:4px;
background:rgba(255, 255, 255, 0.15);
border-radius:999px;
padding:4px;
}.calendar-day-table-wrap{
overflow:auto;
background:#fff;
border-radius:12px 12px 0 0;
height:calc(100vh - 155px) !important;
max-height:calc(100vh - 155px) !important;
box-sizing:border-box !important;
}.calendar-day-table{
width:100%;
border-collapse:collapse;
background:#fff;
}.calendar-day-table thead th{
text-align:left;
font-size:11px;
letter-spacing:0.4px;
text-transform:uppercase;
color:#64748b;
font-weight:700;
padding:12px 16px;
border-bottom:1px solid #e2e8f0;
background:#f8fbff;
white-space:nowrap;
}.calendar-day-table tbody td{
padding:14px 16px;
border-bottom:1px solid #eef2f7;
font-size:13px;
color:#0f172a;
vertical-align:top;
}.calendar-day-empty{
text-align:center;
padding:48px 20px;
color:#64748b;
font-size:14px;
}.calendar-day-empty i{
font-size:40px;
margin-bottom:12px;
color:#64748b;
}.calendar-day-footer{
padding:10px 16px;
font-size:12px;
color:#475569;
background:#fff;
border-top:1px solid #e2e8f0;
border-radius:0 0 12px 12px;
}.calendar-day-type-badge{
display:inline-block;
padding:4px 12px;
border-radius:999px;
font-size:12px;
font-weight:700;
white-space:nowrap;
}.calendar-day-type-badge.holiday{background:rgba(16, 185, 129, 0.14);color:#047857}.calendar-day-type-badge.meeting{background:rgba(28, 119, 255, 0.12);color:#1d4ed8}.calendar-day-type-badge.excursion{background:rgba(139, 92, 246, 0.14);color:#6d28d9}.calendar-day-type-badge.other{background:rgba(245, 158, 11, 0.16);color:#b45309}.no-events{
text-align:center;
padding:40px;
color:rgba(255, 255, 255, 0.5);
font-size:16px;
}.calendar-filter{
display:flex;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap;
}.filter-chip{
padding:8px 16px;
border-radius:20px;
background:rgba(255, 255, 255, 0.1);
color:white;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:all 0.2s;
border:1px solid rgba(255, 255, 255, 0.2);
}.filter-chip:hover{
background:rgba(255, 255, 255, 0.2);
}.filter-chip.active{
background:white;
color:var(--primary-blue);
}.schedule-filter-panel{
display:flex;
gap:15px;
margin-bottom:20px;
align-items:center;
flex-wrap:wrap;
padding:20px;
background:rgba(255, 255, 255, 0.1);
border-radius:16px;
border:1px solid rgba(255, 255, 255, 0.2);
}.schedule-filter-panel select{
padding:10px 15px;
border-radius:10px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.15);
color:white;
font-weight:600;
min-width:200px;
cursor:pointer;
outline:none;
}.schedule-filter-panel select option{
background:white;
color:var(--text-dark);
}.schedule-filter-panel button{
padding:10px 20px;
border-radius:10px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.15);
color:white;
font-weight:600;
cursor:pointer;
transition:all 0.2s;
}.schedule-filter-panel button:hover{
background:rgba(255, 255, 255, 0.25);
}#schedule .section-header{
display:none;
}#schedule .section-title{
font-size:26px;
}.schedule-frame{
background:#0f68f8;
border-radius:18px;
padding:6px 12px;
margin-top:-10px;
}#schedule .schedule-frame{
margin-top:-30px;
}.schedule-top-controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:6px;
margin-bottom:6px;
}.schedule-center-controls{
display:flex;
align-items:center;
justify-content:center;
flex:1;
}.schedule-left-controls{
flex:1;
}.schedule-left-controls{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}.schedule-pill{
display:inline-flex;
align-items:center;
gap:8px;
height:34px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.18);
background:rgba(255, 255, 255, 0.1);
color:rgba(255, 255, 255, 0.92);
font-weight:700;
font-size:13px;
cursor:pointer;
user-select:none;
}.schedule-pill.primary{
background:rgba(255, 255, 255, 0.16);
}.schedule-pill.active{
background:rgba(255, 255, 255, 0.92);
color:#1c77ff;
border-color:rgba(255, 255, 255, 0.92);
}.schedule-week-nav{
display:flex;
align-items:center;
gap:8px;
height:34px;
padding:0 10px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.18);
background:rgba(255, 255, 255, 0.1);
color:rgba(255, 255, 255, 0.92);
font-weight:800;
font-size:13px;
}.schedule-week-nav button{
width:26px;
height:26px;
border-radius:8px;
border:none;
background:rgba(255, 255, 255, 0.2);
color:white;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}.schedule-week-label{
white-space:nowrap;
font-weight:800;
}.schedule-week-picker{
position:absolute;
z-index:100000;
width:260px;
background:#1c77ff;
border-radius:14px;
padding:12px;
color:#fff;
display:none;
left:50%;
top:calc(100% + 10px);
transform:translateX(-50%);
}.schedule-week-picker.open{
display:block;
}.schedule-week-picker *{
box-sizing:border-box;
}.schedule-week-picker-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px;
font-weight:900;
}.schedule-week-nav{
position:relative;
}.schedule-week-picker-header button{
width:28px;
height:28px;
border-radius:10px;
border:none;
background:rgba(255, 255, 255, 0.18);
color:#fff;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}.schedule-week-picker-title{
font-size:14px;
letter-spacing:0.2px;
text-transform:none;
}.schedule-week-picker-weekdays{
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:6px;
margin-bottom:8px;
opacity:0.92;
font-size:11px;
font-weight:900;
}.schedule-week-picker-weekdays div{
text-align:center;
}.schedule-week-picker-days{
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:6px;
}.schedule-week-picker-day{
height:30px;
border-radius:10px;
border:none;
background:rgba(255, 255, 255, 0.14);
color:#fff;
font-weight:900;
cursor:pointer;
}.schedule-week-picker-day.is-out{
opacity:0.55;
}.schedule-week-picker-day.is-today{
background:rgba(255, 255, 255, 0.26);
}.schedule-week-picker-day.is-selected{
background:rgba(255, 255, 255, 0.92);
color:#1c77ff;
}.schedule-zoom{
display:inline-flex;
align-items:center;
gap:10px;
}.schedule-zoom .scale-pill{
border:1px solid rgba(255, 255, 255, 0.22);
background:rgba(255, 255, 255, 0.1);
border-radius:999px;
}.schedule-zoom .zoom-option, .schedule-zoom .scale-option{
color:rgba(255, 255, 255, 0.92);
border-radius:999px;
}.schedule-zoom .zoom-option.active, .schedule-zoom .scale-option.active{
background:rgba(255, 255, 255, 0.95);
color:#1c77ff;
border-radius:999px !important;
}.schedule-view-wrap{
position:relative;
}.schedule-view-menu{
position:absolute;
top:calc(100% + 10px);
left:0;
background:#fff;
border:1px solid rgba(15, 23, 42, 0.1);
border-radius:14px;
padding:10px;
min-width:260px;
z-index:9999;
display:none;
}.schedule-view-menu.open{
display:block;
}.schedule-view-menu .menu-row{
display:flex;
gap:10px;
align-items:center;
}#schedule-make-substitution .schedule-frame{
background:#2f73ff;
border-radius:18px;
padding:14px;
}.schedule-view-menu select{
width:100%;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(15, 23, 42, 0.12);
background:#fff;
color:#0f172a;
font-weight:700;
outline:none;
}.schedule-actions{
display:flex;
align-items:center;
gap:10px;
}.schedule-shell{
background:#fff;
border:1px solid rgba(0, 0, 0, 0.05);
border-radius:16px;
overflow:hidden;
}.schedule-table-header{
background:#f8fbff;
border-bottom:1px solid rgba(15, 23, 42, 0.08);
}.schedule-table-header-grid{
display:grid;
grid-template-columns:40px repeat(7, minmax(160px, 1fr));
gap:0;
margin:0 auto;
max-width:1800px;
padding:0 10px;
}.schedule-header-cell{
padding:8px 8px;
border-right:1px solid rgba(15, 23, 42, 0.06);
min-height:52px;
display:flex;
flex-direction:column;
justify-content:center;
}.schedule-header-cell:last-child{
border-right:none;
}.schedule-table-header-grid .schedule-header-cell:first-child{
border-right:none;
padding:0;
}.schedule-today-header-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:calc(100% - 4px);
margin:0 auto;
height:30px;
padding:0;
font-size:10px;
font-weight:800;
color:#1c77ff;
background:#ffffff;
border:1.5px solid #1c77ff;
border-radius:8px;
cursor:pointer;
box-sizing:border-box;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space:nowrap;
}.schedule-today-header-btn:hover{
background:rgba(28, 119, 255, 0.05);
}.schedule-today-header-btn.active{
background:#ffffff;
color:#1c77ff;
border:2px solid #1c77ff;
cursor:default;
}.schedule-day-title{
font-size:12px;
color:rgba(15, 23, 42, 0.7);
font-weight:800;
text-transform:none;
display:flex;
align-items:center;
gap:8px;
}.schedule-date-pill{
display:inline-flex;
align-items:center;
justify-content:center;
height:20px;
padding:0 8px;
border-radius:999px;
background:rgba(28, 119, 255, 0.1);
color:#1c77ff;
font-weight:800;
font-size:12px;
width:max-content;
}.schedule-date-pill.is-today{
background:#1c77ff;
color:white;
}.schedule-table-body{
overflow:auto;
max-height:calc(100vh - 185px);
}@media (min-width:769px){
#schedule .schedule-shell{
margin-left:5px;
margin-right:5px;
width:calc(100% - 10px) !important;
}#journals #journal-filters{
margin-left:-40px;
margin-right:-40px;
}#journals #journals-my-subfilters,
#journals #journals-class-subfilters,
#journals #journals-teachers-subfilters,
#journals #journals-grid-body{
margin-left:-20px;
margin-right:-20px;
}#gradebook-view .gb-tabs-row{
margin-left:-20px;
margin-right:-16px;
}#gradebook-view .gb-admin-journal-subtitle{
margin-left:-5px;
}#class-admin-panel{
margin-left:-20px;
margin-right:-20px;
}}#journals-tab-content #class-admin-panel,
#journals-tab-content #journal-filters,
#journals-tab-content #journals-my-subfilters,
#journals-tab-content #journals-class-subfilters,
#journals-tab-content #journals-teachers-subfilters{

margin-left:-20px !important;
margin-right:-20px !important;
padding-left:0 !important;
padding-right:0 !important;
}#journals-tab-content #class-admin-panel,
#journals-tab-content #journal-filters,
#journals-tab-content #journals-my-subfilters,
#journals-tab-content #journals-class-subfilters,
#journals-tab-content #journals-teachers-subfilters{
margin-left:-20px !important;
margin-right:-20px !important;
margin-top:0 !important;
margin-bottom:0 !important;
padding-left:0 !important;
padding-right:0 !important;
}@media (max-width:768px){
#schedule .schedule-shell{
margin-left:0;
margin-right:0;
}#gradebook-view{
margin-left:0;
margin-right:0;
}#journals #journal-filters,
#journals #journals-my-subfilters,
#journals #journals-teachers-subfilters,
#journals #journals-grid-body{
margin-left:0;
margin-right:0;
}}body.no-global-scroll .main-content{
overflow:hidden !important;
}.schedule-table-body-inner{
transform-origin:top left;
}.schedule-grid{
display:grid;
grid-template-columns:40px repeat(7, minmax(160px, 1fr));
grid-template-rows:repeat(2161, 1px);
gap:0;
position:relative;
background:#fff;
border-radius:16px;
padding:20px 10px;
border:1px solid rgba(0,0,0,0.05);
margin:0 auto;
}.schedule-shell{
margin:0 auto;
width:100%;
max-width:1800px;
background:#fff;
border-radius:16px;
overflow:hidden;
}#schedule.page-section{
margin-left:-17px !important;
margin-right:-17px !important;
width:calc(100% + 34px) !important;
}.schedule-lesson-card{
background:#e9f2ff !important;
border-left:6px solid #2563eb !important;
border-radius:4px;
padding:10px 12px;
margin:0;
display:flex;
flex-direction:column;
justify-content:flex-start;
gap:10px;
font-size:11px;
overflow:hidden;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
cursor:pointer;
z-index:10;
}.schedule-lesson-card:hover{
background:#e0e7ff !important;
}.schedule-lesson-class{
font-size:12px;
font-weight:800;
color:#0f172a;
margin:0;
}.schedule-lesson-subject{
font-size:14px;
font-weight:600;
color:#0f172a;
margin:0;
}.schedule-lesson-teacher{
font-size:14px;
font-weight:600;
color:#0f172a;
display:flex;
align-items:center;
gap:8px;
margin-top:auto;
padding-top:0;
}.schedule-lesson-teacher i{
font-size:16px;
color:#0f172a;
}.schedule-time-label{
grid-column:1;
font-size:11px;
font-weight:600;
color:#94a3b8;
text-align:right;
padding-right:12px;
pointer-events:none;
display:flex;
align-items:center;
justify-content:flex-end;
transform:translateY(-50%);
}.schedule-grid-line{
grid-column:2 / span 7;
border-top:1px dotted #e2e8f0;
z-index:1;
pointer-events:none;
}.schedule-grid-line.hour{
border-top:1px solid #f1f5f9;
}.schedule-header-cell{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:15px 0;
border-bottom:1px solid #f1f5f9;
}.schedule-day-title{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
}.schedule-date-pill{
font-size:13px;
font-weight:700;
color:#475569;
}.schedule-date-pill.is-today{
background:#2563eb;
color:#fff;
padding:2px 8px;
border-radius:99px;
}.schedule-cell{
border-right:1px solid rgba(0,0,0,0.05);
position:relative;

}.schedule-cell:last-child{
border-right:none;
}.schedule-subst-shell{
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.14);
border-radius:16px;
overflow:hidden;
}.schedule-subst-shell{
width:100%;
}.header{
position:relative;
}.header .header-actions{
position:absolute;
right:20px;
top:12px;
display:flex;
gap:8px;
align-items:center;
}#schedule-subst-save-btn{
border:1px solid rgba(255, 255, 255, 0.9);
padding:14px 20px;
font-size:16px;
border-radius:12px;
}.schedule-subst-top{
padding:14px 16px;
background:rgba(255, 255, 255, 0.06);
border-bottom:1px solid rgba(255, 255, 255, 0.12);
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:flex-end;
}.schedule-subst-field{
flex:1 1 220px;
min-width:220px;
}.schedule-subst-field .form-label{
color:rgba(255, 255, 255, 0.85);
}.schedule-subst-field .form-select,
.schedule-subst-field .form-input{
background:rgba(255, 255, 255, 0.12);
color:#fff;
border:1px solid rgba(255, 255, 255, 0.18);
}.schedule-subst-field .form-select option{
color:#000;
}.schedule-subst-body{
padding:14px;
}.schedule-subst-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}@media (max-width:920px){
.schedule-subst-grid{
grid-template-columns:1fr;
}}.schedule-subst-col{
display:flex;
flex-direction:column;
gap:10px;
}.schedule-subst-lesson{
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.08);
border-radius:14px;
padding:12px 12px;
display:flex;
gap:12px;
align-items:center;
min-height:66px;
}.schedule-subst-lesson-pill{
background:#1c77ff;
color:#fff;
font-weight:900;
font-size:12px;
padding:6px 10px;
border-radius:999px;
flex:0 0 auto;
}.schedule-subst-lesson-main{
min-width:0;
}.schedule-subst-lesson-title{
font-weight:900;
font-size:14px;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.schedule-subst-lesson-sub{
margin-top:2px;
font-weight:800;
font-size:12px;
color:rgba(15, 23, 42, 0.7);
}.schedule-subst-slot{
background:rgba(255, 255, 255, 0.1);
border:1px solid rgba(255, 255, 255, 0.16);
border-radius:14px;
padding:12px;
min-height:66px;
display:flex;
align-items:center;
justify-content:center;
color:rgba(255, 255, 255, 0.92);
font-weight:900;
cursor:pointer;
user-select:none;
position:relative;
}.schedule-subst-slot:hover{
background:rgba(255, 255, 255, 0.14);
}.schedule-subst-slot-filled{
justify-content:flex-start;
gap:12px;
cursor:default;
}.schedule-subst-slot-filled{
background:#ffffff;
border:1px solid rgba(28, 119, 255, 0.12);
color:#1c77ff;
}.schedule-subst-slot-filled .schedule-subst-slot-title{
color:#1c77ff;
font-weight:800;
}.schedule-subst-slot-filled .schedule-subst-slot-name{
color:#1c77ff;
}.schedule-subst-slot-filled .schedule-subst-slot-title{
font-weight:900;
font-size:12px;
opacity:0.9;
}.schedule-subst-slot-filled .schedule-subst-slot-name{
font-weight:900;
font-size:14px;
margin-top:2px;
}.schedule-subst-edit{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
border-radius:12px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.1);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}.schedule-subst-edit:hover{
background:rgba(255, 255, 255, 0.16);
}.schedule-time-cell{
padding:8px 8px;
border-right:1px solid rgba(15, 23, 42, 0.06);
border-bottom:1px solid rgba(15, 23, 42, 0.06);
background:#fbfdff;
color:rgba(15, 23, 42, 0.62);
font-weight:800;
font-size:12px;
display:flex;
align-items:flex-start;
justify-content:flex-start;
}.schedule-day-column{
border-right:1px solid rgba(15, 23, 42, 0.06);
background:white;
pointer-events:none;
z-index:0;
}.schedule-day-column.first-day{
border-left:1px solid rgba(15, 23, 42, 0.06);
}.schedule-cell{
padding:0;
cursor:cell;
z-index:5;
transition:background 0.1s ease;
border-bottom:none;
}.schedule-cell:hover{
background:rgba(37, 99, 235, 0.05);
}.schedule-lesson-card{
border-radius:14px;
padding:8px 10px 8px 14px;
border:1px solid rgba(15, 23, 42, 0.08);
cursor:pointer;
display:flex;
flex-direction:column;
gap:6px;
min-height:100%;
height:100%;
box-sizing:border-box;

flex:1 1 100%;
max-width:100%;
position:relative;
overflow:hidden;
background:var(--lesson-bg, #f8fafc);
}.schedule-lesson-card::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:var(--lesson-accent, rgba(15, 23, 42, 0.18));
}.schedule-lesson-card:active{
cursor:grabbing;
}.schedule-lesson-card.is-dragging{
opacity:0.55;
}.schedule-cell.is-drop-target{
outline:2px solid rgba(28, 119, 255, 0.35);
outline-offset:-2px;
}.schedule-cell > .schedule-lesson-card{
flex:1 1 50%;
max-width:50%;
}.schedule-cell:has(> .schedule-lesson-card:only-child) > .schedule-lesson-card{
flex:1 1 100%;
max-width:100%;
}.schedule-lesson-class{
font-weight:900;
font-size:12px;
color:rgba(15, 23, 42, 0.82);
line-height:1.1;
}.schedule-lesson-subject{
font-weight:900;
font-size:14px;
color:rgba(15, 23, 42, 0.92);
line-height:1.15;
}.schedule-lesson-rows{
display:grid;
grid-template-columns:1fr;
gap:6px;
}.schedule-lesson-row{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#0f172a;
font-weight:700;
line-height:1.15;
}.schedule-lesson-row i{
width:14px;
min-width:14px;
text-align:center;
color:#0f172a;
}.schedule-lesson-row .schedule-lesson-text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}.schedule-lesson-row.is-teacher{
align-items:flex-start;
}.schedule-lesson-row.is-teacher .schedule-lesson-text{
overflow:visible;
text-overflow:clip;
white-space:normal;
word-break:break-word;
}.schedule-lesson-card.is-upcoming{
background:rgba(28, 119, 255, 0.92);
border:1px solid rgba(255, 255, 255, 0.18);
color:rgba(255, 255, 255, 0.95);
}.schedule-lesson-card.is-upcoming .schedule-lesson-class,
.schedule-lesson-card.is-upcoming .schedule-lesson-subject,
.schedule-lesson-card.is-upcoming .schedule-lesson-row,
.schedule-lesson-card.is-upcoming .schedule-lesson-text{
color:rgba(255, 255, 255, 0.95);
}.schedule-lesson-card.is-upcoming:hover{
background:rgba(28, 119, 255, 0.98);
}.schedule-lesson-card.is-past{
background:rgba(244, 247, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
color:rgba(15, 23, 42, 0.92);
}.schedule-lesson-card.is-past .schedule-lesson-class,
.schedule-lesson-card.is-past .schedule-lesson-subject,
.schedule-lesson-card.is-past .schedule-lesson-row{
color:rgba(15, 23, 42, 0.92);
}.holiday-message{
background:rgba(16, 185, 129, 0.2);
border:1px solid rgba(16, 185, 129, 0.3);
color:#10b981;
padding:20px;
border-radius:16px;
margin-bottom:20px;
text-align:center;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}.date-clickable{
cursor:pointer;
transition:all 0.2s;
}.date-clickable:hover{
background:rgba(255, 255, 255, 0.2) !important;
transform:scale(1.05);
}.no-schedule-message{
background:rgba(255, 255, 255, 0.1);
border:1px dashed rgba(255, 255, 255, 0.3);
color:rgba(255, 255, 255, 0.7);
padding:30px;
border-radius:16px;
text-align:center;
margin-top:0px;
font-size:16px;
}.no-schedule-image-wrap{
background:transparent;
border:0;
padding:0;
display:flex;
justify-content:center;
align-items:flex-start;
}.no-schedule-image{
width:815px;
max-width:90%;
height:auto;
display:block;
object-fit:contain;
margin-top:-25px;
}.schedule-day{
background:rgba(255, 255, 255, 0.05);
border-radius:16px;
padding:15px 10px;
min-height:100px;
border:1px solid rgba(255, 255, 255, 0.1);
transition:all 0.2s;
color:white;
display:flex;
flex-direction:column;
position:relative;
}.schedule-day:hover{
background:rgba(255, 255, 255, 0.1);
transform:translateY(-2px);
}.schedule-day.holiday{
background:rgba(16, 185, 129, 0.15);
border-color:rgba(16, 185, 129, 0.3);
}.schedule-day-title{
font-weight:600;
font-size:16px;
margin-bottom:10px;
text-align:center;
color:white;
}.schedule-day-lessons{
flex-grow:1;
display:flex;
flex-direction:column;
gap:5px;
}.schedule-lesson-item{
font-size:11px;
padding:5px 8px;
border-radius:8px;
background:rgba(255, 255, 255, 0.1);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}.schedule-lesson-item:hover{
background:rgba(255, 255, 255, 0.2);
}.schedule-bells-panel{
background:rgba(255, 255, 255, 0.1);
border-radius:16px;
padding:20px;
margin-bottom:20px;
border:1px solid rgba(255, 255, 255, 0.2);
}.bells-display{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:15px;
}.bell-time{
background:rgba(255, 255, 255, 0.15);
padding:8px 15px;
border-radius:10px;
font-size:14px;
font-weight:600;
color:#0f172a;
display:flex;
align-items:center;
gap:8px;
}.schedule-frame .bell-time{
color:rgba(255, 255, 255, 0.95);
}.bell-number{
background:var(--primary-blue);
color:white;
width:24px;
height:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
font-weight:700;
}.schedule-frame .bell-number{
background:rgba(255, 255, 255, 0.22);
border:1px solid rgba(255, 255, 255, 0.24);
}.schedule-sync-dropdown{
position:relative;
display:inline-block;
}.schedule-sync-btn{
padding:10px 20px;
border-radius:10px;
border:1px solid rgba(255, 255, 255, 0.2);
background:rgba(255, 255, 255, 0.15);
color:white;
font-weight:600;
cursor:pointer;
transition:all 0.2s;
display:flex;
align-items:center;
gap:8px;
}.schedule-sync-btn:hover{
background:rgba(255, 255, 255, 0.25);
}.schedule-sync-menu{
position:absolute;
top:100%;
left:0;
background:white;
border-radius:10px;
min-width:200px;
z-index:100;
display:none;
overflow:hidden;
}.schedule-sync-menu.show{
display:block;
}.schedule-sync-item{
padding:12px 16px;
color:var(--text-dark);
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
transition:background-color 0.2s;
}.schedule-sync-item:hover{
background:#f5f5f5;
}.bin-status{
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 8px;
border-radius:12px;
font-size:12px;
font-weight:600;
}.bin-status.active{
background:#d1fae5;
color:#065f46;
}.bin-status.inactive{
background:#fee2e2;
color:#991b1b;
}.bin-status.pending{
background:#fef3c7;
color:#92400e;
}.storage-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:15px;
margin:20px 0;
}.storage-stat-card{
background:#f8f9fa;
padding:15px;
border-radius:12px;
border-left:4px solid var(--primary-blue);
}.storage-stat-value{
font-size:24px;
font-weight:700;
color:var(--primary-blue);
margin-bottom:5px;
}.storage-stat-label{
font-size:13px;
color:#666;
}@media (prefers-color-scheme:dark){
.storage-stat-card{
background:rgba(255, 255, 255, 0.1);
color:white;
}.storage-stat-label{
color:rgba(255, 255, 255, 0.7);
}}.subst-badge{
position:absolute;
top:10px;
right:45px;
background:var(--warning-yellow);
color:#333;
font-size:10px;
padding:3px 8px;
border-radius:10px;
font-weight:bold;
z-index:5;
}.status-badge{
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
display:inline-block;
}.status-present{
background:#d1fae5;
color:#065f46;
}.status-absent{
background:#fee2e2;
color:#991b1b;
}.status-late{
background:#fef3c7;
color:#92400e;
}.status-vacation{
background:#dbeafe;
color:#1e40af;
}.report-filters{
display:flex;
gap:15px;
margin-bottom:20px;
flex-wrap:wrap;
padding:20px;
background:rgba(255, 255, 255, 0.1);
border-radius:16px;
border:1px solid rgba(255, 255, 255, 0.2);
}.report-filter-group{
display:flex;
flex-direction:column;
gap:8px;
min-width:200px;
}.report-card{
background:white;
border-radius:16px;
padding:25px;
margin-bottom:20px;
}.report-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
padding-bottom:15px;
border-bottom:2px solid #f0f0f0;
}.report-title{
font-size:20px;
font-weight:700;
color:var(--text-dark);
}.report-meta{
font-size:14px;
color:#666;
}.report-section{
margin-bottom:25px;
}.report-section-title{
font-size:16px;
font-weight:600;
color:var(--primary-blue);
margin-bottom:15px;
padding-bottom:8px;
border-bottom:1px solid #e5e7eb;
}.reports-shell{
border:1px solid rgba(0, 0, 0, 0.06);
}.reports-inner{
padding:18px 18px 10px 18px;
}.reports-breadcrumb{
font-size:12px;
font-weight:700;
color:#6b7280;
margin-bottom:10px;
display:flex;
align-items:center;
gap:8px;
}.reports-breadcrumb-sep{
color:#9ca3af;
font-weight:800;
}.reports-list{
border:1px solid rgba(2, 132, 199, 0.18);
border-radius:14px;
overflow:hidden;
background:rgba(255, 255, 255, 0.92);
}.reports-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 14px;
border-bottom:1px solid rgba(2, 132, 199, 0.14);
}.reports-row:last-child{
border-bottom:none;
}.reports-row-left{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}.reports-doc-icon{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
color:var(--primary-blue);
}.reports-doc-title{
font-size:14px;
font-weight:600;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.reports-generate-btn{
border:1px solid rgba(37, 99, 235, 0.35);
background:rgba(255, 255, 255, 0.95);
color:#2563eb;
border-radius:999px;
padding:7px 12px;
font-weight:700;
font-size:12px;
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
transition:
transform 0.08s ease,
background 0.15s ease,
;
flex:0 0 auto;
}.reports-generate-btn:hover{
background:#eff6ff;
}.reports-generate-btn:active{
transform:translateY(1px);
}.report-metrics .metric-card{
transition:transform 0.2s;
}.report-metrics .metric-card:hover{
transform:translateY(-2px);
}.report-table table{
}.report-table th{
font-weight:600;
text-transform:uppercase;
letter-spacing:0.5px;
}.report-conclusions li{
position:relative;
padding-left:10px;
}.report-conclusions li:before{
content:"•";
position:absolute;
left:0;
color:var(--primary-blue);
}@keyframes fadeInReport{
0%{
opacity:0;
transform:translateY(12px) scale(0.995);
}70%{
opacity:0.98;
transform:translateY(-6px) scale(1.002);
}100%{
opacity:1;
transform:translateY(0) scale(1);
}}#report-preview{
animation:fadeInReport 0.5s ease;
}@media (max-width:768px){
.reports-controls .form-group{
flex:1 0 100%;
}.report-metrics{
grid-template-columns:1fr;
}.report-table{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}}@media (max-width:768px){
.report-filters{
flex-direction:column;
}.report-filter-group{
width:100%;
}.report-card{
padding:15px;
}}@media (min-width:769px){
#home-schedule-container{
margin-left:-12px;
width:calc(100% + 12px);
}}@media (max-width:768px){
#home-schedule-container{
margin-left:0;
width:100%;
}}.home-lesson-item{
display:flex;
gap:65px;
margin-bottom:0;
}.home-time{
width:100px;
flex-shrink:0;
padding-top:6px;
font-size:13px;
opacity:1;
color:#ffffff;
font-weight:800;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
}#home-schedule-container .home-time{
padding-left:10px;
}.home-lesson-card{
flex:1;
background:rgba(255, 255, 255, 0.08);
border:1px solid rgba(255, 255, 255, 0.12);
border-radius:16px;
padding:20px;
transition:all 0.2s;
}.home-lesson-card.is-past,
.home-lesson-card.is-active{
background:rgba(244, 247, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
}.home-lesson-card.is-upcoming{
background:rgba(59, 130, 246, 0.55);
border:1px solid rgba(255, 255, 255, 0.22);
}.home-lesson-card:hover{
background:rgba(255, 255, 255, 0.12);
transform:translateY(-2px);
}.home-lesson-card.is-past:hover,
.home-lesson-card.is-active:hover{
background:rgba(255, 255, 255, 0.96);
}.home-lesson-card.is-upcoming:hover{
background:rgba(59, 130, 246, 0.62);
}.home-class-pill{
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255, 255, 255, 0.92);
color:#0f172a;
padding:6px 12px;
border-radius:999px;
font-size:12px;
font-weight:700;
margin-bottom:0;
margin-right:12px;
border:1px solid rgba(0, 0, 0, 0.04);
vertical-align:middle;
}.home-lesson-card.is-upcoming .home-class-pill{
background:rgba(255, 255, 255, 0.92);
border-color:rgba(255, 255, 255, 0.55);
}.home-subject{
font-size:16px;
font-weight:700;
color:white;
margin-bottom:4px;
}.home-lesson-card.is-past .home-subject,
.home-lesson-card.is-active .home-subject{
color:#0f172a;
}.home-lesson-details{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin-top:10px;
}.home-lesson-details{
display:none !important;
}#home-schedule-container .home-lesson-details{
display:grid !important;
}#home-schedule-container .home-lesson-card{
padding:22px 22px;
border-radius:12px;
display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
column-gap:14px;
row-gap:18px;
position:relative;
}#home-schedule-container .home-lesson-card.is-active{
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
}#home-schedule-container .home-lesson-card.is-upcoming{
background:rgba(28, 119, 255, 0.92);
border:1px solid rgba(255, 255, 255, 0.18);
}#home-schedule-container .home-lesson-card.is-past{
background:rgba(255, 255, 255, 0.96);
border:1px solid rgba(15, 23, 42, 0.1);
}#home-schedule-container .home-lesson-card.is-upcoming .home-subject{
color:rgba(255, 255, 255, 0.98);
}#home-schedule-container .home-lesson-card.is-past .home-subject,
#home-schedule-container .home-lesson-card.is-active .home-subject{
color:#0f172a;
}#home-schedule-container .home-lesson-card.is-upcoming .home-room-number{
color:rgba(255, 255, 255, 0.85);
}#home-schedule-container .home-lesson-card.is-active .home-room-number,
#home-schedule-container .home-lesson-card.is-past .home-room-number{
color:rgba(15, 23, 42, 0.72);
}#home-schedule-container .home-room-number{
font-size:12.5px;
font-weight:800;
text-align:right;
align-self:end;
justify-self:end;
grid-column:2;
grid-row:2;
}#home-schedule-container .home-lesson-icon{
grid-column:2;
justify-self:end;
align-self:start;
width:44px;
height:44px;
border-radius:18px;
background:rgba(255, 255, 255, 0.18);
display:none;
align-items:center;
justify-content:center;
color:rgba(255, 255, 255, 0.95);
}#home-schedule-container .home-lesson-card.is-past .home-lesson-icon,
#home-schedule-container .home-lesson-card.is-active .home-lesson-icon{
background:rgba(28, 119, 255, 0.1);
color:rgba(28, 119, 255, 0.85);
}#home-schedule-container .home-lesson-details{
gap:14px;
grid-row:2;
margin-top:0;
}#home-schedule-container .home-lesson-details .home-detail-block:first-child{
padding-bottom:12px;
border-bottom:1px solid rgba(15, 23, 42, 0.1);
}#home-schedule-container
.home-lesson-card.is-upcoming
.home-lesson-details
.home-detail-block:first-child{
border-bottom-color:rgba(255, 255, 255, 0.28);
}#home-schedule-container .home-detail-label{
font-size:14px;
font-weight:900;
}#home-schedule-container .home-detail-text{
font-size:12.5px;
font-weight:800;
}#home-schedule-container .home-lesson-header{
display:flex;
align-items:center;
gap:12px;
}#home-schedule-container .home-lesson-header .home-subject{
margin-bottom:0;
align-self:center;
}#home-schedule-container .home-lesson-header{
align-items:center;
}#home-schedule-container .home-subject{
line-height:1.2;
}#home-schedule-container .home-lesson-header .home-class-pill,
#home-schedule-container .home-lesson-header .home-subject{
display:inline-flex;
align-items:center;
vertical-align:middle;
margin-bottom:0 !important;
line-height:1.2 !important;
}#home-schedule-container .home-class-pill{
padding:4.5px 10px;
font-size:12px;
font-weight:700;
border-radius:999px;
line-height:1;
transform:none;
border:1px solid rgba(0, 0, 0, 0.04);
background:rgba(255, 255, 255, 0.92);
color:#0f172a;
}#home-schedule-container .home-lesson-card.is-active .home-class-pill,
#home-schedule-container .home-lesson-card.is-past .home-class-pill{
background:#1c77ff;
color:#ffffff;
border-color:rgba(255, 255, 255, 0);
}#home-schedule-container .home-room-number{
white-space:nowrap;
}#home-schedule-container .home-lesson-card.is-past .home-room-number,
#home-schedule-container .home-lesson-card.is-active .home-room-number{
color:#0f172a;
}#home-schedule-container .home-lesson-card.is-upcoming .home-room-number{
color:rgba(255, 255, 255, 0.95);
}.home-detail-block{
display:flex;
flex-direction:column;
gap:2px;
}.home-detail-label{
font-size:13.5px;
font-weight:800;
color:var(--primary-blue);
}.home-detail-text{
font-size:16px;
font-weight:700;
color:#0f172a;
}.home-lesson-card.is-upcoming .home-detail-label,
.home-lesson-card.is-upcoming .home-detail-text{
color:rgba(255, 255, 255, 0.95);
}.home-lesson-card .home-lesson-details::before{
content:"";
display:block;
height:1px;
width:100%;
background:rgba(15, 23, 42, 0.1);
margin-bottom:4px;
}.home-lesson-card.is-upcoming .home-lesson-details::before{
background:rgba(255, 255, 255, 0.28);
}#home-schedule-container .home-lesson-details::before{
content:none;
display:none;
height:0;
margin:0;
background:transparent;
}.home-room-number{
position:absolute;
bottom:20px;
right:20px;
font-size:18px;
font-weight:700;
color:rgba(255, 255, 255, 0.5);
}.home-lesson-card.is-past .home-room-number,
.home-lesson-card.is-active .home-room-number{
color:rgba(15, 23, 42, 0.55);
}.home-lesson-card{
position:relative;
}.main-content.lesson-day-mode-active{
background:#1c77ff !important;
}.main-content.lesson-day-mode-active #header-bottom{
display:none !important;
}.main-content.lesson-day-mode-active #header-top{
color:#ffffff !important;
display:flex;
justify-content:flex-start;
align-items:flex-start;
gap:1.8px;
width:100%;
}.lesson-day-view{
display:none;
position:relative;
inset:auto;
z-index:auto;
background:transparent;
overflow:visible;
padding:0;
}#lesson-day-view{
box-sizing:border-box;
margin-left:-17px !important;
margin-right:-17px !important;
width:calc(100% + 34px) !important;
}#lesson-day-view .lesson-day-topbar,
#lesson-day-view .lesson-day-board{
margin-left:20px;
margin-right:20px;
}#lesson-day-view .lesson-day-tabs,
#lesson-day-view .lesson-day-breadcrumbs{
margin-left:20px;
}.lesson-day-breadcrumbs{
display:flex;
align-items:center;
gap:0;
color:rgba(255, 255, 255, 0.92);
font-weight:800;
font-size:18px;
margin-bottom:8px;
line-height:1.1;
}#gradebook-view.lesson-day-mode .lesson-day-breadcrumbs{
display:none;
}.lesson-day-breadcrumbs .crumb-dim{
color:rgba(255, 255, 255, 0.78);
font-weight:800;
margin-left:0;
margin-right:8px;
}.lesson-day-topbar{
background:rgba(255, 255, 255, 0.96);
border:none;
border-radius:16px;
padding:16px 24px;
}.lesson-day-topbar-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
width:100%;
}.lesson-day-meta{
display:flex;
gap:48px;
align-items:center;
flex-grow:1;
min-width:0;
}.lesson-day-meta .meta-col{
display:flex;
flex-direction:column;
min-width:0;
}.lesson-day-meta .meta-col:nth-child(3){
flex-grow:1;
}.lesson-day-right-side{
display:flex;
align-items:center;
gap:24px;
flex-shrink:0;
}.lesson-day-right-side .meta-col{
display:flex;
flex-direction:column;
min-width:0;
}.lesson-day-meta .meta-label,
.lesson-day-right-side .meta-label{
font-size:11px;
color:var(--primary-blue);
font-weight:800;
text-transform:none;
letter-spacing:0.4px;
margin-bottom:4px;
}.lesson-day-meta .meta-value,
.lesson-day-right-side .meta-value{
font-size:13px;
font-weight:900;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.lesson-day-actions{
display:flex;
align-items:center;
gap:10px;
flex-shrink:0;
}.lesson-day-open-journal{
background:rgba(28, 119, 255, 0.1);
color:#1c77ff;
border:1px solid rgba(28, 119, 255, 0.18);
border-radius:999px;
padding:10px 14px;
font-weight:900;
cursor:pointer;
}.lesson-day-open-journal:hover{
background:rgba(28, 119, 255, 0.14);
}.lesson-day-header-open-journal{
background:rgba(255, 255, 255, 0.18);
color:#ffffff;
border:1px solid rgba(255, 255, 255, 0.28);
border-radius:999px;
padding:8px 12px;
font-weight:900;
cursor:pointer;
margin-left:12px;
white-space:nowrap;
}.lesson-day-header-open-journal:hover{
background:rgba(255, 255, 255, 0.24);
}.lesson-day-header-flex{
display:flex;
align-items:center;
gap:0;
width:100%;
}.lesson-day-header-spacer{
flex:1 1 auto;
}.lesson-day-breadcrumbs-link{
cursor:pointer;
text-decoration:none !important;
}.no-underline-link{
text-decoration:none !important;
}.header-crumb-sep{
display:inline-block;
margin:0 12px;
color:rgba(255, 255, 255, 0.6);
line-height:1;
vertical-align:middle;
white-space:nowrap;
}.header-crumb-highlight{
color:#d1d5db !important;
}.header-crumb-highlight i,
.header-crumb-highlight .fa,
.header-crumb-highlight .fa-*{
color:#d1d5db !important;
}.header-crumb-sep.header-crumb-highlight{
color:#d1d5db !important;
}.lesson-day-header-flex{
min-height:22px;
flex-wrap:nowrap;
white-space:nowrap;
}.lesson-format-row{
display:inline-flex;
align-items:center;
gap:8px;
min-width:0;
}.lesson-format-value{
font-weight:900;
font-size:13px;
color:#0f172a;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.lesson-format-pencil{
width:30px;
height:30px;
border-radius:12px;
border:1px solid rgba(28, 119, 255, 0.18);
background:rgba(28, 119, 255, 0.1);
color:#1c77ff;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}.lesson-format-pencil:hover{
background:rgba(28, 119, 255, 0.14);
}.lesson-format-menu{
display:none;
position:absolute;
right:0;
top:calc(100% + 8px);
z-index:100;
background:#ffffff;
border-radius:12px;
border:1px solid rgba(15, 23, 42, 0.08);
padding:8px;
min-width:130px;
}.lesson-format-menu.open{
display:block !important;
}.lesson-format-switch{
display:flex;
flex-direction:column;
gap:4px;
}.lesson-format-btn{
border:none;
background:transparent;
color:#334155;
font-weight:700;
font-size:13px;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
line-height:1.2;
text-align:left;
transition:background 0.15s, color 0.15s;
}.lesson-format-btn:hover{
background:rgba(28, 119, 255, 0.06);
color:#1c77ff;
}.lesson-format-btn.active{
background:#1c77ff;
color:#ffffff;
}.lesson-format-btn:focus{
outline:none;
}.lesson-day-link-top-btn{
background:transparent;
border:none;
color:#1c77ff;
font-weight:800;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
padding:8px 12px;
border-radius:999px;
transition:background 0.2s;
}.lesson-day-link-top-btn:hover{
background:rgba(28, 119, 255, 0.08);
}.three-dot-btn-circle{
width:32px;
height:32px;
border-radius:50%;
background:#1c77ff;
color:#fff;
border:none;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
}.three-dot-btn-circle:hover{
opacity:0.9;
}.lesson-day-tabs{
margin-top:10px;
}.lesson-day-tabs .gb-tabs{
display:inline-flex;
background:rgba(255, 255, 255, 0.16);
border-radius:999px;
padding:0;
gap:0;
align-items:stretch;
border:1px solid rgba(255, 255, 255, 0.08);
overflow:hidden;
}.lesson-day-tabs .gb-tab{
color:rgba(255, 255, 255, 0.85);
border-radius:999px;
padding:12px 12px;
font-weight:600;
font-size:13.5px;
line-height:1.2;
cursor:pointer;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
text-decoration:none !important;
display:flex;
align-items:center;
}.lesson-day-tabs .gb-tab:hover{
color:#ffffff;
background:rgba(255, 255, 255, 0.08);
text-decoration:none !important;
}.lesson-day-tabs .gb-tab.active{
background:#ffffff !important;
color:#1c77ff !important;
text-decoration:none !important;
}.lesson-day-board{
margin-top:14px;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}.lesson-day-board.details-grid{
grid-template-areas:
"topics activities"
"notes materials";
align-items:stretch;
}.lesson-day-area-topics{
grid-area:topics;
}.lesson-day-area-activities{
grid-area:activities;
}.lesson-day-area-notes{
grid-area:notes;
}.lesson-day-area-materials{
grid-area:materials;
}.lesson-day-section-title{
font-size:18px;
font-weight:700;
color:#ffffff;
margin:0 0 16px 4px;
}.lesson-day-box{
border-radius:16px;
border:1px solid rgba(255, 255, 255, 0.2);
background:transparent;
padding:0;
min-height:220px;
display:flex;
flex-direction:column;
}.lesson-day-box.is-large{

}.lesson-day-box-inner{
flex:1;
border-radius:16px;
border:none;
background:transparent;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:24px;
padding:30px 20px;
}.lesson-day-box-text{
text-align:center;
color:#ffffff;
font-weight:700;
font-size:15px;
opacity:0.95;
line-height:1.4;
max-width:520px;
}.lesson-day-white-card{
background:#ffffff;
border:none;
border-radius:16px;
overflow:hidden;
display:flex;
flex-direction:column;
padding:0;
min-height:auto;
}.lesson-day-topic-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:24px 20px;
cursor:pointer;
width:100%;
gap:16px;
}.lesson-day-topic-content{
display:flex;
align-items:center;
gap:12px;
flex:1;
min-width:0;
}.lesson-day-topic-bullet{
color:#1c77ff;
font-size:24px;
line-height:1;
flex-shrink:0;
}.lesson-day-topic-text-main{
font-size:15px;
font-weight:800;
color:#0f172a;
line-height:1.4;
overflow:hidden;
text-overflow:ellipsis;
}.lesson-day-topic-expand{
color:#1c77ff;
font-weight:800;
font-size:13px;
white-space:nowrap;
display:flex;
align-items:center;
flex-shrink:0;
cursor:pointer;
}.lesson-day-topic-expand:hover{
text-decoration:underline;
}.lesson-day-white-card-head{
padding:24px 20px 0;
}.lesson-day-white-card-title{
font-size:18px;
font-weight:800;
color:#0f172a;
}.lesson-day-white-card-body{
padding:20px;
width:100%;
}#lesson-day-topic-text{
background:#ffffff;
color:#0f172a !important;
font-weight:800;
padding:14px 16px;
border-radius:14px;
width:100%;
text-align:left;
display:inline-flex;
align-items:center;
gap:12px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}#lesson-day-topic-text::before{
content:"•";
margin-right:8px;
color:#1c77ff;
font-size:18px;
line-height:1;
flex:0 0 auto;
}#lesson-day-topic-text[data-state="short"]{
white-space:nowrap;
}#lesson-day-topic-text[data-state="full"]{
white-space:normal;
}.lesson-day-white-card-body .lesson-day-link-btn{
min-width:auto;
padding:10px 14px;
border-radius:999px;
}#lesson-day-view button,
#lesson-day-view .lesson-day-link-btn,
#lesson-day-view .lesson-day-pill-btn,
#lesson-day-view .lesson-day-card-btn,
#lesson-day-view .lesson-day-icon-btn,
#lesson-day-view .planning-sidepanel-save,
#lesson-day-view .planning-sidepanel-close{
border-radius:999px !important;
}.lesson-day-topic-white-text{
color:#ffffff;
font-weight:700;
margin-bottom:24px;
font-size:15px;
line-height:1.4;
opacity:0.95;
}.lesson-day-col-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:14px 0;
border-top:1px dashed rgba(15, 23, 42, 0.2);
}.lesson-day-col-row:first-child{
border-top:0;
}.lesson-day-col-row-title{
font-weight:800;
color:#0f172a;
font-size:13px;
}.lesson-day-col-row-sub{
margin-top:6px;
font-weight:700;
font-size:12px;
color:rgba(15, 23, 42, 0.7);
}.lesson-day-icon-btn{
width:34px;
height:34px;
border:none;
background:transparent;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:rgba(15, 23, 42, 0.5);
font-size:14px;
transition:color 0.2s;
}.lesson-day-icon-btn:hover{
color:rgba(15, 23, 42, 0.9);
background:transparent;
}.lesson-day-add-link{
margin-top:10px;
display:inline-flex;
align-items:center;
gap:10px;
color:rgba(28, 119, 255, 0.95);
font-weight:900;
cursor:pointer;
user-select:none;
}.lesson-day-add-link:hover{
text-decoration:underline;
}.lesson-day-add-dot{
width:18px;
height:18px;
border-radius:50%;
background:rgba(28, 119, 255, 0.12);
border:1px solid rgba(28, 119, 255, 0.2);
display:inline-flex;
align-items:center;
justify-content:center;
color:#1c77ff;
font-size:10px;
}.lesson-day-panel{
background:rgba(255, 255, 255, 0.96);
border:none;
}.lesson-day-panel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}.lesson-day-panel-title{
font-weight:900;
color:#0f172a;
font-size:14px;
}.lesson-day-panel-action{
background:rgba(28, 119, 255, 0.1);
color:#1c77ff;
border:1px solid rgba(28, 119, 255, 0.18);
border-radius:999px;
padding:8px 12px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
}.lesson-day-panel-action:hover{
background:rgba(28, 119, 255, 0.14);
}.lesson-day-panel-body{
margin-top:8px;
}.lesson-day-empty-center{
text-align:center;
color:rgba(15, 23, 42, 0.7);
font-weight:800;
font-size:12px;
line-height:1.35;
padding:14px 10px;
border-radius:14px;
background:rgba(15, 23, 42, 0.03);
border:none;
}.lesson-day-card-blue{
background:rgba(255, 255, 255, 0.14);
border:1px solid rgba(255, 255, 255, 0.18);
}.lesson-day-empty-wrap{
margin-top:6px;
}.lesson-day-empty-text{
text-align:center;
}.lesson-day-pill-btn{
display:inline-flex;
align-items:center;
gap:12px;
background:#ffffff;
color:#1c77ff;
border:none;
padding:12px 24px;
border-radius:999px;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:opacity 0.2s;
}.lesson-day-pill-btn:hover{
opacity:0.9;
}.lesson-day-pill-ico{
width:20px;
height:20px;
border-radius:50%;
background:#1c77ff;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
margin-left:4px;
}.lesson-day-link-btn{
display:inline-flex;
align-items:center;
gap:12px;
background:#ffffff;
color:#1c77ff;
border:none;
padding:12px 24px;
border-radius:999px;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:opacity 0.2s;
}.lesson-day-link-btn:hover{
opacity:0.9;
}.lesson-day-card{
background:rgba(255, 255, 255, 0.14);
border:none;
border-radius:16px;
padding:14px;
min-height:170px;
display:flex;
flex-direction:column;
gap:10px;
}.lesson-day-card.white{
background:rgba(255, 255, 255, 0.96);
border:none;
}.lesson-day-card-title{
font-weight:900;
color:#0f172a;
font-size:14px;
}.lesson-day-card:not(.white) .lesson-day-card-title{
color:rgba(255, 255, 255, 0.92);
}.lesson-day-card-empty{
color:rgba(255, 255, 255, 0.86);
font-weight:800;
font-size:12px;
line-height:1.35;
}.lesson-day-card.white .lesson-day-card-empty{
color:#0f172a;
}.lesson-day-card-btn{
background:rgba(255, 255, 255, 0.96);
color:#0f172a;
border:1px solid rgba(15, 23, 42, 0.1);
border-radius:999px;
padding:10px 14px;
font-weight:900;
cursor:pointer;
}.lesson-day-card-btn:hover{
background:#ffffff;
}@media (max-width:980px){
.lesson-day-meta{
grid-template-columns:1fr 1fr;
}.lesson-day-board{
grid-template-columns:1fr;
}.lesson-day-board.details-grid{
grid-template-areas:"topics" "activities" "notes" "materials";
}}.scale-option.active{
background:#ffffff !important;
color:var(--primary-blue) !important;
}.button-mriya{
background:linear-gradient(135deg, #82a9ff 0%, #4b81ff 100%);
color:white;
padding:15px 40px;
border-radius:50px;
border:1px solid rgba(255, 255, 255, 0.4);
font-family:sans-serif;
font-weight:bold;

}.present-pill{
display:inline-block;
width:18px;
height:10px;
border-radius:999px;
background:var(--primary-blue);
vertical-align:middle;
}.quick-oval{
position:absolute;
width:32px;
height:16px;
border-radius:999px;
background:var(--primary-blue);
opacity:0;
transform:scale(0.6);
transition:
opacity 220ms ease,
transform 220ms ease;
z-index:9999;
pointer-events:none;
}.toast-bottom-right{
position:fixed;
right:18px;
bottom:18px;
z-index:12010;
display:flex;
gap:8px;
align-items:center;
padding:10px 14px;
background:rgba(255, 255, 255, 0.98);
border-radius:999px;
color:#0f172a;
font-weight:700;
min-width:220px;
}.toast-success-badge{
background:#10b981;
color:white;
width:36px;
height:36px;
border-radius:50%;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:18px;
}.attendance-bubbles{
display:flex;
gap:12px;
align-items:center;
justify-content:center;
}.attendance-bubble{
padding:12px 18px;
border-radius:999px;
background:#f3f4f6;
cursor:pointer;
font-weight:800;
border:1px solid transparent;
}.attendance-bubble:hover{
background:#e6f0ff;
border-color:rgba(28, 119, 255, 0.12);
}.attendance-new-modal{
width:600px;
max-width:95vw;
border-radius:24px;
overflow:hidden;
background:#fff;
display:flex;
flex-direction:column;
}.attendance-new-header{
padding:24px 32px;
display:flex;
justify-content:space-between;
align-items:flex-start;
}.attendance-new-user-info{
display:flex;
gap:16px;
align-items:center;
}.attendance-new-avatar{
width:48px;
height:48px;
background:#f3f4f6;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:#4b5563;
font-size:16px;
}.attendance-new-name{
font-size:20px;
font-weight:600;
color:#111827;
}.attendance-new-date{
font-size:14px;
color:#6b7280;
margin-top:2px;
}.attendance-new-close{
cursor:pointer;
font-size:24px;
color:#374151;
line-height:1;
padding:4px;
}.attendance-new-table{
width:100%;
border-collapse:collapse;
}.attendance-new-table th{
text-align:left;
padding:12px 16px;
font-size:13px;
font-weight:600;
color:#374151;
border-bottom:1px solid #e5e7eb;
background:#fff;
}.attendance-new-table td{
padding:16px;
border-bottom:1px solid #f3f4f6;
font-size:14px;
color:#374151;
}.attendance-new-table tr:last-child td{
border-bottom:none;
}.attendance-new-table .reason-col{
width:40%;
}.attendance-new-table .status-col{
width:20%;
text-align:center;
}.attendance-new-table .status-col th{
text-align:center;
}.attendance-new-row-all{
background:#f0f7ff;
}.attendance-new-cell-action{
cursor:pointer;
height:40px;
display:flex;
align-items:center;
justify-content:center;
transition:background 0.2s;
border-radius:4px;
}.attendance-new-cell-action:hover{
background:#f3f4f6;
}.attendance-new-cell-action.active-n{
color:#fff;
}.attendance-new-mark-circle{
width:28px;
height:28px;
border-radius:50%;
background:#1c77ff;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:13px;
}.attendance-new-footer{
padding:24px 32px 32px;
display:flex;
justify-content:center;
}.attendance-new-btn-submit{
background:#1c77ff;
color:#fff;
border:none;
border-radius:999px;
padding:14px 60px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:opacity 0.2s;
}.attendance-new-btn-submit:hover{
opacity:0.9;
}#gradebook-view .gb-table thead th{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table thead th.gb-subtype-header{
position:relative !important;
}#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(1) th.gb-avg-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-col-2,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-sticky-avg,
#gradebook-view .gb-table thead tr:nth-child(2) th.gb-avg-col{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table .gb-sticky-col,
#gradebook-view .gb-table .gb-sticky-col-2,
#gradebook-view .gb-table .gb-sticky-avg,
#gradebook-view .gb-table .gb-avg-col{
position:static !important;
left:auto !important;
top:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg,
#gradebook-view .gb-table tbody td.gb-avg-col{
position:static !important;
left:auto !important;
top:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table th.gb-sticky-col.fixed,
#gradebook-view .gb-table th.gb-sticky-col-2.fixed,
#gradebook-view .gb-table th.gb-sticky-avg.fixed,
#gradebook-view .gb-table td.gb-sticky-col.fixed,
#gradebook-view .gb-table td.gb-sticky-col-2.fixed,
#gradebook-view .gb-table td.gb-sticky-avg.fixed{
position:static !important;
top:auto !important;
left:auto !important;
z-index:auto !important;
}#gradebook-view .gb-table thead th,
#gradebook-view .gb-table tbody td.gb-sticky-col,
#gradebook-view .gb-table tbody td.gb-sticky-col-2,
#gradebook-view .gb-table tbody td.gb-sticky-avg{
-webkit-transform:none !important;
transform:none !important;
will-change:auto !important;
backface-visibility:visible !important;
}#gradebook-view #gb-table thead th.gb-tall-assessment:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col),
#gradebook-view .gb-table thead th.gb-tall-assessment:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg):not(.gb-avg-col){
position:relative !important;
}#gradebook-view #att-table{
--gb-sticky-col-1-w:25px;
--gb-sticky-col-2-w:200px;
--gb-thead-row1-h:68px;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table tbody td.gb-sticky-col,
#gradebook-view #att-table tbody td.gb-sticky-col-2{
position:sticky !important;
background:#ffffff !important;
background-clip:padding-box;
z-index:1200 !important;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table tbody td.gb-sticky-col{
left:0 !important;
}#gradebook-view #att-table thead th.gb-sticky-col-2,
#gradebook-view #att-table tbody td.gb-sticky-col-2{
left:var(--gb-sticky-col-1-w) !important;
}#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2{
top:auto !important;
z-index:1300 !important;
}#gradebook-view
#att-table
tbody
td:not(.gb-sticky-col):not(.gb-sticky-col-2):not(.gb-sticky-avg){
position:relative;
z-index:1;
}#gradebook-view #gb-table{
--gb-thead-row1-h:34px;
}#gradebook-view #gb-table thead th,
#gradebook-view #att-table thead th{
position:sticky !important;
background:#ffffff !important;
background-clip:padding-box;
}#gradebook-view #gb-table thead tr:nth-child(1) th,
#gradebook-view #att-table thead tr:nth-child(1) th{
top:0 !important;
z-index:2200 !important;
}#gradebook-view #gb-table thead tr:nth-child(2) th,
#gradebook-view #att-table thead tr:nth-child(2) th{
top:var(--gb-thead-row1-h, 34px) !important;
z-index:2150 !important;
}#gradebook-view #gb-table thead th.gb-sticky-col,
#gradebook-view #gb-table thead th.gb-sticky-col-2,
#gradebook-view #gb-table thead th.gb-sticky-avg,
#gradebook-view #gb-table thead th.gb-avg-col,
#gradebook-view #att-table thead th.gb-sticky-col,
#gradebook-view #att-table thead th.gb-sticky-col-2{
z-index:2300 !important;
}#gradebook-view #gb-table thead tr:nth-child(1) th{
height:34px !important;
min-height:34px !important;
padding-top:6px !important;
padding-bottom:6px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #gb-table thead tr:nth-child(2) th{
height:34px !important;
min-height:34px !important;
padding-top:5px !important;
padding-bottom:5px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #gb-table thead th.gb-header-clickable,
#gradebook-view #gb-table thead th.gb-subtype-header{
height:34px !important;
min-height:34px !important;
}#gradebook-view #att-table thead tr:nth-child(1) th{
height:68px !important;
min-height:68px !important;
padding-top:10px !important;
padding-bottom:10px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #att-table thead tr:nth-child(2) th{
height:68px !important;
min-height:68px !important;
padding-top:10px !important;
padding-bottom:10px !important;
line-height:1.15 !important;
box-sizing:border-box;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2{
text-align:left !important;
vertical-align:middle !important;
padding-left:10px !important;
padding-right:8px !important;
}#gradebook-view #att-table thead tr:nth-child(1) th.gb-sticky-col-2 > div{
justify-content:center !important;
align-items:flex-start !important;
flex-direction:column !important;
padding-left:0 !important;
padding-right:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}#gradebook-view
#att-table
thead
tr:nth-child(1)
th.gb-sticky-col-2
.gb-students-title{
width:auto;
text-align:left;

font-size:12px;
line-height:1.15;
font-weight:590;
letter-spacing:0;

margin-top:4px;
}#gradebook-view #tab-planning .planning-grid-scroll{
position:relative;
}#gradebook-view #tab-planning .planning-grid-head,
#gradebook-view #tab-planning .planning-row{
min-width:760px;
}#gradebook-view #tab-planning .planning-grid-head > div:nth-child(1),
#gradebook-view #tab-planning .planning-grid-head > div:nth-child(2),
#gradebook-view #tab-planning .planning-row > .planning-num,
#gradebook-view #tab-planning .planning-row > .planning-datecell{
position:relative;
z-index:20;
background:#ffffff;
}#gradebook-view #tab-planning .planning-row > .planning-box,
#gradebook-view #tab-planning .planning-row > .planning-arrow,
#gradebook-view #tab-planning .planning-grid-head > div:nth-child(n + 3){
position:relative;
z-index:1;
}.section-title{
display:none !important;
}.mriia-tests-section{
padding:10px 0 20px 0;
color:#ffffff;
font-family:inherit;
}.mriia-tests-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:24px;
}.mriia-tests-title{
font-size:24px;
font-weight:800;
color:#ffffff;
margin:0;
}.mriia-tests-nav{
display:flex;
gap:8px;
}.mriia-nav-btn{
width:38px;
height:38px;
border-radius:999px;
border:1px solid rgba(255, 255, 255, 0.15);
background:rgba(255, 255, 255, 0.05);
color:rgba(255, 255, 255, 0.4);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:14px;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.mriia-nav-btn:hover{
background:rgba(255, 255, 255, 0.12);
border-color:rgba(255, 255, 255, 0.3);
color:#ffffff;
}.mriia-tests-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:20px;
}.mriia-test-card{
border-radius:24px;
padding:32px;
position:relative;
overflow:hidden;
min-height:280px;
display:flex;
flex-direction:column;
justify-content:space-between;
}.card-ai-gen{
grid-column:span 2;
background:linear-gradient(135deg, #2563eb, #1d4ed8);
display:flex;
flex-direction:row;
padding-right:0;
}.card-ai-gen .card-content-left{
width:48%;
display:flex;
flex-direction:column;
justify-content:space-between;
z-index:10;
}.card-ai-gen .card-preview-right{
width:52%;
position:relative;
height:100%;
}.mriia-test-card .card-title{
font-size:22px;
font-weight:800;
color:#ffffff;
line-height:1.3;
margin:0 0 12px 0;
}.mriia-test-card .card-subtitle{
font-size:14px;
color:rgba(255, 255, 255, 0.65);
line-height:1.4;
margin:0;
font-weight:500;
}.card-action-btn{
height:48px;
border-radius:999px;
font-weight:800;
font-size:14px;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
padding:0 24px;
border:none;
outline:none;
}.primary-action-btn{
background:#ffffff;
color:#1d4ed8;
}.primary-action-btn:hover{
background:rgba(255, 255, 255, 0.9);
}.card-create-own, .card-import{
grid-column:span 1;
border:2px dashed rgba(255, 255, 255, 0.25);
background:rgba(255, 255, 255, 0.02);
transition:border-color 0.2s ease, background-color 0.2s ease;
}.card-create-own:hover{
border-color:rgba(255, 255, 255, 0.4);
background:rgba(255, 255, 255, 0.04);
}.card-create-own .card-content-full, .card-import .card-content-full{
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
}.border-action-btn{
background:#ffffff;
color:#1c77ff;
}.border-action-btn:hover{
background:rgba(255, 255, 255, 0.9);
}.card-import{
position:relative;
}.yellow-ribbon-container{
position:absolute;
bottom:95px;
left:-50px;
width:150%;
overflow:hidden;
pointer-events:none;
z-index:5;
}.yellow-ribbon-tape{
background:#eab308;
color:#000000;
font-size:11px;
font-weight:900;
text-transform:uppercase;
white-space:nowrap;
padding:6px 0;
transform:rotate(0deg);
display:flex;
justify-content:center;
letter-spacing:0.5px;
}.phone-mockup{
background:#ffffff;
border-radius:16px;
position:absolute;
overflow:hidden;
display:flex;
flex-direction:column;
}.phone-left{
width:165px;
height:240px;
left:20px;
bottom:-35px;
z-index:2;
padding:12px;
background:#ffffff;
border:1px solid rgba(226, 232, 240, 0.8);
}.phone-left .mockup-header{
margin-bottom:8px;
}.phone-left .mockup-number{
font-size:9px;
color:#64748b;
font-weight:700;
}.phone-left .mockup-question{
font-size:11px;
font-weight:900;
color:#0f172a;
margin-bottom:8px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.phone-left .mockup-options{
display:flex;
flex-direction:column;
gap:4px;
margin-bottom:8px;
}.phone-left .mockup-option{
display:flex;
align-items:center;
gap:6px;
padding:6px;
border-radius:6px;
border:1px solid #e2e8f0;
background:#f8fafc;
}.phone-left .mockup-option.selected{
border-color:#22c55e;
background:rgba(34, 197, 94, 0.05);
}.phone-left .option-check.selected{
width:10px;
height:10px;
border-radius:2px;
background:#22c55e;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:6px;
}.phone-left .option-radio{
width:10px;
height:10px;
border-radius:50%;
border:1px solid #cbd5e1;
background:#ffffff;
}.phone-left .option-text{
font-size:8px;
color:#334155;
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}.phone-left .mockup-add-answer{
font-size:8px;
color:#1c77ff;
font-weight:800;
cursor:pointer;
}.phone-right{
width:180px;
height:260px;
right:-10px;
bottom:-10px;
z-index:3;
padding:12px;
background:#1e3a8a;
color:#ffffff;
}.phone-right .mockup-header-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
}.phone-right .mockup-label{
font-size:8px;
color:rgba(255, 255, 255, 0.6);
font-weight:700;
}.phone-right .mockup-time{
font-size:8px;
font-weight:800;
background:rgba(255, 255, 255, 0.1);
padding:2px 6px;
border-radius:999px;
display:inline-flex;
align-items:center;
gap:4px;
}.phone-right .mockup-pagination{
display:flex;
justify-content:center;
gap:4px;
align-items:center;
margin-bottom:12px;
}.phone-right .page-dot{
width:5px;
height:5px;
border-radius:50%;
background:rgba(255, 255, 255, 0.2);
}.phone-right .page-dot.active{
width:14px;
height:14px;
background:#eab308;
color:#000000;
font-size:8px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}.phone-right .mockup-question-title{
font-size:9px;
font-weight:800;
line-height:1.3;
margin-bottom:12px;
color:#ffffff;
}.phone-right .mockup-question-options{
display:flex;
flex-direction:column;
gap:6px;
margin-bottom:12px;
}.phone-right .question-option{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 10px;
border-radius:8px;
background:rgba(255, 255, 255, 0.08);
border:1px solid rgba(255, 255, 255, 0.1);
font-size:8px;
font-weight:700;
}.phone-right .question-option.selected{
background:#ffffff;
color:#000000;
border-color:#ffffff;
}.phone-right .option-circle{
width:8px;
height:8px;
border-radius:50%;
border:1px solid rgba(255, 255, 255, 0.4);
}.phone-right .option-circle-filled{
width:8px;
height:8px;
border-radius:50%;
background:#1e3a8a;
border:1px solid #1e3a8a;
}.phone-right .mockup-footer{
margin-top:auto;
display:flex;
justify-content:flex-end;
}.phone-right .mockup-footer-btn{
border:none;
background:rgba(255, 255, 255, 0.15);
color:#ffffff;
font-size:8px;
font-weight:900;
padding:6px 12px;
border-radius:999px;
display:flex;
align-items:center;
gap:4px;
cursor:pointer;
}@media (max-width:1024px){
.mriia-tests-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}}@media (max-width:640px){
.mriia-tests-grid{
grid-template-columns:1fr;
}.card-ai-gen{
grid-column:span 1;
flex-direction:column;
padding-right:32px;
}.card-ai-gen .card-content-left{
width:100%;
margin-bottom:20px;
}.card-ai-gen .card-preview-right{
width:100%;
height:200px;
}}#stats-remarks-content{
width:100%;
}.remark-log-shell{
width:100%;
background:#ffffff;
border:1px solid rgba(15, 23, 42, 0.08);
border-radius:12px;
overflow:hidden;
}.remark-log-toolbar{
min-height:64px;
padding:14px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
background:#1c77ff;
color:#ffffff;
}.remark-log-title{
min-width:0;
}.remark-log-title h3{
margin:0;
color:#ffffff;
font-size:18px;
font-weight:800;
line-height:1.2;
}.remark-log-subtitle{
margin-top:4px;
color:rgba(255, 255, 255, 0.85);
font-size:12px;
font-weight:600;
}.remark-add-btn,
.remark-primary-btn,
.remark-outline-btn{
min-height:40px;
border-radius:999px;
padding:0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border:1px solid transparent;
font-size:13px;
font-weight:800;
line-height:1;
cursor:pointer;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
white-space:nowrap;
outline:none;
}.remark-add-btn{
background:transparent;
color:#ffffff;
border:1px solid rgba(255, 255, 255, 0.45);
}.remark-add-btn:hover{
background:rgba(255, 255, 255, 0.12);
border-color:#ffffff;
}.remark-primary-btn{
background:#1c77ff;
color:#ffffff;
}.remark-primary-btn:hover{
background:#0966f5;
}.remark-outline-btn{
background:#ffffff;
color:#1c77ff;
border-color:#1c77ff;
}.remark-outline-btn:hover{
background:#f0f7ff;
}.remark-add-btn:active,
.remark-primary-btn:active,
.remark-outline-btn:active{
transform:scale(0.965);
}.remark-primary-btn:disabled{
cursor:default;
opacity:0.55;
background:#94a3b8;
}.remark-log-table-wrap{
width:100%;
overflow-x:auto;
background:#ffffff;
}.remark-log-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
color:#0f172a;
}.remark-log-table th,
.remark-log-table td{
padding:12px 10px;
border-bottom:1px solid #e2e8f0;
text-align:left;
vertical-align:middle;
}.remark-log-table th{
background:#f8fafc;
color:#64748b;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.5px;
transition:background 0.2s ease;
}.remark-log-table th:hover{
background:#f1f5f9;
}.remark-log-table td{
font-size:13px;
font-weight:700;
}.remark-log-table tbody tr{
cursor:pointer;
transition:background 0.16s ease;
}.remark-log-table tbody tr:nth-child(even){
background:#f8fafc;
}.remark-log-table tbody tr:hover{
background:#f0f7ff;
}.remark-log-date{
color:#1c77ff;
font-weight:800;
}.remark-log-muted{
color:#64748b;
}.remark-log-text{
color:#334155;
line-height:1.4;
font-weight:500;
}.remark-status-pill{
min-width:112px;
min-height:30px;
padding:0 12px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
font-size:11px;
font-weight:800;
white-space:nowrap;
}.remark-status-pill.pending{
background:#f1f5f9;
color:#475569;
border:1px solid #cbd5e1;
}.remark-status-pill.done{
background:#d1fae5;
color:#065f46;
border:1px solid #a7f3d0;
}.remark-action-btn{
width:32px;
height:32px;
border-radius:8px;
border:1px solid #cbd5e1;
background:#ffffff;
color:#64748b;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:14px;
transition:background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
margin-left:6px;
outline:none;
}.remark-action-btn:active{
transform:scale(0.9);
}.remark-action-btn.edit-btn:hover{
border-color:#1c77ff;
color:#1c77ff;
background:#f0f7ff;
}.remark-action-btn.delete-btn:hover{
border-color:#ef4444;
color:#ef4444;
background:#fef2f2;
}.remark-empty-state{
padding:44px 18px;
text-align:center;
color:#64748b;
font-size:13px;
font-weight:800;
}.remark-modal{
width:440px;
max-width:min(440px, calc(100vw - 24px));
border-radius:18px;
padding:30px 24px 24px;
overflow:visible;
}.remark-detail-modal{
width:460px;
max-width:min(460px, calc(100vw - 18px));
}.remark-add-modal{
width:560px;
max-width:min(560px, calc(100vw - 24px));
}.remark-confirm-modal{
width:400px;
max-width:min(400px, calc(100vw - 24px));
padding:32px 32px 28px;
}.remark-modal-close{
position:absolute;
top:14px;
right:14px;
width:32px;
height:32px;
border:none;
border-radius:999px;
background:transparent;
color:#64748b;
font-size:24px;
line-height:1;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
outline:none;
}.remark-modal-close:hover{
background:#f1f5f9;
color:#0f172a;
}.remark-modal-title{
padding-right:34px;
color:#0f172a;
font-size:22px;
font-weight:800;
line-height:1.2;
}.remark-modal-subtitle,
.remark-confirm-subtitle{
margin-top:6px;
color:#64748b;
font-size:13px;
font-weight:600;
line-height:1.4;
}.remark-detail-grid{
margin-top:24px;
display:grid;
grid-template-columns:1fr 1fr;
column-gap:24px;
row-gap:16px;
}.remark-detail-block{
margin-top:16px;
}.remark-detail-label,
.remark-form-field label{
display:block;
margin-bottom:6px;
color:#1c77ff;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:0.5px;
}.remark-detail-value,
.remark-detail-text{
color:#0f172a;
font-size:14px;
font-weight:700;
line-height:1.4;
}.remark-detail-divider{
height:1px;
margin:22px 0 18px;
background:#e2e8f0;
}.remark-textarea-wrap{
position:relative;
margin-top:6px;
}.remark-textarea{
width:100%;
min-height:120px;
padding:12px 14px 32px;
border:1px solid #cbd5e1;
border-radius:8px;
background:#f1f5f9;
color:#0f172a;
font-family:inherit;
font-size:13px;
font-weight:600;
line-height:1.4;
resize:vertical;
outline:none;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.remark-textarea:focus{
border-color:#1c77ff;
background:#ffffff;
}.remark-add-textarea{
min-height:140px;
}.remark-textarea-count{
position:absolute;
right:12px;
bottom:10px;
color:#94a3b8;
font-size:11px;
font-weight:700;
}.remark-detail-actions{
margin-top:24px;
display:flex;
justify-content:flex-end;
}.remark-confirm-title{
color:#0f172a;
font-size:22px;
font-weight:800;
line-height:1.25;
text-align:center;
}.remark-confirm-subtitle{
text-align:center;
margin-top:8px;
}.remark-confirm-actions{
margin-top:28px;
display:flex;
justify-content:center;
gap:12px;
}.remark-confirm-actions .remark-outline-btn,
.remark-confirm-actions .remark-primary-btn{
min-width:140px;
height:44px;
}.remark-form-grid{
margin-top:24px;
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}.remark-form-field{
margin-bottom:16px;
}.remark-form-field input,
.remark-form-field select{
width:100%;
min-height:42px;
border:1px solid #cbd5e1;
border-radius:8px;
background:#ffffff;
color:#0f172a;
padding:0 14px;
font-family:inherit;
font-size:13px;
font-weight:600;
outline:none;
transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}.remark-form-field input:focus,
.remark-form-field select:focus{
border-color:#1c77ff;
}.remark-add-actions{
justify-content:flex-end;
}@media (max-width:640px){
.remark-log-toolbar{
align-items:flex-start;
flex-direction:column;
}.remark-add-btn{
width:100%;
}.remark-form-grid,
.remark-detail-grid{
grid-template-columns:1fr;
}.remark-confirm-actions,
.remark-add-actions{
flex-direction:column-reverse;
}.remark-confirm-actions .remark-outline-btn,
.remark-confirm-actions .remark-primary-btn{
width:100%;
}}#tab-remarks .remark-log-shell{
border:none;
border-radius:0;
width:100%;
}@media (min-width:769px){
:root{
--mriia-wide-page-width:1800px;
}#calendar.page-section,


#students-list.page-section,
#classes.page-section,
#materials.page-section,
#homeworks.page-section,


#teachers.page-section,
#teacher-attendance.page-section,
#teacher-substitutions.page-section,
#teacher-lessons-fill.page-section,


#extracurricular.page-section,
#clubs.page-section,
#sections.page-section,
#projects.page-section,
#excursions.page-section,
#volunteering.page-section,


#news.page-section,


#stats-students.page-section,
#stats-teachers.page-section,
#stats-attendance-reasons.page-section,
#stats-attendance-days.page-section,
#stats-attendance.page-section,
#stats-grades.page-section,
#stats-remarks.page-section,
#stats-teacher-attendance.page-section,
#stats-reports.page-section,


#settings.page-section,
#learning-school-year.page-section,
#learning-journals.page-section,
#learning-subgroups.page-section,
#learning-schedule.page-section,
#learning-rooms.page-section,
#learning-subjects.page-section,
#learning-teacher-load.page-section,
#learning-curriculum-plans.page-section,
#schedule-constructor.page-section,
#user-rights.page-section,


#help.page-section,


#support.page-section{
margin-left:-17px !important;
margin-right:-17px !important;
width:min(var(--mriia-wide-page-width), calc(100% + 34px)) !important;
max-width:var(--mriia-wide-page-width) !important;
padding-left:0;
padding-right:0;
box-sizing:border-box;
}#calendar.page-section >:not(script):not(style):not(link),
#students-list.page-section >:not(script):not(style):not(link),
#classes.page-section >:not(script):not(style):not(link),
#materials.page-section >:not(script):not(style):not(link),
#homeworks.page-section >:not(script):not(style):not(link),
#teachers.page-section >:not(script):not(style):not(link),
#teacher-attendance.page-section >:not(script):not(style):not(link),
#teacher-substitutions.page-section >:not(script):not(style):not(link),
#teacher-lessons-fill.page-section >:not(script):not(style):not(link),
#extracurricular.page-section >:not(script):not(style):not(link),
#clubs.page-section >:not(script):not(style):not(link),
#sections.page-section >:not(script):not(style):not(link),
#projects.page-section >:not(script):not(style):not(link),
#excursions.page-section >:not(script):not(style):not(link),
#volunteering.page-section >:not(script):not(style):not(link),
#news.page-section >:not(script):not(style):not(link),
#stats-students.page-section >:not(script):not(style):not(link),
#stats-teachers.page-section >:not(script):not(style):not(link),
#stats-attendance-reasons.page-section >:not(script):not(style):not(link),
#stats-attendance-days.page-section >:not(script):not(style):not(link),
#stats-attendance.page-section >:not(script):not(style):not(link),
#stats-grades.page-section >:not(script):not(style):not(link),
#stats-remarks.page-section >:not(script):not(style):not(link),
#stats-teacher-attendance.page-section >:not(script):not(style):not(link),
#stats-reports.page-section >:not(script):not(style):not(link),
#settings.page-section >:not(script):not(style):not(link),
#learning-school-year.page-section >:not(script):not(style):not(link),
#learning-journals.page-section >:not(script):not(style):not(link),
#learning-subgroups.page-section >:not(script):not(style):not(link),
#learning-schedule.page-section >:not(script):not(style):not(link),
#learning-rooms.page-section >:not(script):not(style):not(link),
#learning-subjects.page-section >:not(script):not(style):not(link),
#learning-teacher-load.page-section >:not(script):not(style):not(link),
#learning-curriculum-plans.page-section >:not(script):not(style):not(link),
#schedule-constructor.page-section >:not(script):not(style):not(link),
#user-rights.page-section >:not(script):not(style):not(link),
#help.page-section >:not(script):not(style):not(link),
#support.page-section >:not(script):not(style):not(link),
:is(
#calendar,
#students-list,
#classes,
#materials,
#homeworks,
#teachers,
#teacher-attendance,
#teacher-substitutions,
#teacher-lessons-fill,
#extracurricular,
#clubs,
#sections,
#projects,
#excursions,
#volunteering,
#news,
#stats-students,
#stats-teachers,
#stats-attendance-reasons,
#stats-attendance-days,
#stats-attendance,
#stats-grades,
#stats-remarks,
#stats-teacher-attendance,
#stats-reports,
#settings,
#learning-school-year,
#learning-journals,
#learning-subgroups,
#learning-schedule,
#learning-rooms,
#learning-subjects,
#learning-teacher-load,
#learning-curriculum-plans,
#schedule-constructor,
#user-rights,
#help,
#support
):is(
.news-grid,
.news-quick-post,
.reports-shell,
.settings-layout,
.right-panel,
.mriia-accordion,
.teachers-table-shell,
.teachers-card,
.stats-card,
.white-card,
.big-card
){
width:100% !important;
max-width:var(--mriia-wide-page-width) !important;
box-sizing:border-box;
}#settings .control-row{
max-width:100% !important;
}#user-rights .user-rights-body{
max-width:100% !important;
}}.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights){
position:relative !important;
}.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) button.btn-primary,
.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) button.button-mriya,
.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .section-header button,
.page-section:not(#settings):not(#schedule):not(#learning-school-year):not(#learning-journals):not(#learning-subgroups):not(#learning-schedule):not(#learning-rooms):not(#learning-subjects):not(#learning-teacher-load):not(#learning-curriculum-plans):not(#schedule-constructor):not(#user-rights) .section-header div:has(button){
position:absolute !important;
top:20px !important;
right:24px !important;
margin:0 !important;
z-index:100 !important;
}@keyframes modalOverlayFadeIn{
from{
opacity:0;
}to{
opacity:1;
}}@keyframes modalWindowSlideIn{
from{
opacity:0;
transform:scale(0.95) translateY(-150px);
}to{
opacity:1;
transform:scale(1) translateY(0);
}}.modal-overlay.open:not(#modal-grade-edit):not(#modal-schedule-lesson){
animation:modalOverlayFadeIn 0.3s ease-out forwards !important;
}.modal-overlay.open .modal-window,
.modal-overlay.open .modal,
.modal-overlay.open .progress-modal{
animation:modalWindowSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}.modal-overlay{
z-index:200000 !important;
}@keyframes modalOverlayFadeOut{
from{opacity:1}to{opacity:0}}@keyframes modalWindowSlideOut{
from{
opacity:1;
transform:scale(1) translateY(0);
}to{
opacity:0;
transform:scale(0.95) translateY(-150px);
}}.modal-overlay.closing:not(#modal-grade-edit):not(#modal-schedule-lesson){
animation:modalOverlayFadeOut 0.28s ease-in forwards !important;
}.modal-overlay.closing .modal-window,
.modal-overlay.closing .modal,
.modal-overlay.closing .progress-modal{
animation:modalWindowSlideOut 0.28s ease-in forwards !important;
}#modal-grade-edit.modal-overlay.open,
#modal-schedule-lesson.modal-overlay.open{
animation:none !important;
opacity:1 !important;
}#modal-grade-edit.modal-overlay.closing,
#modal-schedule-lesson.modal-overlay.closing{
animation:none !important;
opacity:0 !important;
}.grade-popover-win,
.schedule-popover-win{
transform:none !important;
transition:none !important;
animation:none !important;
opacity:1 !important;
}:is(
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.btn-primary,
.btn-secondary,
.btn-cancel,
.btn-submit,
.btn-danger,
.action-btn,
.nav-btn,
.login-btn,
.primary-action-btn,
.border-action-btn,
.oval-btn,
.filter-btn,
.tab-btn,
.close-btn,
.nav-pill,
.settings-segment-btn,
.home-journal-btn,
.home-class-arrow,
.btn-planning-add,
.btn-planning-export,
.reports-generate-btn,
.schc-ai-btn,
.schc-generate-btn,
.schc-btn-generate,
.bells-add-btn,
.copy-btn,
.calendar-add-btn,
.schedule-sync-btn,
.mriia-nav-btn,
.remark-add-btn,
.remark-primary-btn,
.remark-outline-btn,
.remark-action-btn,
.lesson-format-btn,
.lesson-day-link-top-btn,
.three-dot-btn-circle,
.lesson-day-icon-btn,
.lesson-day-pill-btn,
.lesson-day-link-btn,
.lesson-day-card-btn,
.attendance-new-btn-submit,
.schedule-today-header-btn,
.schedule-nav-arrow-btn,
.auto-assign-btn-exit,
.auto-assign-btn-submit,
.chat-send-btn,
.accordion-toggle,
.journal-admin-btn,
#sync-indicator
):is(:hover,:active){
transform:none !important;
}#learning-bells .bells-add-btn:is(:hover,:active),
.modal-window:is(.btn-cancel, .btn-submit):is(:hover,:active),
#login-screen .login-btn:is(:hover,:active),
.nav-zoom-box .nav-btn:is(:hover,:active),
#mobile-day-strip .day-pill:is(:hover,:active, .active){
transform:none !important;
}

/* =============================================
   NEW HOME PAGE V2 — Hover lesson action buttons
   ============================================= */

.lesson-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.lesson:hover .lesson-actions,
.lesson:focus-within .lesson-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lesson-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #bcd6fb;
  background: #fff;
  color: var(--primary-blue, #1c77ff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lesson-btn:hover {
  background: var(--hp-blue-light, #eef5ff);
  border-color: var(--primary-blue, #1c77ff);
}

.lesson {
  position: relative;
  border-radius: 12px;
  transition: background .15s;
}
.lesson:hover {
  background: rgba(255, 255, 255, 0.06);
}
.lesson.is-active:hover,
.lesson.is-past:hover {
  background: #f9fbff;
}

@media (hover: none) {
  .lesson-actions {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* New home v2 lesson item layout */
.home-v2-lesson-row {
  display: flex;
  gap: 65px;
  margin-bottom: 0;
  align-items: stretch;
}
.home-v2-lesson-row .home-time {
  width: 100px;
  flex-shrink: 0;
  padding-top: 6px;
  font-size: 13px;
  color: #ffffff;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* V2 lesson card with buttons row */
.home-v2-lesson-card {
  flex: 1;
  border-radius: 12px;
  padding: 22px;
  transition: all 0.2s;
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 0 180px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  min-width: 0;
}
.home-v2-lesson-card.is-active,
.home-v2-lesson-card.is-past {
  background: rgba(244, 247, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.1);
}
.home-v2-lesson-card.is-upcoming {
  background: rgba(28, 119, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.home-v2-lesson-card:hover {
  transform: translateY(-1px);
}
.lesson {
  border-radius: 12px;
  transition: background .15s;
  cursor: default;
}
.lesson:hover {
  background: #f9fbff;
}
.lesson.is-active:hover,
.lesson.is-past:hover {
  background: #f9fbff;
}
.home-v2-lesson-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.home-v2-lesson-header .home-class-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  padding: 4.5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.04);
  line-height: 1;
}
.home-v2-lesson-card.is-active .home-class-pill,
.home-v2-lesson-card.is-past .home-class-pill {
  background: #1c77ff;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0);
}
.home-v2-lesson-header .home-subject {
  font-size: 16px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
}
.home-v2-lesson-card.is-active .home-subject,
.home-v2-lesson-card.is-past .home-subject {
  color: #0f172a;
}

/* V2 lesson details */
.home-v2-lesson-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.home-v2-lesson-details .home-detail-block:first-child {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
.home-v2-lesson-card.is-upcoming .home-v2-lesson-details .home-detail-block:first-child {
  border-bottom-color: rgba(255, 255, 255, 0.28);
}
.home-v2-lesson-details .home-detail-label {
  font-size: 14px;
  font-weight: 900;
}
.home-v2-lesson-details .home-detail-text {
  font-size: 12.5px;
  font-weight: 800;
}

/* V2 room number */
.home-v2-room-number {
  font-size: 12.5px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  align-self: end;
}
.home-v2-lesson-card.is-active .home-v2-room-number,
.home-v2-lesson-card.is-past .home-v2-room-number {
  color: #0f172a;
}
.home-v2-lesson-card.is-upcoming .home-v2-room-number {
  color: rgba(255, 255, 255, 0.95);
}

/* V2 buttons row */
.home-v2-actions-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.home-v2-lesson-card:hover .home-v2-actions-row,
.home-v2-lesson-card:focus-within .home-v2-actions-row {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: none) {
  .home-v2-actions-row {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
.home-v2-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #bcd6fb;
  background: #fff;
  color: var(--primary-blue, #1c77ff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-v2-btn:hover {
  background: #eef5ff;
  border-color: var(--primary-blue, #1c77ff);
}

/* Hidden home page toggle — revealed by clicking version 5x */
.hidden-home-toggle {
  opacity: 0.7;
  border-top: 1px dashed rgba(15, 23, 42, 0.15);
  margin-top: 4px;
  padding-top: 8px;
}

/* =============================================
   NEW HOME PAGE v2 — dashboard layout
   ============================================= */

.home-page {
  width: calc(100% + 48px);
}
.home-dashboard {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: start;
}

/* ---- Left column ---- */
.home-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calendar {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 18px;
  color: #0f172a;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-head h2 {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  text-transform: capitalize;
}
.cal-nav {
  display: flex;
  gap: 6px;
}
.cal-arrow {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.cal-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cal-arrow:hover {
  background: #eef5ff;
  border-color: var(--primary-blue, #1c77ff);
  color: var(--primary-blue, #1c77ff);
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}
.cal-week span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  position: relative;
  min-height: 52px;
  border-radius: 10px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  background: #f8fafc;
  transition: background .12s, box-shadow .12s;
  overflow: hidden;
}
.cal-day:hover {
  background: #eef5ff;
}
.cal-day.is-weekend {
  background: #f1f5f9;
}
.cal-day.is-today .cal-day-num {
  background: var(--primary-blue, #1c77ff);
  color: #fff;
}
.cal-day.is-selected {
  box-shadow: inset 0 0 0 2px var(--primary-blue, #1c77ff);
  background: #e8f1ff;
}
.cal-day.is-empty {
  background: transparent;
  cursor: default;
}
.cal-day.is-empty .cal-day-num {
  color: #cbd5e1;
}
.cal-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}
.cal-day-badges {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 3px;
}
.cal-day-badge {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: #1e75ff;
  background: #dbeafe;
  border-radius: 4px;
  padding: 1px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-day-badge.holiday { background: #ffedd5; color: #c2410c; }
.cal-day-badge.meeting { background: #e0e7ff; color: #4338ca; }
.cal-day-badge.excursion { background: #d1fae5; color: #047857; }
.cal-day-badge.other { background: #f1f5f9; color: #475569; }
.cal-day-more {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
}

.events {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 18px;
  color: #0f172a;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.events h3 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 12px 0;
  text-transform: capitalize;
}
.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.event-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.no-events {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 600;
  padding: 6px 0;
}

/* ---- Right column ---- */
.home-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  flex-wrap: wrap;
}
.home-header .greeting {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 4px 0;
}
.home-header h1 {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  text-transform: capitalize;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-today {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.btn-today:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}
.btn-today.active {
  background: rgba(255, 255, 255, 0.28);
  cursor: default;
  opacity: 0.7;
}
.day-arrow {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.day-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.day-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
}
.day-arrow.accent {
  background: rgba(255, 255, 255, 0.2);
}

.class-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 18px;
  color: #0f172a;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}
.my-class {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.my-class-label {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.my-class-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-blue, #1c77ff);
  background: #eef5ff;
  border: 1px solid #dbeafe;
  padding: 4px 14px;
  border-radius: 999px;
}
.quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #f8fafc;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.action-btn:hover {
  background: #eef5ff;
  border-color: var(--primary-blue, #1c77ff);
  color: var(--primary-blue, #1c77ff);
}
.action-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.action-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lessons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.no-lessons {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 26px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0f172a;
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 99999;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .home-dashboard {
    grid-template-columns: 1fr;
  }
  .home-left {
    order: 2;
  }
  .home-right {
    order: 1;
  }
}
@media (max-width: 520px) {
  .home-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .quick-actions {
    flex-direction: column;
  }
  .action-btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Override old #home .home-right width clamps */
#homeV2Root .home-right {
  width: auto;
  min-width: 0;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  transform: none;
  border-left: 0;
  --home-right-width: none;
}
#homeV2Root .home-dashboard {
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   HOME PAGE V3 — exact design from provided reference
   Scoped under #homeV2Root to isolate from the SPA
   ============================================================ */

#homeV2Root {
  --hp-blue: #2f80f5;
  --hp-blue-light: #e8f1fe;
  --hp-bg: #fbfcfe;
  --hp-text: #1c2430;
  --hp-muted: #7a8699;
  --hp-border: #e5e9f0;
  --hp-gray: #c3cad6;
  box-sizing: border-box;
  width: 100%;
  min-height: 545px !important;
  height: calc(108.69565vh - 38px) !important;
  max-height: none !important;
  overflow: visible;
  color: var(--hp-text);
  font-size: 14px;
}
#homeV2Root *,
#homeV2Root *::before,
#homeV2Root *::after {
  box-sizing: border-box;
}
#homeV2Root svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
#homeV2Root button {
  font-family: inherit;
}

/* ---- Dashboard (light card on blue) */
#homeV2Root .dashboard {
  background: var(--hp-bg);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 545px !important;
  height: auto !important;
  overflow: hidden;
}
#homeV2Root .col-left {
  padding: 24px;
  border-right: 1px solid var(--hp-border);
}
#homeV2Root .col-right {
  padding: 24px 28px 24px 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  overflow: visible;
}

/* ---- Calendar */
#homeV2Root .calendar {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-left: -24px;
  margin-top: -24px;
  min-width: 0;
  width: calc(100% + 48px);
  box-shadow: none !important;
}
#homeV2Root .cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
#homeV2Root .cal-head h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--hp-text);
  text-transform: capitalize;
  line-height: 1.2;
}
#homeV2Root .cal-nav {
  display: flex;
  gap: 2px;
}
#homeV2Root .cal-week,
#homeV2Root .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
#homeV2Root .cal-week span {
  font-size: 11px;
  color: var(--hp-muted);
  padding: 4px 0;
  background: none;
}
#homeV2Root .cal-grid {
  row-gap: 6px;
  background: none;
  border: 0;
  padding: 0;
}
#homeV2Root .cal-day {
  border: none;
  background: none;
  height: 28px;
  width: 28px;
  margin: auto;
  border-radius: 50%;
  font-size: 12.5px;
  color: var(--hp-text);
  cursor: pointer;
  padding: 0;
  min-height: 0;
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  font-weight: 400;
  box-shadow: none;
}
#homeV2Root .cal-day:hover {
  background: #eef2f8;
}
#homeV2Root .cal-day.other {
  color: var(--hp-gray);
}
#homeV2Root .cal-day.today,
#homeV2Root .cal-day.is-today,
#homeV2Root .cal-day.is-today .cal-day-num {
  box-shadow: inset 0 0 0 1.5px var(--hp-blue);
  color: var(--hp-blue);
}
#homeV2Root .cal-day.selected,
#homeV2Root .cal-day.is-selected {
  background: var(--hp-blue);
  color: #fff;
}
#homeV2Root .cal-day .cal-day-num {
  display: contents;
  background: none;
  color: inherit;
}
#homeV2Root .cal-day .cal-day-badges,
#homeV2Root .cal-day .cal-day-more,
#homeV2Root .cal-day.is-weekend {
  display: none;
}

/* ---- Events (left column) */
#homeV2Root .events {
  margin-top: 28px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
#homeV2Root .events h3 {
  font-size: 13px;
  color: var(--hp-muted);
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 0;
  text-transform: none;
}
#homeV2Root .events-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}
#homeV2Root .event-item {
  padding: 7px 10px;
  border-left: 3px solid #f2b23e;
  font-size: 13px;
  font-weight: 400;
  border-radius: 4px;
  background: none;
  color: var(--hp-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
#homeV2Root .event-item:hover {
  background: #f2f4f8;
}
#homeV2Root .event-item .event-icon {
  display: inline-block;
}
#homeV2Root .event-item.no-events,
#homeV2Root .events-empty,
#homeV2Root #eventsList .no-events {
  border-left: none;
  background: none;
  font-size: 13px;
  font-weight: 400;
  color: var(--hp-gray);
}

/* ---- Header */
#homeV2Root .page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: -12px;
}
#homeV2Root .greeting {
  color: var(--hp-muted);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
#homeV2Root #currentDate {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: var(--hp-text);
  line-height: 1.3;
}
#homeV2Root .head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-left: auto;
  margin-right: -22px;
}
#homeV2Root .btn-today {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #cfd8e3;
  background: #fff;
  color: var(--hp-blue);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
#homeV2Root .btn-today:hover {
  border-color: var(--hp-blue);
}
#homeV2Root .btn-today[disabled],
#homeV2Root .btn-today.active {
  opacity: 0.6;
  cursor: default;
}
#homeV2Root .icon-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--hp-muted);
  display: grid;
  place-items: center;
  border-radius: 8px;
  padding: 6px;
}
#homeV2Root .icon-btn:hover {
  background: #f1f4f9;
  color: var(--hp-blue);
}
#homeV2Root .icon-btn.small svg {
  width: 18px;
  height: 18px;
}
#homeV2Root .icon-btn.round svg {
  width: 18px;
  height: 18px;
}
#homeV2Root .home-clock-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  object-fit: contain;
  background: transparent;
  filter: brightness(0) saturate(100%) invert(55%);
}
#homeV2Root .icon-btn.round {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #cfd8e3;
  background: #fff;
  color: var(--hp-muted);
}
#homeV2Root .icon-btn.round:hover {
  background: #f1f4f9;
  color: var(--hp-blue);
}
#homeV2Root .icon-btn.round.accent {
  color: var(--hp-blue);
  border-color: #bcd6fb;
}

.schedule-popover-video-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  margin-right: 0 !important;
}

/* ---- Class card + quick actions */
#homeV2Root .class-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: #f2f4f8;
  border-radius: 14px;
  padding: 14px 16px;
  flex-wrap: wrap;
  border: 0;
  height: auto;
  min-height: 0;
  justify-content: flex-start;
}
#homeV2Root .my-class {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 90px;
  box-shadow: none;
  background: none;
  cursor: default;
  border-radius: 0;
  align-items: flex-start;
}
#homeV2Root .my-class .label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hp-muted);
}
#homeV2Root .my-class .value {
  font-size: 16px;
  font-weight: 450;
  color: var(--hp-text);
}
#homeV2Root .quick-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}
#homeV2Root .action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  color: var(--hp-text);
  font-family: inherit;
}
#homeV2Root .action-btn:hover {
  box-shadow: 0 3px 8px rgba(16, 24, 40, 0.12);
}
#homeV2Root .action-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--hp-blue-light);
  color: var(--hp-blue);
  display: grid;
  place-items: center;
}
#homeV2Root .action-ico svg {
  width: 16px;
  height: 16px;
}

/* ---- Lessons */
#homeV2Root .lessons {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 480px;
  width: calc(100% + 28px);
}
#homeV2Root .lesson {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 0;
  padding: 0;
  margin: 0 !important;
  border: none;
  border-bottom: 1px solid var(--hp-border);
  border-radius: 0;
  position: relative;
  background: #fff;
  transition: background .15s, box-shadow .15s;
}
#homeV2Root .lesson:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
#homeV2Root .lesson:hover {
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 24, 40, 0.06);
}
#homeV2Root .lesson-actions {
  position: absolute;
  top: 16px;
  right: 12px;
  display: flex;
  gap: 10px;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
#homeV2Root .lesson:hover .lesson-actions,
#homeV2Root .lesson:focus-within .lesson-actions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0);
}
#homeV2Root .lesson-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #bcd6fb;
  background: #fff;
  color: var(--hp-blue, #1c77ff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
#homeV2Root .lesson-btn:hover {
  background: #eef5ff;
  border-color: var(--hp-blue, #1c77ff);
}
#homeV2Root .lesson-btn svg {
  width: 14px;
  height: 14px;
}
#homeV2Root .lesson-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 16px 10px;
  border-radius: 0;
  font-size: 13px;
  color: var(--hp-text);
  font-weight: 700;
  box-shadow: none;
  background: #f1f3f5;
  box-sizing: border-box;
}
#homeV2Root .lesson-meta .time {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: fit-content;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--hp-text);
  font-weight: 700;
  line-height: 1.25;
}
#homeV2Root .lesson-meta .time span {
  background: transparent;
  border-radius: 0;
  font-weight: 700;
  padding: 0;
  white-space: nowrap;
}
#homeV2Root .lesson:first-child .lesson-meta {
  border-radius: 12px 0 0 0;
}
#homeV2Root .lesson:last-child .lesson-meta {
  border-radius: 0 0 0 12px;
}
#homeV2Root .lesson-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#homeV2Root .badge {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-block;
}
#homeV2Root .group-badge {
  background: #e8f1ff;
  color: #000;
}
#homeV2Root .room {
  color: var(--hp-muted);
  font-size: 12.5px;
}
#homeV2Root .lesson h4 {
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--hp-text);
}
#homeV2Root .lesson h4.hp-subject {
  margin: 0 0 10px;
}
#homeV2Root .lesson-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #40506a;
  margin-bottom: 6px;
}
#homeV2Root .lesson-row svg {
  width: 14px;
  height: 14px;
  color: #22a06b;
}
#homeV2Root .lesson-row b {
  font-weight: 600;
  color: #40506a;
}
#homeV2Root .home-lesson-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 180px 16px 12px;
}
#homeV2Root .lesson > div:nth-child(2) {
  min-width: 0;
  padding: 16px 12px 0;
}
#homeV2Root .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--hp-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  margin-right: 14px;
  font-family: inherit;
}
#homeV2Root .link-btn:hover {
  color: var(--hp-blue);
}
#homeV2Root .link-btn svg {
  width: 14px;
  height: 14px;
}
#homeV2Root .break-area {
  background: repeating-linear-gradient(45deg, #f0f2f6 0 10px, #fafbfc 10px 20px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 10px;
  min-height: 78px;
}
#homeV2Root .break-pill {
  background: #eef1f5;
  border-radius: 999px;
  padding: 7px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--hp-text);
}
#homeV2Root .break-pill svg {
  width: 14px;
  height: 14px;
}
#homeV2Root .lessons-empty,
#homeV2Root #lessonsList .no-lessons {
  align-items: center;
  color: var(--hp-gray);
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 14px;
  gap: 25px;
  justify-content: flex-start;
  min-height: 545px;
  padding: 48px 0 0;
  text-align: center;
  width: 100%;
}
#homeV2Root .lessons-empty img {
  height: auto;
  max-width: min(815px, 90%);
  object-fit: contain;
  width: 280px;
}
#homeV2Root .lessons-empty div {
  color: var(--hp-gray);
  font-size: 16px;
  font-weight: 600;
}

#homeV2Root,
#homeV2Root .dashboard {
  height: calc(108.69565vh - 38px) !important;
  min-height: 545px !important;
  max-height: none !important;
}
#homeV2Root:has(#lessonsList .lesson),
#homeV2Root:has(#lessonsList .lesson) .dashboard {
  height: auto !important;
}

/* ---- Toast (id-scoped to beat the app's .toast) */
#toast.hp-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: #1f2937;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.25s;
  pointer-events: none;
  z-index: 99;
  white-space: nowrap;
}
#toast.hp-toast.show {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  #homeV2Root .dashboard {
    grid-template-columns: 1fr;
  }
  #homeV2Root .col-left {
    border-right: none;
    border-bottom: 1px solid var(--hp-border);
  }
}

/* Keep the home dashboard compact and avoid rendering outside its grid. */
#homeV2Root .dashboard {
  grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
}
#homeV2Root .col-left,
#homeV2Root .col-right {
  contain: layout paint;
}
#homeV2Root .calendar,
#homeV2Root .events {
  contain: layout paint style;
}
#homeV2Root .col-right {
  padding-left: 18px;
  padding-right: 20px;
}
#homeV2Root .head-actions {
  margin-right: 0;
}
#homeV2Root .lessons {
  width: 100%;
  contain: layout paint;
}
#homeV2Root .lesson {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 82px;
}
#homeV2Root .home-lesson-links {
  padding-right: 12px;
}
#homeV2Root .break-area {
  min-height: 64px;
}